From 6f647fdc4ebf71081e1975db4ef1c1a75ef0ecab 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 684a5bae4f1f6ec0fef2fef7aacbc6c1870b0858 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 48e6fc4dd4a6970da9161fd02a5c6a8128dfe803 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 947002663767a37fed0b203bbe793c8d1f5c6253 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 afe4072633f0704e51245dd361725d65d7011316 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 | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 521b39bba276..bb9827e2b688 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,17 @@ 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)) + +## [3.1.1] - 2022-06-09 + +### Fixed + - Fix candidate extractor regression ([#8558](https://github.com/tailwindlabs/tailwindcss/pull/8558)) +- Split `::backdrop` into separate defaults group ([#8567](https://github.com/tailwindlabs/tailwindcss/pull/8567)) +- Fix postcss plugin type ([#8564](https://github.com/tailwindlabs/tailwindcss/pull/8564)) +- Fix class detection in markdown code fences and slim templates ([#8569](https://github.com/tailwindlabs/tailwindcss/pull/8569)) ## [3.1.0] - 2022-06-08 @@ -1954,7 +1964,8 @@ No release notes - Everything! -[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.1...HEAD +[3.1.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.0...v3.1.1 [3.1.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.24...v3.1.0 [3.0.24]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.23...v3.0.24 [3.0.23]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.22...v3.0.23