diff --git a/scripts/build-styles.ts b/scripts/build-styles.ts index 90cec3b..2374463 100644 --- a/scripts/build-styles.ts +++ b/scripts/build-styles.ts @@ -1,8 +1,8 @@ import { $, Glob } from "bun"; import path from "node:path"; import { createMarkdown } from "./utils/create-markdown"; -import { minifyCss } from "./utils/minify-css"; import { postcssScopedStyles } from "./utils/postcss-scoped-styles"; +import { preprocessStyles } from "./utils/preprocess-styles"; import { toCamelCase } from "./utils/to-camel-case"; import { writeTo } from "./utils/write-to"; @@ -37,14 +37,17 @@ export async function buildStyles() { styles.push({ name, moduleName }); const content = await Bun.file(absPath).text(); - const css_minified = minifyCss(content, { + const css_minified = preprocessStyles(content, { discardComments: "preserve-license", }); // Escape backticks for JS template literal. - const content_css_for_js = minifyCss(content.replace(/\`/g, "\\`"), { - discardComments: "preserve-license", - }); + const content_css_for_js = preprocessStyles( + content.replace(/\`/g, "\\`"), + { + discardComments: "preserve-license", + }, + ); const exportee = `const ${moduleName} = \`\`;\n export default ${moduleName};\n`; @@ -56,7 +59,7 @@ export async function buildStyles() { ); await writeTo(`src/styles/${name}.css`, css_minified); - const scoped_style = minifyCss(content, { + const scoped_style = preprocessStyles(content, { discardComments: "remove-all", plugins: [postcssScopedStyles(moduleName)], }); diff --git a/scripts/utils/minify-css.ts b/scripts/utils/preprocess-styles.ts similarity index 80% rename from scripts/utils/minify-css.ts rename to scripts/utils/preprocess-styles.ts index afa583a..372a4e5 100644 --- a/scripts/utils/minify-css.ts +++ b/scripts/utils/preprocess-styles.ts @@ -5,7 +5,15 @@ import discardDuplicates from "postcss-discard-duplicates"; import { inlineCssVars } from "postcss-inline-css-vars"; import mergeRules from "postcss-merge-rules"; -export const minifyCss = ( +/** + * Raw styles from `highlight.js` are preprocessed for consistency. + * - Inlining CSS variables. + * - Discarding duplicate rules. + * - Merging rules. + * - Discarding comments (but preserving license comments). + * - Minifying the CSS. + */ +export const preprocessStyles = ( css: string, options?: { plugins?: Plugin[]; diff --git a/tests/minify-css.test.ts b/tests/preprocess-styles.test.ts similarity index 81% rename from tests/minify-css.test.ts rename to tests/preprocess-styles.test.ts index 3c2fb7a..cca8e0f 100644 --- a/tests/minify-css.test.ts +++ b/tests/preprocess-styles.test.ts @@ -1,6 +1,6 @@ -import { minifyCss } from "../scripts/utils/minify-css"; +import { preprocessStyles } from "../scripts/utils/preprocess-styles"; -describe("minifyCss", () => { +describe("preprocessStyles", () => { it("should minify basic CSS", () => { const input = ` .test { @@ -8,7 +8,7 @@ describe("minifyCss", () => { background: blue; } `; - const output = minifyCss(input); + const output = preprocessStyles(input); expect(output).toBe(".test{color:red;background:blue}"); }); @@ -21,7 +21,7 @@ describe("minifyCss", () => { color: red; } `; - const output = minifyCss(input); + const output = preprocessStyles(input); expect(output).toBe(".test{color:red}"); }); @@ -34,7 +34,7 @@ describe("minifyCss", () => { background: blue; } `; - const output = minifyCss(input); + const output = preprocessStyles(input); expect(output).toBe(".test{color:red;background:blue}"); }); @@ -57,7 +57,7 @@ describe("minifyCss", () => { `; it("should preserve license comments when option is set", () => { - const output = minifyCss(cssWithComments, { + const output = preprocessStyles(cssWithComments, { discardComments: "preserve-license", }); expect(output).toContain("@license"); @@ -66,7 +66,7 @@ describe("minifyCss", () => { }); it("should remove all comments when remove-all option is set", () => { - const output = minifyCss(cssWithComments, { + const output = preprocessStyles(cssWithComments, { discardComments: "remove-all", }); expect(output).not.toContain("@license");