feat(remix-dev/compiler): add CSS plugin to esbuild

contributors.yml

@@ -227,6 +227,7 @@
 - kilian
 - kiliman
 - kimdontdoit
+- KingSora
 - klauspaiva
 - knowler
 - konradkalemba

packages/remix-dev/compiler.ts

@@ -23,10 +23,11 @@ import { serverAssetsManifestPlugin } from "./compiler/plugins/serverAssetsManif
 import { serverBareModulesPlugin } from "./compiler/plugins/serverBareModulesPlugin";
 import { serverEntryModulePlugin } from "./compiler/plugins/serverEntryModulePlugin";
 import { serverRouteModulesPlugin } from "./compiler/plugins/serverRouteModulesPlugin";
+import { cssFilePlugin } from "./compiler/plugins/cssFilePlugin";
 import { writeFileSafe } from "./compiler/utils/fs";
 import { urlImportsPlugin } from "./compiler/plugins/urlImportsPlugin";
 
-interface BuildConfig {
+export interface BuildConfig {
   mode: BuildMode;
   target: BuildTarget;
   sourcemap: boolean;
@@ -347,6 +348,7 @@ async function createBrowserBuild(
   }
 
   let plugins = [
+    cssFilePlugin(options),
     urlImportsPlugin(),
     mdxPlugin(config),
     browserRouteModulesPlugin(config, /\?browser$/),
@@ -415,6 +417,7 @@ function createServerBuild(
   let isDenoRuntime = config.serverBuildTarget === "deno";
 
   let plugins: esbuild.Plugin[] = [
+    cssFilePlugin(options),
     urlImportsPlugin(),
     mdxPlugin(config),
     emptyModulesPlugin(config, /\.client(\.[jt]sx?)?$/),

packages/remix-dev/compiler/plugins/cssFilePlugin.ts

@@ -0,0 +1,113 @@
+import * as path from "path";
+import * as fse from "fs-extra";
+import esbuild from "esbuild";
+
+import { BuildMode } from "../../build";
+import type { BuildConfig } from "../../compiler";
+import invariant from "../../invariant";
+
+const isExtendedLengthPath = /^\\\\\?\\/;
+
+function normalizePathSlashes(p: string) {
+  return isExtendedLengthPath.test(p) ? p : p.replace(/\\/g, "/");
+}
+
+/**
+ * This plugin loads css files with the "css" loader (bundles and moves assets to assets directory)
+ * and exports the url of the css file as its default export.
+ */
+export function cssFilePlugin(
+  buildConfig: Pick<Partial<BuildConfig>, "mode">
+): esbuild.Plugin {
+  return {
+    name: "css-file",
+
+    async setup(build) {
+      let buildOps = build.initialOptions;
+
+      build.onLoad({ filter: /\.css$/ }, async (args) => {
+        let { outfile, outdir, assetNames } = buildOps;
+        let { metafile, outputFiles, warnings, errors } = await esbuild.build({
+          ...buildOps,
+          minify: buildConfig.mode === BuildMode.Production,
+          minifySyntax: true,
+          metafile: true,
+          write: false,
+          sourcemap: false,
+          incremental: false,
+          splitting: false,
+          stdin: undefined,
+          outfile: undefined,
+          outdir: outfile ? path.dirname(outfile) : outdir,
+          entryNames: assetNames,
+          entryPoints: [args.path],
+          loader: {
+            ...buildOps.loader,
+            ".css": "css",
+          },
+          // this plugin treats absolute paths in 'url()' css rules as external to prevent breaking changes
+          plugins: [
+            {
+              name: "resolve-absolute",
+              async setup(build) {
+                build.onResolve({ filter: /.*/ }, async (args) => {
+                  let { kind, path: resolvePath } = args;
+                  if (kind === "url-token" && path.isAbsolute(resolvePath)) {
+                    return {
+                      path: resolvePath,
+                      external: true,
+                    };
+                  }
+                });
+              },
+            },
+          ],
+        });
+
+        if (errors && errors.length) {
+          return { errors };
+        }
+
+        invariant(metafile, "metafile is missing");
+        let { outputs } = metafile;
+        let entry = Object.keys(outputs).find((out) => outputs[out].entryPoint);
+        invariant(entry, "entry point not found");
+
+        let normalizedEntry = normalizePathSlashes(entry);
+        let entryFile = outputFiles.find((file) => {
+          return normalizePathSlashes(file.path).endsWith(normalizedEntry);
+        });
+
+        invariant(entryFile, "entry file not found");
+
+        let outputFilesWithoutEntry = outputFiles.filter(
+          (file) => file !== entryFile
+        );
+
+        // write all assets
+        await Promise.all(
+          outputFilesWithoutEntry.map(({ path: filepath, contents }) =>
+            fse.outputFile(filepath, contents)
+          )
+        );
+
+        return {
+          contents: entryFile.contents,
+          loader: "file",
+          // add all css assets to watchFiles
+          watchFiles: Object.values(outputs).reduce<string[]>(
+            (arr, { inputs }) => {
+              let resolvedInputs = Object.keys(inputs).map((input) => {
+                return path.resolve(input);
+              });
+              arr.push(...resolvedInputs);
+              return arr;
+            },
+            []
+          ),
+          warnings,
+        };
+      });
+    },
+  };
+}