Fix `at-rule-prelude-no-invalid` `Bad syntax reference` throw for `@when` and `@else`
Author: elvism-lullabotCreated Sep 14, 2026Updated Sep 15, 2026
Labelsstatus: ready to implement
What minimal example or steps are needed to reproduce the bug?
I have the following SCSS:
@if $min and $max {
@media (min-width: $min) and (max-width: $max) { @content; }
} @else if $min {
@media (min-width: $min) { @content; }
} @else if $max {
@media (max-width: $max) { @content; }
} @else {
@error 'media-query() needs $from and/or $until.';
}After updating to stylelint:^17.15.0, I'm seeing the following error when running yarn stylelint "**/*.{css,scss,sass}"
yarn stylelint "**/*.{css,scss,sass}"
yarn run v1.22.22
warning ../../../package.json: No license field
$ stylelint '**/*.{css,scss,sass}'
Error: Bad syntax reference: <boolean-condition>
at /home/developer/project/test.scss:3:3
at internalMatch (file:///home/developer/project/node_modules/css-tree/lib/lexer/match.js:406:27)
at matchAsTree (file:///home/developer/project/node_modules/css-tree/lib/lexer/match.js:586:25)
at matchSyntax (file:///home/developer/project/node_modules/css-tree/lib/lexer/Lexer.js:88:18)
at Lexer.matchAtrulePrelude (file:///home/developer/project/node_modules/css-tree/lib/lexer/Lexer.js:337:16)
at file:///home/developer/project/node_modules/stylelint/lib/rules/at-rule-prelude-no-invalid/index.mjs:49:28
at /home/developer/project/node_modules/stylelint/node_modules/postcss/lib/container.js:377:18
at Root.walk (/home/developer/project/node_modules/stylelint/node_modules/postcss/lib/container.js:352:18)
at Root.walkAtRules (/home/developer/project/node_modules/stylelint/node_modules/postcss/lib/container.js:375:19)
at file:///home/developer/project/node_modules/stylelint/lib/rules/at-rule-prelude-no-invalid/index.mjs:42:8
at runRule (file:///home/developer/project/node_modules/stylelint/lib/lintPostcssResult.mjs:140:11)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.Minimal example:
@if true {
@media (min-width: 1em) and (max-width: 2em) { color: red; }
} @else if true {
@media (min-width: $min) { color: red; }
}What minimal configuration is needed to reproduce the bug?
{
"extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
"customSyntax": "postcss-scss"
}How did you run Stylelint?
yarn stylelint "**/*.{css,scss,sass}"Which Stylelint-related dependencies are you using?
{
"stylelint": "^17.15.0",
"stylelint-config-standard": "^38.0.0",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-scss": "^7.2.0"
}What did you expect to happen?
No errors
What actually happened?
Error: Bad syntax reference: <boolean-condition>
Do you have a proposal to fix the bug?
No response
Source: stylelint/stylelint