Page MenuHomePhabricator

"-@example/2" fails due to ParseError
Closed, ResolvedPublic

Description

Reported by hostep at https://github.com/wikimedia/less.php/issues/107:

[…] I now just ran into another problem [in Magento], it works on less.php v4.2.0, but not on the latest master branch and it seems to be caused by this change: a34ce2a (https://gerrit.wikimedia.org/r/c/mediawiki/libs/less.php/+/1003506)

Here's how to reproduce it (it's quite big, but it can probably be narrowed down much further):

@message-error-icon: '\e61f';
@message-error-icon__color-inner: red;
@message-error-icon__color-lateral: white;
@message-error-icon__background: red;
@message-error-icon__top: 10;
@message-error-icon__right: 10;
@message-error-icon__bottom: 10;
@message-error-icon__left: 10;
@message-icon__font-size: 24px;
@message-icon__font-line-height: 1;
@icon-font: 'luma-icons';
@icon-font__vertical-align: middle;

._lib-icon-font(
    @_icon-font-content,
    @_icon-font,
    @_icon-font-size,
    @_icon-font-line-height,
    @_icon-font-color,
    @_icon-font-margin,
    @_icon-font-vertical-align
) {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}

.lib-message-icon-lateral(@_message-type: info, @_message-position: right) {
    @_message-icon-position: @_message-position;
    @_message-icon: "message-@{_message-type}-icon";
    @_message-icon-color: "message-@{_message-type}-icon__color-lateral";
    @_message-icon-background: "message-@{_message-type}-icon__background";
    @_message-icon-top: "message-@{_message-type}-icon__top";
    @_message-icon-right: "message-@{_message-type}-icon__right";
    @_message-icon-bottom: "message-@{_message-type}-icon__bottom";
    @_message-icon-left: "message-@{_message-type}-icon__left";
    ._lib-message-icon-lateral(
        @_message-icon-position,
        @@_message-icon,
        @@_message-icon-color,
        @@_message-icon-background,
        @@_message-icon-top,
        @@_message-icon-left,
        @@_message-icon-bottom,
        @@_message-icon-right
    );
}

._lib-message-icon-lateral(
    @_message-icon-position,
    @_message-icon,
    @_message-icon-color,
    @_message-icon-background,
    @_message-icon-top,
    @_message-icon-left,
    @_message-icon-bottom,
    @_message-icon-right
) {
    > *:first-child {
        &:after {
            ._lib-icon-font(
                @_icon-font-content: @_message-icon,
                @_icon-font: @icon-font,
                @_icon-font-size: @message-icon__font-size,
                @_icon-font-line-height: @message-icon__font-line-height,
                @_icon-font-color: @_message-icon-color,
                @_icon-font-margin: (-@message-icon__font-size/2) 0 0,
                @_icon-font-vertical-align: @icon-font__vertical-align
            );
        }
    }
}

.example-message-2 {
    .lib-message-icon-lateral(error, right);
}

Error output:

PHP Fatal error:  Uncaught Less_Exception_Chunk: ParseError: Unexpected input in test3.less on line 73, column 14
71|                 @_icon-font-margin: (-@message-icon__font-size/2) 0 0,
72|                 @_icon-font-vertical-align: @icon-font__vertical-align
73|             );
74|         }
75|     }
76| } in vendor/wikimedia/less.php/lib/Less/Parser.php:632
Stack trace:
#0 vendor/wikimedia/less.php/lib/Less/Parser.php(588): Less_Parser->GetRules('/Volumes/Projec...')
#1 vendor/wikimedia/less.php/lib/Less/Parser.php(453): Less_Parser->_parse('/Volumes/Projec...')
#2 test.php(12): Less_Parser->parseFile('/Volumes/Projec...', '')
#3 {main}
  thrown in vendor/wikimedia/less.php/lib/Less/Parser.php on line 632

Expected output:

.example-message-2 > *:first-child:after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  speak: none;
  text-align: center;
}

Event Timeline

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

Assigning to @Hokwelum as follow-up to T352862: [css-3.less test case] Add support for /deep/ selector.

Looks like the new matching for /deep/, as intended for matching CSS selectors, is causing a slash in division operations to be mistaken for something else.

Krinkle triaged this task as High priority.Feb 22 2024, 5:21 PM

Minimal example:

@example: 24px;

.myfunc(@something) {
    font-weight: normal;
}

div {
    .myfunc(@something: @example/2);
}
lessc: Less_Exception_Chunk: ParseError: Unexpected input in input.less on line 8, column 36
06| 
07| div {
08|     .myfunc(@something: @example/2);
09| }
10|  in /Users/krinkle/Development/less.php/lib/Less/Parser.php:632
Stack trace:
#0 /Users/krinkle/Development/less.php/lib/Less/Parser.php(588): Less_Parser->GetRules('/Users/krinkle/...')
#1 /Users/krinkle/Development/less.php/lib/Less/Parser.php(453): Less_Parser->_parse('/Users/krinkle/...')
#2 /Users/krinkle/Development/less.php/bin/lessc(175): Less_Parser->parseFile('/Users/krinkle/...')
#3 {main}

Change 1006099 had a related patch set uploaded (by Hokwelum; author: Hokwelum):

[mediawiki/libs/less.php@master] Remove current position from stack after parseOperand()

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

Change 1006099 merged by jenkins-bot:

[mediawiki/libs/less.php@master] Less_Parser: Add missing forget() in parseMultiplication()

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

@Hokwelum

hostep wrote on 24 Feb 2024:

Super, thanks very much!
I can confirm this fixes the issue.
Compiling less code using commit a113853 in Magento now works again without failures!
Would be appreciated if you could tag a new version somewhere in the next few days.
[..]
Thanks you very much for the quick fixes!

Good to know everything works fine now :-) @Krinkle Hmm, hoping I'm done with the current task this week, and we can tag a new minor version with the updates!