Dev mode tweaks

packages/client/tsconfig.json

@@ -14,7 +14,10 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
-        "types": ["vite/client", "vitest/globals"]
+        "types": ["vite/client", "vitest/globals"],
+        "paths": {
+            "decorator-shared/*": ["../shared/*"]
+        }
     },
     "exclude": ["node_modules", "dist"]
 }

packages/client/vite.config.mjs

@@ -3,6 +3,7 @@ import minifyLiterals from 'rollup-plugin-minify-html-literals-v3';
 import path from 'path';
 import { partytownRollup } from '@builder.io/partytown/utils';
 import { typedCssModulesPlugin } from './typesafe-css-modules';
+import { cssModulesScopedNameOption } from '../shared/css-modules-config';
 
 export const mainBundleConfig = defineConfig({
     plugins: [typedCssModulesPlugin()],
@@ -31,6 +32,11 @@ export const mainBundleConfig = defineConfig({
             input: ['src/main.ts'],
         },
     },
+    css: {
+        modules: {
+            ...cssModulesScopedNameOption,
+        },
+    },
 });
 
 export const lazyConfig = defineConfig({

packages/server/css-modules-plugin.ts

@@ -1,11 +1,14 @@
 import { plugin } from 'bun';
 import postcss from 'postcss';
+import { cssModulesScopedNameOption } from '../shared/css-modules-config';
 
 export async function getPostcssTokens(path: string) {
     const val = await postcss([
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         require('postcss-modules')({
-            getJSON: () => {},
+            getJSON: () => {
+            },
+            ...cssModulesScopedNameOption,
         }),
     ]).process(await Bun.file(path).text(), { from: path });
 

packages/server/src/views/index.ts

@@ -26,9 +26,9 @@ a.appendChild(r);
 
 /* Merge the two manifests*/
 export const getManifest = async () => {
-    const mainManifest = (await import(`decorator-client/dist/.vite/manifest.json`)).default;
-    const csrManifest = (await import(`decorator-client/dist/.vite/csr.manifest.json`)).default;
-    const thirdPartyManifest = (await import(`decorator-client/dist/.vite/analytics.manifest.json`)).default;
+    const mainManifest = (await import('decorator-client/dist/.vite/manifest.json')).default;
+    const csrManifest = (await import('decorator-client/dist/.vite/csr.manifest.json')).default;
+    const thirdPartyManifest = (await import('decorator-client/dist/.vite/analytics.manifest.json')).default;
 
     return {
         ...mainManifest,
@@ -59,7 +59,7 @@ export const getEnvAssets = async () => {
 
     const css: EnvAssets = {
         production: manifest[entryPointPath].css.map(cdnUrl).map(cssLink).join(''),
-        development: '',
+        development: cssLink(''), // Dummy to ensure the styles-container is not empty
     };
 
     const scripts: EnvAssets = {

packages/server/tsconfig.json

@@ -8,7 +8,11 @@
         "strict": true,
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
-        "isolatedModules": false
+        "isolatedModules": false,
+        "paths": {
+            "decorator-shared/*": ["../shared/*"],
+            "decorator-client/*": ["../client/*"]
+        }
     },
     "exclude": ["**/*.stories.ts"]
 }

packages/shared/css-modules-config.ts

@@ -0,0 +1,7 @@
+// Create stable classnames in dev mode, in order to not break in HMR when loaded via other apps
+export const cssModulesScopedNameOption =
+    process.env.NODE_ENV === 'development'
+        ? {
+              generateScopedName: '[name]__[local]',
+          }
+        : {};