feat(bundler): remove style injection (#4728)

* chore(deps): add concat-cli to KAIO

* feat: extract CSS modules styles

* feat(bundler): consolidate stylesheets

* docs(bundler): update readme

.changeset/long-experts-care.md

@@ -0,0 +1,6 @@
+---
+"@kaizen/package-bundler": minor
+"@kaizen/components": minor
+---
+
+Remove style injection

packages/components/package.json

@@ -26,10 +26,12 @@
     "styles.css"
   ],
   "scripts": {
-    "build": "pnpm package-bundler build-shared-ui && pnpm build:global-styles",
-    "build:global-styles": "postcss ./styles/global.css --output dist/styles.css",
     "clean": "rm -rf dist",
     "lint:ts": "tsc --noEmit",
+    "build": "pnpm package-bundler build-shared-ui && pnpm build:styles",
+    "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
+    "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
+    "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "update-icons": "./src/Icon/bin/update-icons.sh",
@@ -97,6 +99,7 @@
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
+    "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
     "react-intl": "^6.6.8",
     "rollup": "^4.18.0",

packages/package-bundler/README.md

@@ -10,9 +10,9 @@ pnpm add -D @kaizen/package-bundler
 
 ## build-shared-ui
 
-For shared UI packages, CSS modules and/or Tailwind will be included in the dist along side the components JS.
+For shared UI packages. CSS modules and/or Tailwind will be included in the dist in a single stylesheet (`{PACKAGE_NAME}/dist/styles.css`) to be imported by the consumer.
 
-_Note: styles are injected into the JS of components, so there's no need for consumers to manually import CSS files, it all comes with the component._
+_Note: If your package extends another shared UI package, you will need to list the other package as a peerDependency and have the end consumer import both stylesheets._
 
 ### `package.json`
 
@@ -25,7 +25,7 @@ Add the following to your `package.json`:
   "dist"
 ],
 "sideEffects": [
-  "tailwind.css.*" // If using Tailwind
+  "styles.css"
 ],
 "scripts": {
   "build": "pnpm package-bundler build-shared-ui",
@@ -153,13 +153,6 @@ module.exports = {
 }
 ```
 
-You will also need to add the compiled Tailwind stylesheet to `sideEffects` in your `package.json` to ensure it is not tree-shaken:
-```json
-"sideEffects": [
-  "tailwind.css.*"
-]
-```
-
 ### Alias
 
 If you are using aliases, ensure you have them listed in your `tsconfig.json` (the `tsconfig.dist` and `tsconfig.types` should extend this) and in `rollup.config`.

packages/package-bundler/bin/build-commands.sh

@@ -24,21 +24,9 @@ compile_types() {
     echo -e "${GREEN}------${NC}"
 }
 
-add_ui_build_tools() {
-    echo -e "${GREEN}Adding UI build tools..."
-    npm explore @kaizen/package-bundler -- node ./dist/presets/shared-ui/bin/addBuildTools.js --packagePath="$PWD"
-    echo -e "${GREEN}------${NC}"
-}
-
-inject_tailwind_imports() {
-    echo -e "${GREEN}Running Tailwind Styles Import command..."
-    npm explore @kaizen/package-bundler -- node ./dist/presets/shared-ui/bin/injectTailwindImports.js --packagePath="$PWD"
-    echo -e "${GREEN}------${NC}"
-}
-
-ui_post_build() {
-    echo -e "${GREEN}Post build...${NC}"
-    npm explore @kaizen/package-bundler -- node ./dist/presets/shared-ui/bin/postBuild.js --packagePath="$PWD"
+consolidate_styles() {
+    echo -e "${GREEN}Consolidate styles...${NC}"
+    npm explore @kaizen/package-bundler -- node ./dist/presets/shared-ui/bin/consolidateStyles.js --packagePath="$PWD"
     echo -e "${GREEN}------${NC}"
 }
 
@@ -47,24 +35,21 @@ elapsed_time() {
 }
 
 build() {
+    clean
     bundle
     compile_types
 }
 
 case "$1" in
     build)
         echo "Running build command..."
-        clean
         build
         elapsed_time
         ;;
     build-shared-ui)
         echo "Running build-shared-ui command..."
-        clean
-        add_ui_build_tools
         build
-        inject_tailwind_imports
-        ui_post_build
+        consolidate_styles
         elapsed_time
         ;;
     help)

packages/package-bundler/package.json

@@ -30,6 +30,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "babel-plugin-pure-static-props": "^0.2.0",
+    "concat-cli": "^4.0.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^7.1.2",
     "rollup-plugin-postcss": "^4.0.2",

packages/package-bundler/src/presets/shared-ui/bin/consolidateStyles.ts

@@ -0,0 +1,48 @@
+import fs from "fs"
+import path from "path"
+import { getArgs } from "./getArgs.js"
+
+const args = getArgs()
+const { packagePath } = args
+
+const PATH_CSS_MODULES_CJS = `${packagePath}/dist/cjs/styles.css`
+const PATH_CSS_MODULES_ESM = `${packagePath}/dist/esm/styles.css`
+const PATH_TAILWIND = `${packagePath}/dist/tailwind.css`
+// Rollup creates an empty JS file when building Tailwind styles
+const PATH_TAILWIND_JS = `${packagePath}/dist/tailwind.js`
+const PATH_DIST_STYLES = `${packagePath}/dist/styles.css`
+
+const pathsToCombine = [PATH_TAILWIND, PATH_CSS_MODULES_ESM]
+const pathsToDelete = [
+  PATH_CSS_MODULES_CJS,
+  PATH_CSS_MODULES_ESM,
+  PATH_TAILWIND,
+  PATH_TAILWIND_JS,
+]
+
+const combineFiles = (): void => {
+  pathsToCombine.forEach(filePath => {
+    const file = path.resolve(filePath)
+    if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+      const fileContent = fs.readFileSync(file).toString()
+
+      fs.appendFileSync(PATH_DIST_STYLES, `${fileContent}\n`)
+    }
+  })
+}
+
+const deleteFiles = (): void => {
+  pathsToDelete.forEach(filePath => {
+    const file = path.resolve(filePath)
+    if (fs.existsSync(file)) {
+      fs.unlinkSync(file)
+    }
+  })
+}
+
+const run = (): void => {
+  combineFiles()
+  deleteFiles()
+}
+
+run()

packages/package-bundler/src/presets/shared-ui/plugins-shared-ui.ts

@@ -1,16 +1,10 @@
-import path from "path"
 import postcss from "rollup-plugin-postcss"
 import { pluginsDefault } from "../default/index.js"
 
-// This file is added by bin/addBuildTools and removed in bin/postBuild
-const styleInjectPath = path.resolve("src/__build-tools/styleInject.js")
-
 export const pluginsSharedUi = [
   postcss({
     modules: true,
-    extract: false,
-    inject: cssVariableName =>
-      `import { styleInject } from "${styleInjectPath}";\nstyleInject(${cssVariableName});`,
+    extract: "styles.css",
     extensions: [".scss", ".css"],
   }),
   ...pluginsDefault,

packages/package-bundler/src/presets/shared-ui/rollup-tailwind.ts

@@ -1,44 +1,21 @@
-import path from "path"
 import { RollupOptions } from "rollup"
 import postcss from "rollup-plugin-postcss"
 
-// This file is added by bin/addBuildTools and removed in bin/postBuild
-const styleInjectPath = path.resolve("src/__build-tools/styleInject.js")
-
 export const rollupTailwindConfig = (): RollupOptions[] => {
-  const sharedConfig = {
+  const config = {
     input: "./src/tailwind.css",
     plugins: [
       postcss({
         modules: false,
-        extract: false,
-        inject: cssVariableName =>
-          `import { styleInject } from "${styleInjectPath}";\n\nstyleInject(${cssVariableName});`,
+        inject: false,
+        extract: "tailwind.css",
         extensions: [".css"],
       }),
     ],
-  } satisfies RollupOptions
-
-  // CommonJS
-  const cjsConfig = {
-    ...sharedConfig,
-    output: {
-      dir: "dist/cjs",
-      format: "commonjs",
-      entryFileNames: "tailwind.css.cjs",
-      exports: "named",
-    },
-  } satisfies RollupOptions
-
-  // ESModules
-  const esmConfig = {
-    ...sharedConfig,
     output: {
-      dir: "dist/esm",
-      format: "esm",
-      entryFileNames: "tailwind.css.mjs",
+      dir: "dist",
     },
-  } satisfies RollupOptions
+  }
 
-  return [cjsConfig, esmConfig]
+  return [config]
 }