From 479f5d5770bb85e737301e1b2880988249762a5e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Jan 2025 13:40:52 +0100 Subject: [PATCH 1/6] add failing test --- .../@tailwindcss-postcss/src/index.test.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 97eedb95d183..6a2681dd5d3f 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -248,6 +248,33 @@ test('bail early when Tailwind is not used', async () => { `) }) +test('handle CSS when only using a `@reference` (we should not bail early)', async () => { + let processor = postcss([ + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + ]) + + let result = await processor.process( + css` + @reference "tailwindcss/theme.css"; + + foo { + @variant md { + bar: baz; + } + } + `, + { from: inputCssFilePath() }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + "@media (width >= 48rem) { + foo { + bar: baz; + } + }" + `) +}) + test('runs `Once` plugins in the right order', async () => { let before = '' let after = '' From 2173c810a838a3759b3253ee59dd14370b464212 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Jan 2025 13:41:02 +0100 Subject: [PATCH 2/6] ensure we process Tailwind CSS when using `@reference` --- packages/@tailwindcss-postcss/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 084f3671586f..15df096e18b7 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -77,6 +77,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { root.walkAtRules((node) => { if ( node.name === 'import' || + node.name === 'reference' || node.name === 'theme' || node.name === 'config' || node.name === 'plugin' || From 7637fe253f19609999d32ae877f5259f7a3973c6 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Jan 2025 13:44:42 +0100 Subject: [PATCH 3/6] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e3481c52a7ba..001bd5c45c8d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020)) +- Ensure we process Tailwind CSS features when only using `@reference` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057)) ## [4.0.1] - 2025-01-29 From a03ee510590c282da8b81c71bb6d0d8690075398 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Jan 2025 16:20:52 +0100 Subject: [PATCH 4/6] add failing test for `@variant` --- .../@tailwindcss-postcss/src/index.test.ts | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 6a2681dd5d3f..97eee3c1c5f0 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -257,7 +257,7 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy css` @reference "tailwindcss/theme.css"; - foo { + .foo { @variant md { bar: baz; } @@ -268,13 +268,36 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy expect(result.css.trim()).toMatchInlineSnapshot(` "@media (width >= 48rem) { - foo { + .foo { bar: baz; } }" `) }) +test('handle CSS when using a `@variant` using variants that do not rely on the `@theme`', async () => { + let processor = postcss([ + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + ]) + + let result = await processor.process( + css` + .foo { + @variant data-is-hoverable { + bar: baz; + } + } + `, + { from: inputCssFilePath() }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + ".foo[data-is-hoverable] { + bar: baz; + }" + `) +}) + test('runs `Once` plugins in the right order', async () => { let before = '' let after = '' From 6e3cbac421157862ffae8070ef441186aa7156a3 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 30 Jan 2025 16:21:04 +0100 Subject: [PATCH 5/6] ensure `@variant` also triggers processing Tailwind CSS --- packages/@tailwindcss-postcss/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 15df096e18b7..d027fbd9ca67 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -79,6 +79,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { node.name === 'import' || node.name === 'reference' || node.name === 'theme' || + node.name === 'variant' || node.name === 'config' || node.name === 'plugin' || node.name === 'apply' From d3d297b6285bd40a760e10811c19fe30f74c5812 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 30 Jan 2025 16:26:28 +0100 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 001bd5c45c8d..c13589a9d1e4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Only generate positive `grid-cols-*` and `grid-rows-*` utilities ([#16020](https://github.com/tailwindlabs/tailwindcss/pull/16020)) -- Ensure we process Tailwind CSS features when only using `@reference` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057)) +- Ensure we process Tailwind CSS features when only using `@reference` or `@variant` ([#16057](https://github.com/tailwindlabs/tailwindcss/pull/16057)) ## [4.0.1] - 2025-01-29