add ci/cd

Author: u4aew

README.md

@@ -5,7 +5,7 @@ Modern React component library built with TypeScript, SCSS modules, and Storyboo
 ## 🚀 Features
 
 - **React 19** with full TypeScript support
-- **SCSS Modules** for scoped styling
+- **SCSS Modules** for scoped styling with automatic CSS injection
 - **Storybook** for component development and documentation
 - **Vite** for fast builds and development
 - **ESLint** for code quality
@@ -23,7 +23,6 @@ npm install @u4aew/react-component-publishing-guide
 
 ```tsx
 import { Button } from '@u4aew/react-component-publishing-guide';
-import '@u4aew/react-component-publishing-guide/dist/style.css';
 
 function App() {
   return (

package-lock.json

@@ -75,6 +75,7 @@
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^3.2.4"
   }

package.json

@@ -23,7 +23,7 @@ export const Button = ({
 }: ButtonProps) => {
   const modeClass = primary ? styles.primary : styles.secondary;
   const sizeClass = styles[size];
-  
+
   return (
     <button
       type="button"

src/components/Button/Button.tsx

@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
 
 // https://vite.dev/config/
 import path from 'node:path';
@@ -11,7 +12,10 @@ const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(file
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    cssInjectedByJsPlugin()
+  ],
   css: {
     modules: {
       localsConvention: 'camelCaseOnly'
@@ -30,9 +34,14 @@ export default defineConfig({
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM'
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'style.css';
+          return assetInfo.name;
         }
       }
-    }
+    },
+    cssCodeSplit: false
   },
   test: {
     projects: [{