@ssrx/vite - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/config.js

@@ -69,9 +69,2 @@ import * as path from 'path';
   }
-  get viteVersion() {
-    const vitePkg = require("vite/package.json");
-    return vitePkg.version;
-  }
-  get viteMajor() {
-    return parseInt(this.viteVersion.split(".")[0]);
-  }
   get isEdgeRuntime() {
@@ -78,0 +71,0 @@ return ["edge", "cf-pages"].includes(this.runtime);

dist/helpers/vite.js

@@ -5,3 +5,8 @@ import { isBuiltin } from 'node:module';
 
-async function findStylesInModuleGraph(vite, match, ssr) {
+async function findStylesInModuleGraph({
+  vite,
+  match,
+  ssr,
+  cssModules
+}) {
   const assets = {};
@@ -13,4 +18,3 @@ const dependencies = await findDependencies(vite, match, ssr);
       try {
-        const mod = await vite.ssrLoadModule(url);
-        const code = mod["default"];
+        const code = isCssModulesFile(file) ? cssModules[file] : (await vite.ssrLoadModule(url))["default"];
         assets[file] = {
@@ -125,3 +129,4 @@ type: AssetType.style,
 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)\/.*/,
@@ -135,2 +140,3 @@ static: /\.(txt|ico|svg|webp|png|jpg|jpeg|gif|mp3)$/,
 };
+const isCssModulesFile = (assetPath) => ASSET_REGEXES.cssModules.test(assetPath);
 const isInternalRuntimeAsset = (assetPath) => {
@@ -160,2 +166,2 @@ return (ASSET_REGEXES.runtime.test(assetPath) || ASSET_REGEXES.styles.test(assetPath)) && !ASSET_REGEXES.vite.test(assetPath) && !ASSET_REGEXES.external.test(assetPath);
 
-export { findStylesInModuleGraph, isAssetHandledByVite, isInternalRuntimeAsset };
+export { findStylesInModuleGraph, isAssetHandledByVite, isCssModulesFile, isInternalRuntimeAsset };

dist/plugins/build.js

@@ -12,3 +12,3 @@ import * as fs from 'fs/promises';
     name: `${PLUGIN_NAMESPACE}:build`,
-    apply(config2, env) {
+    apply(c, env) {
       return env.command === "build";
@@ -18,3 +18,3 @@ },
       viteConfig = c;
-      isSsr = !!env.ssrBuild;
+      isSsr = !!env.isSsrBuild;
       const input = isSsr ? { server: config.serverFile } : { "client-entry": config.clientFile };
@@ -27,2 +27,3 @@ const output = {
       }
+      const ssrConditions = [...c.resolve?.conditions || [], ...config.runtimeConditions];
       return {
@@ -33,4 +34,4 @@ ssr: {
           resolve: {
-            conditions: config.runtimeConditions,
-            externalConditions: config.runtimeConditions
+            conditions: ssrConditions,
+            externalConditions: ssrConditions
           }
@@ -88,7 +89,3 @@ },
         return;
-      if (config.viteMajor >= 5) {
-        await fs.rm(manifest.clientManifestDir, { recursive: true });
-      } else {
-        await fs.rm(manifest.clientManifestPath);
-      }
+      await fs.rm(manifest.clientManifestDir, { recursive: true });
     }
@@ -95,0 +92,0 @@ };

dist/plugins/cloudflare.js

@@ -10,7 +10,7 @@ import * as fs from 'fs/promises';
     name: `${PLUGIN_NAMESPACE}:cloudflare`,
-    apply(config2, env) {
+    apply(c, env) {
       return env.command === "build";
     },
     config(c, env) {
-      isSsr = !!env.ssrBuild;
+      isSsr = !!env.isSsrBuild;
       return {
@@ -17,0 +17,0 @@ build: {

dist/plugins/dev-server.js

 import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
 import { PLUGIN_NAMESPACE } from '../consts.js';
-import { isAssetHandledByVite } from '../helpers/vite.js';
+import { isCssModulesFile, isAssetHandledByVite } from '../helpers/vite.js';
 
@@ -14,2 +14,7 @@ const devServerPlugin = ({ config, manifest }) => {
       server.middlewares.use(await createMiddleware(server, { config }));
+    },
+    transform(code, id) {
+      if (isCssModulesFile(id)) {
+        manifest.cssModules[id] = code;
+      }
     }
@@ -16,0 +21,0 @@ };

dist/ssr-manifest.js

@@ -51,2 +51,4 @@ import * as fs from 'fs';
     __publicField(this, "ssrManifestName", "ssr-manifest.json");
+    // id (asset path) => strified css module
+    __publicField(this, "cssModules", {});
     this.router = opts.router;
@@ -133,6 +135,3 @@ this.config = opts.config;
   get clientManifestDir() {
-    return path.resolve(
-      this.config.root,
-      this.config.viteMajor < 5 ? `${this.config.clientOutDir}` : `${this.config.clientOutDir}/.vite`
-    );
+    return path.resolve(this.config.root, `${this.config.clientOutDir}/.vite`);
   }
@@ -178,3 +177,8 @@ get clientManifestPath() {
   });
-  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));
@@ -181,0 +185,0 @@ return assets;

package.json

 {
   "name": "@ssrx/vite",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "type": "module",

src/config.ts

@@ -75,12 +75,2 @@ import * as path from 'path';
 
-  get viteVersion() {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const vitePkg = require('vite/package.json');
-    return vitePkg.version;
-  }
-
-  get viteMajor() {
-    return parseInt(this.viteVersion.split('.')[0]!);
-  }
-
   get isEdgeRuntime() {
@@ -87,0 +77,0 @@ return ['edge', 'cf-pages'].includes(this.runtime);

src/helpers/vite.ts

@@ -15,3 +15,13 @@ /*!
 
-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 } = {};
@@ -26,6 +36,4 @@
       try {
-        const mod = await vite.ssrLoadModule(url);
+        const code = isCssModulesFile(file) ? cssModules[file] : (await vite.ssrLoadModule(url))['default'];
 
-        const code = mod['default'];
-
         assets[file] = {
@@ -172,3 +180,4 @@ type: AssetType.style,
 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)\/.*/,
@@ -184,2 +193,4 @@ static: /\.(txt|ico|svg|webp|png|jpg|jpeg|gif|mp3)$/,
 
+export const isCssModulesFile = (assetPath: string) => ASSET_REGEXES.cssModules.test(assetPath);
+
 export const isInternalRuntimeAsset = (assetPath: string) => {
@@ -186,0 +197,0 @@ return (

src/plugins/build.ts

@@ -26,3 +26,3 @@ import * as fs from 'fs/promises';
 
-    apply(config, env) {
+    apply(c, env) {
       return env.command === 'build';
@@ -34,3 +34,3 @@ },
 
-      isSsr = !!env.ssrBuild;
+      isSsr = !!env.isSsrBuild;
 
@@ -46,2 +46,4 @@ const input = isSsr ? { server: config.serverFile } : { 'client-entry': config.clientFile };
 
+      const ssrConditions = [...(c.resolve?.conditions || []), ...config.runtimeConditions];
+
       return {
@@ -52,4 +54,4 @@ ssr: {
           resolve: {
-            conditions: config.runtimeConditions,
-            externalConditions: config.runtimeConditions,
+            conditions: ssrConditions,
+            externalConditions: ssrConditions,
           },
@@ -119,9 +121,5 @@ },
       // cleanup the vite client manifest
-      if (config.viteMajor >= 5) {
-        await fs.rm(manifest.clientManifestDir, { recursive: true });
-      } else {
-        await fs.rm(manifest.clientManifestPath);
-      }
+      await fs.rm(manifest.clientManifestDir, { recursive: true });
     },
   };
 };

src/plugins/cloudflare.ts

@@ -23,3 +23,3 @@ import * as fs from 'fs/promises';
 
-    apply(config, env) {
+    apply(c, env) {
       return env.command === 'build';
@@ -29,3 +29,3 @@ },
     config(c, env) {
-      isSsr = !!env.ssrBuild;
+      isSsr = !!env.isSsrBuild;
 
@@ -32,0 +32,0 @@ return {

src/plugins/dev-server.ts

@@ -10,3 +10,3 @@ import type { IncomingMessage, ServerResponse } from 'node:http';
 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';
@@ -34,2 +34,8 @@ import type { Manifest } from '../ssr-manifest.ts';
     },
+
+    transform(code, id) {
+      if (isCssModulesFile(id)) {
+        manifest.cssModules[id] = code;
+      }
+    },
   };
@@ -136,3 +142,2 @@ };
     try {
-      // @ts-expect-error ignore
       const possibleRes = (await fetchCallback(new Request(url.toString(), init))) as any;
@@ -139,0 +144,0 @@

src/ssr-manifest.ts

@@ -37,2 +37,5 @@ import * as fs from 'fs';
 
+  // id (asset path) => strified css module
+  readonly cssModules: Record<string, string> = {};
+
   constructor(opts: ManifestOpts<ExternalRoutes>) {
@@ -146,6 +149,3 @@ this.router = opts.router;
   get clientManifestDir(): string {
-    return path.resolve(
-      this.config.root,
-      this.config.viteMajor < 5 ? `${this.config.clientOutDir}` : `${this.config.clientOutDir}/.vite`,
-    );
+    return path.resolve(this.config.root, `${this.config.clientOutDir}/.vite`);
   }
@@ -202,3 +202,8 @@
     // 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));
@@ -205,0 +210,0 @@

No alert changes

Improved metrics

Total package byte prevSize

124772

increased by0.35%

Lines of code

3710

increased by0.35%

No dependency changes