search

MadLittleMods / postcss-css-variables

PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation
https://madlittlemods.github.io/postcss-css-variables/playground/
Other
536 stars 62 forks source link

Escaped Class Names Using Vars Incorrectly Set to `undefined` #137

Open shellscape opened 7 months ago

shellscape commented 7 months ago

Consider the following CSS:

.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\] {
  --un-url: url(https://example.com/image.png); background-image:var(--un-url);
}

The output from running the plugin is:

.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\] {
  background-image:undefined;
}
.bg-\\[url\\(https\\:\\/\\/example\\.com\\/image\\.png\\)\\]:\\/\\/example\\.com\\/image\\.png\\)\\]{
  background-image:url(https://example.com/image.png);
}

The plugin seems to have an issue with escaping, or a variable directly following escaping.

shellscape commented 7 months ago

This https://github.com/resendlabs/react-email/blob/3be21ad8a8f073d4e1a61c3ee94d40522c769674/patches/postcss-css-variables%400.19.0.patch#L4 seems to be a patch for the issue.

shellscape commented 7 months ago

Here's an additional reproduction set:

Input: .xl\\:bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));}

Expected: .xl\\:bg-green-500{background-color:rgb(34 197 94 / 1);}

Actual: .xl\\:bg-green-500{background-color:undefined}.xl\\:bg-green-500:bg-green-500{background-color:rgb(34 197 94/1)}