+ `, + 'project-b/src/index.js': js` + const className = "content-['project-b/src/index.js']" + module.exports = { className } + `, + }, + }, + async ({ root, fs, exec }) => { + await exec('pnpm vite build', { cwd: path.join(root, 'project-a') }) + + let files = await fs.glob('project-a/dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] + + // `underline` and `m-2` are only present from files in the module graph + // which we've explicitly disabled with source(none) so they should not + // be present + await fs.expectFileNotToContain(filename, [ + // + candidate`underline`, + candidate`m-2`, + ]) + + // The files from `project-b` should be included because there is an + // explicit `@source` directive for it + await fs.expectFileToContain(filename, [ + // + candidate`flex`, + ]) + + // The explicit source directive only covers HTML files, so the JS file + // should not be included + await fs.expectFileNotToContain(filename, [ + // + candidate`content-['project-b/src/index.js']`, + ]) + }, + ) + + test( + `source("…") filters the module graph`, + { + fs: { + 'package.json': json`{}`, + 'pnpm-workspace.yaml': yaml` + # + packages: + - project-a + `, + 'project-a/package.json': txt` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''} + "vite": "^5.3.5" + } + } + `, + 'project-a/vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"}, + build: { cssMinify: false }, + plugins: [tailwindcss()], + }) + `, + 'project-a/index.html': html` + + + + +

Hello, world!

+ + + `, + 'project-a/app/index.js': js` + const className = "content-['project-a/app/index.js']" + export default { className } + `, + 'project-a/src/index.css': css` + @import 'tailwindcss' source('../app'); + @source '../../project-b/src/**/*.html'; + `, + 'project-b/src/index.html': html` +

+ `, + 'project-b/src/index.js': js` + const className = "content-['project-b/src/index.js']" + module.exports = { className } + `, + }, + }, + async ({ root, fs, exec }) => { + await exec('pnpm vite build', { cwd: path.join(root, 'project-a') }) + + let files = await fs.glob('project-a/dist/**/*.css') + expect(files).toHaveLength(1) + let [filename] = files[0] + + // `underline` and `m-2` are present in files in the module graph but + // we've filtered the module graph such that we only look in + // `./app/**/*` so they should not be present + await fs.expectFileNotToContain(filename, [ + // + candidate`underline`, + candidate`m-2`, + candidate`content-['project-a/index.html']`, + ]) + + // We've filtered the module graph to only look in ./app/**/* so the + // candidates from that project should be present + await fs.expectFileToContain(filename, [ + // + candidate`content-['project-a/app/index.js']`, + ]) + + // Even through we're filtering the module graph explicit sources are + // additive and as such files from `project-b` should be included + // because there is an explicit `@source` directive for it + await fs.expectFileToContain(filename, [ + // + candidate`content-['project-b/src/index.html']`, + ]) + + // The explicit source directive only covers HTML files, so the JS file + // should not be included + await fs.expectFileNotToContain(filename, [ + // + candidate`content-['project-b/src/index.js']`, + ]) + }, + ) + + test( + `source("…") must be a directory`, + { + fs: { + 'package.json': json`{}`, + 'pnpm-workspace.yaml': yaml` + # + packages: + - project-a + `, + 'project-a/package.json': txt` + { + "type": "module", + "dependencies": { + "@tailwindcss/vite": "workspace:^", + "tailwindcss": "workspace:^" + }, + "devDependencies": { + ${transformer === 'lightningcss' ? `"lightningcss": "^1.26.0",` : ''} + "vite": "^5.3.5" + } + } + `, + 'project-a/vite.config.ts': ts` + import tailwindcss from '@tailwindcss/vite' + import { defineConfig } from 'vite' + + export default defineConfig({ + css: ${transformer === 'postcss' ? '{}' : "{ transformer: 'lightningcss' }"}, + build: { cssMinify: false }, + plugins: [tailwindcss()], + }) + `, + 'project-a/index.html': html` + + + + +

Hello, world!

+ + + `, + 'project-a/app/index.js': js` + const className = "content-['project-a/app/index.js']" + export default { className } + `, + 'project-a/src/index.css': css` + @import 'tailwindcss' source('../i-do-not-exist'); + @source '../../project-b/src/**/*.html'; + `, + 'project-b/src/index.html': html` +

