Add direct CSS loading and static file loading to module server (#116)

.changeset/serious-boats-doubt.md

@@ -0,0 +1,5 @@
+---
+'pleasantest': minor
+---
+
+Add support for static files and css requested directly

package.json

@@ -57,6 +57,7 @@
     "cjs-module-lexer": "^1.2.1",
     "es-module-lexer": "^0.6.0",
     "esbuild": "^0.12.11",
+    "mime": "^2.5.2",
     "postcss": "^8.3.5",
     "puppeteer": "^10.0.0",
     "rollup": "^2.52.3",

rollup.config.js

@@ -44,6 +44,7 @@ const mainConfig = {
     '@rollup/plugin-commonjs',
     'esbuild',
     /postcss/,
+    /mime/,
   ],
 };
 

src/module-server/index.ts

@@ -8,8 +8,10 @@ import { resolveExtensionsPlugin } from './plugins/resolve-extensions-plugin';
 import { createServer } from './server';
 import type { RollupAliasOptions } from '@rollup/plugin-alias';
 import aliasPlugin from '@rollup/plugin-alias';
-import postcssPlugin from 'rollup-plugin-postcss';
 import { esbuildPlugin } from './plugins/esbuild-plugin';
+import { cssPlugin } from './plugins/css';
+import { cssMiddleware } from './middleware/css';
+import { staticMiddleware } from './middleware/static';
 
 interface ModuleServerOpts {
   root?: string;
@@ -32,21 +34,14 @@ export const createModuleServer = async ({
     processGlobalPlugin({ NODE_ENV: 'development' }),
     npmPlugin({ root }),
     esbuildPlugin(),
-    postcssPlugin({
-      inject: (cssVariable) => {
-        return `
-        const style = document.createElement('style')
-        style.type = 'text/css'
-        document.head.append(style)
-        style.appendChild(document.createTextNode(${cssVariable}))
-        `;
-      },
-    }),
+    cssPlugin(),
   ];
   const filteredPlugins = plugins.filter(Boolean) as Plugin[];
   const middleware: polka.Middleware[] = [
     indexHTMLMiddleware,
     jsMiddleware({ root, plugins: filteredPlugins }),
+    cssMiddleware({ root }),
+    staticMiddleware({ root }),
   ];
   return createServer({ middleware });
 };

src/module-server/middleware/css.ts

@@ -0,0 +1,77 @@
+import { posix, relative, resolve, sep } from 'path';
+import type polka from 'polka';
+import { promises as fs } from 'fs';
+import { cssExts, cssPlugin } from '../plugins/css';
+import type { PluginContext, TransformPluginContext } from 'rollup';
+
+interface CSSMiddlewareOpts {
+  root: string;
+}
+
+/**
+ * This middleware handles _only_ css files that were _not imported from JS_
+ * CSS files that were imported from JS have the ?import param and were handled by the JS middleware (transformed to JS)
+ * This middleware does not transform CSS to JS that can be imported, it just returns CSS
+ * Use cases: CSS included via <link> tags, CSS included via @import
+ * TODO: consider using this for loadCSS
+ */
+export const cssMiddleware = ({
+  root,
+}: CSSMiddlewareOpts): polka.Middleware => {
+  const cssPlug = cssPlugin({ returnCSS: true });
+
+  return async (req, res, next) => {
+    try {
+      if (!cssExts.test(req.path)) return next();
+      // Normalized path starting with slash
+      const path = posix.normalize(req.path);
+      // Remove leading slash, and convert slashes to os-specific slashes
+      const osPath = path.slice(1).split(posix.sep).join(sep);
+      // Absolute file path
+      const file = resolve(root, osPath);
+      // Rollup-style CWD-relative Unix-normalized path "id":
+      const id = `./${relative(root, file)
+        .replace(/^\.\//, '')
+        .replace(/^\0/, '')
+        .split(sep)
+        .join(posix.sep)}`;
+
+      res.setHeader('Content-Type', 'text/css;charset=utf-8');
+      let code = await fs.readFile(file, 'utf-8');
+
+      if (cssPlug.transform) {
+        const ctx: Partial<PluginContext> = {
+          warn(...args) {
+            console.log(`[${cssPlug.name}]`, ...args);
+          },
+          error(error) {
+            if (typeof error === 'string') throw new Error(error);
+            throw error;
+          },
+        };
+        // We need to call the transform hook, but get the CSS out of it before it converts it to JS
+        const result = await cssPlug.transform.call(
+          ctx as TransformPluginContext,
+          code,
+          id,
+        );
+        if (
+          typeof result !== 'object' ||
+          result === null ||
+          result.meta?.css === undefined
+        )
+          return next();
+        code = result.meta.css;
+      }
+
+      if (!code) return next();
+
+      res.writeHead(200, {
+        'Content-Length': Buffer.byteLength(code, 'utf-8'),
+      });
+      res.end(code);
+    } catch (error) {
+      next(error);
+    }
+  };
+};

src/module-server/middleware/js.ts

@@ -10,6 +10,9 @@ interface JSMiddlewareOpts {
   plugins: Plugin[];
 }
 
+// TODO: make this configurable
+const jsExts = /\.(?:[jt]sx?|[cm]js)$/;
+
 // Minimal version of https://github.com/preactjs/wmr/blob/main/packages/wmr/src/wmr-middleware.js
 
 export const jsMiddleware = ({
@@ -56,6 +59,13 @@ export const jsMiddleware = ({
       }
 
       if (!code && code !== '') {
+        // If it doesn't have a js-like extension,
+        // and none of the rollup plugins provided a load hook for it
+        // and it doesn't have the ?import param (added for non-JS assets that can be imported into JS, like css)
+        // Then treat it as a static asset
+        if (!jsExts.test(resolvedId) && req.query.import === undefined)
+          return next();
+
         // Always use the resolved id as the basis for our file
         let file = resolvedId;
         file = file.split(posix.sep).join(sep);
@@ -91,6 +101,11 @@ export const jsMiddleware = ({
             }
           }
 
+          // If it wasn't resovled, and doesn't have a js-like extension
+          // add the ?import query param so it is clear
+          // that the request needs to end up as JS that can be imported
+          if (!jsExts.test(spec)) return `${spec}?import`;
+
           return spec;
         },
       });

src/module-server/middleware/static.ts

@@ -0,0 +1,34 @@
+import { posix, resolve } from 'path';
+import type polka from 'polka';
+import { promises as fs, createReadStream } from 'fs';
+import mime from 'mime/lite';
+
+interface StaticMiddlewareOpts {
+  root: string;
+}
+
+/**
+ * This middleware handles static assets that are requested
+ */
+export const staticMiddleware = ({
+  root,
+}: StaticMiddlewareOpts): polka.Middleware => {
+  return async (req, res, next) => {
+    try {
+      const absPath = resolve(root, ...req.path.split(posix.sep));
+      if (!absPath.startsWith(root)) return next();
+
+      const stats = await fs.stat(absPath).catch((() => {}) as () => undefined);
+      if (!stats?.isFile()) return next();
+
+      const headers = {
+        'Content-Type': (mime as any).getType(absPath) || '',
+      };
+
+      res.writeHead(200, headers);
+      createReadStream(absPath).pipe(res);
+    } catch (error) {
+      next(error);
+    }
+  };
+};

src/module-server/plugins/css.ts

@@ -0,0 +1,59 @@
+import postcssPlugin from 'rollup-plugin-postcss';
+import { transformCssImports } from '../transform-css-imports';
+import { join } from 'path';
+
+export const cssExts = /\.(?:css|styl|stylus|s[ac]ss|less)$/;
+export const cssPlugin = ({
+  returnCSS = false,
+}: { returnCSS?: boolean } = {}) => {
+  const transformedCSS = new Map<string, string>();
+  const plugin = postcssPlugin({
+    inject: (cssVariable) => {
+      return `
+        const style = document.createElement('style')
+        style.type = 'text/css'
+        const promise = new Promise(r => style.addEventListener('load', r))
+        style.appendChild(document.createTextNode(${cssVariable}))
+        document.head.append(style)
+        await promise
+      `;
+    },
+    // They are executed right to left. We want our custom loader to run last
+    use: ['rewriteImports', 'sass', 'stylus', 'less'],
+    loaders: [
+      {
+        // Rewrites emitted url(...) and @imports to be relative to the project root.
+        // Otherwise, relative paths don't work for injected stylesheets
+        name: 'rewriteImports',
+        test: /\.(?:css|styl|stylus|s[ac]ss|less)$/,
+        async process({ code, map }: { code: string; map?: string }) {
+          code = await transformCssImports(code, this.id, {
+            resolveId(specifier, id) {
+              if (!specifier.startsWith('./')) return specifier;
+              return join(id, '..', specifier);
+            },
+          });
+          if (returnCSS) {
+            transformedCSS.set(this.id, code);
+          }
+
+          return { code, map };
+        },
+      },
+    ],
+  });
+  // Adds .meta.css to returned object (for use in CSS middleware)
+  if (returnCSS) {
+    const originalTranform = plugin.transform!;
+    plugin.transform = async function (code, id) {
+      let result = await originalTranform.call(this, code, id);
+      if (result === null || result === undefined) return result;
+      if (typeof result === 'string') result = { code: result, map: '' };
+      if (!result.meta) result.meta = {};
+      result.meta.css = transformedCSS.get(id);
+      return result;
+    };
+  }
+
+  return plugin;
+};

src/module-server/server.ts

@@ -26,7 +26,9 @@ export const createServer = ({ middleware }: ServerOpts) =>
           const code = typeof err.code === 'number' ? err.code : 500;
 
           res.statusCode = code;
+
           res.writeHead(code, { 'content-type': 'text/plain' });
+          if (code === 404) return res.end('not found');
           res.end(err.stack);
           console.error(err.stack);
         },

src/module-server/transform-css-imports.ts

@@ -0,0 +1,64 @@
+// Copied from https://github.com/preactjs/wmr/blob/18b8f00923ddf578f2f747c35bd24a8039eee3ba/packages/wmr/src/lib/transform-css-imports.js
+
+/*
+  https://github.com/preactjs/wmr/blob/main/LICENSE
+  MIT License
+  Copyright (c) 2020 The Preact Authors
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  */
+
+/*
+  Differences from original:
+  - Types
+  - ESLint fixes
+  */
+
+type MaybePromise<T> = Promise<T> | T;
+type ResolveFn = (
+  specifier: string,
+  id: string,
+) => MaybePromise<string | false | null | void>;
+
+/**
+ * @param code Module code
+ * @param id Source module specifier
+ */
+export const transformCssImports = async (
+  code: string,
+  id: string,
+  { resolveId }: { resolveId: ResolveFn },
+) => {
+  const CSS_IMPORTS = /@import\s+["'](.*?)["'];|url\(["']?(.*?)["']?\)/g;
+
+  let out = code;
+  let offset = 0;
+
+  let match;
+  while ((match = CSS_IMPORTS.exec(code))) {
+    const spec = match[1] || match[2];
+    const start = match.index + match[0].indexOf(spec) + offset;
+    const end = start + spec.length;
+
+    const resolved = await resolveId(spec, id);
+    if (typeof resolved === 'string') {
+      out = out.slice(0, start) + resolved + out.slice(end);
+      offset += resolved.length - spec.length;
+    }
+  }
+
+  return out;
+};

tests/utils/external-with-reference.css

@@ -0,0 +1,8 @@
+@import './external.css';
+
+div {
+  background-image: url('./smiley.svg');
+  background-size: cover;
+  width: 500px;
+  height: 500px;
+}