Steps

In order to access the latest CSS features and improve the performance on first style load of your instance, it could be worth migrating your LESS stylesheets to use native CSS.

• Change the name of your file or the type of the SSX
• Change the name of the resource you're using in your template according to what you did in the previous step.
• For every LESS variable declaration @example: #cecece;
  • If your variable is supposed to be accessed globally, add its equivalent in a :root{ --example: #cecece;} block
  • If your variable is supposed to only be used in style you control, add it in the appropriate stylerule. The more specific and the least there's a chance of collision.
• For every LESS variable used like color: @example;
  • If your LESS variable is specific to xwiki, it's already mapped, you can just use the equivalent CSS syntax color: var(--example);.
  • If your LESS variable comes from bootstrap, then you either want to declare it (see above) and then use the equivalent CSS syntax color: var(--example);.
  • WarningIn some specific situations, a CSS variable cannot replace a LESS variable without important refactoring. You can consider using a hard-coded value in those situations.
• For every operation made in your LESS @popover-arrow-width + 1px, make sure to include it in a calc block calc(var(--popover-arrow-width) + 1px);.

  • LESS doesn't have any clearly defined unit system. CSS has a very strict unit system right now. If a formula doesn't work in CSS, it's probably because the units do not respect the constraint of the operators (The exact rules):

    • Addition and substraction, both values must have the same unit

    • Multiplications and divisions, only one value has an unit, the second one is unitless.
• For every one-line comment that does not follow XS codestyle rules // This is a possible comment syntax in LESSCSS must be made compatible with the CSS syntax /* Now compatible with CSS. */
• For every LESS color function, use instead the CSS hsl, color and color-mix functions.
  • hsl is useful for most operations, color is really only useful for transparency calculations.
  • LESS color functions work directly with additions: darken(@well-bg, 7%) is the same as hsl(from var(--well-bg) h s calc(l - 0.07)).

FAQ

How to migrate LESS mixins?

Today, there is no way to migrate any LESS mixin to CSS easily. In order to migrate any advanced use of mixins, an additional class should be added for the styles on the HTML. Various solutions can be used as long as the mixin is used only in places you have access to.