add post css parsing to build pipeline to ensure relative paths

Author: Ibrahim-Haizel

package.json

@@ -26,7 +26,7 @@
     "copy-static-assets-to-lib": "node scripts/copy-static-assets-to-lib.js",
     "copy-govuk-assets": "node scripts/copy-govuk-assets-to-static.js",
     "copy-moj-assets": "node scripts/copy-moj-assets-to-static.js",
-    "prepare": "npm run copy-govuk-assets",
+    "prepare": "",
     "create-component-and-wrapper-pages": "node scripts/create-component-and-wrapper-pages.js"
   },
   "files": [

scripts/copy-static-assets-to-lib.js

@@ -1,5 +1,7 @@
 import fs from "fs-extra";
 import { join, dirname } from "node:path";
+import postcss from "postcss";
+import valueParser from "postcss-value-parser";
 
 const projectRoot = join(process.cwd()); // Assumes script run from project root
 
@@ -35,29 +37,83 @@ console.log("Static assets copy process completed!");
 const staticCssDir = join(projectRoot, "static/css");
 const libCssDestDir = join(projectRoot, "src/lib/assets/css");
 
-const cssFilesToCopy = ["govuk-frontend.min.css", "govuk-frontend.min.css.map"];
+const cssFilesToCopyAndProcess = ["govuk-frontend.min.css"];
+const mapFileToCopy = "govuk-frontend.min.css.map";
 
-console.log("Copying specific GOV.UK CSS assets to src/lib/assets/css...");
+// Define the PostCSS plugin logic directly here
+const transformAssetUrlsPlugin = {
+  postcssPlugin: "transform-asset-urls-for-lib",
+  Declaration(decl) {
+    if (!/url\(/.test(decl.value)) return;
+    const parsedValue = valueParser(decl.value);
+    parsedValue.walk((node) => {
+      if (node.type === "function" && node.value === "url") {
+        const urlNode = node.nodes[0];
+        if (!urlNode) return;
+        const url = urlNode.value;
+        if (url.startsWith("/assets/fonts/")) {
+          urlNode.value = "../fonts/" + url.slice("/assets/fonts/".length);
+        } else if (url.startsWith("/assets/images/")) {
+          urlNode.value = "../images/" + url.slice("/assets/images/".length);
+        } else if (
+          url.startsWith("/assets/govuk_publishing_components/images/")
+        ) {
+          urlNode.value =
+            "../govuk_publishing_components/images/" +
+            url.slice("/assets/govuk_publishing_components/images/".length);
+        }
+      }
+    });
+    decl.value = parsedValue.toString();
+  },
+};
+
+console.log(
+  "Copying and processing specific GOV.UK CSS assets to src/lib/assets/css...",
+);
 
 // Ensure the destination CSS directory exists
 fs.ensureDirSync(libCssDestDir);
 console.log(`Ensured directory exists: ${libCssDestDir}`);
 
-cssFilesToCopy.forEach((fileName) => {
+// Process CSS files
+cssFilesToCopyAndProcess.forEach(async (fileName) => {
   const sourcePath = join(staticCssDir, fileName);
   const destPath = join(libCssDestDir, fileName);
 
   if (fs.existsSync(sourcePath)) {
     try {
-      // Copy the individual file
-      fs.copyFileSync(sourcePath, destPath);
-      console.log(`Copied ${sourcePath} to ${destPath}`);
+      // Read the original CSS
+      const css = await fs.readFile(sourcePath, "utf8");
+      // Process with PostCSS
+      const result = await postcss([transformAssetUrlsPlugin]).process(css, {
+        from: sourcePath,
+        to: destPath,
+        map: false,
+      }); // Disable inline map generation here
+      // Write the transformed CSS
+      await fs.writeFile(destPath, result.css);
+      console.log(`Copied and processed ${sourcePath} to ${destPath}`);
     } catch (err) {
-      console.error(`Error copying ${fileName}:`, err);
+      console.error(`Error copying/processing ${fileName}:`, err);
     }
   } else {
     console.warn(`Source file not found, skipping: ${sourcePath}`);
   }
 });
 
-console.log("Static app assets copy process to lib directory completed!");
+// Copy the map file separately without processing
+const mapSourcePath = join(staticCssDir, mapFileToCopy);
+const mapDestPath = join(libCssDestDir, mapFileToCopy);
+if (fs.existsSync(mapSourcePath)) {
+  try {
+    fs.copyFileSync(mapSourcePath, mapDestPath);
+    console.log(`Copied map file ${mapSourcePath} to ${mapDestPath}`);
+  } catch (err) {
+    console.error(`Error copying map file ${mapFileToCopy}:`, err);
+  }
+} else {
+  console.warn(`Source map file not found, skipping: ${mapSourcePath}`);
+}
+
+console.log("GOV.UK CSS assets copy and process completed!");

scripts/generate-index.ts

@@ -56,7 +56,7 @@ const exports = svelteFilesInComponents
 // Write the file
 writeFileSync(
   indexFile,
-  `// this file is auto-generated — do not edit by hand\nimport "$lib/components_base.css";\n\n${exports.join("\n")}\n`,
+  `// this file is auto-generated — do not edit by hand\nimport "$lib/main.css";\n\n${exports.join("\n")}\n`,
 );
 
 let logMessage = `Generated ${indexFile} with ${exports.length} unique exports from ./components.`;