#9511·stylelint

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:

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}"

bash
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:

scss
@if true {
  @media (min-width: 1em) and (max-width: 2em) { color: red; }
} @else if true {
  @media (min-width: $min) { color: red; }
}

Demo link

What minimal configuration is needed to reproduce the bug?

json
{
  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
  "customSyntax": "postcss-scss"
}

How did you run Stylelint?

bash
yarn stylelint "**/*.{css,scss,sass}"

Which Stylelint-related dependencies are you using?

json
{
  "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