diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f5bd398bda8..9a8efd6b0158 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Fix missing `supports` in types ([#9616](https://github.com/tailwindlabs/tailwindcss/pull/9616)) +- Fix missing PostCSS dependencies in the CLI ([#9617](https://github.com/tailwindlabs/tailwindcss/pull/9617)) ## [3.2.0] - 2022-10-19 diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 41ff2de4ebab..b43f2975aa1f 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -411,6 +411,31 @@ describe('Build command', () => { ` ) + await writeInputFile( + 'imported.css', + css` + @layer utilities { + .something-cool { + color: blue; + } + } + ` + ) + + await runningProcess.onStderr(function ready(message) { + return message.includes('Done in') + }) + + expect(await readOutputFile('main.css')).toIncludeCss( + css` + @media (min-width: 768px) { + .md\:something-cool { + color: blue; + } + } + ` + ) + return runningProcess.stop() }) diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index fbfdc6f0db96..4a76cdfeff26 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -605,4 +605,105 @@ describe('watcher', () => { return runningProcess.stop() }) + + test('classes are generated (and kept) when the index.html file changes (and removed when css/config files are changed)', async () => { + let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') + + // Start with a simple single class + await writeInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .font-bold { + font-weight: 700; + } + ` + ) + + // Add another class + await writeInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .flex { + display: flex; + } + + .font-bold { + font-weight: 700; + } + ` + ) + + // Remove a class, because of performance reasons both classes will still be in the css file + await writeInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .flex { + display: flex; + } + + .font-bold { + font-weight: 700; + } + ` + ) + + // Save the index.css file, this should trigger a fresh context + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + ) + await runningProcess.onStderr(ready) + + // Only 1 class should stay, because we started from scratch + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .font-bold { + font-weight: 700; + } + ` + ) + + // Add another class + await writeInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .flex { + display: flex; + } + + .font-bold { + font-weight: 700; + } + ` + ) + + // Remove a class, because of performance reasons both classes will still be in the css file + await writeInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) + + // If everything goes right, then both classes should still be here (because of the performance + // improvement). If we didn't solve the bug where from now on every save is a fresh context + // then this only has 1 class. So let's hope there are 2! + expect(await readOutputFile('main.css')).toIncludeCss( + css` + .flex { + display: flex; + } + + .font-bold { + font-weight: 700; + } + ` + ) + + return runningProcess.stop() + }) }) diff --git a/src/cli/build/plugin.js b/src/cli/build/plugin.js index 51177db79113..a06bca3be1ae 100644 --- a/src/cli/build/plugin.js +++ b/src/cli/build/plugin.js @@ -328,6 +328,26 @@ export async function createProcessor(args, cliConfigPath) { return readInput() .then((css) => processor.process(css, { ...postcssOptions, from: input, to: output })) + .then((result) => { + if (!state.watcher) { + return result + } + + env.DEBUG && console.time('Recording PostCSS dependencies') + for (let message of result.messages) { + if (message.type === 'dependency') { + state.contextDependencies.add(message.file) + } + } + env.DEBUG && console.timeEnd('Recording PostCSS dependencies') + + // TODO: This needs to be in a different spot + env.DEBUG && console.time('Watch new files') + state.watcher.refreshWatchedFiles() + env.DEBUG && console.timeEnd('Watch new files') + + return result + }) .then((result) => { if (!output) { process.stdout.write(result.css) diff --git a/src/cli/build/watching.js b/src/cli/build/watching.js index 8ebceccf5cc7..9b5462a244fd 100644 --- a/src/cli/build/watching.js +++ b/src/cli/build/watching.js @@ -62,7 +62,7 @@ export function createWatcher(args, { state, rebuild }) { extension: path.extname(file).slice(1), }) - chain = chain.then(() => rebuild(changedContent)) + chain = chain.then(() => rebuild(changedContent.splice(0))) return chain }