fix: use postcss import only if build tailwind.css exists

maizzle · Oct 2, 2022 · fb28b23 · fb28b23
1 parent ba80622
commit fb28b23
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/src/generators/tailwindcss.js b/src/generators/tailwindcss.js
@@ -89,19 +89,23 @@ module.exports = {
     const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
     const userFileExists = await fs.pathExists(userFilePath)
 
+    const toProcess = [
+      postcssNested(),
+      tailwindcss(config),
+      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
+      ...get(maizzleConfig, 'build.postcss.plugins', [])
+    ]
+
     if (userFileExists) {
       css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
+      toProcess.unshift(
+        postcssImport({path: path.dirname(userFilePath)})
+      )
     } else {
-      css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
+      css = `@tailwind components; @tailwind utilities; ${css}`
     }
 
-    return postcss([
-      postcssImport({path: path.dirname(userFilePath)}),
-      postcssNested(),
-      tailwindcss(config),
-      maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
-      ...get(maizzleConfig, 'build.postcss.plugins', [])
-    ])
+    return postcss([...toProcess])
       .process(css, {from: undefined})
       .then(result => result.css)
       .catch(error => {