From 88b8a92018514af740180a9dac50e688248c51a1 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 2 Dec 2024 14:29:47 +0100 Subject: [PATCH 1/3] Postcss: Run plugin in `Once` hook --- .../@tailwindcss-postcss/src/index.test.ts | 119 +++++++++++++++++- packages/@tailwindcss-postcss/src/index.ts | 2 +- .../src/postcss-fix-relative-paths/index.ts | 6 +- 3 files changed, 121 insertions(+), 6 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 02ab23bea23d..eb1c757131b4 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -2,7 +2,6 @@ import dedent from 'dedent' import { unlink, writeFile } from 'node:fs/promises' import postcss from 'postcss' import { afterEach, beforeEach, describe, expect, test } from 'vitest' -// @ts-ignore import tailwindcss from './index' // We give this file path to PostCSS for processing. @@ -248,3 +247,121 @@ test('bail early when Tailwind is not used', async () => { }" `) }) + +test('runs `Once` plugins in the right order', async () => { + let before = '' + let after = '' + let processor = postcss([ + { + postcssPlugin: 'before', + Once(root) { + before = root.toString() + }, + }, + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + { + postcssPlugin: 'after', + Once(root) { + after = root.toString() + }, + }, + ]) + + let result = await processor.process( + css` + @theme { + --color-red-500: red; + } + .custom-css { + color: theme(--color-red-500); + } + `, + { from: inputCssFilePath() }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + ":root { + --color-red-500: red; + } + + .custom-css { + color: red; + }" + `) + expect(before).toMatchInlineSnapshot(` + "@theme { + --color-red-500: red; + } + .custom-css { + color: theme(--color-red-500); + }" + `) + expect(after).toMatchInlineSnapshot(` + ":root { + --color-red-500: red; + } + + .custom-css { + color: red; + }" + `) +}) + +test('runs `Once` plugins in the right order', async () => { + let before = '' + let after = '' + let processor = postcss([ + { + postcssPlugin: 'before', + Once(root) { + before = root.toString() + }, + }, + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + { + postcssPlugin: 'after', + Once(root) { + after = root.toString() + }, + }, + ]) + + let result = await processor.process( + css` + @theme { + --color-red-500: red; + } + .custom-css { + color: theme(--color-red-500); + } + `, + { from: inputCssFilePath() }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + ":root { + --color-red-500: red; + } + + .custom-css { + color: red; + }" + `) + expect(before).toMatchInlineSnapshot(` + "@theme { + --color-red-500: red; + } + .custom-css { + color: theme(--color-red-500); + }" + `) + expect(after).toMatchInlineSnapshot(` + ":root { + --color-red-500: red; + } + + .custom-css { + color: red; + }" + `) +}) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 6720dfea0fd8..a1759f9f4c69 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -55,7 +55,7 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { { postcssPlugin: 'tailwindcss', - async OnceExit(root, { result }) { + async Once(root, { result }) { env.DEBUG && console.time('[@tailwindcss/postcss] Total time in @tailwindcss/postcss') let inputFile = result.opts.from ?? '' let context = getContextFromCache(inputFile, opts) diff --git a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts index 2b88014a3e85..68dcb5551b7d 100644 --- a/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts +++ b/packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts @@ -67,10 +67,8 @@ export default function fixRelativePathsPlugin(): Plugin { return { postcssPlugin: 'tailwindcss-postcss-fix-relative-paths', - AtRule: { - source: fixRelativePath, - plugin: fixRelativePath, - config: fixRelativePath, + Once(root) { + root.walkAtRules(/source|plugin|config/, fixRelativePath) }, } } From af29b989997b69cde6c3e8bb2a6718bbfd3fd90c Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 2 Dec 2024 14:59:32 +0100 Subject: [PATCH 2/3] Add changelog --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14cc77dbfb59..5b94608cc153 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Ensure other plugins can run after `@tailwindcss/postcss` ([#15273](https://github.com/tailwindlabs/tailwindcss/pull/15273)) +- Rebase `url()` inside imported CSS files when using Vite with the `@tailwindcss/postcss` extension ([#15273](https://github.com/tailwindlabs/tailwindcss/pull/15273)) ## [4.0.0-beta.4] - 2024-11-29 From 9b9d404b03abc5b18add5947d54b47a9ee5748c7 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 2 Dec 2024 14:21:36 -0500 Subject: [PATCH 3/3] Remove duplicate test --- .../@tailwindcss-postcss/src/index.test.ts | 59 ------------------- 1 file changed, 59 deletions(-) diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index eb1c757131b4..50f72a13d992 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -306,62 +306,3 @@ test('runs `Once` plugins in the right order', async () => { }" `) }) - -test('runs `Once` plugins in the right order', async () => { - let before = '' - let after = '' - let processor = postcss([ - { - postcssPlugin: 'before', - Once(root) { - before = root.toString() - }, - }, - tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), - { - postcssPlugin: 'after', - Once(root) { - after = root.toString() - }, - }, - ]) - - let result = await processor.process( - css` - @theme { - --color-red-500: red; - } - .custom-css { - color: theme(--color-red-500); - } - `, - { from: inputCssFilePath() }, - ) - - expect(result.css.trim()).toMatchInlineSnapshot(` - ":root { - --color-red-500: red; - } - - .custom-css { - color: red; - }" - `) - expect(before).toMatchInlineSnapshot(` - "@theme { - --color-red-500: red; - } - .custom-css { - color: theme(--color-red-500); - }" - `) - expect(after).toMatchInlineSnapshot(` - ":root { - --color-red-500: red; - } - - .custom-css { - color: red; - }" - `) -})