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

[sajdakabir]

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

Closes #8805

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]

🦋 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]

Can you also add these tests:

1. 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;
    );
}

2. 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]

@otomad i have updated the pr accordingly to requested changes

[github-actions]

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]

Suggested change

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

[otomad]

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

[sajdakabir]

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

[jeddy3]

@otomad Thanks for the further reviews.

@sajdakabir Thanks for enacting them.

LGTM, thank you.

[Mouvedia]

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]

@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]

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]

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]

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

[jeddy3]

@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.