feat: support css modules

Signed-off-by: Marc MacLeod <847542+marbemac@users.noreply.github.com>
marbemac · Jan 22, 2024 · db81922 · db81922
1 parent dc4b723
commit db81922
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 8 deletions.
diff --git a/.changeset/perfect-goats-warn.md b/.changeset/perfect-goats-warn.md
@@ -0,0 +1,5 @@
+---
+'@ssrx/vite': minor
+---
+
+Support CSS modules.
diff --git a/examples/solid-router-simple/src/components/Counter.module.css b/examples/solid-router-simple/src/components/Counter.module.css
@@ -0,0 +1,3 @@
+.button {
+  background-color: blue;
+}
diff --git a/examples/solid-router-simple/src/components/Counter.tsx b/examples/solid-router-simple/src/components/Counter.tsx
@@ -0,0 +1,13 @@
+import { createSignal } from 'solid-js';
+
+import styles from './Counter.module.css';
+
+export function Counter() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <button class={styles['button']} onClick={() => setCount(count => count + 1)}>
+      Counter: {count()}
+    </button>
+  );
+}
diff --git a/examples/solid-router-simple/src/pages/_index.module.css b/examples/solid-router-simple/src/pages/_index.module.css
@@ -0,0 +1,3 @@
+.data {
+  color: red;
+}
diff --git a/examples/solid-router-simple/src/pages/_index.tsx b/examples/solid-router-simple/src/pages/_index.tsx
@@ -1,7 +1,10 @@
 import { createResource } from 'solid-js';
 
+import { Counter } from '~/components/Counter.tsx';
 import { rand, sleep } from '~/utils.ts';
 
+import styles from './_index.module.css';
+
 export async function loader() {
   await sleep();
 
@@ -17,7 +20,13 @@ export default function Component() {
 
       <p>This home route simply loads some data (with a simulated delay) and displays it.</p>
 
-      <p>Loader Data: {data()?.data}</p>
+      <p>
+        Loader Data: <span class={styles['data']}>{data()?.data}</span>
+      </p>
+
+      <div>
+        <Counter />
+      </div>
     </div>
   );
 }
diff --git a/packages/vite/src/helpers/vite.ts b/packages/vite/src/helpers/vite.ts
@@ -12,7 +12,17 @@ import type { ModuleNode, ViteDevServer } from 'vite';
 
 import { type Asset, AssetType, getAssetWeight } from './routes.ts';
 
-export async function findStylesInModuleGraph(vite: ViteDevServer, match: string[], ssr: boolean) {
+export async function findStylesInModuleGraph({
+  vite,
+  match,
+  ssr,
+  cssModules,
+}: {
+  vite: ViteDevServer;
+  match: string[];
+  ssr: boolean;
+  cssModules: Record<string, string>;
+}) {
   const assets: { [id: string]: Asset } = {};
 
   const dependencies = await findDependencies(vite, match, ssr);
@@ -22,9 +32,7 @@ export async function findStylesInModuleGraph(vite: ViteDevServer, match: string
 
     if (file && ASSET_REGEXES.styles.test(file)) {
       try {
-        const mod = await vite.ssrLoadModule(url);
-
-        const code = mod['default'];
+        const code = isCssModulesFile(file) ? cssModules[file] : (await vite.ssrLoadModule(url))['default'];
 
         assets[file] = {
           type: AssetType.style,
@@ -167,7 +175,8 @@ async function findDependencies(vite: ViteDevServer, match: string[], ssr: boole
 }
 
 const ASSET_REGEXES = {
-  styles: /\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/,
+  styles: /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/,
+  cssModules: /\.module\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/,
   external: /\/(node_modules|inc)\/.*/,
   static: /\.(txt|ico|svg|webp|png|jpg|jpeg|gif|mp3)$/,
   runtime: /\.(js|ts|tsx|jsx)$/,
@@ -178,6 +187,8 @@ const ASSET_REGEXES = {
   vite: /^\/@.+|^\0vite\/.+/,
 };
 
+export const isCssModulesFile = (assetPath: string) => ASSET_REGEXES.cssModules.test(assetPath);
+
 export const isInternalRuntimeAsset = (assetPath: string) => {
   return (
     (ASSET_REGEXES.runtime.test(assetPath) || ASSET_REGEXES.styles.test(assetPath)) &&

diff --git a/packages/vite/src/plugins/dev-server.ts b/packages/vite/src/plugins/dev-server.ts
@@ -7,7 +7,7 @@ import type { Connect, Plugin, ViteDevServer } from 'vite';
 
 import type { Config } from '../config.ts';
 import { PLUGIN_NAMESPACE } from '../consts.ts';
-import { isAssetHandledByVite } from '../helpers/vite.ts';
+import { isAssetHandledByVite, isCssModulesFile } from '../helpers/vite.ts';
 import type { Router } from '../router.ts';
 import type { Manifest } from '../ssr-manifest.ts';
 
@@ -30,6 +30,12 @@ export const devServerPlugin = ({ config, manifest }: DevServerPluginOpts): Plug
 
       server.middlewares.use(await createMiddleware(server, { config }));
     },
+
+    transform(code, id) {
+      if (isCssModulesFile(id)) {
+        manifest.cssModules[id] = code;
+      }
+    },
   };
 };
 

diff --git a/packages/vite/src/ssr-manifest.ts b/packages/vite/src/ssr-manifest.ts
@@ -34,6 +34,9 @@ export class Manifest<ExternalRoutes> {
   #ssrManifest?: SSRManifest;
   readonly ssrManifestName = 'ssr-manifest.json';
 
+  // id (asset path) => strified css module
+  readonly cssModules: Record<string, string> = {};
+
   constructor(opts: ManifestOpts<ExternalRoutes>) {
     this.router = opts.router;
     this.config = opts.config;
@@ -194,7 +197,12 @@ export class Manifest<ExternalRoutes> {
     });
 
     // styles
-    const styleAssets = await findStylesInModuleGraph(devServer, [this.config.clientFile], false);
+    const styleAssets = await findStylesInModuleGraph({
+      vite: devServer,
+      match: [this.config.clientFile],
+      ssr: false,
+      cssModules: this.cssModules,
+    });
     assets.push(...Object.values(styleAssets));
 
     return assets;