add handleImportAtRules to CLI

tailwindlabs · May 12, 2023 · 7f44ca1 · 7f44ca1
1 parent 7ce060b
commit 7f44ca1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 68 deletions.
diff --git a/src/lib/handleImportAtRules.js b/src/lib/handleImportAtRules.js
@@ -0,0 +1,33 @@
+import postcss from 'postcss'
+
+const TAILWIND = Symbol()
+
+export function handleImportAtRules(postcssImport = require('postcss-import')) {
+  let RESTORE_ATRULE_COMMENT = '__TAILWIND_RESTORE__'
+  let atRulesToRestore = ['tailwind', 'config']
+
+  return [
+    (root) => {
+      root.walkAtRules((rule) => {
+        if (!atRulesToRestore.includes(rule.name)) return rule
+
+        rule.after(
+          postcss.comment({
+            text: RESTORE_ATRULE_COMMENT,
+            raws: { [TAILWIND]: { rule } },
+          })
+        )
+        rule.remove()
+      })
+    },
+    postcssImport(),
+    (root) => {
+      root.walkComments((rule) => {
+        if (rule.text.startsWith(RESTORE_ATRULE_COMMENT)) {
+          rule.after(rule.raws[TAILWIND].rule)
+          rule.remove()
+        }
+      })
+    },
+  ]
+}
diff --git a/src/oxide/cli/build/plugin.ts b/src/oxide/cli/build/plugin.ts
@@ -19,6 +19,7 @@ import { loadConfig } from '../../../lib/load-config'
 import getModuleDependencies from '../../../lib/getModuleDependencies'
 import type { Config } from '../../../../types'
 import { validateConfig } from '../../../util/validateConfig'
+import { handleImportAtRules } from '../../../lib/handleImportAtRules'
 
 /**
  *
@@ -75,39 +76,6 @@ async function loadPostCssPlugins(customPostCssPath) {
   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()
-          }
-        })
-      },
-      loadPostcssImport(),
-      (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 state = {
   /** @type {any} */
   context: null,
@@ -266,7 +234,9 @@ export async function createProcessor(args, cliConfigPath) {
 
   let [beforePlugins, afterPlugins, postcssOptions] = includePostCss
     ? await loadPostCssPlugins(customPostCssPath)
-    : loadBuiltinPostcssPlugins()
+    : [[], [], {}]
+
+  beforePlugins.unshift(...handleImportAtRules(loadPostcssImport()))
 
   if (args['--purge']) {
     log.warn('purge-flag-deprecated', [

diff --git a/src/plugin.js b/src/plugin.js
@@ -1,41 +1,8 @@
-import postcss from 'postcss'
-import postcssImport from 'postcss-import'
 import setupTrackingContext from './lib/setupTrackingContext'
 import processTailwindFeatures from './processTailwindFeatures'
 import { env } from './lib/sharedState'
 import { findAtConfigPath } from './lib/findAtConfigPath'
-
-const TAILWIND = Symbol()
-
-function handleImportAtRules() {
-  let RESTORE_ATRULE_COMMENT = '__TAILWIND_RESTORE__'
-  let atRulesToRestore = ['tailwind', 'config']
-
-  return [
-    (root) => {
-      root.walkAtRules((rule) => {
-        if (!atRulesToRestore.includes(rule.name)) return rule
-
-        rule.after(
-          postcss.comment({
-            text: RESTORE_ATRULE_COMMENT,
-            raws: { [TAILWIND]: { rule } },
-          })
-        )
-        rule.remove()
-      })
-    },
-    postcssImport(),
-    (root) => {
-      root.walkComments((rule) => {
-        if (rule.text.startsWith(RESTORE_ATRULE_COMMENT)) {
-          rule.after(rule.raws[TAILWIND].rule)
-          rule.remove()
-        }
-      })
-    },
-  ]
-}
+import { handleImportAtRules } from './lib/handleImportAtRules'
 
 module.exports = function tailwindcss(configOrPath) {
   return {