build(scripts): apply scope styles with minify process

Author: metonym

scripts/build-styles.ts

@@ -1,33 +1,11 @@
 import { $, Glob } from "bun";
 import path from "node:path";
-import postcss from "postcss";
 import { createMarkdown } from "./utils/create-markdown";
 import { minifyCss } from "./utils/minify-css";
+import { postcssScopedStyles } from "./utils/postcss-scoped-styles";
 import { toCamelCase } from "./utils/to-camel-case";
 import { writeTo } from "./utils/write-to";
 
-const createScopedStyles = (props: { source: string; moduleName: string }) => {
-  const { source, moduleName } = props;
-
-  return postcss([
-    {
-      postcssPlugin: "postcss-plugin:scoped-styles",
-      Once(root) {
-        root.walkRules((rule) => {
-          rule.selectors = rule.selectors.map((selector) => {
-            if (/^pre /.test(selector)) {
-              selector = `pre.${moduleName}${selector.replace(/^pre /, " ")}`;
-            } else {
-              selector = `.${moduleName} ${selector}`;
-            }
-            return selector;
-          });
-        });
-      },
-    },
-  ]).process(source).css;
-};
-
 export type ModuleNames = Array<{ name: string; moduleName: string }>;
 
 export async function buildStyles() {
@@ -78,7 +56,10 @@ export async function buildStyles() {
       );
       await writeTo(`src/styles/${name}.css`, css_minified);
 
-      const scoped_style = createScopedStyles({ source: content, moduleName });
+      const scoped_style = minifyCss(content, {
+        discardComments: "remove-all",
+        plugins: [postcssScopedStyles(moduleName)],
+      });
 
       scoped_styles += scoped_style;
     } else {
@@ -139,10 +120,7 @@ export async function buildStyles() {
 
   // Don't format metadata used in docs.
   await Bun.write("www/data/styles.json", JSON.stringify(styles));
-  await Bun.write(
-    "www/data/scoped-styles.css",
-    minifyCss(scoped_styles, { discardComments: "remove-all" }),
-  );
+  await Bun.write("www/data/scoped-styles.css", scoped_styles);
 
   console.timeEnd("build styles");
 }

scripts/utils/minify-css.ts

@@ -1,18 +1,21 @@
 import cssnano from "cssnano";
 import litePreset from "cssnano-preset-lite";
-import postcss from "postcss";
+import postcss, { type Plugin } from "postcss";
 import discardDuplicates from "postcss-discard-duplicates";
 import mergeRules from "postcss-merge-rules";
 import { postcssInlineCssVars } from "./postcss-inline-css-vars";
 
 export const minifyCss = (
   css: string,
   options?: {
+    plugins?: Plugin[];
+    scopeStyles?: boolean;
     discardComments?: "preserve-license" | "remove-all";
   },
 ) => {
   return postcss([
     postcssInlineCssVars(),
+    ...(options?.plugins ?? []),
     discardDuplicates(),
     mergeRules(),
     cssnano({