From c1fea603ec575c62e832165087d44cde831a2a17 Mon Sep 17 00:00:00 2001 From: Adam Bergman Date: Fri, 10 Jun 2022 09:40:23 +0200 Subject: [PATCH 1/5] Add support for postcss-import in watch mode --- src/cli.js | 39 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 38 insertions(+), 1 deletion(-) diff --git a/src/cli.js b/src/cli.js index 2c48af64514f..1f548c637557 100644 --- a/src/cli.js +++ b/src/cli.js @@ -705,7 +705,44 @@ async function build() { return resolveConfig() } - let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []] + let postcss = loadPostcss() + let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: ' + let [beforePlugins, afterPlugins] = includePostCss + ? await loadPostCssPlugins() + : [ + [ + (root) => { + root.walkAtRules('import', (rule) => { + if (rule.params.slice(1).startsWith('tailwindcss/')) { + rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params })) + rule.remove() + } + }) + }, + (() => { + try { + return require('postcss-import') + } catch {} + + return lazyPostcssImport() + })(), + (root) => { + root.walkComments((rule) => { + if (rule.text.startsWith(IMPORT_COMMENT)) { + rule.after( + postcss.atRule({ + name: 'import', + params: rule.text.replace(IMPORT_COMMENT, ''), + }) + ) + rule.remove() + } + }) + }, + ], + [], + {}, + ] let plugins = [ ...beforePlugins, From b36576747f941aa78fd61dd9d1a4f8136aaedfaa Mon Sep 17 00:00:00 2001 From: Adam Bergman Date: Fri, 10 Jun 2022 09:40:53 +0200 Subject: [PATCH 2/5] Add regression test --- .../tailwindcss-cli/tests/cli.test.js | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 414dd2f40639..7b421bc60d2d 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -374,6 +374,37 @@ describe('Build command', () => { ) }) + test('postcss-import is supported by default in watch mode', async () => { + cleanupFile('src/test.css') + + await writeInputFile('index.html', html`
`) + await writeInputFile( + 'test.css', + css` + @import 'tailwindcss/base'; + @import 'tailwindcss/components'; + @import 'tailwindcss/utilities'; + @import './imported.css'; + ` + ) + + let proc = $( + `${EXECUTABLE} --watch --input ./src/test.css --content ./src/index.html --output ./dist/main.css` + ) + await new Promise((r) => setTimeout(r, 500)) + await proc.stop() + + expect(await readOutputFile('main.css')).toIncludeCss( + css` + @media (min-width: 768px) { + .md\:something-cool { + color: red; + } + } + ` + ) + }) + test('postcss-import is included when using a custom postcss configuration', async () => { cleanupFile('src/test.css') From 4f2fe1c4d5157a165563f1772dc9ee962f6a9f8f Mon Sep 17 00:00:00 2001 From: Adam Bergman Date: Fri, 10 Jun 2022 09:47:25 +0200 Subject: [PATCH 3/5] Extract shared logic --- src/cli.js | 113 +++++++++++++++++++---------------------------------- 1 file changed, 41 insertions(+), 72 deletions(-) diff --git a/src/cli.js b/src/cli.js index 1f548c637557..885f03399e5f 100644 --- a/src/cli.js +++ b/src/cli.js @@ -484,6 +484,45 @@ async function build() { return [beforePlugins, afterPlugins, config.options] } + function loadBuiltinPostcssPlugins() { + let postcss = loadPostcss() + let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: ' + return [ + [ + (root) => { + root.walkAtRules('import', (rule) => { + if (rule.params.slice(1).startsWith('tailwindcss/')) { + rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params })) + rule.remove() + } + }) + }, + (() => { + try { + return require('postcss-import') + } catch {} + + return lazyPostcssImport() + })(), + (root) => { + root.walkComments((rule) => { + if (rule.text.startsWith(IMPORT_COMMENT)) { + rule.after( + postcss.atRule({ + name: 'import', + params: rule.text.replace(IMPORT_COMMENT, ''), + }) + ) + rule.remove() + } + }) + }, + ], + [], + {}, + ] + } + function resolveConfig() { let config = configPath ? require(configPath) : {} @@ -568,44 +607,9 @@ async function build() { tailwindPlugin.postcss = true - let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: ' - let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() - : [ - [ - (root) => { - root.walkAtRules('import', (rule) => { - if (rule.params.slice(1).startsWith('tailwindcss/')) { - rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params })) - rule.remove() - } - }) - }, - (() => { - try { - return require('postcss-import') - } catch {} - - return lazyPostcssImport() - })(), - (root) => { - root.walkComments((rule) => { - if (rule.text.startsWith(IMPORT_COMMENT)) { - rule.after( - postcss.atRule({ - name: 'import', - params: rule.text.replace(IMPORT_COMMENT, ''), - }) - ) - rule.remove() - } - }) - }, - ], - [], - {}, - ] + : loadBuiltinPostcssPlugins() let plugins = [ ...beforePlugins, @@ -705,44 +709,9 @@ async function build() { return resolveConfig() } - let postcss = loadPostcss() - let IMPORT_COMMENT = '__TAILWIND_RESTORE_IMPORT__: ' let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() - : [ - [ - (root) => { - root.walkAtRules('import', (rule) => { - if (rule.params.slice(1).startsWith('tailwindcss/')) { - rule.after(postcss.comment({ text: IMPORT_COMMENT + rule.params })) - rule.remove() - } - }) - }, - (() => { - try { - return require('postcss-import') - } catch {} - - return lazyPostcssImport() - })(), - (root) => { - root.walkComments((rule) => { - if (rule.text.startsWith(IMPORT_COMMENT)) { - rule.after( - postcss.atRule({ - name: 'import', - params: rule.text.replace(IMPORT_COMMENT, ''), - }) - ) - rule.remove() - } - }) - }, - ], - [], - {}, - ] + : loadBuiltinPostcssPlugins() let plugins = [ ...beforePlugins, From b8d05ef5c0ddb400c98439e90cd798989d115156 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 10 Jun 2022 11:12:41 +0200 Subject: [PATCH 4/5] restructure test a little bit Instead of relying on a arbitrary setTimout value, let's wait for the file to be created instead. --- integrations/tailwindcss-cli/tests/cli.test.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index 7b421bc60d2d..9ebcd3012b91 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -5,7 +5,14 @@ let resolveToolRoot = require('../../resolve-tool-root') let version = require('../../../package.json').version -let { readOutputFile, writeInputFile, cleanupFile, fileExists, removeFile } = require('../../io')({ +let { + cleanupFile, + fileExists, + readOutputFile, + removeFile, + waitForOutputFileCreation, + writeInputFile, +} = require('../../io')({ output: 'dist', input: 'src', }) @@ -388,11 +395,11 @@ describe('Build command', () => { ` ) - let proc = $( + let runningProcess = $( `${EXECUTABLE} --watch --input ./src/test.css --content ./src/index.html --output ./dist/main.css` ) - await new Promise((r) => setTimeout(r, 500)) - await proc.stop() + + await waitForOutputFileCreation('main.css') expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -403,6 +410,8 @@ describe('Build command', () => { } ` ) + + return runningProcess.stop() }) test('postcss-import is included when using a custom postcss configuration', async () => { From d2bf8d8e582a20490ddef637845718c35e861715 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 10 Jun 2022 11:13:49 +0200 Subject: [PATCH 5/5] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9aa357f03839..a9bc9035bdc1 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 - Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576)) +- Enable `postcss-import` in the CLI by default in watch mode ([#8574](https://github.com/tailwindlabs/tailwindcss/pull/8574), [#8580](https://github.com/tailwindlabs/tailwindcss/pull/8580)) ## [3.1.1] - 2022-06-09