feat: publish every component's css as it's own file as well as the w…

…hole bundle
jtiala · Sep 30, 2023 · b002b25 · b002b25
1 parent adf6be6
commit b002b25
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 25 deletions.
diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import type { Preview } from "@storybook/react";
-import "../node_modules/@themeless-ui/style/dist/style.css";
+import "../node_modules/@themeless-ui/style/dist/index.css";
 
 const preview: Preview = {
   parameters: {

diff --git a/apps/nextjs-example/app/index.css b/apps/nextjs-example/app/index.css
@@ -1,4 +1,4 @@
-@import "../node_modules/@themeless-ui/style/dist/style.css";
+@import "../node_modules/@themeless-ui/style/dist/index.css";
 
 html,
 body {

diff --git a/apps/react-example/src/index.css b/apps/react-example/src/index.css
@@ -1,4 +1,4 @@
-@import "../node_modules/@themeless-ui/style/dist/style.css";
+@import "../node_modules/@themeless-ui/style/dist/index.css";
 
 /*
   Comment below to show only default theme

diff --git a/packages/style/src/components.css b/packages/style/src/components.css
@@ -0,0 +1,10 @@
+@import "./components/anchor.css";
+@import "./components/blockquote.css";
+@import "./components/button.css";
+@import "./components/heading.css";
+@import "./components/input.css";
+@import "./components/list.css";
+@import "./components/paragraph.css";
+@import "./components/stack.css";
+@import "./components/text.css";
+@import "./components/textarea.css";
diff --git a/packages/style/src/index.css b/packages/style/src/index.css
@@ -1,19 +1,3 @@
-/* Default theme */
 @import "../node_modules/@themeless-ui/theme-default/dist/theme-default.css";
-
-/* Tokens */
-@import "./tokens/spacing.css";
-@import "./tokens/typography.css";
-@import "./tokens/colors.css";
-
-/* Components */
-@import "./components/anchor.css";
-@import "./components/blockquote.css";
-@import "./components/button.css";
-@import "./components/heading.css";
-@import "./components/input.css";
-@import "./components/list.css";
-@import "./components/paragraph.css";
-@import "./components/stack.css";
-@import "./components/text.css";
-@import "./components/textarea.css";
+@import "./tokens.css";
+@import "./components.css";
diff --git a/packages/style/src/tokens.css b/packages/style/src/tokens.css
@@ -0,0 +1,3 @@
+@import "./tokens/spacing.css";
+@import "./tokens/typography.css";
+@import "./tokens/colors.css";
diff --git a/packages/style/vite.config.ts b/packages/style/vite.config.ts
@@ -1,13 +1,29 @@
 /// <reference types="vite/client" />
 
+import fs from "fs";
 import { defineConfig } from "vite";
 
+const componentsDirectory = "./src/components";
+const componentInputs = fs
+  .readdirSync(componentsDirectory)
+  .map((file) => `${componentsDirectory}/${file}`);
+
+const tokensDirectory = "./src/tokens";
+const tokenInputs = fs
+  .readdirSync(tokensDirectory)
+  .map((file) => `${tokensDirectory}/${file}`);
+
+const otherInputs = ["src/index.css", "src/tokens.css", "src/components.css"];
+
 export default defineConfig({
   build: {
-    lib: {
-      entry: "src/index.ts",
-      name: "style",
-      fileName: "index",
+    rollupOptions: {
+      input: [...componentInputs, ...tokenInputs, ...otherInputs],
+      output: {
+        assetFileNames: () => {
+          return "[name].[ext]";
+        },
+      },
     },
   },
 });