Enable postcss-import in the CLI by default in watch mode (tailwindlabs#8580)

* Add support for postcss-import in watch mode

* Add regression test

* Extract shared logic

* restructure test a little bit

Instead of relying on a arbitrary setTimout value, let's wait for the
file to be created instead.

* update changelog

Co-authored-by: Adam Bergman <adam@fransvilhelm.com>

Author: RobinMalfait

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
 

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',
 })
@@ -374,6 +381,39 @@ describe('Build command', () => {
     )
   })
 
+  test('postcss-import is supported by default in watch mode', async () => {
+    cleanupFile('src/test.css')
+
+    await writeInputFile('index.html', html`<div class="md:something-cool"></div>`)
+    await writeInputFile(
+      'test.css',
+      css`
+        @import 'tailwindcss/base';
+        @import 'tailwindcss/components';
+        @import 'tailwindcss/utilities';
+        @import './imported.css';
+      `
+    )
+
+    let runningProcess = $(
+      `${EXECUTABLE} --watch --input ./src/test.css --content ./src/index.html --output ./dist/main.css`
+    )
+
+    await waitForOutputFileCreation('main.css')
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        @media (min-width: 768px) {
+          .md\:something-cool {
+            color: red;
+          }
+        }
+      `
+    )
+
+    return runningProcess.stop()
+  })
+
   test('postcss-import is included when using a custom postcss configuration', async () => {
     cleanupFile('src/test.css')
 

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,7 +709,9 @@ async function build() {
       return resolveConfig()
     }
 
-    let [beforePlugins, afterPlugins] = includePostCss ? await loadPostCssPlugins() : [[], []]
+    let [beforePlugins, afterPlugins] = includePostCss
+      ? await loadPostCssPlugins()
+      : loadBuiltinPostcssPlugins()
 
     let plugins = [
       ...beforePlugins,