feat: inject tailwind and global styles

packages/components/bin/addTailwindStylesImport.ts

@@ -0,0 +1,61 @@
+import fs from "fs"
+import path from "path"
+
+const DIST_STYLES_PATH = path.resolve(__dirname, "../dist/tailwind.css")
+
+const addGlobalStylesImport = async (dirOrFile: string): Promise<void> => {
+  if (fs.statSync(dirOrFile).isDirectory()) {
+    const dirContent = await fs.promises.readdir(dirOrFile)
+
+    dirContent.forEach(content => {
+      const contentPath = path.join(dirOrFile, content)
+      addGlobalStylesImport(contentPath)
+    })
+    return
+  }
+
+  const filePath = path.resolve(dirOrFile)
+  if (fs.statSync(filePath).isFile()) {
+    const sourceFile = dirOrFile
+      .replace(/dist\/(esm|cjs)/, "src")
+      .replace(/(c|m)js$/, "tsx")
+    if (!fs.existsSync(sourceFile)) {
+      return
+    }
+
+    const stylesPath = path.relative(path.dirname(filePath), DIST_STYLES_PATH)
+    const fileContent = fs.readFileSync(filePath).toString()
+
+    const isESM = dirOrFile.includes("dist/esm")
+    if (isESM) {
+      fs.writeFile(
+        filePath,
+        `import "${stylesPath}"\n${fileContent}`,
+        err => err
+      )
+      return
+    }
+
+    const isCJS = dirOrFile.includes("dist/cjs")
+    if (isCJS) {
+      const fileSplit = fileContent.split("\n")
+      fileSplit.splice(1, 0, `require("${stylesPath}")`)
+      const newContent = fileSplit.join("\n")
+      fs.writeFile(filePath, newContent, err => err)
+      return
+    }
+  }
+}
+
+const DIST_DIRS = ["dist/cjs", "dist/esm"]
+
+DIST_DIRS.forEach(dir => {
+  ;(async () => {
+    try {
+      addGlobalStylesImport(dir)
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Directory not found", e)
+    }
+  })()
+})

packages/components/package.json

@@ -23,18 +23,22 @@
   "module": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "sideEffects": [
+    "tailwind.css",
     "styles.css"
   ],
   "scripts": {
-    "prepublishOnly": "pnpm build:components && pnpm build:styles && pnpm postBuild && pnpm dist:clean",
+    "prepublishOnly": "pnpm build:components && pnpm build:styles && pnpm build:inject-global-styles",
     "build": "pnpm clean && pnpm prepublishOnly",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",
     "clean": "rimraf dist",
     "build:components": "rollup -c && pnpm build:types && pnpm build:purify-style-inject",
+    "build:inject-global-styles": "pnpm ts-node ./bin/addTailwindStylesImport.ts",
     "build:purify-style-inject": "pnpm ts-node ./bin/markStyleInjectAsPure.ts",
-    "build:styles": "postcss styles/global.css --output dist/global.css",
+    "build:styles": "pnpm build:styles:global && pnpm build:styles:tailwind",
+    "build:styles:global": "postcss styles/global.css --output dist/styles.css",
+    "build:styles:tailwind": "postcss styles/tailwind.css --output dist/tailwind.css",
     "build:types": "tspc --project tsconfig.types.json",
     "compile": "tsc",
     "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",

packages/components/rollup.config.mjs

@@ -56,7 +56,7 @@ const cjsConfig = {
       compilerOptions: {
         esModuleInterop: false,
         allowSyntheticDefaultImports: true
-      }
+      },
     }),
     commonjs(),
   ],
@@ -73,7 +73,7 @@ const esmConfig = {
   ...sharedConfig,
   plugins: [
     ...sharedConfig.plugins,
-    typescript({ tsconfig: "./tsconfig.dist.json" })
+    typescript({ tsconfig: "./tsconfig.dist.json" }),
   ],
   output: {
     dir: "dist/esm",

packages/components/src/Label/Label.tsx

@@ -33,7 +33,8 @@ export const Label = ({
       styles[labelType],
       reversed && styles.reversed,
       variant === "prominent" && styles.prominent,
-      disabled && styles.disabled
+      disabled && styles.disabled,
+      "!kz-text-blue-400 kz-bg-yellow-400"
     )}
     {...restProps}
   >

packages/components/styles/global.css

@@ -1 +1,6 @@
-@import "./foundation/styles.css";
+@layer tokens, normalize, reset;
+
+@import "@kaizen/design-tokens/css/variables.css" layer(tokens);
+@import "./foundation/_normalize.css" layer(normalize);
+@import "./foundation/_fonts.css" layer(reset);
+@import "./foundation/_reset.css" layer(reset);

packages/components/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/components/tailwind.config.js

@@ -0,0 +1,17 @@
+// ts-check
+/** @type {import('tailwindcss').Config} */
+
+const { Preset } = require("@kaizen/tailwind")
+
+module.exports = {
+  content: {
+    relative: true,
+    files: ["./src/**/*.tsx"],
+  },
+  presets: [Preset],
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+  prefix: "kz-",
+}

turbo.json

@@ -25,7 +25,13 @@
     },
     "@kaizen/components#build": {
       "dependsOn": ["@kaizen/design-tokens#build"],
-      "inputs": ["src/**", "rollup.config.mjs", "tsconfig*.json"],
+      "inputs": [
+        "src/**",
+        "rollup.config.mjs",
+        "tsconfig*.json",
+        "tailwind.config.js",
+        "bin/**"
+      ],
       "outputs": ["dist/**"]
     },
     "@kaizen/components#test:treeshake": {