[v4] Export build from tailwindcss/cli

[PatrykKuniczak]

I want to suggest, to export write (or sth similar) as build func from:

tailwindcss/packages/@tailwindcss-cli/src/commands/build/index.ts

Lines 147 to 400 in 2d13998

	async function write(
	css: string,
	map: SourceMap | null,
	args: Result<ReturnType<typeof options>>,
	I: Instrumentation,
	) {
	let output = css
	// Optimize the output
	if (args['--minify'] || args['--optimize']) {
	if (css !== previous.css) {
	DEBUG && I.start('Optimize CSS')
	let optimized = optimize(css, {
	file: args['--input'] ?? 'input.css',
	minify: args['--minify'] ?? false,
	map: map?.raw ?? undefined,
	})
	DEBUG && I.end('Optimize CSS')
	previous.css = css
	previous.optimizedCss = optimized.code
	if (optimized.map) {
	map = toSourceMap(optimized.map)
	}
	output = optimized.code
	} else {
	output = previous.optimizedCss
	}
	}
	// Write the output
	if (map) {
	// Inline the source map
	if (args['--map'] === true) {
	output += `\n`
	output += map.inline
	} else if (typeof args['--map'] === 'string') {
	DEBUG && I.start('Write source map')
	await outputFile(args['--map'], map.raw)
	DEBUG && I.end('Write source map')
	}
	}
	DEBUG && I.start('Write output')
	if (args['--output'] && args['--output'] !== '-') {
	await outputFile(args['--output'], output)
	} else {
	println(output)
	}
	DEBUG && I.end('Write output')
	}
	let inputFilePath =
	args['--input'] && args['--input'] !== '-' ? path.resolve(args['--input']) : null
	let inputBasePath = inputFilePath ? path.dirname(inputFilePath) : process.cwd()
	let fullRebuildPaths: string[] = inputFilePath ? [inputFilePath] : []
	async function createCompiler(css: string, I: Instrumentation) {
	DEBUG && I.start('Setup compiler')
	let compiler = await compile(css, {
	from: args['--output'] ? (inputFilePath ?? 'stdin.css') : undefined,
	base: inputBasePath,
	onDependency(path) {
	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: '**/*', negated: false }]
	}
	// Use the specified root
	return [{ ...compiler.root, negated: false }]
	})().concat(compiler.sources)
	let scanner = new Scanner({ sources })
	DEBUG && I.end('Setup compiler')
	return [compiler, scanner] as const
	}
	let [compiler, scanner] = await handleError(() => createCompiler(input, I))
	// Watch for changes
	if (args['--watch']) {
	let cleanupWatchers = await createWatchers(
	watchDirectories(scanner),
	async function handle(files) {
	try {
	// If the only change happened to the output file, then we don't want to
	// trigger a rebuild because that will result in an infinite loop.
	if (files.length === 1 && files[0] === args['--output']) return
	using I = new Instrumentation()
	DEBUG && I.start('[@tailwindcss/cli] (watcher)')
	// Re-compile the input
	let start = process.hrtime.bigint()
	let changedFiles: ChangedContent[] = []
	let rebuildStrategy: 'incremental' | 'full' = 'incremental'
	let resolvedFullRebuildPaths = fullRebuildPaths
	for (let file of files) {
	// If one of the changed files is related to the input CSS or JS
	// config/plugin files, then we need to do a full rebuild because
	// the theme might have changed.
	if (resolvedFullRebuildPaths.includes(file)) {
	rebuildStrategy = 'full'
	// No need to check the rest of the events, because we already know we
	// need to do a full rebuild.
	break
	}
	// Track new and updated files for incremental rebuilds.
	changedFiles.push({
	file,
	extension: path.extname(file).slice(1),
	} satisfies ChangedContent)
	}
	// Track the compiled CSS
	let compiledCss = ''
	let compiledMap: SourceMap | null = null
	// Scan the entire `base` directory for full rebuilds.
	if (rebuildStrategy === 'full') {
	// Read the new `input`.
	let input = args['--input']
	? args['--input'] === '-'
	? await drainStdin()
	: await fs.readFile(args['--input'], 'utf-8')
	: css`
	@import 'tailwindcss';
	`
	clearRequireCache(resolvedFullRebuildPaths)
	fullRebuildPaths = inputFilePath ? [inputFilePath] : []
	// Create a new compiler, given the new `input`
	;[compiler, scanner] = await createCompiler(input, I)
	// Scan the directory for candidates
	DEBUG && I.start('Scan for candidates')
	let candidates = scanner.scan()
	DEBUG && I.end('Scan for candidates')
	// Setup new watchers
	DEBUG && I.start('Setup new watchers')
	let newCleanupWatchers = await createWatchers(watchDirectories(scanner), handle)
	DEBUG && I.end('Setup new watchers')
	// Clear old watchers
	DEBUG && I.start('Cleanup old watchers')
	await cleanupWatchers()
	DEBUG && I.end('Cleanup old watchers')
	cleanupWatchers = newCleanupWatchers
	// Re-compile the CSS
	DEBUG && I.start('Build CSS')
	compiledCss = compiler.build(candidates)
	DEBUG && I.end('Build CSS')
	if (args['--map']) {
	DEBUG && I.start('Build Source Map')
	compiledMap = compiler.buildSourceMap() as any
	DEBUG && I.end('Build Source Map')
	}
	}
	// Scan changed files only for incremental rebuilds.
	else if (rebuildStrategy === 'incremental') {
	DEBUG && I.start('Scan for candidates')
	let newCandidates = scanner.scanFiles(changedFiles)
	DEBUG && I.end('Scan for candidates')
	// No new candidates found which means we don't need to write to
	// disk, and can return early.
	if (newCandidates.length <= 0) {
	let end = process.hrtime.bigint()
	eprintln(`Done in ${formatDuration(end - start)}`)
	return
	}
	DEBUG && I.start('Build CSS')
	compiledCss = compiler.build(newCandidates)
	DEBUG && I.end('Build CSS')
	if (args['--map']) {
	DEBUG && I.start('Build Source Map')
	compiledMap = compiler.buildSourceMap() as any
	DEBUG && I.end('Build Source Map')
	}
	}
	await write(compiledCss, compiledMap, args, I)
	let end = process.hrtime.bigint()
	eprintln(`Done in ${formatDuration(end - start)}`)
	} catch (err) {
	// Catch any errors and print them to stderr, but don't exit the process
	// and keep watching.
	if (err instanceof Error) {
	eprintln(err.toString())
	}
	}
	},
	)
	// Abort the watcher if `stdin` is closed to avoid zombie processes. You can
	// disable this behavior with `--watch=always`.
	if (args['--watch'] !== 'always') {
	process.stdin.on('end', () => {
	cleanupWatchers().then(
	() => process.exit(0),
	() => process.exit(1),
	)
	})
	}
	// Keep the process running
	process.stdin.resume()
	}
	DEBUG && I.start('Scan for candidates')
	let candidates = scanner.scan()
	DEBUG && I.end('Scan for candidates')
	DEBUG && I.start('Build CSS')
	let output = await handleError(() => compiler.build(candidates))
	DEBUG && I.end('Build CSS')
	let map: SourceMap | null = null
	if (args['--map']) {
	DEBUG && I.start('Build Source Map')
	map = await handleError(() => toSourceMap(compiler.buildSourceMap()))
	DEBUG && I.end('Build Source Map')
	}
	await write(output, map, args, I)
	let end = process.hrtime.bigint()
	eprintln(`Done in ${formatDuration(end - start)}`)
	}

To be able to build it inline in code, like i have here for v3:
https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/blob/9288fafc45512f71d7cebb5be8a65e0007c7901a/pages/content-ui/build.mts#L37-L43

If you able to export that build func for v4.
That could be awesome and very helpful for cases like mine.

[philipp-spiess]

@PatrykKuniczak Take a look at the exports from the @tailwindcss/node library, would that be sufficient for your use case or do you also need the watch mode feature?

[PatrykKuniczak]

@PatrykKuniczak Take a look at the exports from the @tailwindcss/node library, would that be sufficient for your use case or do you also need the watch mode feature?

I need watcher also.

I've known about tw/node, but i don't want to duplicate write implementation on my project.

I'm able to do it by copy and adjust it, but if it's possible, it'll be nice to have 1 func to handle build in code process :)