feat!: externalizing styles

packages/documentation/src/modules/App/App.tsx

@@ -1,3 +1,5 @@
+import "@versini/ui-components/dist/style.css";
+
 import * as UI from "@versini/ui-components";
 import clsx from "clsx";
 import { useEffect } from "react";

packages/ui-components/src/components/Button/Button.tsx

@@ -1,5 +1,3 @@
-import "./button.css";
-
 import React from "react";
 
 import type { ButtonProps } from "./ButtonTypes";

packages/ui-components/src/components/Button/ButtonIcon.tsx

@@ -1,5 +1,3 @@
-import "./button.css";
-
 import React from "react";
 
 import type { ButtonIconProps } from "./ButtonTypes";

packages/ui-components/src/components/Footer/Footer.tsx

@@ -1,5 +1,3 @@
-import "./footer.css";
-
 import clsx from "clsx";
 
 import type { FooterProps } from "./FooterTypes";

packages/ui-components/src/components/index.ts

@@ -1,3 +1,5 @@
+import "./index.css";
+
 import { Button } from "./Button/Button";
 import { ButtonIcon } from "./Button/ButtonIcon";
 import { ButtonLink } from "./Button/ButtonLink";

packages/ui-components/vite.config.ts

@@ -1,11 +1,8 @@
-/// <reference types="vitest" />
-
 import { resolve } from "node:path";
 
 import fs from "fs-extra";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
-import { libInjectCss } from "vite-plugin-lib-inject-css";
 
 const packageJson = fs.readJSONSync("package.json");
 
@@ -38,9 +35,8 @@ export default defineConfig({
 				"react/jsx-runtime",
 				"tailwindcss",
 			],
-
 			output: {
-				assetFileNames: "assets/[name][extname]",
+				assetFileNames: "style[extname]",
 				entryFileNames: "[name].js",
 			},
 		},
@@ -60,13 +56,5 @@ export default defineConfig({
 			exclude: ["**/__tests__/**/*"],
 			rollupTypes: true,
 		}),
-		libInjectCss({
-			entry: {
-				index: "./src/components/index.ts",
-				Button: "./src/components/Button/Button.tsx",
-				ButtonIcon: "./src/components/Button/ButtonIcon.tsx",
-				Footer: "./src/components/Footer/Footer.tsx",
-			},
-		}),
 	],
 });

packages/ui-components/vitest.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig, mergeConfig } from "vitest/config";
 
 import viteConfig from "./vite.config";