diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index d316c5411..dae7cf0e8 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -105,6 +105,13 @@ export function toCss(ast: AstNode[]) { return css } + if (node.selector === '@tailwind utilities') { + for (let child of node.nodes) { + css += stringify(child, depth) + } + return css + } + // Print at-rules without nodes with a `;` instead of an empty block. // // E.g.: diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index cf7025102..1488b4817 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -93,9 +93,7 @@ describe('compiling CSS', () => { .grid { display: grid; - } - - @tailwind utilities;" + }" `) }) diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 217d71d77..86077ecbb 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -103,11 +103,17 @@ export function compile( let designSystem = buildDesignSystem(theme) + let tailwindUtilitiesNode: Rule | null = null + // Find `@tailwind utilities` and replace it with the actual generated utility // class CSS. - walk(ast, (node, { replaceWith }) => { + walk(ast, (node) => { if (node.kind === 'rule' && node.selector === '@tailwind utilities') { - replaceWith(compileCandidates(rawCandidates, designSystem).astNodes) + tailwindUtilitiesNode = node + + // Set the `@tailwind utilities` nodes, to the actual generated CSS + node.nodes = compileCandidates(rawCandidates, designSystem).astNodes + // Stop walking after finding `@tailwind utilities` to avoid walking all // of the generated CSS. This means `@tailwind utilities` can only appear // once per file but that's the intended usage at this point in time. @@ -168,8 +174,19 @@ export function compile( }) } + // TODO: Don't do this unless rebuilding? + let allCandidates = new Set(rawCandidates) + return { - rebuild(rawCandidates: string[]) { + rebuild(newRawCandidates: string[]) { + for (let candidate of newRawCandidates) { + allCandidates.add(candidate) + } + + if (tailwindUtilitiesNode) { + let newNodes = compileCandidates(Array.from(allCandidates), designSystem).astNodes + tailwindUtilitiesNode.nodes = newNodes + } return toCss(ast) }, css: toCss(ast),