From 578a63dc4aa0453cc2b3d3caad92d34723142bf9 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 31 Jan 2025 16:15:27 +0700 Subject: [PATCH 1/5] prevent modifying CSS variables in plugins --- .../tailwindcss/src/compat/plugin-api.test.ts | 32 +++++++++++++++++++ packages/tailwindcss/src/compat/plugin-api.ts | 8 +++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/compat/plugin-api.test.ts b/packages/tailwindcss/src/compat/plugin-api.test.ts index 539c04a3c66c..4502118f458f 100644 --- a/packages/tailwindcss/src/compat/plugin-api.test.ts +++ b/packages/tailwindcss/src/compat/plugin-api.test.ts @@ -1534,6 +1534,38 @@ describe('addBase', () => { " `) }) + + test('does not modify CSS variables', async () => { + let input = css` + @plugin "my-plugin"; + ` + + let compiler = await compile(input, { + loadModule: async () => ({ + module: plugin(function ({ addBase }) { + addBase({ + ':root': { + '--PascalCase': '1', + '--camelCase': '1', + '--UPPERCASE': '1', + }, + }) + }), + base: '/root', + }), + }) + + expect(compiler.build([])).toMatchInlineSnapshot(` + "@layer base { + :root { + --PascalCase: 1; + --camelCase: 1; + --UPPERCASE: 1; + } + } + " + `) + }) }) describe('addVariant', () => { diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index 13673280769b..b72cfc7af6fd 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -502,9 +502,11 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] { if (!name.startsWith('--') && value === '@slot') { ast.push(rule(name, [atRule('@slot')])) } else { - // 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('--')) { + // 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))) } From be267f61c81d252cd22f562c317a15fb019846eb Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Jan 2025 12:11:09 +0100 Subject: [PATCH 2/5] small refactor: only check for `--` once --- packages/tailwindcss/src/compat/plugin-api.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index b72cfc7af6fd..8db4d68973fb 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -499,17 +499,18 @@ export function objectToAst(rules: CssInJs | CssInJs[]): AstNode[] { for (let [name, value] of entries) { if (typeof value !== 'object') { - if (!name.startsWith('--') && value === '@slot') { - ast.push(rule(name, [atRule('@slot')])) - } else { - if (!name.startsWith('--')) { - // 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('--')) { + if (value === '@slot') { + ast.push(rule(name, [atRule('@slot')])) + continue } - ast.push(decl(name, String(value))) + // 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))) } else if (Array.isArray(value)) { for (let item of value) { if (typeof item === 'string') { From 20064451c47ef5ae1e3840f74b6becf00bd180a4 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Jan 2025 12:21:23 +0100 Subject: [PATCH 3/5] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 82bb2a70551c..3daa33eb4ce6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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)) ## [4.0.1] - 2025-01-29 From 875268ec0e2da27a5fb29d74b4fec5ec39effd94 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Jan 2025 12:23:21 +0100 Subject: [PATCH 4/5] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3daa33eb4ce6..c8f85bc50a7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +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)) +- Prevent camelCasing CSS custom properties ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) ## [4.0.1] - 2025-01-29 From bf1fe352dc57314150df3dafe0bb63072be19be3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Jan 2025 12:23:53 +0100 Subject: [PATCH 5/5] Update CHANGELOG.md Co-authored-by: Philipp Spiess --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c8f85bc50a7f..7a95136a0e91 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +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)) -- Prevent camelCasing CSS custom properties ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) +- Prevent camelCasing CSS custom properties added by JavaScript plugins ([#16103](https://github.com/tailwindlabs/tailwindcss/pull/16103)) ## [4.0.1] - 2025-01-29