test: add baseline for createOptimizedCss

src/plugins/OptimizeCssPlugin.ts

@@ -1,8 +1,8 @@
 import type { Compiler } from "webpack";
 import { isCarbonSvelteImport, isCssFile } from "../utils";
-import { printDiff } from "./print-diff";
 import type { OptimizeCssOptions } from "./create-optimized-css";
 import { createOptimizedCss } from "./create-optimized-css";
+import { printDiff } from "./print-diff";
 
 // Webpack plugin to optimize CSS for Carbon Svelte components.
 class OptimizeCssPlugin {
@@ -52,11 +52,11 @@ class OptimizeCssPlugin {
             for (const [id] of Object.entries(assets)) {
               if (isCssFile(id)) {
                 const original_css = assets[id].source();
-                const optimized_css = createOptimizedCss(
-                  original_css,
+                const optimized_css = createOptimizedCss({
+                  ...this.options,
+                  source: original_css,
                   ids,
-                  this.options,
-                );
+                });
 
                 compilation.updateAsset(id, new RawSource(optimized_css));
 

src/plugins/create-optimized-css.ts

@@ -30,11 +30,13 @@ export type OptimizeCssOptions = {
   preserveAllIBMFonts?: boolean;
 };
 
-export function createOptimizedCss(
-  original_css: Uint8Array | string,
-  ids: string[],
-  options?: OptimizeCssOptions,
-) {
+type CreateOptimizedCssOptions = OptimizeCssOptions & {
+  source: Uint8Array | string;
+  ids: string[];
+};
+
+export function createOptimizedCss(options: CreateOptimizedCssOptions) {
+  const { source, ids } = options;
   const preserveAllIBMFonts = options?.preserveAllIBMFonts === true;
 
   // List of Carbon classes that must be preserved in the CSS
@@ -95,13 +97,9 @@ export function createOptimizedCss(
           node.walkDecls((decl) => {
             switch (decl.prop) {
               case "font-family":
-                attributes["font-family"] = decl.value;
-                break;
               case "font-style":
-                attributes["font-style"] = decl.value;
-                break;
               case "font-weight":
-                attributes["font-weight"] = decl.value;
+                attributes[decl.prop] = decl.value;
                 break;
             }
           });
@@ -123,5 +121,5 @@ export function createOptimizedCss(
       },
     },
     discardEmpty(),
-  ]).process(original_css).css;
+  ]).process(source).css;
 }

src/plugins/optimize-css.ts

@@ -1,8 +1,8 @@
 import type { Plugin } from "vite";
 import { isCarbonSvelteImport, isCssFile } from "../utils";
-import { printDiff } from "./print-diff";
 import type { OptimizeCssOptions } from "./create-optimized-css";
 import { createOptimizedCss } from "./create-optimized-css";
+import { printDiff } from "./print-diff";
 
 // Vite plugin (Rollup-compatible) to optimize CSS for Carbon Svelte components.
 export const optimizeCss = (options?: OptimizeCssOptions): Plugin => {
@@ -27,7 +27,11 @@ export const optimizeCss = (options?: OptimizeCssOptions): Plugin => {
 
         if (file.type === "asset" && isCssFile(id)) {
           const original_css = file.source;
-          const optimized_css = createOptimizedCss(original_css, ids, options);
+          const optimized_css = createOptimizedCss({
+            ...options,
+            source: original_css,
+            ids,
+          });
 
           file.source = optimized_css;
 

tests/__snapshots__/create-optimized-css.test.ts.snap

@@ -0,0 +1,75 @@
+// Bun Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`create-optimized-css removes unused selectors 1`] = `
+"
+        * { box-sizing: border-box }
+        a { color: blue }
+        .bx--accordion { background-color: yellow }
+        .bx--accordion--end, .bx--accordion__content {color: black }
+      "
+`;
+
+exports[`create-optimized-css removes unused @font rules 1`] = `
+"
+    @font-face {
+      font-display: auto;
+      font-family: IBM Plex Mono;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 300;
+    }"
+`;
+
+exports[`create-optimized-css preserves all IBM fonts 1`] = `
+"
+    @font-face {
+      font-display: auto;
+      font-family: IBM Plex Mono;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 300;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 700;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: italic;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 100;
+    }"
+`;

tests/__snapshots__/optimize-imports.test.ts.snap

@@ -1,22 +1,5 @@
 // Bun Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`optimizeImports 1`] = `
-"
-        import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";
-        import Accordion2 from "carbon-components-svelte/src/Accordion/Accordion.svelte";
-        import breakpoints from "carbon-components-svelte/src/Breakpoint/breakpoints.js";
-        import { invalid } from "carbon-components-svelte";
-
-        import Add from "carbon-icons-svelte/lib/Add.svelte";
-        import Add2 from "carbon-icons-svelte/lib/Add.svelte";
-        import Add3 from "carbon-icons-svelte/lib/Add.svelte";
-
-        import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
-        import Airplane2 from "carbon-pictograms-svelte/lib/Airplane.svelte";
-        import Airplane3 from "carbon-pictograms-svelte/lib/Airplane.svelte";
-    "
-`;
-
 exports[`optimizeImports barrel imports 1`] = `
 "
         import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";

tests/create-optimized-css.test.ts

@@ -0,0 +1,73 @@
+import { createOptimizedCss } from "../src/plugins/create-optimized-css";
+
+describe("create-optimized-css", () => {
+  test("removes unused selectors", () => {
+    const result = createOptimizedCss({
+      source: `
+        * { box-sizing: border-box }
+        a { color: blue }
+        button.bx--btn { background-color: red }
+        .bx--btn, .bx--btn--primary { color: white }
+        .bx--accordion { background-color: yellow }
+        .bx--accordion--end, .bx--accordion__content {color: black }
+      `,
+      ids: ["/Accordion.svelte"],
+    });
+    expect(result).toMatchSnapshot();
+  });
+
+  const font_rules = `
+    @font-face {
+      font-display: auto;
+      font-family: IBM Plex Mono;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 300;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 700;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: italic;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: IBM Plex Sans;
+      font-style: normal;
+      font-weight: 100;
+    }`;
+
+  test("removes unused @font rules", () => {
+    const result = createOptimizedCss({
+      source: font_rules,
+      ids: ["/Accordion.svelte"],
+    });
+    expect(result).toMatchSnapshot();
+  });
+
+  test("preserves all IBM fonts", () => {
+    const result = createOptimizedCss({
+      source: font_rules,
+      ids: ["/Accordion.svelte"],
+      preserveAllIBMFonts: true,
+    });
+    expect(result).toMatchSnapshot();
+  });
+});