Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

less variables cannot be used under the not selector, delimiter #4244

Open
comewithl opened this issue Nov 1, 2023 · 3 comments
Open

less variables cannot be used under the not selector, delimiter #4244

comewithl opened this issue Nov 1, 2023 · 3 comments
Labels

Comments

@comewithl
Copy link

To reproduce:

@compPrefix: ~'hi';
.@{compPrefix}{
 color:red;
 &:not(.@{compPrefix}-one, .@{compPrefix}-two){
  color:blue
 }
}
@compPrefix: ~'hi';
.@{compPrefix}{
 color:red;
 &:not(&-one, &-two){
  color:blue
 }
}

Current behavior:

ParseError: Missing closing ')' in /Users/lar/work/isv/theme_static/test.less on line 4, column 26:
3  color:red;
4  &:not(.@{compPrefix}-one, .@{compPrefix}-two){
5   color:blue

Expected behavior:
Output like this;

.hi {
  color: red;
}
.hi:not(.hi-one, .hi-two){
  color: blue;
}

Environment information:

  • less version: 4.1.2
  • nodejs version: 16.14.0
  • operating system: macos
@comewithl comewithl added the bug label Nov 1, 2023
@woody-li
Copy link

Same issue with nested selector &

Works well:

.main{
  :is(.main-a, .main-b){
    color:red;
  }
}

Same error:

.main{
  :is(&-a, &-b){
    color:blue;
  }
}

Maybe related with #3802?

@puckowski
Copy link
Contributor

I believe #4290 may resolve this issue.

Fork release https://github.com/puckowski/less.js/releases/tag/4.2.1.2 takes the following Less.js

@compPrefix: ~'hi';
.@{compPrefix}{
 color:red;
 &:not(.@{compPrefix}-one, .@{compPrefix}-two){
  color:blue
 }
}

and outputs:

.hi {
  color: red;
}
.hi:not(.hi-one, .hi-two) {
  color: blue;
}

Fork release is Less.js 4.2.1 with fixes for:
#4252
#3737
#4258
#4264
#4268
#4267

I'll take a closer look later today.

@puckowski
Copy link
Contributor

I believe #4290 may resolve this issue.

With the PR the following Less.js:

.main{
  :is(&-a, &-b){
    color:blue;
  }
}

becomes:

.main :is(&-a, &-b) {
  color: blue;
}

I tested using https://github.com/puckowski/less.js/releases/tag/4.2.1.2

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants