Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: rename minify-css to preprocess-styles #363

Merged
merged 1 commit into from
Dec 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions scripts/build-styles.ts
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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} = \`<style>${content_css_for_js}</style>\`;\n
export default ${moduleName};\n`;
Expand All @@ -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)],
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down
14 changes: 7 additions & 7 deletions tests/minify-css.test.ts → tests/preprocess-styles.test.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
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 {
color: red;
background: blue;
}
`;
const output = minifyCss(input);
const output = preprocessStyles(input);
expect(output).toBe(".test{color:red;background:blue}");
});

Expand All @@ -21,7 +21,7 @@ describe("minifyCss", () => {
color: red;
}
`;
const output = minifyCss(input);
const output = preprocessStyles(input);
expect(output).toBe(".test{color:red}");
});

Expand All @@ -34,7 +34,7 @@ describe("minifyCss", () => {
background: blue;
}
`;
const output = minifyCss(input);
const output = preprocessStyles(input);
expect(output).toBe(".test{color:red;background:blue}");
});

Expand All @@ -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");
Expand All @@ -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");
Expand Down