Add postcss-import support to the CLI

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
 - Experimental support for variant grouping ([#8405](https://github.com/tailwindlabs/tailwindcss/pull/8405))
 - Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
+- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
 
 ## [3.0.24] - 2022-04-12
 

integrations/tailwindcss-cli/package.json

@@ -6,6 +6,9 @@
     "build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css",
     "test": "jest --runInBand --forceExit"
   },
+  "dependencies": {
+    "tailwindcss": "file:../../"
+  },
   "jest": {
     "testTimeout": 10000,
     "displayName": "Tailwind CSS CLI",

integrations/tailwindcss-cli/src/imported.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  .something-cool {
+    color: red;
+  }
+}

integrations/tailwindcss-cli/tests/cli.test.js

@@ -345,6 +345,60 @@ describe('Build command', () => {
     expect(contents).toContain(`/*# sourceMappingURL`)
   })
 
+  test('postcss-import is supported by default', 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';
+      `
+    )
+
+    await $(
+      `${EXECUTABLE} --input ./src/test.css --content ./src/index.html --output ./dist/main.css`
+    )
+
+    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')
+
+    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';
+      `
+    )
+
+    await $(
+      `${EXECUTABLE} --input ./src/test.css --content ./src/index.html --output ./dist/main.css --postcss`
+    )
+
+    expect(await readOutputFile('main.css')).toIncludeCss(
+      css`
+        @import './imported.css';
+      `
+    )
+  })
+
   test('--help', async () => {
     let { combined } = await $(`${EXECUTABLE} --help`)
 

package.json

@@ -76,7 +76,8 @@
     "normalize-path": "^3.0.0",
     "object-hash": "^3.0.0",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.13",
+    "postcss": "^8.0.9",
+    "postcss-import": "^14.1.0",
     "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.4",
     "postcss-nested": "5.0.6",

src/cli-peer-dependencies.js

@@ -2,6 +2,10 @@ export function lazyPostcss() {
   return require('postcss')
 }
 
+export function lazyPostcssImport() {
+  return require('postcss-import')
+}
+
 export function lazyAutoprefixer() {
   return require('autoprefixer')
 }

src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { lazyPostcss, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
+import { lazyPostcss, lazyPostcssImport, lazyCssnano, lazyAutoprefixer } from '../peers/index.js'
 
 import chokidar from 'chokidar'
 import path from 'path'
@@ -581,7 +581,19 @@ async function build() {
 
     let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
       ? await loadPostCssPlugins()
-      : [[], [], {}]
+      : [
+          [
+            (() => {
+              try {
+                return require('postcss-import')
+              } catch {}
+
+              return lazyPostcssImport()
+            })(),
+          ],
+          [],
+          {},
+        ]
 
     let plugins = [
       ...beforePlugins,