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,103 @@
+import * as path from "path";
+import * as fse from "fs-extra";
+import esbuild from "esbuild";
+
+import { BuildMode } from "../../build";
+import type { BuildConfig } from "../../compiler";
+
+const isExtendedLengthPath = /^\\\\\?\\/;
+
+const normalizePathSlashes = (path: string) =>
+  isExtendedLengthPath.test(path) ? path : path.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) {
+          return { errors };
+        }
+
+        let { outputs } = metafile!;
+        let entry = Object.keys(outputs).find(
+          (out) => outputs[out].entryPoint
+        )!;
+        let entryFile = outputFiles!.find((file) =>
+          normalizePathSlashes(file.path).endsWith(normalizePathSlashes(entry))
+        )!;
+        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((arr, { inputs }) => {
+            let resolvedInputs = Object.keys(inputs).map((input) =>
+              path.resolve(input)
+            );
+            arr.push(...resolvedInputs);
+            return arr;
+          }, [] as string[]),
+          warnings,
+        };
+      });
+    },
+  };
+}