Prevent modifying CSS variables in plugins #16103
Conversation
siriwatknp
changed the title
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 👍
RobinMalfait
force-pushed
the
fix/plugin-css-variables2
branch
from
5a25e87 to
3a4ba87
Compare
RobinMalfait
force-pushed
the
fix/plugin-css-variables2
branch
from
3a4ba87 to
2006445
Compare
CHANGELOG.md
Outdated
| @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 | |||
| - 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