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

sajdakabir · 2025-10-13T06:01:56Z

Which issue, if any, is this issue related to?

Is there anything in the PR that needs further explanation?

No; the changes special-case style() queries inside if() by threading an insideStyleQuery flag through "custom-property-no-missing-var-function" update the generated CJS bundle, and add targeted tests to cover the new behavior.

changeset-bot · 2025-10-13T06:01:59Z

🦋 Changeset detected

Latest commit: 6caf395

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
stylelint	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

otomad · 2025-10-13T08:29:58Z

Can you also add these tests:

Error code:

a {
    --foo: 1;
    --bar: 2;
    color: if(
        style(--foo: --bar): red;
        else: green;
    );
}

After auto fix (Correct code):

a {
    --foo: 1;
    --bar: 2;
    color: if(
        style(--foo: var(--bar)): red;
        else: green;
    );
}

Error code:

a {
    --foo: 1;
    --color: red;
    color: if(
        style(--foo: 1): --color;
        else: green;
    );
}

After auto fix (Correct code):

a {
    --foo: 1;
    --color: red;
    color: if(
        style(--foo: 1): var(--color);
        else: green;
    );
}

sajdakabir · 2025-10-13T11:44:38Z

@otomad i have updated the pr accordingly to requested changes

github-actions · 2025-10-20T10:46:49Z

This PR is packaged and the instant preview is available (6caf395). View the demo website.

Install it locally:

npm i -D https://pkg.pr.new/stylelint@6caf395

jeddy3

@sajdakabir Thank you for working on this PR. Can you address the lint warnings, please?

You can use the following command to run linting locally:

npm run lint

(@otomad Thanks for your review input so far. If you've time, we'd appreciate an approval from you as me and the other Stylelint members are a bit short on OSS time at the moment.)

otomad · 2025-10-20T14:28:19Z

lib/rules/custom-property-no-missing-var-function/index.mjs

 			const { prop, value } = decl;
-
 			if (!value.includes('--')) return;


Suggested change

const { prop, value } = decl;

if (!value.includes('--')) return;

const { prop, value } = decl;

if (!value.includes('--')) return;

lib/rules/custom-property-no-missing-var-function/index.mjs

lib/rules/custom-property-no-missing-var-function/__tests__/index.mjs

otomad · 2025-10-20T14:39:52Z

Sorry I have no edit permission, so I just reviewed it by adding suggested changes in the comments.

sajdakabir · 2025-10-20T17:33:58Z

@otomad thanks for the review. I’ve completed the updates please let me know if you need any other changes.

lib/rules/custom-property-no-missing-var-function/index.mjs

jeddy3

@otomad Thanks for the further reviews.

@sajdakabir Thanks for enacting them.

LGTM, thank you.

Mouvedia · 2025-11-02T09:40:55Z

lib/rules/custom-property-no-missing-var-function/index.mjs

+		 * @param {boolean} insideStyleQuery - Whether we're inside a style() query
 		 */
