fix: modular css'

package.json

@@ -28,6 +28,14 @@
     "./appbutton": {
       "import": "./dist/appbutton.js",
       "require": "./dist/appbutton.cjs"
+    },
+    "./svgicons": {
+      "import": "./dist/svgicons.js",
+      "require": "./dist/svgicons.cjs"
+    },
+    "./index": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "scripts": {
@@ -53,7 +61,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-plugin-css-injected-by-js": "^3.3.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -132,6 +141,7 @@
     "vite": "^4.3.2",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-istanbul": "^4.0.1",
+    "vite-plugin-lib-inject-css": "^1.3.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "lint-staged": {

src/lib/app-button/index.tsx

@@ -25,7 +25,7 @@ export const AppButton = (props: IButtonProps): JSX.Element => {
 		customTitleClass?: string;
 	}): JSX.Element | null => {
 		return props.title ? (
-			<p className={[styles.title, customTitleClass].join(' ')}>{title}</p>
+			<div className={[styles.title, customTitleClass].join(' ')}>{title}</div>
 		) : null;
 	};
 

src/lib/index.ts

@@ -1,7 +1,2 @@
-import { AppButton } from './app-button';
-import { AppTextBox } from './app-textbox';
-import { Eye, TailessArrow } from './svgicons';
-
 import { ButtonThemes, AppDialogVariant } from './types/enums';
-
-export { ButtonThemes, AppDialogVariant, AppButton, AppTextBox, Eye, TailessArrow };
+export { ButtonThemes, AppDialogVariant };

src/stories/app-button.stories.tsx

@@ -1,5 +1,6 @@
 import { expect } from '@storybook/jest';
-import { AppButton, ButtonThemes } from '../lib';
+import { ButtonThemes } from '../lib';
+import { AppButton } from '../lib/app-button';
 import type { Meta, StoryObj } from '@storybook/react';
 import { waitFor, within, userEvent } from '@storybook/testing-library';
 

src/stories/app-textbox.stories.tsx

@@ -1,5 +1,5 @@
 import { expect } from '@storybook/jest';
-import { AppTextBox } from '../lib/index.ts';
+import { AppTextBox } from '../lib/app-textbox';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 

vite.config.ts

@@ -2,10 +2,12 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path';
 import IstanbulPlugin from 'vite-plugin-istanbul';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 export default defineConfig({
 	plugins: [
 		react(),
+		libInjectCss(),
 		IstanbulPlugin({
 			include: 'src/*',
 			exclude: ['node_modules', 'test/'],
@@ -19,13 +21,18 @@ export default defineConfig({
 		lib: {
 			entry: {
 				appbutton: path.resolve(__dirname, 'src/lib/app-button/index.tsx'),
-				apptextbox: path.resolve(__dirname, 'src/lib/app-textbox/index.tsx')
+				apptextbox: path.resolve(__dirname, 'src/lib/app-textbox/index.tsx'),
+				svgicons: path.resolve(__dirname, 'src/lib/svgicons/index.tsx'),
+				index: path.resolve(__dirname, 'src/lib/index.ts')
 			},
 			formats: ['es', 'cjs'],
 		},
 		rollupOptions: {
 			external: ['react', 'react-dom'],
 			output: {
+				preserveModules: false,
+				manualChunks: undefined,
+				inlineDynamicImports: false,
 				globals: {
 					react: 'React',
 					'react-dom': 'ReactDOM',