splits tailwind component plugins into individual imports (#453)

brave · Oct 27, 2023 · c76da22 · c76da22
1 parent 0420b14
commit c76da22
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git a/src/tokens/transformation/tailwind/extractComponentStyles.js b/src/tokens/transformation/tailwind/extractComponentStyles.js
@@ -1,6 +1,5 @@
 const svelte = require('svelte/compiler')
-const { readdirSync, statSync } = require('fs')
-const { writeFile, readFile } = require('fs/promises')
+const { writeFile, readFile, mkdir } = require('fs/promises')
 const { join, parse } = require('path')
 const preprocess = require('svelte-preprocess')
 const postcssJs = require('postcss-js')
@@ -9,6 +8,28 @@ const sortMediaQueries = require('postcss-sort-media-queries')()
 const theme = require('../../../postcss/theme')
 const { walk } = require('../../../scripts/common')
 
+const writePlugin = async (contents, name, dir) => {
+  const fnName = name === 'link' ? 'addBase' : 'addComponents'
+
+  try {
+    await writeFile(
+      join(dir, `${name}Component.js`),
+      `const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ ${fnName}, theme }) {
+${fnName}(${JSON.stringify(contents, null, 2)});
+});`
+    )
+  } catch (e) {
+    if (e.code === 'ENOENT') {
+      await mkdir(dir)
+      await writePlugin(contents, name, dir)
+    } else {
+      console.error(e)
+    }
+  }
+}
+
 module.exports = {
   do: async function (dictionary, config) {
     for await (const file of await walk(
@@ -41,18 +62,10 @@ module.exports = {
         if (rawCSS) {
           const css = rawCSS.replace(/\.REMOVE_ME/g, '')
           const root = postcss.parse(css)
-          let cssAsJs = postcssJs.objectify(root)
-
-          const fnName = fileParts.name === 'link' ? 'addBase' : 'addComponents'
-
-          await writeFile(
-            join(config.buildPath, 'plugins', `${fileParts.name}Component.js`),
-            `const plugin = require("tailwindcss/plugin");
+          const cssAsJs = postcssJs.objectify(root)
+          const pluginDir = join(config.buildPath, 'plugins/components')
 
-module.exports = plugin(function ({ ${fnName}, theme }) {
-	${fnName}(${JSON.stringify(cssAsJs, null, 2)});
-});`
-          )
+          await writePlugin(cssAsJs, fileParts.name, pluginDir)
         }
       }
     }

diff --git a/src/tokens/transformation/tailwind/static/plugins/index.ts b/src/tokens/transformation/tailwind/static/plugins/index.ts
@@ -1,10 +1,17 @@
-const { readdirSync } = require('fs')
-const { parse } = require('path')
+const plugins: string[] = []
 
-const plugins = readdirSync(__dirname).filter((file) => {
-  const { name } = parse(file)
-  return name !== 'index' && !name.startsWith('_')
-})
+// Prevent global issues with TS
+;(function () {
+  const { readdirSync } = require('fs')
+  const { parse } = require('path')
+
+  for (const file of readdirSync(__dirname, { withFileTypes: true })) {
+    const { name } = parse(file.name)
+    if (file.isFile() && name !== 'index' && !name.startsWith('_')) {
+      plugins.push(name)
+    }
+  }
+})()
 
 module.exports = plugins.map((file) => {
   return require(`./${file}`)