Change

In order to support native CSS features that utilize the slash operator, upstream Less.js has decided to deprecate use of slash in bare math mode. That is, math without parenthesis.

Demo: Try it yourself

.bare {
  @foo: 12px / 2;
  height: @foo;
  max-height: @foo * 2;
  width: @foo / 3;
}
.parens {
  @foo: (12px / 2);
  height: @foo;
  max-height: @foo * 2;
  width: (@foo / 3);
}

.bare {
  height: 6px;
  max-height: 12px;
  width: 2px;
}
.parens {
  height: 6px;
  max-height: 12px;
  width: 2px;
}

.bare { /* Changed */
  height: 12px / 2;
  max-height: 12px / 2 * 2;
  width: 12px / 2 / 3;
}
.parens { /* Unchanged */
  height: 6px;
  max-height: 12px;
  width: 2px;
}

Background

These are examples of CSS browser features that (until now) required MediaWiki developers to use string evaluation workarounds, because Less.js and Less.php would try to compile them as math, even though they are not intended to be math. For example:

From T366445 task description:

div {
  border-radius: 40px / 10px;
  grid-column: 1 / -1;
  font: 12px/1.6 sans-serif;
  background: left 5% / 15% url(images/star.png);
}

• https://github.com/less/less.js/issues/146
• https://github.com/less/less.js/issues/1880
• https://github.com/less/less.js/issues/1872
• https://github.com/less/less.js/issues/3678
• https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
• https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
• https://developer.mozilla.org/en-US/docs/Web/CSS/font
• https://developer.mozilla.org/en-US/docs/Web/CSS/background

Historically, upstream Less.js has had two math options:

• "always" (default, aka "strictMath false"). This eagerly performs math almost everywhere.
• "parens" (aka "strict" ot "strictMath true"). This restricts math to inside optional parenthesis only (i.e. parenthesis not relating to other CSS syntax).

As a compromise, to be the last disruptive to the ecosystem, Less.js 3.0 introduded a third mode: "parens-division". This continous to allow math without parenthesis, but in order to perform math with a slash for division, it needs to be wrapped in parenthesis. It also introduces ./ as a way to force math outside parenthesis. Documentation at: https://lesscss.org/usage/#less-options-math.

We have implemented thenew Less.js 3.0 behaviours and switched the default to "parens-division" as part of Less.php 5.0. Details at T366445: Add support for Maths(strictMath) option when it is set to parens-division and T288498: Update less.php port to support Less.js 3.13 behaviours.

Migration

Codesearch: Bare math slash in Less files.

There are approximately 50 files using the deprecated as of writing.

Before we can switch to math=parens-division we have to update these to use parenthesis.

• Codex (unaffected, already prepared and Less.js 4-compatible)
• MediaWiki core: HTMLForm
• MediaWiki core: RCFilters, part of MediaWiki-Recent-changes
• MediaWiki core: OOUI "mediawiki.widgets", part of MediaWiki-User-Interface
• GrowthExperiments extension
• MediaSearch extension
• AdvancedSearch extension
• CheckUser extension
• ContentTranslation extension
• DiscussionTools extension
• Echo extension, Notifications
• Flow extension, StructuredDiscussions
• Kartographer extension
• MobileFrontend extension
• Popups extension, Page-Previews
• TemplateData extension
• TimedMediaHandler extension (unaffected)
• UniversalLanguageSelector extension
• UploadWizard extension
• WikiLambda extension
• WikibaseMediaInfo extension
• services-mobileapps (unafffected, doesn't involve MediaWiki or Less.php)
• Minerva skin
• Vector skin