Refactor to vite please

package.json

@@ -3,30 +3,34 @@
   "license": "MIT",
   "version": "0.0.9",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.js",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.umd.js"
+  },
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsup",
-    "preview": "vite preview",
+    "build": "vite build",
     "check": "tsc",
     "release": "npm run check && npm run build && changeset publish"
   },
   "dependencies": {
+    "postcss": "^8.4.21",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "rollup-plugin-postcss": "^4.0.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react-swc": "^3.0.0",
-    "tsup": "^6.5.0",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^1.7.1"
   }
 }

src/Button.module.css

@@ -0,0 +1,13 @@
+.button {
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}

src/Button.tsx

@@ -1,5 +1,5 @@
-import styles from "./index.module.css";
+import style from "./Button.module.css";
 
 export function Button() {
-  return <button className={styles.button}>This is the pbandj button</button>;
+  return <button className={style.button}>This is the pbandj button</button>;
 }

src/Div.css

@@ -0,0 +1,8 @@
+/* funky red div */
+.div {
+  color: white;
+  background-color: red;
+  border: none;
+  padding: 4rem;
+  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}

src/Div.tsx

@@ -1,10 +1,5 @@
-import "./App.css";
-import "./index.css";
+import "./Div.css";
 
 export function Div() {
-  return (
-    <div>
-      <h1>Div Word</h1>
-    </div>
-  );
+  return <div className="div">Div Word</div>;
 }

src/index.ts

@@ -1,3 +1,2 @@
-import "./index.css";
 export * from "./Button";
 export * from "./Div";

vite.config.ts

@@ -1,16 +1,17 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import { resolve } from "path";
+import dts from "vite-plugin-dts";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), dts()],
   // Build components from src/index.ts
   build: {
     lib: {
-      entry: "src/index.ts",
+      entry: resolve(__dirname, "src/index.ts"),
       name: "pbandj",
-      formats: ["es", "umd"],
-      fileName: (format) => `index.${format}.js`,
+      fileName: "index",
     },
     rollupOptions: {
       external: ["react", "react-dom"],