⚡️(build) make the library tree-shakeable

package.json

@@ -9,6 +9,10 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "files": [
     "dist"
   ],
@@ -54,15 +58,15 @@
     "@gouvfr-lasuite/cunningham-react": "4.3.0",
     "@gouvfr-lasuite/cunningham-tokens": "3.1.0",
     "@gouvfr-lasuite/integration": "1.0.2",
-    "@types/node": "22.10.7",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
     "react-arborist": "3.4.3",
     "react-aria-components": "1.16.0",
     "react-resizable-panels": "2.1.7",
     "react-stately": "3.37.0",
     "react-virtualized": "9.22.6",
-    "react-pdf": "10.1.0"
+    "react-pdf": "10.1.0",
+    "use-resize-observer": "9.1.0"
   },
   "peerDependencies": {
     "react": "^19.1.2",
@@ -89,6 +93,7 @@
     "@svgr/plugin-prettier": "8.1.0",
     "@svgr/plugin-svgo": "8.1.0",
     "@tanstack/react-query": "5.90.10",
+    "@types/node": "22.10.7",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/react-virtualized": "9.22.3",
@@ -116,7 +121,6 @@
     "tsx": "4.21.0",
     "typescript": "5.6.2",
     "typescript-eslint": "8.18.2",
-    "use-resize-observer": "9.1.0",
     "vite": "6.0.5",
     "vite-plugin-dts": "4.5.0",
     "vite-tsconfig-paths": "5.1.4",

src/components/la-gaufre/LaGaufre.tsx

@@ -1,5 +1,7 @@
 import { Gaufre } from "@gouvfr-lasuite/integration";
-import "@gouvfr-lasuite/integration/dist/css/gaufre.css";
+// Gaufre's styles are pulled into the kit's single stylesheet from
+// library.scss (alongside the other external-dependency CSS), so this
+// component does not import them itself.
 
 export const LaGaufre = () => {
   return (

src/library.scss

@@ -45,3 +45,4 @@
 @use "react-pdf/dist/Page/AnnotationLayer.css";
 @use "react-pdf/dist/Page/TextLayer.css";
 @use "react-virtualized/styles.css";
+@use "@gouvfr-lasuite/integration/dist/css/gaufre.css";

vite.config.ts

@@ -2,9 +2,33 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
+import { readFileSync } from "fs";
 import dts from "vite-plugin-dts";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+const pkg = JSON.parse(
+  readFileSync(resolve(__dirname, "package.json"), "utf-8"),
+) as {
+  dependencies?: Record<string, string>;
+  peerDependencies?: Record<string, string>;
+};
+
+// Treat every dependency and peer dependency as external so the kit never
+// bundles a copy of a third-party library. Consumers install these (they are
+// declared as deps/peerDeps) and their bundler dedupes shared ones — which also
+// keeps context-bearing libraries (react-aria-components / react-stately) as
+// singletons. `pdfjs-dist` is a transitive dep of react-pdf to keep external too.
+// Dependency CSS that belongs in the published stylesheet is pulled in via
+// library.scss, so externalizing the JS does not drop any styles.
+const externalPackages = [
+  ...Object.keys(pkg.dependencies ?? {}),
+  ...Object.keys(pkg.peerDependencies ?? {}),
+  "pdfjs-dist",
+];
+
+const isExternal = (id: string) =>
+  externalPackages.some((dep) => id === dep || id.startsWith(`${dep}/`));
+
 // https://vitejs.dev/config/
 export default defineConfig({
   test: {
@@ -14,34 +38,40 @@ export default defineConfig({
     include: ["src/**/*.{test,spec}.?(c|m)[jt]s?(x)"],
   },
   build: {
+    // Keep all CSS in a single stylesheet (dist/style.css) rather than splitting
+    // it per preserved module.
+    cssCodeSplit: false,
     lib: {
       entry: {
         index: "./src/index.ts",
         icons: "./src/icons.ts",
       },
       name: "@lasuite/ui-kit",
-      formats: ["es", "cjs"],
       cssFileName: "style",
     },
     rollupOptions: {
-      external: [
-        "react",
-        "react-dom",
-        "@gouvfr-lasuite/cunningham-react",
-        "@tanstack/react-query",
-        "react-pdf",
-        /^react-pdf\//,
-        "pdfjs-dist",
-        /^pdfjs-dist\//,
-        "react-virtualized",
-        /^react-virtualized\//,
-      ],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
+      external: isExternal,
+      // `preserveModules` keeps the source module graph in the output (one file
+      // per source module) instead of bundling everything into one mega-chunk.
+      // Combined with `"sideEffects"` in package.json, this lets consumers
+      // tree-shake: importing a single component no longer drags in the whole kit.
+      output: [
+        {
+          format: "es",
+          preserveModules: true,
+          preserveModulesRoot: "src",
+          entryFileNames: "[name].js",
+          chunkFileNames: "[name]-[hash].js",
         },
-      },
+        {
+          format: "cjs",
+          preserveModules: true,
+          preserveModulesRoot: "src",
+          entryFileNames: "[name].cjs",
+          chunkFileNames: "[name]-[hash].cjs",
+          exports: "named",
+        },
+      ],
     },
     sourcemap: true,
     emptyOutDir: true,