+ `, + 'project-b/src/index.js': js` + const className = "content-['project-b/src/index.js']" + module.exports = { className } + `, + }, + }, + async ({ root, fs, exec }) => { + await expect(() => + exec('pnpm vite build', { cwd: path.join(root, 'project-a') }), + ).rejects.toThrowError('The `source(../i-do-not-exist)` does not exist') + + let files = await fs.glob('project-a/dist/**/*.css') + expect(files).toHaveLength(0) + }, + ) }) } diff --git a/packages/@tailwindcss-cli/src/commands/build/index.ts b/packages/@tailwindcss-cli/src/commands/build/index.ts index dc8ba2a90178..b61f3dd49b86 100644 --- a/packages/@tailwindcss-cli/src/commands/build/index.ts +++ b/packages/@tailwindcss-cli/src/commands/build/index.ts @@ -137,21 +137,34 @@ export async function handle(args: Result>) { fullRebuildPaths.push(path) }, }) + + let sources = (() => { + // Disable auto source detection + if (compiler.root === 'none') { + return [] + } + + // No root specified, use the base directory + if (compiler.root === null) { + return [{ base, pattern: '**/*' }] + } + + // Use the specified root + return [compiler.root] + })().concat(compiler.globs) + + let scanner = new Scanner({ sources }) env.DEBUG && console.timeEnd('[@tailwindcss/cli] Setup compiler') - return compiler + + return [compiler, scanner] as const } - // Compile the input - let compiler = await createCompiler(input) - let scanner = new Scanner({ - detectSources: { base }, - sources: compiler.globs, - }) + let [compiler, scanner] = await createCompiler(input) // Watch for changes if (args['--watch']) { let cleanupWatchers = await createWatchers( - watchDirectories(base, scanner), + watchDirectories(scanner), async function handle(files) { try { // If the only change happened to the output file, then we don't want to @@ -205,13 +218,7 @@ export async function handle(args: Result>) { fullRebuildPaths = inputFilePath ? [inputFilePath] : [] // Create a new compiler, given the new `input` - compiler = await createCompiler(input) - - // Re-scan the directory to get the new `candidates` - scanner = new Scanner({ - detectSources: { base }, - sources: compiler.globs, - }) + ;[compiler, scanner] = await createCompiler(input) // Scan the directory for candidates env.DEBUG && console.time('[@tailwindcss/cli] Scan for candidates') @@ -219,7 +226,7 @@ export async function handle(args: Result>) { env.DEBUG && console.timeEnd('[@tailwindcss/cli] Scan for candidates') // Setup new watchers - cleanupWatchers = await createWatchers(watchDirectories(base, scanner), handle) + cleanupWatchers = await createWatchers(watchDirectories(scanner), handle) // Re-compile the CSS env.DEBUG && console.time('[@tailwindcss/cli] Build CSS') @@ -287,19 +294,16 @@ export async function handle(args: Result>) { eprintln(`Done in ${formatDuration(end - start)}`) } -function watchDirectories(base: string, scanner: Scanner) { - return [base].concat( - scanner.globs.flatMap((globEntry) => { - // We don't want a watcher for negated globs. - if (globEntry.pattern[0] === '!') return [] +function watchDirectories(scanner: Scanner) { + return scanner.globs.flatMap((globEntry) => { + // We don't want a watcher for negated globs. + if (globEntry.pattern[0] === '!') return [] - // We don't want a watcher for nested directories, these will be covered - // by the `base` directory already. - if (globEntry.base.startsWith(base)) return [] + // We don't want a watcher for files, only directories. + if (globEntry.pattern === '') return [] - return globEntry.base - }), - ) + return globEntry.base + }) } async function createWatchers(dirs: string[], cb: (files: string[]) => void) { diff --git a/packages/@tailwindcss-node/src/compile.ts b/packages/@tailwindcss-node/src/compile.ts index 9f3f58fddae4..40bb9ef1fea4 100644 --- a/packages/@tailwindcss-node/src/compile.ts +++ b/packages/@tailwindcss-node/src/compile.ts @@ -10,11 +10,11 @@ import { } from 'tailwindcss' import { getModuleDependencies } from './get-module-dependencies' -export function compile( +export async function compile( css: string, { base, onDependency }: { base: string; onDependency: (path: string) => void }, ) { - return _compile(css, { + let compiler = await _compile(css, { base, async loadModule(id, base) { return loadModule(id, base, onDependency) @@ -23,6 +23,30 @@ export function compile( return loadStylesheet(id, base, onDependency) }, }) + + // Verify if the `source(…)` path exists (until the glob pattern starts) + if (compiler.root && compiler.root !== 'none') { + let globSymbols = /[*{]/ + let basePath = [] + for (let segment of compiler.root.pattern.split('/')) { + if (globSymbols.test(segment)) { + break + } + + basePath.push(segment) + } + + let exists = await fsPromises + .stat(path.resolve(base, basePath.join('/'))) + .then((stat) => stat.isDirectory()) + .catch(() => false) + + if (!exists) { + throw new Error(`The \`source(${compiler.root.pattern})\` does not exist`) + } + } + + return compiler } export async function __unstable__loadDesignSystem(css: string, { base }: { base: string }) { diff --git a/packages/@tailwindcss-postcss/src/index.ts b/packages/@tailwindcss-postcss/src/index.ts index 69a693971607..f040b611baaf 100644 --- a/packages/@tailwindcss-postcss/src/index.ts +++ b/packages/@tailwindcss-postcss/src/index.ts @@ -134,11 +134,23 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { } if (context.scanner === null || rebuildStrategy === 'full') { + let sources = (() => { + // Disable auto source detection + if (context.compiler.root === 'none') { + return [] + } + + // No root specified, use the base directory + if (context.compiler.root === null) { + return [{ base, pattern: '**/*' }] + } + + // Use the specified root + return [context.compiler.root] + })().concat(context.compiler.globs) + // Look for candidates used to generate the CSS - context.scanner = new Scanner({ - detectSources: { base }, - sources: context.compiler.globs, - }) + context.scanner = new Scanner({ sources }) } env.DEBUG && console.time('[@tailwindcss/postcss] Scan for candidates') @@ -159,13 +171,22 @@ function tailwindcss(opts: PluginOptions = {}): AcceptedPlugin { // giving tools like Vite or Parcel a glob that can be used to limit // the files that cause a rebuild to only those that match it. for (let { base, pattern } of context.scanner.globs) { - result.messages.push({ - type: 'dir-dependency', - plugin: '@tailwindcss/postcss', - dir: base, - glob: pattern, - parent: result.opts.from, - }) + if (pattern === '') { + result.messages.push({ + type: 'dependency', + plugin: '@tailwindcss/postcss', + file: base, + parent: result.opts.from, + }) + } else { + result.messages.push({ + type: 'dir-dependency', + plugin: '@tailwindcss/postcss', + dir: base, + glob: pattern, + parent: result.opts.from, + }) + } } env.DEBUG && console.time('[@tailwindcss/postcss] Build CSS') diff --git a/packages/@tailwindcss-upgrade/src/migrate-js-config.ts b/packages/@tailwindcss-upgrade/src/migrate-js-config.ts index f8a6ad6f8dc2..60bcbcefd7cb 100644 --- a/packages/@tailwindcss-upgrade/src/migrate-js-config.ts +++ b/packages/@tailwindcss-upgrade/src/migrate-js-config.ts @@ -285,7 +285,7 @@ function keyframesToCss(keyframes: Record): string { } function autodetectedSourceFiles(base: string) { - let scanner = new Scanner({ detectSources: { base } }) + let scanner = new Scanner({ sources: [{ base, pattern: '**/*' }] }) scanner.scan() return scanner.files } diff --git a/packages/@tailwindcss-vite/src/index.ts b/packages/@tailwindcss-vite/src/index.ts index 9571342cdbda..a79ede7a2433 100644 --- a/packages/@tailwindcss-vite/src/index.ts +++ b/packages/@tailwindcss-vite/src/index.ts @@ -2,6 +2,7 @@ import { compile, env, normalizePath } from '@tailwindcss/node' import { clearRequireCache } from '@tailwindcss/node/require-cache' import { Scanner } from '@tailwindcss/oxide' import { Features, transform } from 'lightningcss' +import fs from 'node:fs/promises' import path from 'path' import type { Plugin, ResolvedConfig, Rollup, Update, ViteDevServer } from 'vite' @@ -35,7 +36,7 @@ export default function tailwindcss(): Plugin[] { // Note: To improve performance, we do not remove candidates from this set. // This means a longer-ongoing dev mode session might contain candidates that // are no longer referenced in code. - let moduleGraphCandidates = new Set() + let moduleGraphCandidates = new DefaultMap>(() => new Set()) let moduleGraphScanner = new Scanner({}) let roots: DefaultMap = new DefaultMap( @@ -46,7 +47,7 @@ export default function tailwindcss(): Plugin[] { let updated = false for (let candidate of moduleGraphScanner.scanFiles([{ content, extension }])) { updated = true - moduleGraphCandidates.add(candidate) + moduleGraphCandidates.get(id).add(candidate) } if (updated) { @@ -343,14 +344,16 @@ class Root { // the lifetime of the root. private candidates: Set = new Set() - // List of all file dependencies that were captured while generating the root. - // These are retained so we can clear the require cache when we rebuild the - // root. + // List of all dependencies captured while generating the root. These are + // retained so we can clear the require cache when we rebuild the root. private dependencies = new Set() + // The resolved path given to `source(…)`. When not given this is `null`. + private basePath: string | null = null + constructor( private id: string, - private getSharedCandidates: () => Set, + private getSharedCandidates: () => Map>, private base: string, ) {} @@ -379,9 +382,22 @@ class Root { }) env.DEBUG && console.timeEnd('[@tailwindcss/vite] Setup compiler') - this.scanner = new Scanner({ - sources: this.compiler.globs, - }) + let sources = (() => { + // Disable auto source detection + if (this.compiler.root === 'none') { + return [] + } + + // No root specified, use the module graph + if (this.compiler.root === null) { + return [] + } + + // Use the specified root + return [this.compiler.root] + })().concat(this.compiler.globs) + + this.scanner = new Scanner({ sources }) } // This should not be here, but right now the Vite plugin is setup where we @@ -411,14 +427,62 @@ class Root { relative = normalizePath(relative) addWatchFile(path.posix.join(relative, glob.pattern)) + + let root = this.compiler.root + + if (root !== 'none' && root !== null) { + let basePath = path.posix.resolve(root.base, root.pattern) + + let isDir = await fs.stat(basePath).then( + (stats) => stats.isDirectory(), + () => false, + ) + + if (!isDir) { + throw new Error( + `The path given to \`source(…)\` must be a directory but got \`source(${basePath})\` instead.`, + ) + } + + this.basePath = basePath + } else if (root === null) { + this.basePath = null + } } this.requiresRebuild = true env.DEBUG && console.time('[@tailwindcss/vite] Build CSS') - let result = this.compiler.build([...this.getSharedCandidates(), ...this.candidates]) + let result = this.compiler.build([...this.sharedCandidates(), ...this.candidates]) env.DEBUG && console.timeEnd('[@tailwindcss/vite] Build CSS') return result } + + private sharedCandidates(): Set { + if (!this.compiler) return new Set() + if (this.compiler.root === 'none') return new Set() + + let shouldIncludeCandidatesFrom = (id: string) => { + if (this.basePath === null) return true + + // This a virtual module that's not on the file system + // TODO: What should we do here? + if (!id.startsWith('/')) return true + + return id.startsWith(this.basePath) + } + + let shared = new Set() + + for (let [id, candidates] of this.getSharedCandidates()) { + if (!shouldIncludeCandidatesFrom(id)) continue + + for (let candidate of candidates) { + shared.add(candidate) + } + } + + return shared + } } diff --git a/packages/tailwindcss/src/ast.ts b/packages/tailwindcss/src/ast.ts index ee79365b92ff..9f31105891f3 100644 --- a/packages/tailwindcss/src/ast.ts +++ b/packages/tailwindcss/src/ast.ts @@ -223,7 +223,10 @@ export function toCss(ast: AstNode[]) { // AtRule else if (node.kind === 'at-rule') { - if (node.name === '@tailwind' && node.params === 'utilities') { + if ( + node.name === '@tailwind' && + (node.params === 'utilities' || node.params.startsWith('utilities')) + ) { for (let child of node.nodes) { css += stringify(child, depth) } diff --git a/packages/tailwindcss/src/at-import.ts b/packages/tailwindcss/src/at-import.ts index 7054419122ea..e5b937c71c3b 100644 --- a/packages/tailwindcss/src/at-import.ts +++ b/packages/tailwindcss/src/at-import.ts @@ -38,8 +38,12 @@ export async function substituteAtImports( let ast = CSS.parse(loaded.content) await substituteAtImports(ast, loaded.base, loadStylesheet, recurseCount + 1) - contextNode.nodes = buildImportNodes(ast, layer, media, supports) - contextNode.context.base = loaded.base + contextNode.nodes = buildImportNodes( + [context({ base: loaded.base }, ast)], + layer, + media, + supports, + ) })(), ) diff --git a/packages/tailwindcss/src/candidate.bench.ts b/packages/tailwindcss/src/candidate.bench.ts index ef7c97114dfd..5b7171432e17 100644 --- a/packages/tailwindcss/src/candidate.bench.ts +++ b/packages/tailwindcss/src/candidate.bench.ts @@ -8,7 +8,7 @@ import { Theme } from './theme' const root = process.env.FOLDER || process.cwd() // Auto content detection -const scanner = new Scanner({ detectSources: { base: root } }) +const scanner = new Scanner({ sources: [{ base: root, pattern: '**/*' }] }) const candidates = scanner.scan() const designSystem = buildDesignSystem(new Theme()) diff --git a/packages/tailwindcss/src/index.bench.ts b/packages/tailwindcss/src/index.bench.ts index dcffb522e3f2..fb9cd0e71084 100644 --- a/packages/tailwindcss/src/index.bench.ts +++ b/packages/tailwindcss/src/index.bench.ts @@ -7,7 +7,7 @@ const root = process.env.FOLDER || process.cwd() const css = String.raw bench('compile', async () => { - let scanner = new Scanner({ detectSources: { base: root } }) + let scanner = new Scanner({ sources: [{ base: root, pattern: '**/*' }] }) let candidates = scanner.scan() let { build } = await compile(css` diff --git a/packages/tailwindcss/src/index.ts b/packages/tailwindcss/src/index.ts index 31ec72c6c535..402411861e48 100644 --- a/packages/tailwindcss/src/index.ts +++ b/packages/tailwindcss/src/index.ts @@ -4,7 +4,7 @@ import { atRoot, atRule, comment, - context, + context as contextNode, decl, rule, styleRule, @@ -76,21 +76,64 @@ async function parseCss( loadStylesheet = throwOnLoadStylesheet, }: CompileOptions = {}, ) { - let ast = [context({ base }, CSS.parse(css))] as AstNode[] + let ast = [contextNode({ base }, CSS.parse(css))] as AstNode[] await substituteAtImports(ast, base, loadStylesheet) - let important: boolean | null = null + let important = null as boolean | null let theme = new Theme() let customVariants: ((designSystem: DesignSystem) => void)[] = [] let customUtilities: ((designSystem: DesignSystem) => void)[] = [] let firstThemeRule = null as StyleRule | null + let utilitiesNode = null as AtRule | null let globs: { base: string; pattern: string }[] = [] + let root: + | null // Unknown root + | 'none' // Explicitly no root specified via `source(none)` + // Specified via `source(…)`, relative to the `base` + | { base: string; pattern: string } = null // Handle at-rules walk(ast, (node, { parent, replaceWith, context }) => { if (node.kind !== 'at-rule') return + // Find `@tailwind utilities` so that we can later replace it with the + // actual generated utility class CSS. + if ( + utilitiesNode === null && + node.name === '@tailwind' && + (node.params === 'utilities' || node.params.startsWith('utilities')) + ) { + let params = segment(node.params, ' ') + for (let param of params) { + if (param.startsWith('source(')) { + let path = param.slice(7, -1) + + // Keyword: `source(none)` + if (path === 'none') { + root = path + continue + } + + // Explicit path: `source('…')` + if ( + (path[0] === '"' && path[path.length - 1] !== '"') || + (path[0] === "'" && path[path.length - 1] !== "'") || + (path[0] !== "'" && path[0] !== '"') + ) { + throw new Error('`source(…)` paths must be quoted.') + } + + root = { + base: context.sourceBase ?? context.base, + pattern: path.slice(1, -1), + } + } + } + + utilitiesNode = node + } + // Collect custom `@utility` at-rules if (node.name === '@utility') { if (parent !== null) { @@ -234,12 +277,27 @@ async function parseCss( let unknownParams: string[] = [] for (let param of params) { + // Handle `@media source(…)` + if (param.startsWith('source(')) { + let path = param.slice(7, -1) + + walk(node.nodes, (child, { replaceWith }) => { + if (child.kind !== 'at-rule') return + + if (child.name === '@tailwind' && child.params === 'utilities') { + child.params += ` source(${path})` + replaceWith([contextNode({ sourceBase: context.base }, [child])]) + return WalkAction.Stop + } + }) + } + // Handle `@media theme(…)` // // We support `@import "tailwindcss/theme" theme(reference)` as a way to // import an external theme file as a reference, which becomes `@media // theme(reference) { … }` when the `@import` is processed. - if (param.startsWith('theme(')) { + else if (param.startsWith('theme(')) { let themeParams = param.slice(6, -1) walk(node.nodes, (child) => { @@ -417,6 +475,8 @@ async function parseCss( designSystem, ast, globs, + root, + utilitiesNode, } } @@ -425,24 +485,13 @@ export async function compile( opts: CompileOptions = {}, ): Promise<{ globs: { base: string; pattern: string }[] + root: + | null // Unknown root + | 'none' // Explicitly no root specified via `source(none)` + | { base: string; pattern: string } // Specified via `source(…)`, relative to the `base` build(candidates: string[]): string }> { - let { designSystem, ast, globs } = await parseCss(css, opts) - - let tailwindUtilitiesNode: AtRule | null = null - - // Find `@tailwind utilities` so that we can later replace it with the actual - // generated utility class CSS. - walk(ast, (node) => { - if (node.kind === 'at-rule' && node.name === '@tailwind' && node.params === 'utilities') { - tailwindUtilitiesNode = node - - // 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. - return WalkAction.Stop - } - }) + let { designSystem, ast, globs, root, utilitiesNode } = await parseCss(css, opts) if (process.env.NODE_ENV !== 'test') { ast.unshift(comment(`! tailwindcss v${version} | MIT License | https://tailwindcss.com `)) @@ -462,6 +511,7 @@ export async function compile( return { globs, + root, build(newRawCandidates: string[]) { let didChange = false @@ -480,7 +530,7 @@ export async function compile( return compiledCss } - if (tailwindUtilitiesNode) { + if (utilitiesNode) { let newNodes = compileCandidates(allValidCandidates, designSystem, { onInvalidCandidate, }).astNodes @@ -494,7 +544,7 @@ export async function compile( previousAstNodeCount = newNodes.length - tailwindUtilitiesNode.nodes = newNodes + utilitiesNode.nodes = newNodes compiledCss = toCss(ast) } diff --git a/turbo.json b/turbo.json index 9dbd528909cb..35a3e63a7ce7 100644 --- a/turbo.json +++ b/turbo.json @@ -10,8 +10,8 @@ "./build.rs", "./package.json", "./Cargo.toml", - "../core/src/**/*", - "../core/Cargo.toml", + "../oxide/src/**/*", + "../oxide/Cargo.toml", "../Cargo.toml", "../package.json" ] @@ -24,8 +24,8 @@ "./build.rs", "./package.json", "./Cargo.toml", - "../core/src/**/*", - "../core/Cargo.toml", + "../oxide/src/**/*", + "../oxide/Cargo.toml", "../Cargo.toml", "../package.json" ],