Update less.php port to support Less.js 3.13 behaviours
Open, HighPublic
Actions

Assigned To

None

Authored By

	Volker_E
	Aug 10 2021, 4:33 AM

Description

Rationale

There are new Less.js v3 capabilities that frontend developers can't yet use in MediaWiki, as they are released between Less.js v2.6 and v3.13. Our Less.php package currently ports Less.js v2.5.

Examples

The below is summarised from https://lesscss.org/functions/, https://lesscss.org/features/, and https://lesscss.org/ (look for text that says "added since" or "released"). As well as https://github.com/less/less.js/blob/v3.13.1/CHANGELOG.md.

v3.0.0 Added: Support for CSS grid syntax.
- https://github.com/less/less.js/pull/3161
- https://github.com/less/less.js/issues/3092
v3.0.0 Changed: calc() exception.
- Ref https://lesscss.org/#operations-calc-exception
- This change is likely important to Codex. A related issue was worked around in change 896197, and is part of what motivated this Less.php upgrade task.
- Ref https://github.com/less/less.js/pull/3163 (3.x merge, change default to strictMath: false).
- Ref https://github.com/less/less.js/pull/3493
v3.0.0: Added: Support for CSS @property and @layer syntax
- Community interest: https://github.com/wikimedia/less.php/issues/105, https://github.com/wikimedia/less.php/issues/127
- Ref T368408: Introduce permissive parsing for at-rules and custom properties
v3.0.0 Added: Logical Functions if() and boolean().
- New functions to use in Less mixin definitions, similar to the when expression functions default(), and(), and or(), which we support already.
- Community interest: https://github.com/wikimedia/less.php/issues/111
- Ref https://lesscss.org/functions/#logical-functions-if, https://lesscss.org/functions/#logical-functions-boolean
- Ref https://github.com/less/less.js/pull/3079
- Ref https://github.com/less/less.js/pull/3532
v3.7.0 Added: List Functions each().
- Community interest: https://github.com/wikimedia/less.php/issues/85
- Ref https://lesscss.org/functions/#list-functions-each
- Ref https://github.com/less/less.js/pull/3263
v3.8.1 Added: CSS4 color support (#RRGGBBAA syntax and embedding CSS Variables)
- Community interest: https://github.com/wikimedia/less.php/issues/98
- Ref https://github.com/less/less.js/pull/3291
v3.9.0 Added: List Functions range().
- Ref https://lesscss.org/functions/#list-functions-range
- Ref https://github.com/less/less.js/pull/3334

Background

Currently, as of Aug 2021, less.php is supporting 2.5.3, which was released in 2016. In the meantime, there has been a Less.js v3 release and Less.js v4 release, which add various new capabilities (upstream changelog).

The Less spec is quite stable, and most upstream Less.js changes don't require any changes to our less.php to stay comliant (e.g. most change seem to be fixing JS-specific bugs, changing JS-specific features such as eval() or Node.js-based runtime plugins, or deal with JS-specific packaging for npm).

The above list are examples list changes that we do need to port. (This is not an exhaustive list. Full compliance and any fixes for upstream bugs that we copied, will come from passing the upstream test suite. Fixes for upstream bugs can be found in spec commits under https://github.com/less/less.js/commits/v3.13.0/test/less)

@Catrope wrote at change 896197:

Escape expressions inside of calc(), to prevent the Less compiler from trying to compute them at compile time. Currently this just affects one call to max(), but it could affect expressions like calc( @foo + @bar ) too if we add those in the future.

Don't call escape() on color values. The Node.js implementation of Less allows this (even back in version 2.5.3), but the PHP implementation doesn't, and it's not officially supported according to the Less documentation. Instead, use %A to convert these color values to strings and escape them at the same time.

Acceptance criteria

less.php pass the upstream's test suite for Less.js v3.13, enforced by PHPUnit in CI, with a handful of known behaviour differences marked and documented (similar to current 2.5.3 spec differences).

Details

Subject	Repo	Branch	Lines +/-
docs: Reference version is now Less.js 3.13, no longer 2.5	mediawiki/libs/less.php	master	+7 -4
update Less_Parser::parseEntitiesKeyword() to support some Less.js 3.13 behaviours	mediawiki/libs/less.php	master	+2 -3
Remove backtick evaluation inside quoted strings	mediawiki/libs/less.php	master	+5 -10
Add copy of Less.js 3.13.1 source code	mediawiki/libs/less.php	master	+11 K -0
test: Enable lessjs-3.13.1/compression fixture	mediawiki/libs/less.php	master	+4 -4
composer.json: Use `wikimedia/less.php` version 4.2.1	mediawiki/core	master	+2 -1
Update `wikimedia/less.php` from version 4.1.1 to 4.2.1	mediawiki/vendor	master	+820 -692

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T288498 Update less.php port to support Less.js 3.13 behaviours
Resolved		• Catrope	T325237 Enable and document use of Codex design tokens within MediaWiki
Resolved		Volker_E	T326591 Temporarily change or remove two tokens that can't be parsed by MediaWiki Less compiler
Resolved		• Catrope	T330694 tokens: Split out deprecated tokens into separate file
Resolved		Hokwelum	T359105 Add Less.js v3.13 spec to less.php test suite
Resolved		Hokwelum	T365481 Update less.php port to complete support Less.js 2.5.3 behaviours
Resolved		Hokwelum	T364871 Add support for SVG image size
Resolved		Krinkle	T363728 Unexpected compilation clamp() with mixed units
Resolved		Hokwelum	T363076 [Regression] Mixin copies rules from unrelated block
Resolved		Hokwelum	T362647 Investigate css differences in import-reference.less test
Resolved		pmiazga	T362343 Fix failing less-2.5.3/css.less test
Resolved		pmiazga	T362341 Fix failing less-2.5.3/variables.less test
Resolved		Hokwelum	T361035 [Regression] CSS import with variable name no longer works
Resolved		Krinkle	T360065 [lessjs-2.5.3 legacy.less] Fix preservation of units in some cases
Resolved		Hokwelum	T354895 Fix comment nodes in functions & Add optional relative amounts for color functions
Resolved		Krinkle	T356706 Comments in @font-face should stay between rules
Resolved		Krinkle	T357160 Treat single and double quotes as equal in "when" operator
Resolved		Hokwelum	T358256 "-@example/2" fails due to ParseError
Resolved		Hokwelum	T353143 [detached-rulesets] Support ruleset objects as default values of a mixin parameter
Resolved		pmiazga	T353144 [css-guards] Fix parsing of "when" conditions after selectors with a pseudo classes (e.g. "a:hover")
Resolved		Hokwelum	T353146 [import.less fixture] Importing files with url() in nested files doesn’t import files
Resolved		Hokwelum	T353147 [urls.less fixture] Investigate @font-face difference in urls.less test case
Resolved		Hokwelum	T353289 Less_Exception_Compiler: error evaluating function `color` argument must be a string
Resolved		Hokwelum	T353142 [mixins-interpolated] Fix defining of mixin named with interpolated unquoted number
Resolved		Hokwelum	T353141 [mixins-important] Support "!important" for mixins that have nested parameters.
Resolved		Hokwelum	T353133 Investigate test case for "${in}${terpolotation}" and "iterated-interpolation" (import-interpolation.less test case)
Resolved		pmiazga	T353132 Introduce commentStore and handle comments in skipWhitespace method
Resolved		pmiazga	T353131 Add support for comments between property and value
Resolved		Hokwelum	T352911 Improve whitespace preservation before ";" or "!" (semicolon, bang)
Resolved		pmiazga	T352897 Fix ParseError in mixin-args.less test case
Resolved		Hokwelum	T352867 [mixins-guards] Investigate when() match failures for "greater than" and "less then"
Resolved		Hokwelum	T352866 Preserve color keywords and short hex notation as-is
Resolved		Hokwelum	T352862 [css-3.less test case] Add support for /deep/ selector
Resolved		Hokwelum	T352830 Fix Undefined property: Less_Tree_Color::$value
Resolved		Krinkle	T352829 Investigate memory error in mixins.less test case
Resolved		Hokwelum	T349580 Add Less.js v2.5.3 spec to less.php test suite
Resolved		AnneT	T332923 `@supports` ruleset doesn't include the selector
Resolved		Hokwelum	T366445 Add support for Maths(strictMath) option when it is set to parens-division
Resolved		pmiazga	T367186 Add support for less.js 3.0 calc() exception
Open		None	T367187 Introduce ParserInput class
Resolved		pmiazga	T368408 Introduce permissive parsing for at-rules and custom properties
Resolved		pmiazga	T368409 Introduce `Namespaced values`
Resolved		Hokwelum	T368921 Migrate bare division math to parens-division in Less stylesheet files (in WMF-deployed extensions)
Resolved		Edtadros	T369669 Migrate bare division math to parens-division in Less stylesheet files (in web team extensions)
Resolved		Etonkovidova	T371313 [M] Migrate bare division math to parens-division in Less stylesheet files (in Structured Content team extensions)
Resolved		Jdlrobson-WMF	T382931 [REQUEST] Review unparenthesised slash division in MobileFrontend and Minerva and update if necessary
Resolved	BUG REPORT	ovasileva	T388475 [regression, subtask] Table of contents dropdown icons overlapping with text

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Novem_Linguae subscribed.Jan 17 2024, 1:08 AM

Krinkle closed subtask T354895: Fix comment nodes in functions & Add optional relative amounts for color functions as Resolved.Jan 19 2024, 5:28 PM

matmarex closed subtask T353141: [mixins-important] Support "!important" for mixins that have nested parameters. as Resolved.Jan 25 2024, 2:54 PM

matmarex closed subtask T352859: Investigate missing selectors in selectors.less test case as Resolved.Jan 29 2024, 9:41 PM

Lens0021 subscribed.Feb 2 2024, 10:52 AM

matmarex closed subtask T353142: [mixins-interpolated] Fix defining of mixin named with interpolated unquoted number as Resolved.Feb 7 2024, 9:23 PM

matmarex closed subtask T356706: Comments in @font-face should stay between rules as Resolved.Feb 9 2024, 11:25 PM

Krinkle closed subtask T357160: Treat single and double quotes as equal in "when" operator as Resolved.Feb 14 2024, 7:02 PM

Krinkle closed subtask T352862: [css-3.less test case] Add support for /deep/ selector as Resolved.Feb 19 2024, 4:47 PM

Change 1005040 had a related patch set uploaded (by D3r1ck01; author: Derick Alangi):

[mediawiki/vendor@master] Update wikimedia/less.php from v4.1.1 to v4.2.0

https://gerrit.wikimedia.org/r/1005040

gerritbot added a project: Patch-For-Review.Feb 20 2024, 10:06 AM

Krinkle closed subtask T352911: Improve whitespace preservation before ";" or "!" (semicolon, bang) as Resolved.Feb 22 2024, 10:06 AM

Krinkle added a subtask: T358256: "-@example/2" fails due to ParseError.Feb 22 2024, 5:20 PM

Krinkle closed subtask T358256: "-@example/2" fails due to ParseError as Resolved.Feb 24 2024, 2:43 AM

Change 1006166 had a related patch set uploaded (by D3r1ck01; author: Derick Alangi):

[mediawiki/core@master] composer.json: Use `wikimedia/less.php` version 4.2.1

https://gerrit.wikimedia.org/r/1006166

Change 1005040 merged by jenkins-bot:

[mediawiki/vendor@master] Update `wikimedia/less.php` from version 4.1.1 to 4.2.1

https://gerrit.wikimedia.org/r/1005040

Change 1006166 merged by jenkins-bot:

[mediawiki/core@master] composer.json: Use `wikimedia/less.php` version 4.2.1

https://gerrit.wikimedia.org/r/1006166

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.20; 2024-02-27).Feb 26 2024, 5:00 PM

I can confirm that the bug I mentioned in T288498#9286018 is fixed in version 4.2.1 of Less.php.

Krinkle mentioned this in T359105: Add Less.js v3.13 spec to less.php test suite.Mar 4 2024, 8:52 PM

Krinkle updated the task description. (Show Details)Mar 4 2024, 10:13 PM

Dringsim subscribed.Mar 5 2024, 2:05 PM

Krinkle closed subtask T353143: [detached-rulesets] Support ruleset objects as default values of a mixin parameter as Resolved.Mar 21 2024, 5:11 PM

Krinkle closed subtask T359105: Add Less.js v3.13 spec to less.php test suite as Resolved.

Krinkle closed subtask T360065: [lessjs-2.5.3 legacy.less] Fix preservation of units in some cases as Resolved.

Krinkle closed subtask T353133: Investigate test case for "${in}${terpolotation}" and "iterated-interpolation" (import-interpolation.less test case) as Resolved.

Krinkle added a subtask: T361035: [Regression] CSS import with variable name no longer works.Mar 26 2024, 5:02 PM

pmiazga changed the status of subtask T353131: Add support for comments between property and value from Open to In Progress.Apr 5 2024, 12:56 PM

Krinkle closed subtask T361035: [Regression] CSS import with variable name no longer works as Resolved.Apr 8 2024, 10:39 AM

pmiazga reopened subtask T352862: [css-3.less test case] Add support for /deep/ selector as Open.Apr 11 2024, 3:19 PM

pmiazga closed subtask T353131: Add support for comments between property and value as Resolved.Apr 15 2024, 10:59 AM

Krinkle closed subtask T352862: [css-3.less test case] Add support for /deep/ selector as Resolved.Apr 16 2024, 1:30 PM

pmiazga changed the status of subtask T353144: [css-guards] Fix parsing of "when" conditions after selectors with a pseudo classes (e.g. "a:hover") from Open to In Progress.Apr 19 2024, 1:37 PM

pmiazga changed the status of subtask T352897: Fix ParseError in mixin-args.less test case from Open to In Progress.Apr 19 2024, 1:49 PM

Krinkle closed subtask T353144: [css-guards] Fix parsing of "when" conditions after selectors with a pseudo classes (e.g. "a:hover") as Resolved.Apr 19 2024, 3:40 PM

Krinkle added a subtask: T363076: [Regression] Mixin copies rules from unrelated block.Apr 21 2024, 8:39 PM

pmiazga changed the status of subtask T353132: Introduce commentStore and handle comments in skipWhitespace method from Open to In Progress.Apr 23 2024, 2:09 PM

pmiazga changed the status of subtask T353146: [import.less fixture] Importing files with url() in nested files doesn’t import files from Open to In Progress.Apr 23 2024, 7:52 PM

Krinkle closed subtask T353146: [import.less fixture] Importing files with url() in nested files doesn’t import files as Resolved.Apr 23 2024, 8:02 PM

pmiazga changed the status of subtask T362343: Fix failing less-2.5.3/css.less test from Open to In Progress.Apr 24 2024, 3:58 PM

pmiazga closed subtask T352897: Fix ParseError in mixin-args.less test case as Resolved.Apr 24 2024, 4:04 PM

pmiazga closed subtask T353132: Introduce commentStore and handle comments in skipWhitespace method as Resolved.Apr 24 2024, 4:07 PM

Krinkle closed subtask T363076: [Regression] Mixin copies rules from unrelated block as Resolved.Apr 24 2024, 6:32 PM

Change #1023945 had a related patch set uploaded (by Krinkle; author: Bartosz Dziewoński):

[mediawiki/libs/less.php@master] Remove backtick evaluation inside quoted strings

https://gerrit.wikimedia.org/r/1023945

pmiazga changed the status of subtask T362341: Fix failing less-2.5.3/variables.less test from Open to In Progress.Apr 26 2024, 12:09 PM

Hokwelum changed the status of subtask T362647: Investigate css differences in import-reference.less test from Open to In Progress.Apr 26 2024, 1:39 PM

pmiazga closed subtask T362343: Fix failing less-2.5.3/css.less test as Resolved.Apr 29 2024, 2:15 PM

Hokwelum closed subtask T362647: Investigate css differences in import-reference.less test as Resolved.Apr 29 2024, 2:17 PM

Change #1026571 had a related patch set uploaded (by Krinkle; author: Krinkle):

[mediawiki/libs/less.php@master] test: Enable lessjs-3.13.1/compression fixture

https://gerrit.wikimedia.org/r/1026571

Hokwelum changed the status of subtask T352867: [mixins-guards] Investigate when() match failures for "greater than" and "less then" from Open to In Progress.May 4 2024, 8:34 AM

Change #1026571 merged by jenkins-bot:

[mediawiki/libs/less.php@master] test: Enable lessjs-3.13.1/compression fixture

https://gerrit.wikimedia.org/r/1026571

Krinkle closed subtask T352867: [mixins-guards] Investigate when() match failures for "greater than" and "less then" as Resolved.May 6 2024, 1:20 PM

Krinkle closed subtask T363728: Unexpected compilation clamp() with mixed units as Resolved.

Hokwelum changed the status of subtask T353147: [urls.less fixture] Investigate @font-face difference in urls.less test case from Open to In Progress.May 7 2024, 4:12 PM

Hokwelum closed subtask T353147: [urls.less fixture] Investigate @font-face difference in urls.less test case as Resolved.May 14 2024, 3:17 PM

pmiazga closed subtask T362341: Fix failing less-2.5.3/variables.less test as Resolved.May 15 2024, 11:57 AM

@larissagaulia @Krinkle - I have a suggestion to rename this ticket to "Update less.php port to fully support Less.js 2.5.3 behaviours", and put in the description that the acceptance criteria is that all test fixtures PHP version can support from 2.5.3 have to pass.
Then use this ticket description and create a new ticket to support the less-3.13.

My rationale is that most of the work we did circled 2.5.3 fixtures. Now I think we finally have a 100% parity (with what's possible) with 2.5.3 - it would be good to mark that as a milestone. That would give a good clarity on the work that is done, and what is remaining. IMHO achieving full 2.5.3 parity is a great moment to celebrate.

Plenty of work we did brought us closer to 3.13, but most of the work is based on test/assets/less-2.5.3js, not 3.x version.

Hokwelum changed the status of subtask T364871: Add support for SVG image size from Open to In Progress.May 17 2024, 6:32 AM

Change #1034195 had a related patch set uploaded (by 沈澄心; author: 沈澄心):

[mediawiki/libs/less.php@master] update Less_Parser::parseEntitiesKeyword() to support some Less.js 3.13 behaviours

https://gerrit.wikimedia.org/r/1034195

Krinkle mentioned this in T365481: Update less.php port to complete support Less.js 2.5.3 behaviours.May 21 2024, 2:21 PM

Krinkle edited subtasks, added: T365481: Update less.php port to complete support Less.js 2.5.3 behaviours; removed: T364871: Add support for SVG image size , T363728: Unexpected compilation clamp() with mixed units, T363076: [Regression] Mixin copies rules from unrelated block, T362647: Investigate css differences in import-reference.less test, T362343: Fix failing less-2.5.3/css.less test, T362341: Fix failing less-2.5.3/variables.less test, T361035: [Regression] CSS import with variable name no longer works, T360065: [lessjs-2.5.3 legacy.less] Fix preservation of units in some cases, T358256: "-@example/2" fails due to ParseError, T357160: Treat single and double quotes as equal in "when" operator, T356706: Comments in @font-face should stay between rules, T354895: Fix comment nodes in functions & Add optional relative amounts for color functions, T353289: Less_Exception_Compiler: error evaluating function `color` argument must be a string, T353147: [urls.less fixture] Investigate @font-face difference in urls.less test case, T353146: [import.less fixture] Importing files with url() in nested files doesn’t import files, T353144: [css-guards] Fix parsing of "when" conditions after selectors with a pseudo classes (e.g. "a:hover"), T353143: [detached-rulesets] Support ruleset objects as default values of a mixin parameter, T353142: [mixins-interpolated] Fix defining of mixin named with interpolated unquoted number, T353141: [mixins-important] Support "!important" for mixins that have nested parameters., T353133: Investigate test case for "${in}${terpolotation}" and "iterated-interpolation" (import-interpolation.less test case) , T353132: Introduce commentStore and handle comments in skipWhitespace method, T353131: Add support for comments between property and value, T352911: Improve whitespace preservation before ";" or "!" (semicolon, bang), T352897: Fix ParseError in mixin-args.less test case, T352867: [mixins-guards] Investigate when() match failures for "greater than" and "less then", T352866: Preserve color keywords and short hex notation as-is, T352862: [css-3.less test case] Add support for /deep/ selector, T352859: Investigate missing selectors in selectors.less test case, T352830: Fix Undefined property: Less_Tree_Color::$value , T352829: Investigate memory error in mixins.less test case, T349580: Add Less.js v2.5.3 spec to less.php test suite, T332923: `@supports` ruleset doesn't include the selector.May 21 2024, 2:26 PM

@pmiazga Agreed, with one minor difference. I'd prefer not to change the goal of the current task as this was filed by specific people with a specific rationale in relation to future Codex usage, which I'd rather preserve in-place. I've instead subdivided the work to recognise this milestone as T365481: Update less.php port to complete support Less.js 2.5.3 behaviours, which we can close once T364871: Add support for SVG image size is resolved.

We can then cut the last Less.php 4.x release and focus back on this task for remaining of the quarter. How much we can get done will depend on the unknowns we run into, but I'm hopeful we achieve these two releases:

Publish Less.php 5.0, to start off the new series. This would essentially be a minimal release only the breaking changes (new maths/strictMaths behaviour to reflect upstream Less.js 3 and Less.js 4), removal of deprecated features, and any changes to default parser options (users can opt-in/out as they see fit).
Publish one Less.php 5.x with a handful of Less 3.13 features of our choosing.