Skip to content

Fix custom-property-no-missing-var-function false positives for style query in if() function #8813

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
jeddy3 merged 12 commits into from
Nov 21, 2025
Merged

Fix custom-property-no-missing-var-function false positives for style query in if() function #8813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
cf68b71
fix: skip custom property validation inside style() queries to suppor…
sajdakabir Oct 13, 2025
31925eb
fix: add missing newlines between conditional blocks for better reada…
sajdakabir Oct 13, 2025
4dd846f
fix: handle custom properties in style() queries and if() branches co…
sajdakabir Oct 13, 2025
bd3c858
Add changeset
jeddy3 Oct 20, 2025
1c67731
Update lib/rules/custom-property-no-missing-var-function/index.mjs
sajdakabir Oct 20, 2025
0824467
Update lib/rules/custom-property-no-missing-var-function/__tests__/in…
sajdakabir Oct 20, 2025
5409cc0
Update lib/rules/custom-property-no-missing-var-function/__tests__/in…
sajdakabir Oct 20, 2025
ef5cf7d
Update lib/rules/custom-property-no-missing-var-function/__tests__/in…
sajdakabir Oct 20, 2025
8fa70e2
fix: lint issue
sajdakabir Oct 21, 2025
f36a202
Build CJS
jeddy3 Oct 28, 2025
ca71174
refc: remove unused insideStyleQuery parameter
sajdakabir Nov 3, 2025
6caf395
refactor: clarify postcss-value-parser quirk and simplify isDashedIdent
sajdakabir Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/good-apples-sleep.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"stylelint": patch
---

Fixed: `custom-property-no-missing-var-function` false positives for style query in `if()` function
42 changes: 42 additions & 0 deletions lib/rules/custom-property-no-missing-var-function/__tests__/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,30 @@ testRule({
code: 'a { color: var(--foo, var(--bar, var(--foobar, #000))); }',
description: 'nested fallbacks in var() with recursive fallback values',
},
{
code: 'button { --state: normal; background-color: if(style(--state: hover): gray; else: white;); }',
description: 'custom property in style() query within if() function',
},
{
code: '@property --state {} button { background-color: if(style(--state: hover): gray; else: white;); }',
description: 'declared custom property in style() query within if() function',
},
{
code: ':root { --theme: dark; } a { color: if(style(--theme: light): black; else: white;); }',
description: 'declared custom property in style() query condition',
},
{
code: 'a { --foo: 1; --bar: 2; color: if(style(--foo: 1): if(style(--bar: 2): red; else: blue;); else: green;); }',
description: 'nested if() with multiple style() queries',
},
{
code: 'a { --foo: 1; --bar: 2; color: if(style(--foo: var(--bar)): red; else: green;); }',
description: 'nested if() with multiple style() queries',
},
{
code: 'a { --foo: 1; --color: red; color: if(style(--foo: 1): var(--color); else: green;); }',
description: 'nested if() with multiple style() queries',
},
],

reject: [
Expand Down Expand Up @@ -224,5 +248,23 @@ testRule({
],
description: 'nested var() with second-level fallback missing var() syntax',
},
{
code: 'a { --foo: 1; --bar: 2; color: if(style(--foo: --bar): red; else: green;); }',
message: messages.rejected('--bar'),
line: 1,
column: 48,
endLine: 1,
endColumn: 53,
description: 'custom property in style() query value missing var() syntax',
},
{
code: 'a { --foo: 1; --color: red; color: if(style(--foo: 1): --color; else: green;); }',
message: messages.rejected('--color'),
line: 1,
column: 56,
endLine: 1,
endColumn: 63,
description: 'custom property in if() consequent branch missing var() syntax',
},
],
});
26 changes: 23 additions & 3 deletions lib/rules/custom-property-no-missing-var-function/index.cjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

26 changes: 23 additions & 3 deletions lib/rules/custom-property-no-missing-var-function/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,23 @@ const rule = (primary) => {

if (mustDrill) args = child.nodes.slice(1);
else return;
} else if (name === 'style') {
// For style() queries, only exempt the property name (first word before colon)
// but still check the value part after the colon
let foundColon = false;

node.nodes.forEach((arg) => {
if (arg.type === 'div' && arg.value === ':') {
foundColon = true;
} else if (!foundColon && isDashedIdent(arg)) {
// This is the property name in the query - skip it
} else if (foundColon) {
// This is after the colon (the value) - check it normally
check(arg, decl);
}
});

return;
}

args.forEach((arg) => check(arg, decl));
Expand All @@ -97,14 +114,17 @@ const rule = (primary) => {

if (!isDashedIdent(node)) return;

if (!knownCustomProperties.has(node.value)) return;
// `postcss-value-parser` incorrectly includes semicolons in word tokens.
const cleanValue = node.value.replace(/;+$/, '');

if (!knownCustomProperties.has(cleanValue)) return;

const index = declarationValueIndex(decl) + node.sourceIndex;
const endIndex = index + node.value.length;
const endIndex = index + cleanValue.length;

report({
message: messages.rejected,
messageArgs: [node.value],
messageArgs: [cleanValue],
node: decl,
index,
endIndex,
Expand Down
Loading