Skip to content
New issue

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

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

Already on GitHub? # to your account

Add support for nested CSS variables #90

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

andrewda
Copy link

This adds support for nested CSS variables. See screenshot for example:

Screenshot 2024-06-25 at 18 13 26

Resolves #14

Copy link

changeset-bot bot commented Jun 26, 2024

🦋 Changeset detected

Latest commit: b915fe7

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

This PR includes changesets to release 1 package
Name Type
css-variables-language-server Minor

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

};

public resolveRecursiveVariables = (value: string) => {
for (let i = 0; i < 20; i++) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@andrewda

Why does the for loop run 20? Is it because the maximum recursion depth is thought to be 20?

Comment on lines +78 to +88
const variableReference = value.match(/^var\(\s*([a-zA-Z0-9-]+)\s*\)$/)?.[1];
if (variableReference) {
const newValue = this.cacheManager.get(variableReference)?.symbol?.value;
if (newValue) {
value = newValue;
} else {
break;
}
} else {
break;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const variableReference = value.match(/^var\(\s*([a-zA-Z0-9-]+)\s*\)$/)?.[1];
if (variableReference) {
const newValue = this.cacheManager.get(variableReference)?.symbol?.value;
if (newValue) {
value = newValue;
} else {
break;
}
} else {
break;
}
const variableReference = value.match(/^var\(\s*([a-zA-Z0-9-]+)\s*\)$/)?.[1];
if (!variableReference) {
break;
}
const newValue = this.cacheManager.get(variableReference)?.symbol?.value;
if (newValue) {
value = newValue;
continue;
}
break;

I think nested if statements are complicated. How about this?

@@ -14,7 +14,7 @@
},
"dependencies": {
"axios": "^0.27.2",
"culori": "0.20.1",
"culori": "^4.0.1",

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to be updated...! #95

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Support inline color for nested css variable
3 participants