Skip to content

Conversation

@cmrn
Copy link
Contributor

@cmrn cmrn commented Jun 3, 2025

Summary

Fixes a bug which caused some values to be corrupted during compilation. This bug occurs when a @value references another value, which in turn is long and contains spaces (e.g. a CSS relative color). For example, these two value statements trigger the bug:

@value mixedColor: color-mix(in hsl, hsl(200 50 80), coral 80%);
@value mixedColorA90: hsl(from mixedColor h s l / 90%);
- Expected
+ Received

  @value mixedColor: color-mix(in hsl, hsl(200 50 80), coral 80%);
- @value mixedColorA90: hsl(from color-mix(in hsl, hsl(200 50 80), coral 80%) h s l / 90%);
+ @value 50 80), coral 80%) h s l / 90%);

Cause

The regex used to fetch and resolve the value of an @value foo: bar; declaration (i.e. a value declaration, not a value import) was unnecessarily iterative, since only a single value can be declared at a time in this manner. The iteration contained a flaw where the cursor of the regex was not adjusted for the length of the resolved value. So if the replaced value was longer than the variable it replaced, the next iteration would start parsing the resolved value as though it were another name/value pair.

Fix

Removed the iteration, since only a single value can be declared at a time. An alternative fix would have been to add code to update the lastIndex of the RegExp matcher to account for the difference in length between the resolved value & the name it replaced.

@princed princed merged commit f8c2077 into princed:master Jun 4, 2025
2 checks passed
@princed
Copy link
Owner

princed commented Jun 4, 2025

Thank you so match for the PR! ❤️
Published as 4.2.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants