From fb77ed6fa4e26aee74cc0f295d3697740a39f2c7 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 8 Jul 2024 14:42:31 -0400 Subject: [PATCH 01/17] Add basic `addVariant` plugin support --- packages/tailwindcss/src/design-system.ts | 18 ++++++- packages/tailwindcss/src/index.test.ts | 57 ++++++++++++++++++++++- packages/tailwindcss/src/index.ts | 25 ++++++++-- 3 files changed, 94 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index bebd82a33c23..bf726188c4f5 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -1,4 +1,4 @@ -import { toCss } from './ast' +import { rule, toCss } from './ast' import { parseCandidate, parseVariant } from './candidate' import { compileAstNodes, compileCandidates } from './compile' import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense' @@ -8,6 +8,10 @@ import { Utilities, createUtilities } from './utilities' import { DefaultMap } from './utils/default-map' import { Variants, createVariants } from './variants' +export type Plugin = (api: { + addVariant: (name: string, selector: string | string[]) => void +}) => void + export type DesignSystem = { theme: Theme utilities: Utilities @@ -25,7 +29,7 @@ export type DesignSystem = { getUsedVariants(): ReturnType[] } -export function buildDesignSystem(theme: Theme): DesignSystem { +export function buildDesignSystem(theme: Theme, plugins: Plugin[] = []): DesignSystem { let utilities = createUtilities(theme) let variants = createVariants(theme) @@ -77,5 +81,15 @@ export function buildDesignSystem(theme: Theme): DesignSystem { }, } + for (let plugin of plugins) { + plugin({ + addVariant: (name: any, selectors: string | string[]) => { + variants.static(name, (r) => { + r.nodes = ([] as string[]).concat(selectors).map((selector) => rule(selector, r.nodes)) + }) + }, + }) + } + return designSystem } diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 89f1918fff1a..0b1e134d5ad8 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1,7 +1,8 @@ import fs from 'node:fs' import path from 'node:path' import { describe, expect, it, test } from 'vitest' -import { compileCss, run } from './test-utils/run' +import { compile } from '.' +import { compileCss, optimizeCss, run } from './test-utils/run' const css = String.raw @@ -1123,3 +1124,57 @@ describe('Parsing themes values from CSS', () => { ) }) }) + +describe('plugins', () => { + test('addVariant with string selector', () => { + let compiled = compile( + css` + @plugin "my-plugin"; + @layer utilities { + @tailwind utilities; + } + `, + { + loadPlugin: () => { + return ({ addVariant }) => { + addVariant('hocus', '&:hover, &:focus') + } + }, + }, + ).build(['hocus:underline']) + + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + "@layer utilities { + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; + } + }" + `) + }) + + test('addVariant with array of selectors', () => { + let compiled = compile( + css` + @plugin "my-plugin"; + @layer utilities { + @tailwind utilities; + } + `, + { + loadPlugin: () => { + return ({ addVariant }) => { + addVariant('hocus', ['&:hover', '&:focus']) + } + }, + }, + ).build(['hocus:underline']) + + expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` + "@layer utilities { + .hocus\\:underline:hover, .hocus\\:underline:focus { + text-decoration-line: underline; + } + }" + `) + }) +}) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 34a095584944..646744744b67 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -2,10 +2,21 @@ import { version } from '../package.json' import { WalkAction, comment, decl, rule, toCss, walk, type AstNode, type Rule } from './ast' import { compileCandidates } from './compile' import * as CSS from './css-parser' -import { buildDesignSystem } from './design-system' +import { buildDesignSystem, type Plugin } from './design-system' import { Theme } from './theme' -export function compile(css: string): { +type CompileOptions = { + loadPlugin?: (path: string) => Plugin +} + +function throwOnPlugin(): never { + throw new Error('No `loadPlugin` function provided to `compile`') +} + +export function compile( + css: string, + { loadPlugin = throwOnPlugin }: CompileOptions = {}, +): { build(candidates: string[]): string } { let ast = CSS.parse(css) @@ -22,12 +33,19 @@ export function compile(css: string): { // Find all `@theme` declarations let theme = new Theme() + let pluginPaths: string[] = [] let firstThemeRule: Rule | null = null let keyframesRules: Rule[] = [] walk(ast, (node, { replaceWith }) => { if (node.kind !== 'rule') return + // Collect paths from `@plugin` at-rules + if (node.selector.startsWith('@plugin ')) { + pluginPaths.push(node.selector.slice(9, -1)) + replaceWith([]) + } + // Drop instances of `@media reference` // // We support `@import "tailwindcss/theme" reference` as a way to import an external theme file @@ -125,7 +143,8 @@ export function compile(css: string): { firstThemeRule.nodes = nodes } - let designSystem = buildDesignSystem(theme) + let plugins = pluginPaths.map(loadPlugin) + let designSystem = buildDesignSystem(theme, plugins) let tailwindUtilitiesNode: Rule | null = null From 08a59cdaed7ac137325adadfb196dea120133540 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Mon, 8 Jul 2024 17:38:52 -0400 Subject: [PATCH 02/17] Return early --- packages/tailwindcss/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 646744744b67..c5dc1b6c8b56 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -44,6 +44,7 @@ export function compile( if (node.selector.startsWith('@plugin ')) { pluginPaths.push(node.selector.slice(9, -1)) replaceWith([]) + return } // Drop instances of `@media reference` From 6a24e7da22b47480d0d4e373d6a916743401b00c Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:26:53 -0400 Subject: [PATCH 03/17] Load plugins right away instead later --- packages/tailwindcss/src/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index c5dc1b6c8b56..e15d9926bb4f 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -33,7 +33,7 @@ export function compile( // Find all `@theme` declarations let theme = new Theme() - let pluginPaths: string[] = [] + let plugins: Plugin[] = [] let firstThemeRule: Rule | null = null let keyframesRules: Rule[] = [] @@ -42,7 +42,7 @@ export function compile( // Collect paths from `@plugin` at-rules if (node.selector.startsWith('@plugin ')) { - pluginPaths.push(node.selector.slice(9, -1)) + plugins.push(loadPlugin(node.selector.slice(9, -1))) replaceWith([]) return } @@ -144,7 +144,6 @@ export function compile( firstThemeRule.nodes = nodes } - let plugins = pluginPaths.map(loadPlugin) let designSystem = buildDesignSystem(theme, plugins) let tailwindUtilitiesNode: Rule | null = null From d7b444c20ef05cd96dd6ea73a8f724ddbd80bea9 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:30:59 -0400 Subject: [PATCH 04/17] Use correct type for variant name --- packages/tailwindcss/src/design-system.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts index bf726188c4f5..494b7bd53c15 100644 --- a/packages/tailwindcss/src/design-system.ts +++ b/packages/tailwindcss/src/design-system.ts @@ -83,7 +83,7 @@ export function buildDesignSystem(theme: Theme, plugins: Plugin[] = []): DesignS for (let plugin of plugins) { plugin({ - addVariant: (name: any, selectors: string | string[]) => { + addVariant: (name: string, selectors: string | string[]) => { variants.static(name, (r) => { r.nodes = ([] as string[]).concat(selectors).map((selector) => rule(selector, r.nodes)) }) From ed1a55a6fe5c106d4461dbf8c4c63ce729b18429 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:17:51 -0400 Subject: [PATCH 05/17] Preliminary support for addVariant plugins in PostCSS plugin --- packages/@tailwindcss-postcss/package.json | 3 +- .../src/fixtures/example-project/index.html | 2 +- .../src/fixtures/example-project/plugin.js | 4 ++ .../@tailwindcss-postcss/src/index.test.ts | 62 +++++++++++++++++++ packages/@tailwindcss-postcss/src/index.ts | 11 +++- packages/test-utils/index.js | 4 ++ packages/test-utils/package.json | 5 ++ 7 files changed, 88 insertions(+), 3 deletions(-) create mode 100644 packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js create mode 100644 packages/test-utils/index.js create mode 100644 packages/test-utils/package.json diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 431fbc6c8a69..02b934764b3a 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -38,6 +38,7 @@ "devDependencies": { "@types/node": "^20.12.12", "@types/postcss-import": "^14.0.3", - "postcss": "8.4.24" + "postcss": "8.4.24", + "tailwindcss-test-utils": "workspace:^" } } diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html b/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html index 30d3c6684dcd..9d8328479188 100644 --- a/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html +++ b/packages/@tailwindcss-postcss/src/fixtures/example-project/index.html @@ -1 +1 @@ -
+
diff --git a/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js b/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js new file mode 100644 index 000000000000..0852126714ec --- /dev/null +++ b/packages/@tailwindcss-postcss/src/fixtures/example-project/plugin.js @@ -0,0 +1,4 @@ +module.exports = function ({ addVariant }) { + addVariant('inverted', '@media (inverted-colors: inverted)') + addVariant('hocus', ['&:focus', '&:hover']) +} diff --git a/packages/@tailwindcss-postcss/src/index.test.ts b/packages/@tailwindcss-postcss/src/index.test.ts index 8896d255c8bd..ffc2818e47cc 100644 --- a/packages/@tailwindcss-postcss/src/index.test.ts +++ b/packages/@tailwindcss-postcss/src/index.test.ts @@ -134,3 +134,65 @@ describe('processing without specifying a base path', () => { }) }) }) + +describe('plugins', () => { + test('local CJS plugin', async () => { + let processor = postcss([ + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + ]) + + let result = await processor.process( + css` + @import 'tailwindcss/utilities'; + @plugin 'tailwindcss-test-utils'; + `, + { from: INPUT_CSS_PATH }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + ".underline { + text-decoration-line: underline; + } + + @media (inverted-colors: inverted) { + .inverted\\:flex { + display: flex; + } + } + + .hocus\\:underline:focus, .hocus\\:underline:hover { + text-decoration-line: underline; + }" + `) + }) + + test('published CJS plugin', async () => { + let processor = postcss([ + tailwindcss({ base: `${__dirname}/fixtures/example-project`, optimize: { minify: false } }), + ]) + + let result = await processor.process( + css` + @import 'tailwindcss/utilities'; + @plugin 'tailwindcss-test-utils'; + `, + { from: INPUT_CSS_PATH }, + ) + + expect(result.css.trim()).toMatchInlineSnapshot(` + ".underline { + text-decoration-line: underline; + } + + @media (inverted-colors: inverted) { + .inverted\\:flex { + display: flex; + } + } + + .hocus\\:underline:focus, .hocus\\:underline:hover { + text-decoration-line: underline; + }" + `) + }) +}) diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 6ccaff3f0bd8..9c51724b7172 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -1,6 +1,7 @@ import { scanDir } from '@tailwindcss/oxide' import fs from 'fs' import { Features, transform } from 'lightningcss' +import path from 'path' import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss' import postcssImport from 'postcss-import' import { compile } from 'tailwindcss' @@ -130,7 +131,15 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } if (rebuildStrategy === 'full') { - let { build } = compile(root.toString()) + let basePath = path.dirname(path.resolve(inputFile)) + let { build } = compile(root.toString(), { + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + return require(pluginPath) + }, + }) context.build = build css = build(hasTailwind ? candidates : []) } else if (rebuildStrategy === 'incremental') { diff --git a/packages/test-utils/index.js b/packages/test-utils/index.js new file mode 100644 index 000000000000..0852126714ec --- /dev/null +++ b/packages/test-utils/index.js @@ -0,0 +1,4 @@ +module.exports = function ({ addVariant }) { + addVariant('inverted', '@media (inverted-colors: inverted)') + addVariant('hocus', ['&:focus', '&:hover']) +} diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json new file mode 100644 index 000000000000..152589ba94c1 --- /dev/null +++ b/packages/test-utils/package.json @@ -0,0 +1,5 @@ +{ + "name": "tailwindcss-test-utils", + "private": true, + "main": "index.js" +} From ef54618302f8c5a77b157d572b1f7354012ccb57 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 12:45:11 -0400 Subject: [PATCH 06/17] Add test for compounding plugin variants --- packages/tailwindcss/src/index.test.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 0b1e134d5ad8..0b8d184832df 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -1167,10 +1167,14 @@ describe('plugins', () => { } }, }, - ).build(['hocus:underline']) + ).build(['hocus:underline', 'group-hocus:flex']) expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(` "@layer utilities { + .group-hocus\\:flex:is(:where(.group):hover *), .group-hocus\\:flex:is(:where(.group):focus *) { + display: flex; + } + .hocus\\:underline:hover, .hocus\\:underline:focus { text-decoration-line: underline; } From 6b937ea9be3ec6199d7f55cdd127c002647377e4 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:27:38 -0400 Subject: [PATCH 07/17] Add basic `loadPlugin` support to Vite plugin --- packages/@tailwindcss-vite/src/index.ts | 20 ++++++++++++++------ playgrounds/vite/src/app.css | 1 + playgrounds/vite/src/app.tsx | 1 + playgrounds/vite/src/plugin.js | 4 ++++ 4 files changed, 20 insertions(+), 6 deletions(-) create mode 100644 playgrounds/vite/src/plugin.js diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 79b94d9faeec..5939ce836b6b 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -72,12 +72,20 @@ export default function tailwindcss(): Plugin[] { return updated } - function generateCss(css: string) { - return compile(css).build(Array.from(candidates)) + function generateCss(css: string, inputPath: string) { + let basePath = path.dirname(path.resolve(inputPath)) + return compile(css, { + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + return require(pluginPath) + }, + }).build(Array.from(candidates)) } - function generateOptimizedCss(css: string) { - return optimizeCss(generateCss(css), { minify }) + function generateOptimizedCss(css: string, inputPath: string) { + return optimizeCss(generateCss(css, inputPath), { minify }) } // Manually run the transform functions of non-Tailwind plugins on the given CSS @@ -189,7 +197,7 @@ export default function tailwindcss(): Plugin[] { await server?.waitForRequestsIdle?.(id) } - let code = await transformWithPlugins(this, id, generateCss(src)) + let code = await transformWithPlugins(this, id, generateCss(src, id)) return { code } }, }, @@ -213,7 +221,7 @@ export default function tailwindcss(): Plugin[] { continue } - let css = generateOptimizedCss(file.content) + let css = generateOptimizedCss(file.content, id) // These plugins have side effects which, during build, results in CSS // being written to the output dir. We need to run them here to ensure diff --git a/playgrounds/vite/src/app.css b/playgrounds/vite/src/app.css index d4b5078586e2..adbd8e19f9b0 100644 --- a/playgrounds/vite/src/app.css +++ b/playgrounds/vite/src/app.css @@ -1 +1,2 @@ @import 'tailwindcss'; +@plugin "./plugin.js"; diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx index ab1808bf7125..285bd41439de 100644 --- a/playgrounds/vite/src/app.tsx +++ b/playgrounds/vite/src/app.tsx @@ -4,6 +4,7 @@ export function App() { return (

Hello World

+
) diff --git a/playgrounds/vite/src/plugin.js b/playgrounds/vite/src/plugin.js new file mode 100644 index 000000000000..0852126714ec --- /dev/null +++ b/playgrounds/vite/src/plugin.js @@ -0,0 +1,4 @@ +module.exports = function ({ addVariant }) { + addVariant('inverted', '@media (inverted-colors: inverted)') + addVariant('hocus', ['&:focus', '&:hover']) +} From 1bf9a0a4fd768eb48af7a6f9bbd7a99e2b4dfce8 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:27:46 -0400 Subject: [PATCH 08/17] Add basic `loadPlugin` support to CLI --- .../@tailwindcss-cli/src/commands/build/index.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index f739dd7fa836..c07ee467f4c8 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -6,7 +6,7 @@ import fs from 'node:fs/promises' import path from 'node:path' import postcss from 'postcss' import atImport from 'postcss-import' -import { compile } from 'tailwindcss' +import * as tailwindcss from 'tailwindcss' import type { Arg, Result } from '../../utils/args' import { eprintln, @@ -124,6 +124,20 @@ export async function handle(args: Result>) { } } + let basePath = + args['--input'] && args['--input'] !== '-' ? path.dirname(args['--input']) : process.cwd() + + function compile(css: string) { + return tailwindcss.compile(css, { + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + return require(pluginPath) + }, + }) + } + // Compile the input let { build } = compile(input) From b24502b7bd22de7449f5e754efa507df18aecb61 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 16:34:09 +0200 Subject: [PATCH 09/17] add `io.ts` for integrations --- packages/tailwindcss/package.json | 10 ++++++++++ packages/tailwindcss/src/io.ts | 11 +++++++++++ packages/tailwindcss/tsup.config.ts | 1 + 3 files changed, 22 insertions(+) create mode 100644 packages/tailwindcss/src/io.ts diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 696115eb0a1d..1c2e8c3f4940 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -23,6 +23,11 @@ "require": "./dist/lib.js", "import": "./src/index.ts" }, + "./io": { + "types": "./src/io.ts", + "require": "./dist/io.js", + "import": "./src/io.ts" + }, "./package.json": "./package.json", "./index.css": "./index.css", "./index": "./index.css", @@ -43,6 +48,11 @@ "require": "./dist/lib.js", "import": "./dist/lib.mjs" }, + "./io": { + "types": "./dist/io.d.mts", + "require": "./dist/io.js", + "import": "./dist/io.mjs" + }, "./package.json": "./package.json", "./index.css": "./index.css", "./index": "./index.css", diff --git a/packages/tailwindcss/src/io.ts b/packages/tailwindcss/src/io.ts new file mode 100644 index 000000000000..21f02af01f12 --- /dev/null +++ b/packages/tailwindcss/src/io.ts @@ -0,0 +1,11 @@ +import path from 'node:path' + +export function loadPlugin(basePath: string) { + return (pluginPath: string) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + + return require(pluginPath) + } +} diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts index 8e19667be37e..5f7beac509b5 100644 --- a/packages/tailwindcss/tsup.config.ts +++ b/packages/tailwindcss/tsup.config.ts @@ -7,5 +7,6 @@ export default defineConfig({ dts: true, entry: { lib: 'src/index.ts', + io: 'src/io.ts', }, }) From ead6b1bb1998379c148a10e8373950f3090e2307 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 16:39:10 +0200 Subject: [PATCH 10/17] use shared `loadPlugin` from `tailwindcss/io` --- packages/@tailwindcss-cli/src/commands/build/index.ts | 11 +++-------- packages/@tailwindcss-postcss/src/index.ts | 10 ++-------- packages/@tailwindcss-vite/src/index.ts | 9 ++------- packages/tailwindcss/src/io.ts | 4 +++- 4 files changed, 10 insertions(+), 24 deletions(-) diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index c07ee467f4c8..a1460b85068d 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -7,6 +7,7 @@ import path from 'node:path' import postcss from 'postcss' import atImport from 'postcss-import' import * as tailwindcss from 'tailwindcss' +import { loadPlugin } from 'tailwindcss/io' import type { Arg, Result } from '../../utils/args' import { eprintln, @@ -124,17 +125,11 @@ export async function handle(args: Result>) { } } - let basePath = - args['--input'] && args['--input'] !== '-' ? path.dirname(args['--input']) : process.cwd() + let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd() function compile(css: string) { return tailwindcss.compile(css, { - loadPlugin: (pluginPath) => { - if (pluginPath[0] === '.') { - return require(path.resolve(basePath, pluginPath)) - } - return require(pluginPath) - }, + loadPlugin: loadPlugin(inputFile), }) } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 9c51724b7172..64056c6e190a 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -1,10 +1,10 @@ import { scanDir } from '@tailwindcss/oxide' import fs from 'fs' import { Features, transform } from 'lightningcss' -import path from 'path' import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss' import postcssImport from 'postcss-import' import { compile } from 'tailwindcss' +import { loadPlugin } from 'tailwindcss/io' /** * A Map that can generate default values for keys that don't exist. @@ -131,14 +131,8 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } if (rebuildStrategy === 'full') { - let basePath = path.dirname(path.resolve(inputFile)) let { build } = compile(root.toString(), { - loadPlugin: (pluginPath) => { - if (pluginPath[0] === '.') { - return require(path.resolve(basePath, pluginPath)) - } - return require(pluginPath) - }, + loadPlugin: loadPlugin(inputFile), }) context.build = build css = build(hasTailwind ? candidates : []) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 5939ce836b6b..334fc4cc7fc9 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -2,6 +2,7 @@ import { IO, Parsing, scanFiles } from '@tailwindcss/oxide' import { Features, transform } from 'lightningcss' import path from 'path' import { compile } from 'tailwindcss' +import { loadPlugin } from 'tailwindcss/io' import type { Plugin, Rollup, Update, ViteDevServer } from 'vite' export default function tailwindcss(): Plugin[] { @@ -73,14 +74,8 @@ export default function tailwindcss(): Plugin[] { } function generateCss(css: string, inputPath: string) { - let basePath = path.dirname(path.resolve(inputPath)) return compile(css, { - loadPlugin: (pluginPath) => { - if (pluginPath[0] === '.') { - return require(path.resolve(basePath, pluginPath)) - } - return require(pluginPath) - }, + loadPlugin: loadPlugin(inputPath), }).build(Array.from(candidates)) } diff --git a/packages/tailwindcss/src/io.ts b/packages/tailwindcss/src/io.ts index 21f02af01f12..c642e5853d51 100644 --- a/packages/tailwindcss/src/io.ts +++ b/packages/tailwindcss/src/io.ts @@ -1,6 +1,8 @@ import path from 'node:path' -export function loadPlugin(basePath: string) { +export function loadPlugin(inputFile: string) { + let basePath = path.dirname(path.resolve(inputFile)) + return (pluginPath: string) => { if (pluginPath[0] === '.') { return require(path.resolve(basePath, pluginPath)) From 232b387b9121c590d9661bf8a3e25c4194304416 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 17:47:19 +0200 Subject: [PATCH 11/17] add `tailwindcss-test-utils` to `@tailwindcss/cli` and `@tailwindcss/vite` --- packages/@tailwindcss-cli/package.json | 3 ++- packages/@tailwindcss-vite/package.json | 3 ++- pnpm-lock.yaml | 27 +++++++++++++++++++------ 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 5c1d5263c166..2975930382e0 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -39,6 +39,7 @@ "tailwindcss": "workspace:^" }, "devDependencies": { - "@types/postcss-import": "^14.0.3" + "@types/postcss-import": "^14.0.3", + "tailwindcss-test-utils": "workspace:^" } } diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 7a4397a02acb..3bc902ce7420 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -34,7 +34,8 @@ }, "devDependencies": { "@types/node": "^20.12.12", - "vite": "^5.2.11" + "vite": "^5.2.11", + "tailwindcss-test-utils": "workspace:^" }, "peerDependencies": { "vite": "^5.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bc809381bd8b..f438ecf48920 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,6 +131,9 @@ importers: '@types/postcss-import': specifier: ^14.0.3 version: 14.0.3 + tailwindcss-test-utils: + specifier: workspace:^ + version: link:../test-utils packages/@tailwindcss-postcss: dependencies: @@ -156,6 +159,9 @@ importers: postcss: specifier: 8.4.24 version: 8.4.24 + tailwindcss-test-utils: + specifier: workspace:^ + version: link:../test-utils packages/@tailwindcss-vite: dependencies: @@ -172,6 +178,9 @@ importers: '@types/node': specifier: ^20.12.12 version: 20.12.12 + tailwindcss-test-utils: + specifier: workspace:^ + version: link:../test-utils vite: specifier: ^5.2.11 version: 5.2.11(@types/node@20.12.12)(lightningcss@1.25.1) @@ -188,6 +197,8 @@ importers: specifier: ^1.25.1 version: 1.25.1 + packages/test-utils: {} + playgrounds/nextjs: dependencies: '@tailwindcss/postcss': @@ -675,6 +686,7 @@ packages: '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} + deprecated: Use @eslint/config-array instead '@humanwhocodes/module-importer@1.0.1': resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} @@ -682,6 +694,7 @@ packages: '@humanwhocodes/object-schema@2.0.3': resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} + deprecated: Use @eslint/object-schema instead '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} @@ -1678,6 +1691,7 @@ packages: glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} @@ -2444,6 +2458,7 @@ packages: rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} + deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true rollup@4.18.0: @@ -4083,7 +4098,7 @@ snapshots: '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.34.1(eslint@8.57.0) @@ -4102,12 +4117,12 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 4.3.4 enhanced-resolve: 5.16.1 eslint: 8.57.0 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.5 @@ -4119,14 +4134,14 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.4.5) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -4140,7 +4155,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 From 39e66c46e9e0301c0d28660bad06f67941568b16 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 17:55:46 +0200 Subject: [PATCH 12/17] only add `tailwindcss-test-utils` to `tailwindcss` as a dev dependency Because `src/io.ts` is requiring the plugin. --- packages/@tailwindcss-cli/package.json | 3 +-- packages/@tailwindcss-postcss/package.json | 3 +-- packages/@tailwindcss-vite/package.json | 3 +-- packages/tailwindcss/package.json | 3 ++- pnpm-lock.yaml | 12 +++--------- 5 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/@tailwindcss-cli/package.json b/packages/@tailwindcss-cli/package.json index 2975930382e0..5c1d5263c166 100644 --- a/packages/@tailwindcss-cli/package.json +++ b/packages/@tailwindcss-cli/package.json @@ -39,7 +39,6 @@ "tailwindcss": "workspace:^" }, "devDependencies": { - "@types/postcss-import": "^14.0.3", - "tailwindcss-test-utils": "workspace:^" + "@types/postcss-import": "^14.0.3" } } diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 02b934764b3a..431fbc6c8a69 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -38,7 +38,6 @@ "devDependencies": { "@types/node": "^20.12.12", "@types/postcss-import": "^14.0.3", - "postcss": "8.4.24", - "tailwindcss-test-utils": "workspace:^" + "postcss": "8.4.24" } } diff --git a/packages/@tailwindcss-vite/package.json b/packages/@tailwindcss-vite/package.json index 3bc902ce7420..7a4397a02acb 100644 --- a/packages/@tailwindcss-vite/package.json +++ b/packages/@tailwindcss-vite/package.json @@ -34,8 +34,7 @@ }, "devDependencies": { "@types/node": "^20.12.12", - "vite": "^5.2.11", - "tailwindcss-test-utils": "workspace:^" + "vite": "^5.2.11" }, "peerDependencies": { "vite": "^5.2.0" diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 1c2e8c3f4940..d97686b4a93e 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -75,6 +75,7 @@ "devDependencies": { "@tailwindcss/oxide": "workspace:^", "@types/node": "^20.12.12", - "lightningcss": "^1.25.1" + "lightningcss": "^1.25.1", + "tailwindcss-test-utils": "workspace:^" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f438ecf48920..d99cda89792d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,9 +131,6 @@ importers: '@types/postcss-import': specifier: ^14.0.3 version: 14.0.3 - tailwindcss-test-utils: - specifier: workspace:^ - version: link:../test-utils packages/@tailwindcss-postcss: dependencies: @@ -159,9 +156,6 @@ importers: postcss: specifier: 8.4.24 version: 8.4.24 - tailwindcss-test-utils: - specifier: workspace:^ - version: link:../test-utils packages/@tailwindcss-vite: dependencies: @@ -178,9 +172,6 @@ importers: '@types/node': specifier: ^20.12.12 version: 20.12.12 - tailwindcss-test-utils: - specifier: workspace:^ - version: link:../test-utils vite: specifier: ^5.2.11 version: 5.2.11(@types/node@20.12.12)(lightningcss@1.25.1) @@ -196,6 +187,9 @@ importers: lightningcss: specifier: ^1.25.1 version: 1.25.1 + tailwindcss-test-utils: + specifier: workspace:^ + version: link:../test-utils packages/test-utils: {} From 16b4bda0fc6dfd5f670ee9e3e8f008bb07d7c123 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 21:12:29 +0200 Subject: [PATCH 13/17] move `tailwindcss-test-utils` to `@tailwindcss/postcss ` This is the spot where we actually need it. --- packages/@tailwindcss-postcss/package.json | 3 ++- packages/tailwindcss/package.json | 3 +-- pnpm-lock.yaml | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/@tailwindcss-postcss/package.json b/packages/@tailwindcss-postcss/package.json index 431fbc6c8a69..1695b991e90d 100644 --- a/packages/@tailwindcss-postcss/package.json +++ b/packages/@tailwindcss-postcss/package.json @@ -38,6 +38,7 @@ "devDependencies": { "@types/node": "^20.12.12", "@types/postcss-import": "^14.0.3", - "postcss": "8.4.24" + "postcss": "8.4.24", + "tailwindcss-test-utils": "workspace:*" } } diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index d97686b4a93e..1c2e8c3f4940 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -75,7 +75,6 @@ "devDependencies": { "@tailwindcss/oxide": "workspace:^", "@types/node": "^20.12.12", - "lightningcss": "^1.25.1", - "tailwindcss-test-utils": "workspace:^" + "lightningcss": "^1.25.1" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d99cda89792d..b9cc1a2b14b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -156,6 +156,9 @@ importers: postcss: specifier: 8.4.24 version: 8.4.24 + tailwindcss-test-utils: + specifier: workspace:* + version: link:../test-utils packages/@tailwindcss-vite: dependencies: @@ -187,9 +190,6 @@ importers: lightningcss: specifier: ^1.25.1 version: 1.25.1 - tailwindcss-test-utils: - specifier: workspace:^ - version: link:../test-utils packages/test-utils: {} From 81df2be537024ba3faabb4e9d1c0a360f0a206f4 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Wed, 10 Jul 2024 21:15:26 +0200 Subject: [PATCH 14/17] use newer pnpm version --- .github/workflows/ci.yml | 2 +- .github/workflows/release.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c19e3a644d77..c8a8ee2c0e69 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -22,7 +22,7 @@ jobs: - uses: actions/checkout@v3 - uses: pnpm/action-setup@v3 with: - version: ^8.15.0 + version: ^9.5.0 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v3 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 67f698b3be4f..2cefce68e635 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -15,7 +15,7 @@ permissions: env: APP_NAME: tailwindcss-oxide NODE_VERSION: 20 - PNPM_VERSION: ^8.15.0 + PNPM_VERSION: ^9.5.0 OXIDE_LOCATION: ./crates/node jobs: From d2495ce8daa222c3dd5ffb6aa0cd95902200d8cd Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Wed, 10 Jul 2024 16:33:44 -0400 Subject: [PATCH 15/17] Duplicate loadPlugin implementation instead of exporting io file --- .../@tailwindcss-cli/src/commands/build/index.ts | 11 +++++++++-- packages/@tailwindcss-postcss/src/index.ts | 11 +++++++++-- packages/@tailwindcss-vite/src/index.ts | 11 +++++++++-- packages/tailwindcss/package.json | 5 ----- packages/tailwindcss/src/io.ts | 13 ------------- packages/tailwindcss/tsup.config.ts | 1 - 6 files changed, 27 insertions(+), 25 deletions(-) delete mode 100644 packages/tailwindcss/src/io.ts diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index a1460b85068d..62084ec459ae 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -7,7 +7,6 @@ import path from 'node:path' import postcss from 'postcss' import atImport from 'postcss-import' import * as tailwindcss from 'tailwindcss' -import { loadPlugin } from 'tailwindcss/io' import type { Arg, Result } from '../../utils/args' import { eprintln, @@ -127,9 +126,17 @@ export async function handle(args: Result>) { let inputFile = args['--input'] && args['--input'] !== '-' ? args['--input'] : process.cwd() + let basePath = path.dirname(path.resolve(inputFile)) + function compile(css: string) { return tailwindcss.compile(css, { - loadPlugin: loadPlugin(inputFile), + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + + return require(pluginPath) + }, }) } diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 64056c6e190a..30a0828a2f51 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -1,10 +1,10 @@ import { scanDir } from '@tailwindcss/oxide' import fs from 'fs' import { Features, transform } from 'lightningcss' +import path from 'path' import postcss, { type AcceptedPlugin, type PluginCreator } from 'postcss' import postcssImport from 'postcss-import' import { compile } from 'tailwindcss' -import { loadPlugin } from 'tailwindcss/io' /** * A Map that can generate default values for keys that don't exist. @@ -131,8 +131,15 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } if (rebuildStrategy === 'full') { + let basePath = path.dirname(path.resolve(inputFile)) let { build } = compile(root.toString(), { - loadPlugin: loadPlugin(inputFile), + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + + return require(pluginPath) + }, }) context.build = build css = build(hasTailwind ? candidates : []) diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 334fc4cc7fc9..d8a0924c5562 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -2,7 +2,6 @@ import { IO, Parsing, scanFiles } from '@tailwindcss/oxide' import { Features, transform } from 'lightningcss' import path from 'path' import { compile } from 'tailwindcss' -import { loadPlugin } from 'tailwindcss/io' import type { Plugin, Rollup, Update, ViteDevServer } from 'vite' export default function tailwindcss(): Plugin[] { @@ -74,8 +73,16 @@ export default function tailwindcss(): Plugin[] { } function generateCss(css: string, inputPath: string) { + let basePath = path.dirname(path.resolve(inputPath)) + return compile(css, { - loadPlugin: loadPlugin(inputPath), + loadPlugin: (pluginPath) => { + if (pluginPath[0] === '.') { + return require(path.resolve(basePath, pluginPath)) + } + + return require(pluginPath) + }, }).build(Array.from(candidates)) } diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 1c2e8c3f4940..30c67e2dc23a 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -23,11 +23,6 @@ "require": "./dist/lib.js", "import": "./src/index.ts" }, - "./io": { - "types": "./src/io.ts", - "require": "./dist/io.js", - "import": "./src/io.ts" - }, "./package.json": "./package.json", "./index.css": "./index.css", "./index": "./index.css", diff --git a/packages/tailwindcss/src/io.ts b/packages/tailwindcss/src/io.ts deleted file mode 100644 index c642e5853d51..000000000000 --- a/packages/tailwindcss/src/io.ts +++ /dev/null @@ -1,13 +0,0 @@ -import path from 'node:path' - -export function loadPlugin(inputFile: string) { - let basePath = path.dirname(path.resolve(inputFile)) - - return (pluginPath: string) => { - if (pluginPath[0] === '.') { - return require(path.resolve(basePath, pluginPath)) - } - - return require(pluginPath) - } -} diff --git a/packages/tailwindcss/tsup.config.ts b/packages/tailwindcss/tsup.config.ts index 5f7beac509b5..8e19667be37e 100644 --- a/packages/tailwindcss/tsup.config.ts +++ b/packages/tailwindcss/tsup.config.ts @@ -7,6 +7,5 @@ export default defineConfig({ dts: true, entry: { lib: 'src/index.ts', - io: 'src/io.ts', }, }) From abb38be5334148ddfe2171065234a4709604c4da Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Wed, 10 Jul 2024 16:34:28 -0400 Subject: [PATCH 16/17] Remove another io reference --- packages/tailwindcss/package.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/tailwindcss/package.json b/packages/tailwindcss/package.json index 30c67e2dc23a..696115eb0a1d 100644 --- a/packages/tailwindcss/package.json +++ b/packages/tailwindcss/package.json @@ -43,11 +43,6 @@ "require": "./dist/lib.js", "import": "./dist/lib.mjs" }, - "./io": { - "types": "./dist/io.d.mts", - "require": "./dist/io.js", - "import": "./dist/io.mjs" - }, "./package.json": "./package.json", "./index.css": "./index.css", "./index": "./index.css", From afa67c1b6bd97f7b8141049bd1304e6feb555396 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 11 Jul 2024 15:42:58 +0200 Subject: [PATCH 17/17] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 54fe934900b6..c98ee385c44f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Discard invalid `variants` and `utilities` with modifiers ([#13977](https://github.com/tailwindlabs/tailwindcss/pull/13977)) - Add missing utilities that exist in v3, such as `resize`, `fill-none`, `accent-none`, `drop-shadow-none`, and negative `hue-rotate` and `backdrop-hue-rotate` utilities ([#13971](https://github.com/tailwindlabs/tailwindcss/pull/13971)) +### Added + +- Add support for basic `addVariant` plugins with new `@plugin` directive ([#13982](https://github.com/tailwindlabs/tailwindcss/pull/13982)) + ## [4.0.0-alpha.17] - 2024-07-04 ### Added