From 60442bf490ae0bc80b839ad099014770a0def21f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 2 Oct 2024 14:30:29 +0200 Subject: [PATCH 1/5] Fix `@apply` and CSS functions inside imported files --- packages/tailwindcss/src/index.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 82c8203a5522..9f8968f269e2 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -16,7 +16,7 @@ import { applyCompatibilityHooks } from './compat/apply-compat-hooks' import type { UserConfig } from './compat/config/types' import { type Plugin } from './compat/plugin-api' import { compileCandidates } from './compile' -import { substituteFunctions, THEME_FUNCTION_INVOCATION } from './css-functions' +import { substituteFunctions } from './css-functions' import * as CSS from './css-parser' import { buildDesignSystem, type DesignSystem } from './design-system' import { Theme, ThemeOptions } from './theme' @@ -341,13 +341,9 @@ async function parseCss( } // Replace `@apply` rules with the actual utility classes. - if (css.includes('@apply')) { - substituteAtApply(ast, designSystem) - } + substituteAtApply(ast, designSystem) - if (css.includes(THEME_FUNCTION_INVOCATION)) { - substituteFunctions(ast, designSystem.resolveThemeValue) - } + substituteFunctions(ast, designSystem.resolveThemeValue) // Remove `@utility`, we couldn't replace it before yet because we had to // handle the nested `@apply` at-rules first. From 2dc7d33baadf84409f709b758f13d8dfb6aed86b Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 3 Oct 2024 11:27:08 +0200 Subject: [PATCH 2/5] Add tests --- .../tailwindcss/src/css-functions.test.ts | 34 +++++++++++++++++++ packages/tailwindcss/src/index.test.ts | 28 +++++++++++++++ packages/tailwindcss/src/test-utils/run.ts | 4 +-- 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/css-functions.test.ts b/packages/tailwindcss/src/css-functions.test.ts index 521f50009852..2e3e5f0aa378 100644 --- a/packages/tailwindcss/src/css-functions.test.ts +++ b/packages/tailwindcss/src/css-functions.test.ts @@ -901,3 +901,37 @@ describe('in JS config files', () => { `) }) }) + +test('replaces CSS theme() function with values inside imported stylesheets', async () => { + expect( + await compileCss( + css` + @theme { + --color-red-500: #f00; + } + @import './bar.css'; + `, + [], + { + async loadStylesheet() { + return { + base: '/bar.css', + content: css` + .red { + color: theme(colors.red.500); + } + `, + } + }, + }, + ), + ).toMatchInlineSnapshot(` + ":root { + --color-red-500: red; + } + + .red { + color: red; + }" + `) +}) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 06a81b2774d2..3eee033dd1aa 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -254,6 +254,34 @@ describe('@apply', () => { `) }) + it('should replace @apply with the correct result inside imported stylesheets', async () => { + expect( + await compileCss( + css` + @import './bar.css'; + @tailwind utilities; + `, + [], + { + async loadStylesheet() { + return { + base: '/bar.css', + content: css` + .foo { + @apply underline; + } + `, + } + }, + }, + ), + ).toMatchInlineSnapshot(` + ".foo { + text-decoration-line: underline; + }" + `) + }) + it('should @apply in order the utilities would be sorted in if they were used in HTML', async () => { expect( await compileCss(css` diff --git a/packages/tailwindcss/src/test-utils/run.ts b/packages/tailwindcss/src/test-utils/run.ts index d5fd54c03fbd..e8da80e3ade1 100644 --- a/packages/tailwindcss/src/test-utils/run.ts +++ b/packages/tailwindcss/src/test-utils/run.ts @@ -1,8 +1,8 @@ import { Features, transform } from 'lightningcss' import { compile } from '..' -export async function compileCss(css: string, candidates: string[] = []) { - let { build } = await compile(css) +export async function compileCss(css: string, candidates: string[] = [], options = {}) { + let { build } = await compile(css, options) return optimizeCss(build(candidates)).trim() } From 4c19923056562a42a5b3c7b94a0646f0fd1cc766 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Thu, 3 Oct 2024 11:27:57 +0200 Subject: [PATCH 3/5] Add change log --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 04b99390a9d6..9b8aa522e3f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use the right import base path when using the CLI to reading files from stdin ([#14522](https://github.com/tailwindlabs/tailwindcss/pull/14522)) - Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525)) - Editing imported CSS files should trigger a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561)) +- Make `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576)) - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512)) - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513)) - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517)) From 8df4ba0ca4e6a584f890936501531d82f65f767b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 3 Oct 2024 09:21:20 -0400 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 9b8aa522e3f4..bfba55b1d801 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,7 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use the right import base path when using the CLI to reading files from stdin ([#14522](https://github.com/tailwindlabs/tailwindcss/pull/14522)) - Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525)) - Editing imported CSS files should trigger a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561)) -- Make `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576)) +- Ensure `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576)) - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512)) - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513)) - _Experimental_: Do not wrap comment nodes in `@layer` when running codemods ([#14517](https://github.com/tailwindlabs/tailwindcss/pull/14517)) From 3e0b2c3408fb0da3e26079adc7802d80c7bcb214 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 3 Oct 2024 09:22:09 -0400 Subject: [PATCH 5/5] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bfba55b1d801..0c5773360d6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use the right import base path when using the CLI to reading files from stdin ([#14522](https://github.com/tailwindlabs/tailwindcss/pull/14522)) - Ensure that `@utility` is top-level and cannot be nested ([#14525](https://github.com/tailwindlabs/tailwindcss/pull/14525)) -- Editing imported CSS files should trigger a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561)) +- Ensure editing imported CSS files triggers a rebuild ([#14561](https://github.com/tailwindlabs/tailwindcss/pull/14561)) - Ensure `@apply` and CSS functions work inside imported stylesheets ([#14576](https://github.com/tailwindlabs/tailwindcss/pull/14576)) - _Experimental_: Improve codemod output, keep CSS after last Tailwind directive unlayered ([#14512](https://github.com/tailwindlabs/tailwindcss/pull/14512)) - _Experimental_: Fix incorrect empty `layer()` at the end of `@import` at-rules when running codemods ([#14513](https://github.com/tailwindlabs/tailwindcss/pull/14513))