-		function check(node, decl) {
+		function check(node, decl, insideStyleQuery) {


question

It seems check is never called with insideStyleQuery === true.
Hence insideStyleQuery is never set to true.

Suggested change

function check(node, decl, insideStyleQuery) {

function check(node, decl, insideStyleQuery = false) {

then revert l70 and l105.

What are you planning to use passStyleQuery/insideStyleQuery for?

sajdakabir · 2025-11-03T05:51:06Z

@Mouvedia i have remove unused insideStyleQuery parameter

romainmenke

Thank you @sajdakabir,

I've left a couple of suggestions, please take a look when you have time.

romainmenke · 2025-11-12T15:36:49Z

lib/rules/custom-property-no-missing-var-function/index.mjs

 			if (!isDashedIdent(node)) return;

-			if (!knownCustomProperties.has(node.value)) return;
+			// Strip trailing semicolons for lookup and reporting


Suggested change

// Strip trailing semicolons for lookup and reporting

// `postcss-value-parser` incorrectly includes semicolons in word tokens.

Maybe document why we need to do this.

romainmenke · 2025-11-12T15:37:37Z

lib/rules/custom-property-no-missing-var-function/index.mjs

+	// Strip trailing semicolons that may be part of conditional syntax
+	const cleanValue = value.replace(/;+$/, '');
+
+	return type === 'word' && cleanValue.startsWith('--');


I don't think this is needed.
It didn't make sense to me to strip trailing chars, when only checking the start.

Can you revert to:

/** * @param {Node} node */ function isDashedIdent({ type, value }) { return type === 'word' && value.startsWith('--'); }

ybiquitous · 2025-11-21T00:42:20Z

@sajdakabir This PR includes extra files, such as .changeset/chubby-donkeys-remain.md. Can you rebase the main branch, please? 🙏🏼

…t CSS conditional statements

…bility

…rrectly

Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

…dex.mjs Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

jeddy3 · 2025-11-21T15:38:36Z

@sajdakabir Thanks for making the requested changes and for rebasing.

I'll merge so that we can include this fix in the release I'm just about to start.

@silverwind

| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.25.0 | 16.26.0 | ## [v16.26.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16260---2025-11-21) It adds 1 feature and fixes 2 bugs. - Added: support for `customSyntax` with function export ([#8834](stylelint/stylelint#8834)) ([@silverwind](https://github.com/silverwind)). - Fixed: `custom-property-no-missing-var-function` false positives for style query in `if()` function ([#8813](stylelint/stylelint#8813)) ([@sajdakabir](https://github.com/sajdakabir)). - Fixed: `media-feature-range-notation` false positives for multiple queries and `except: exact-value` ([#8832](stylelint/stylelint#8832)) ([@jeddy3](https://github.com/jeddy3)).

@silverwind

| datasource | package | from | to | | ---------- | --------- | ------- | ------- | | npm | stylelint | 16.25.0 | 16.26.0 | ## [v16.26.0](https://github.com/stylelint/stylelint/blob/HEAD/CHANGELOG.md#16260---2025-11-21) It adds 1 feature and fixes 2 bugs. - Added: support for `customSyntax` with function export ([#8834](stylelint/stylelint#8834)) ([@silverwind](https://github.com/silverwind)). - Fixed: `custom-property-no-missing-var-function` false positives for style query in `if()` function ([#8813](stylelint/stylelint#8813)) ([@sajdakabir](https://github.com/sajdakabir)). - Fixed: `media-feature-range-notation` false positives for multiple queries and `except: exact-value` ([#8832](stylelint/stylelint#8832)) ([@jeddy3](https://github.com/jeddy3)).

sajdakabir mentioned this pull request Oct 13, 2025

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

Closed

jeddy3 changed the title ~~Fix/style query no var~~ Fix custom-property-no-missing-var-function false positives for style query in if() function Oct 14, 2025

jeddy3 requested changes Oct 20, 2025

View reviewed changes

otomad suggested changes Oct 20, 2025

View reviewed changes

sajdakabir requested review from jeddy3 and otomad October 20, 2025 17:08

otomad approved these changes Oct 21, 2025

View reviewed changes

lib/rules/custom-property-no-missing-var-function/index.mjs Show resolved Hide resolved

sajdakabir requested a review from otomad October 27, 2025 07:16

otomad approved these changes Oct 27, 2025

View reviewed changes

jeddy3 approved these changes Oct 28, 2025

View reviewed changes

Mouvedia reviewed Nov 2, 2025

View reviewed changes

jeddy3 mentioned this pull request Nov 10, 2025

16.26.0 #8836

Closed

4 tasks

romainmenke reviewed Nov 12, 2025

View reviewed changes

sajdakabir requested a review from a team as a code owner November 17, 2025 18:08

sajdakabir and others added 8 commits November 21, 2025 14:18

fix: skip custom property validation inside style() queries to suppor…

cf68b71

…t CSS conditional statements

fix: add missing newlines between conditional blocks for better reada…

31925eb

…bility

fix: handle custom properties in style() queries and if() branches co…

4dd846f

…rrectly

Add changeset

bd3c858

Update lib/rules/custom-property-no-missing-var-function/index.mjs

1c67731

Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

Update lib/rules/custom-property-no-missing-var-function/__tests__/in…

0824467

…dex.mjs Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

Update lib/rules/custom-property-no-missing-var-function/__tests__/in…

5409cc0

…dex.mjs Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

Update lib/rules/custom-property-no-missing-var-function/__tests__/in…

ef5cf7d

…dex.mjs Co-authored-by: Rantetsu Inori <56647156+otomad@users.noreply.github.com>

sajdakabir and others added 4 commits November 21, 2025 14:18

fix: lint issue

8fa70e2

Build CJS

f36a202

refc: remove unused insideStyleQuery parameter

ca71174

refactor: clarify postcss-value-parser quirk and simplify isDashedIdent

6caf395

sajdakabir force-pushed the fix/style-query-no-var branch from c2bda06 to 6caf395 Compare November 21, 2025 08:49

jeddy3 merged commit de3a8f0 into stylelint:main Nov 21, 2025
15 checks passed

		const { prop, value } = decl;

		if (!value.includes('--')) return;

	function check(node, decl, insideStyleQuery) {
	function check(node, decl, insideStyleQuery = false) {

	// Strip trailing semicolons for lookup and reporting
	// `postcss-value-parser` incorrectly includes semicolons in word tokens.

Uh oh!

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

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

Uh oh!

Conversation

sajdakabir commented Oct 13, 2025

Uh oh!

changeset-bot bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

otomad commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sajdakabir commented Oct 13, 2025

Uh oh!

github-actions bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

otomad Oct 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

otomad commented Oct 20, 2025

Uh oh!

sajdakabir commented Oct 20, 2025

Uh oh!

Uh oh!

jeddy3 left a comment

Choose a reason for hiding this comment

Uh oh!

Mouvedia Nov 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sajdakabir commented Nov 3, 2025

Uh oh!

romainmenke left a comment

Choose a reason for hiding this comment

Uh oh!

romainmenke Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

romainmenke Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

ybiquitous commented Nov 21, 2025

Uh oh!

jeddy3 commented Nov 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

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

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

changeset-bot bot commented Oct 13, 2025 •

edited

Loading

otomad commented Oct 13, 2025 •

edited

Loading

github-actions bot commented Oct 20, 2025 •

edited

Loading

Mouvedia Nov 2, 2025 •

edited

Loading