Page MenuHomePhabricator

`@supports` ruleset doesn't include the selector
Closed, ResolvedPublic

Description

This code:

.foo {
    color: blue;

    @supports ( mask-image: none) {
        mask-image: url( 'my-image-url' );
    }
}

should parse to:

.foo {
    color: blue;
}

@supports ( mask-image: none) {
   .foo {
        mask-image: url( 'my-image-url' );
    }
}

This works when compiling with less.js. However, with Less.php, the @supports ruleset does not include any selector, so you get this:

.foo {
    color: blue;
}

@supports ( mask-image: none) {
    mask-image: url( 'my-image-url' );
}

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Using http://ecomfe.github.io/est/fiddle/#version=2.4.0&autoprefix=false&est=false&autorun=false, it seems this was upstream less.js behaviour in 2.4.0 and changed to the current behaviour in 2.5.0, though seemingly without coverage by upstream's test specification, hence it was likely missed by less.php maintainers until now (noting that Wikimedia took over less.php maintenance in 2019).

AnneT renamed this task from `@supports` ruleset is not properly applied to the selector when an ampersand is used to `@supports` ruleset doesn't include the selector.Mar 23 2023, 8:03 PM
AnneT updated the task description. (Show Details)

Using http://ecomfe.github.io/est/fiddle/#version=2.4.0&autoprefix=false&est=false&autorun=false, it seems this was upstream less.js behaviour in 2.4.0 and changed to the current behaviour in 2.5.0, though seemingly without coverage by upstream's test specification, hence it was likely missed by less.php maintainers until now (noting that Wikimedia took over less.php maintenance in 2019).

Aha, thanks!

@Catrope See the diff between these two versions; looks like the commits on Feb 24, 2015 probably contain the changes we need to port.

Thanks for finding this! I think the responsible commit might be this one, which appears to add tests in directives-bubbling.less. It looks like the commit that follows it may be related too. I found some of these pieces while trying to fix this, but this should give a better picture of the changes we need to port.

AnneT changed the task status from Open to In Progress.Mar 27 2023, 4:27 PM
AnneT claimed this task.
Restricted Application triaged this task as High priority. · View Herald TranscriptMar 27 2023, 4:27 PM

Thanks for picking this up, please let us know if we can provide any help or guidance.

Change 905994 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/libs/less.php@master] Directive: Bubble directives up to the global scope

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

Change 905994 merged by jenkins-bot:

[mediawiki/libs/less.php@master] Directive: Bubble directives up to the global scope

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

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

[mediawiki/libs/less.php@master] Tag v4.1.0

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

Change 907545 merged by jenkins-bot:

[mediawiki/libs/less.php@master] Tag v4.1.0

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

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

[mediawiki/core@master] ResourceLoader: Update wikimedia/less.php from 4.0.0 to 4.1.0

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

Change 907564 merged by jenkins-bot:

[mediawiki/core@master] ResourceLoader: Update wikimedia/less.php from 4.0.0 to 4.1.0

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

Change 907980 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/extensions/VueTest@master] Reinstate CSS-only button-with-icon examples

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

Change 907980 merged by jenkins-bot:

[mediawiki/extensions/VueTest@master] Reinstate CSS-only button-with-icon examples

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