Merge pull request #17 from jtiala/publish-each-components-css

Publish each component's css as it's own file

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: {

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 {

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

packages/style/package.json

@@ -14,31 +14,18 @@
     "url": "https://github.com/jtiala/themeless-ui",
     "directory": "packages/style"
   },
-  "type": "module",
-  "module": "./dist/index.js",
-  "main": "./dist/index.umd.cjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
   "files": [
     "dist",
     "CHANGELOG.md"
   ],
   "packageManager": "[email protected]",
   "scripts": {
     "build": "vite build",
-    "lint": "pnpm run lint:tsc && pnpm run lint:eslint && pnpm run lint:stylelint",
-    "lint:report": "pnpm run lint:tsc:report && pnpm run lint:eslint:report && pnpm run lint:stylelint:report",
-    "lint:fix": "pnpm run lint:eslint:fix && pnpm run lint:stylelint:fix",
+    "lint": "pnpm run lint:tsc && pnpm run lint:stylelint",
+    "lint:report": "pnpm run lint:tsc:report && pnpm run lint:stylelint:report",
+    "lint:fix": "pnpm run lint:stylelint:fix",
     "lint:tsc": "tsc",
     "lint:tsc:report": "mkdir -p ./reports && tsc > ./reports/lint-report-tsc.txt",
-    "lint:eslint": "eslint \"**/*.{ts,tsx}\"",
-    "lint:eslint:report": "eslint -f json -o ./reports/lint-report-eslint.json \"**/*.{ts,tsx}\"",
-    "lint:eslint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
     "lint:stylelint": "stylelint \"**/*.css\"",
     "lint:stylelint:report": "stylelint -f json -o ./reports/lint-report-stylelint.json \"**/*.css\"",
     "lint:stylelint:fix": "stylelint \"**/*.css\" --fix",
@@ -49,10 +36,8 @@
     "@themeless-ui/theme-default": "workspace:*"
   },
   "devDependencies": {
-    "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/stylelint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
-    "eslint": "8.50.0",
     "stylelint": "15.10.3",
     "typescript": "5.2.2",
     "vite": "4.4.9"

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";

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";

packages/style/src/tokens.css

@@ -0,0 +1,3 @@
+@import "./tokens/spacing.css";
+@import "./tokens/typography.css";
+@import "./tokens/colors.css";

packages/style/tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": "@themeless-ui/typescript-config/vite-react.json",
-  "include": ["src"]
+  "extends": "@themeless-ui/typescript-config/vite-react.json"
 }

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]";
+        },
+      },
     },
   },
 });

packages/theme-default/package.json

@@ -14,42 +14,27 @@
     "url": "https://github.com/jtiala/themeless-ui",
     "directory": "packages/theme-default"
   },
-  "type": "module",
-  "module": "./dist/index.js",
-  "main": "./dist/index.umd.cjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    }
-  },
   "files": [
     "dist",
     "CHANGELOG.md"
   ],
   "packageManager": "[email protected]",
   "scripts": {
     "build": "vite build",
-    "lint": "pnpm run lint:tsc && pnpm run lint:eslint && pnpm run lint:stylelint",
-    "lint:report": "pnpm run lint:tsc:report && pnpm run lint:eslint:report && pnpm run lint:stylelint:report",
-    "lint:fix": "pnpm run lint:eslint:fix && pnpm run lint:stylelint:fix",
+    "lint": "pnpm run lint:tsc && pnpm run lint:stylelint",
+    "lint:report": "pnpm run lint:tsc:report && pnpm run lint:stylelint:report",
+    "lint:fix": "pnpm run lint:stylelint:fix",
     "lint:tsc": "tsc",
     "lint:tsc:report": "mkdir -p ./reports && tsc > ./reports/lint-report-tsc.txt",
-    "lint:eslint": "eslint \"**/*.{ts,tsx}\"",
-    "lint:eslint:report": "eslint -f json -o ./reports/lint-report-eslint.json \"**/*.{ts,tsx}\"",
-    "lint:eslint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
     "lint:stylelint": "stylelint \"**/*.css\"",
     "lint:stylelint:report": "stylelint -f json -o ./reports/lint-report-stylelint.json \"**/*.css\"",
     "lint:stylelint:fix": "stylelint \"**/*.css\" --fix",
     "clean": "rm -rf dist reports node_modules .turbo",
     "publish:npm": "pnpm publish --access public"
   },
   "devDependencies": {
-    "@themeless-ui/eslint-config": "workspace:*",
     "@themeless-ui/stylelint-config": "workspace:*",
     "@themeless-ui/typescript-config": "workspace:*",
-    "eslint": "8.50.0",
     "stylelint": "15.10.3",
     "typescript": "5.2.2",
     "vite": "4.4.9"

packages/theme-default/tsconfig.json

@@ -1,4 +1,3 @@
 {
-  "extends": "@themeless-ui/typescript-config/vite-react.json",
-  "include": ["src"]
+  "extends": "@themeless-ui/typescript-config/vite-react.json"
 }

packages/theme-default/vite.config.ts

@@ -4,19 +4,11 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   build: {
-    lib: {
-      entry: "src/index.ts",
-      name: "theme-default",
-      fileName: "index",
-    },
     rollupOptions: {
+      input: "src/index.css",
       output: {
-        assetFileNames: (assetInfo) => {
-          if (assetInfo.name === "style.css") {
-            return "theme-default.css";
-          }
-
-          return assetInfo.name || "";
+        assetFileNames: () => {
+          return "theme-default.css";
         },
       },
     },