diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d460d1ac346..aace62b6ebf6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure absolute `url()`s inside imported CSS files are not rebased when using `@tailwindcss/vite` - Fix issues with dev servers using Svelte 5 with the Vite plugin ([#15274](https://github.com/tailwindlabs/tailwindcss/issues/15274)) - Fix resolution of imported CSS files in Vite SSR builds ([#15279](https://github.com/tailwindlabs/tailwindcss/issues/15279)) +- 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)) ### Added diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 02ab23bea23d..50f72a13d992 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,62 @@ 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; + }" + `) +}) 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) }, } }