feat: remove css package

README.md

@@ -14,7 +14,6 @@ CmpUI is a component library designed for creating complex GUI applications in w
 
 | package name         | framework | NPM                                                                                                                   |
 | -------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
-| @toshusai/cmpui-css  | CSS       | [![NPM Version](https://img.shields.io/npm/v/%40toshusai%2Fcmpui)](https://www.npmjs.com/package/@toshusai/cmpui-css) |
 | @toshusai/cmpui      | React     | [![NPM Version](https://img.shields.io/npm/v/%40toshusai%2Fcmpui)](https://www.npmjs.com/package/@toshusai/cmpui)     |
 | @toshusai/cmpui-vue  | Vue       | WIP                                                                                                                   |
 | @toshusai/cmpui-core | Vanilla   | WIP                                                                                                                   |
@@ -31,8 +30,7 @@ npm install @toshusai/cmpui
 
 ```tsx
 import { Button } from "@toshusai/cmpui";
-import "@toshusai/cmpui/dist/index.css";
-import "@toshusai/cmpui-css/dist/index.css";
+import "@toshusai/cmpui-core/dist/style.css";
 
 export default function App() {
   return <Button>Hello world</Button>;

packages/core/package.json

@@ -9,12 +9,18 @@
     ".": {
       "import": {
         "default": "./dist/index.es.js",
-        "types": "./types/index.d.ts"
+        "types": "./types/index.d.ts",
+        "style.css": "./dist/style.css"
       },
       "require": {
         "default": "./dist/index.umd.js",
-        "types": "./types/index.d.ts"
+        "types": "./types/index.d.ts",
+        "dist/*": "./dist/*"
       }
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "require": "./dist/*"
     }
   },
   "files": [

packages/core/src/css/index.ts

@@ -0,0 +1,29 @@
+
+import "./alpha-checker-board.css";
+import "./Button.css";
+import "./CanvasView.css";
+import "./Checkbox.css";
+import "./Chip.css";
+import "./Circle.css";
+import "./Drawer.css";
+import "./FloatBox.css";
+import "./global.css";
+import "./Grid.css";
+import "./horizontal-cursor.css";
+import "./IconButton.css";
+import "./ListItem.css";
+import "./Loading.css";
+import "./MenuBarButton.css";
+import "./MenuList.css";
+import "./Modal.css";
+import "./Radio.css";
+import "./RectGizmo.css";
+import "./Select.css";
+import "./Skelton.css";
+import "./Slider.css";
+import "./SVPicker.css";
+import "./Switch.css";
+import "./TextInput.css";
+import "./Toast.css";
+import "./Tooltip.css";
+import "./TreeView.css";

packages/core/src/index.ts

@@ -1,4 +1,3 @@
-
 export * from "./Button";
 export * from "./CanvasView/createPanDragHandler";
 export * from "./CanvasView/handleWheelZoom";
@@ -21,3 +20,5 @@ export * from "./interactions/createDragHandler";
 export * from "./interactions/KeyboardKey";
 export * from "./styles/matrixToCss";
 export * from "./styles/px";
+
+import "./css/index"

packages/core/vite.config.js

@@ -2,14 +2,12 @@ import { defineConfig } from "vite";
 import path from "path";
 
 export default defineConfig({
-  plugins: [],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
       name: "CmpUiCore",
       fileName: (format) => `index.${format}.js`,
     },
     outDir: path.resolve(__dirname, "dist"),
-    rollupOptions: {},
   },
 });

packages/core/vite.config.split.js

@@ -0,0 +1,45 @@
+import { defineConfig } from "vite";
+import path from "path";
+import { readdirSync, unlinkSync, writeFileSync } from "fs";
+
+function getCssFileNames() {
+  const dir = path.resolve(__dirname, "src/css");
+  return readdirSync(dir).filter(
+    (file) => file.endsWith(".css") && file !== "index.ts"
+  );
+}
+
+export default defineConfig({
+  plugins: [
+    {
+      buildStart: () => {
+        const dir = path.resolve(__dirname, "src/css");
+        getCssFileNames().forEach((cssFileName) => {
+          writeFileSync(
+            `${dir}/${cssFileName}.ts`,
+            `import "./${cssFileName}"`
+          );
+        });
+      },
+      closeBundle: () => {
+        const dir = path.resolve(__dirname, "src/css");
+        getCssFileNames().forEach((cssFileName) => {
+          unlinkSync(`${dir}/${cssFileName}.ts`);
+        });
+      },
+    },
+  ],
+  build: {
+    outDir: path.resolve(__dirname, "dist/split"),
+    rollupOptions: {
+      input: [
+        "src/index.ts",
+        ...getCssFileNames().map((file) => `src/css/${file}.ts`),
+      ],
+      output: {
+        assetFileNames: "[name][extname]",
+        entryFileNames: "[name].js",
+      },
+    },
+  },
+});

packages/react/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import type { Decorator, Preview } from "@storybook/react";
 
 import DocumentationTemplate from "./DocumentationTemplate.mdx";
 
-import "@toshusai/cmpui-css/dist/index.css";
+import "@toshusai/cmpui-core/dist/style.css";
 import "./storybook.css";
 
 const preview: Preview = {

packages/react/package.json

@@ -23,7 +23,6 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
     "@toshusai/cmpui-core": "link:../core",
-    "@toshusai/cmpui-css": "link:../css",
     "react-transition-group": "^4.4.5"
   },
   "peerDependencies": {

packages/vue/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Decorator, Preview } from "@storybook/vue3";
 
-import "@toshusai/cmpui-css/dist/index.css";
+import "@toshusai/cmpui-core/dist/style.css"
 
 const preview: Preview = {
   parameters: {

packages/vue/package.json

@@ -38,8 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
-    "@toshusai/cmpui-core": "link:../core",
-    "@toshusai/cmpui-css": "link:../css"
+    "@toshusai/cmpui-core": "link:../core"
   },
   "peerDependencies": {
     "vue": "^3.4.38"

packages/vue/src/components/CRectGizmo/CRectGizmo.vue

@@ -5,17 +5,26 @@ import {
   px,
   radToDeg,
   createResizeHandler,
+  Vector2,
 } from "@toshusai/cmpui-core";
 import { computed, ref } from "vue";
 import { corners } from "@toshusai/cmpui-core";
 import CCircle from "../CCircle/CCircle.vue";
 
-import { RectGizmoProps } from "@toshusai/cmpui-core";
 import { createEdgeHandler, createEdgeStyle } from "@toshusai/cmpui-core";
 import { createStepped } from "@toshusai/cmpui-core";
 import { createRotateHandler, createRotateStyle } from "@toshusai/cmpui-core";
 import { whIndexToCornerName } from "@toshusai/cmpui-core";
 
+export type RectGizmoProps = {
+  width: number;
+  height: number;
+  scale: Vector2;
+  rotation: number;
+  position: Vector2;
+  origin: Vector2;
+};
+
 const props = defineProps<RectGizmoProps>();
 
 const emit = defineEmits<{

packages/vue/src/components/CSelect/CSelect.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from "vitest";
 import CSelect from "./CSelect.vue";
 import { defineComponent, h, nextTick, ref } from "vue";
 
-import "@toshusai/cmpui-css/dist/index.css";
+import "@toshusai/cmpui-core/dist/style.css";
 
 const waitNextTick = () => new Promise<void>((resolve) => nextTick(resolve));
 

packages/vue/src/components/CSubMenuPopover/stories/StorySubMenuPopoverExample2/StorySubMenuPopoverExample2.browser.test.ts

@@ -5,7 +5,7 @@ import { userEvent } from "@vitest/browser/context";
 import { asyncNextTick } from "../../../../test/asyncNextTick";
 import { asyncSetTimeout } from "../../../../test/asyncSetTimeout";
 
-import "@toshusai/cmpui-css/dist/index.css";
+import "@toshusai/cmpui-core/dist/style.css";
 import "../../../../test/test.css";
 
 beforeEach(cleanup);