Repository navigation
Prevent modifying CSS variables in plugins - #16103
Conversation
philipp-spiess
left a comment
There was a problem hiding this comment.
Makes perfect sense, thanks for the contribution! Got some nit inline. Happy to take over and bring it to the finish line though. We'll also want to add a change log entry for this like Ensure CSS variables declared in JavaScript plugins don't have their casing changed or so 🙂
| // Convert camelCase to kebab-case: | ||
| // https://github.com/postcss/postcss-js/blob/b3db658b932b42f6ac14ca0b1d50f50c4569805b/parser.js#L30-L35 | ||
| name = name.replace(/([A-Z])/g, '-$1').toLowerCase() | ||
| if (!name.startsWith('--')) { |
There was a problem hiding this comment.
We have this exact same check three lines above, perhaps we can move it outside the if into a variable so we only need to do this computation once? 👍
There was a problem hiding this comment.
Another option is to refactor this a little bit:
if (!name.startsWith('--')) {
if (value === '@slot') {
ast.push(rule(name, [atRule('@slot')]))
continue
}
// Convert camelCase to kebab-case:
// https://github.com/postcss/postcss-js/blob/b3db658b932b42f6ac14ca0b1d50f50c4569805b/parser.js#L30-L35
name = name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
ast.push(decl(name, String(value)))There was a problem hiding this comment.
Went ahead and pushed this so that we can get it merged today 👍
5a25e87 to
3a4ba87
Compare
3a4ba87 to
2006445
Compare
| - Refactor gradient implementation to work around [prettier/prettier#17058](https://github.com/prettier/prettier/issues/17058) ([#16072](https://github.com/tailwindlabs/tailwindcss/pull/16072)) | ||
| - Vite: Ensure hot-reloading works with SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) | ||
| - Vite: Fix a crash when starting the development server in SolidStart setups ([#16052](https://github.com/tailwindlabs/tailwindcss/pull/16052)) | ||
| - Do not camelCase CSS custom properties ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) |
There was a problem hiding this comment.
| - Do not camelCase CSS custom properties ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) | |
| - Do not camelCase CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) |
Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Thanks for the fast response! |
closes #16100