fix(frontend): resolve path to css imported from node_modules

paulrobertlloyd · paulrobertlloyd · commit b369ced90db4 · 2024-04-09T01:05:44.000+01:00
diff --git a/packages/frontend/lib/lightningcss.js b/packages/frontend/lib/lightningcss.js
@@ -1,9 +1,34 @@
+import fs from "node:fs";
+import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import { bundleAsync } from "lightningcss";
 
+const require = createRequire(import.meta.url);
+
+/**
+ * Resolve path to file in `node_modules`
+ * @param {string} filePath - File path
+ * @returns {string} Resolved file path
+ * @example `@import url("~codemirror/lib/codemirror.css");`
+ */
+function resolveModuleFilePath(filePath) {
+  if (filePath.includes("~")) {
+    const moduleFilePath = filePath.split("~")[1];
+    return require.resolve(moduleFilePath);
+  }
+
+  return filePath;
+}
+
 let { code } = await bundleAsync({
   filename: fileURLToPath(new URL("../styles/app.css", import.meta.url)),
   minify: true,
+  resolver: {
+    read(filePath) {
+      filePath = resolveModuleFilePath(filePath);
+      return fs.readFileSync(filePath, "utf8");
+    },
+  },
 });
 
 export const styles = () => code.toString();
diff --git a/packages/frontend/styles/vendor/codemirror.css b/packages/frontend/styles/vendor/codemirror.css
@@ -1,4 +1,4 @@
-@import url("../../../../node_modules/codemirror/lib/codemirror.css");
+@import url("~codemirror/lib/codemirror.css");
 
 .CodeMirror {
   --fieldset-flow-space: 0;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import url("../../../../node_modules/codemirror/lib/codemirror.css");`
	`1`	`+@import url("~codemirror/lib/codemirror.css");`
`2`	`2`
`3`	`3`	`.CodeMirror {`
`4`	`4`	`--fieldset-flow-space: 0;`