From a0c2ee8c38898093915460946ef83514155f8f42 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 7 Jun 2022 19:03:38 +0200
Subject: [PATCH] Ensure we can use `@import 'tailwindcss/...'` without
 node_modules (#8537)

* ensure we can use `@import 'tailwindcss/...'` without node_modules

This is useful if you are using `npx tailwindcs ...` and to prevent
that postcss-import crashes on the tailwind specific imports which we
will replace anyway.

* update changelog
---
 CHANGELOG.md |  1 +
 src/cli.js   | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6a4a7acb6eef..57704b7654d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 - Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489))
 - Remove process dependency from log functions ([#8530](https://github.com/tailwindlabs/tailwindcss/pull/8530))
+- Ensure we can use `@import 'tailwindcss/...'` without node_modules ([#8537](https://github.com/tailwindlabs/tailwindcss/pull/8537))
 
 ### Changed
 
diff --git a/src/cli.js b/src/cli.js
index ad6cdf1c710e..2c48af64514f 100644
--- a/src/cli.js
+++ b/src/cli.js
@@ -568,10 +568,20 @@ 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')
@@ -579,6 +589,19 @@ async function build() {
 
               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()
+                }
+              })
+            },
           ],
           [],
           {},