chore(deps-dev): replace Prettier with Biome

biome.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.2/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": ["build", "dist", ".svelte-kit", "src/component-index.ts"]
+  },
+  "formatter": {
+    "attributePosition": "multiline",
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "overrides": [
+    {
+      "include": ["*.svelte"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useConst": "off",
+            "useImportType": "off"
+          }
+        }
+      }
+    }
+  ]
+}

bun.lock

@@ -10,11 +10,11 @@
         "postcss-discard-empty": "^7.0.0",
       },
       "devDependencies": {
+        "@biomejs/biome": "^1.9.4",
         "@types/bun": "latest",
         "@types/jest": "latest",
         "carbon-components-svelte": "0.87.0",
         "culls": "latest",
-        "prettier": "latest",
         "svelte": "^5.19.9",
         "typescript": "latest",
         "vite": "latest",
@@ -29,6 +29,24 @@
 
     "@babel/helper-validator-identifier": ["@babel/[email protected]", "", {}, "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="],
 
+    "@biomejs/biome": ["@biomejs/[email protected]", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.4", "@biomejs/cli-darwin-x64": "1.9.4", "@biomejs/cli-linux-arm64": "1.9.4", "@biomejs/cli-linux-arm64-musl": "1.9.4", "@biomejs/cli-linux-x64": "1.9.4", "@biomejs/cli-linux-x64-musl": "1.9.4", "@biomejs/cli-win32-arm64": "1.9.4", "@biomejs/cli-win32-x64": "1.9.4" }, "bin": { "biome": "bin/biome" } }, "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog=="],
+
+    "@biomejs/cli-darwin-arm64": ["@biomejs/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw=="],
+
+    "@biomejs/cli-darwin-x64": ["@biomejs/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg=="],
+
+    "@biomejs/cli-linux-arm64": ["@biomejs/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g=="],
+
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA=="],
+
+    "@biomejs/cli-linux-x64": ["@biomejs/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg=="],
+
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg=="],
+
+    "@biomejs/cli-win32-arm64": ["@biomejs/[email protected]", "", { "os": "win32", "cpu": "arm64" }, "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg=="],
+
+    "@biomejs/cli-win32-x64": ["@biomejs/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA=="],
+
     "@esbuild/aix-ppc64": ["@esbuild/[email protected]", "", { "os": "aix", "cpu": "ppc64" }, "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA=="],
 
     "@esbuild/android-arm": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm" }, "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q=="],
@@ -343,8 +361,6 @@
 
     "postcss-discard-empty": ["[email protected]", "", { "peerDependencies": { "postcss": "^8.4.31" } }, "sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA=="],
 
-    "prettier": ["[email protected]", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ=="],
-
     "pretty-format": ["[email protected]", "", { "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", "react-is": "^18.0.0" } }, "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ=="],
 
     "punycode": ["[email protected]", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],

examples/rollup/src/App.svelte

@@ -1,6 +1,6 @@
 <script>
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/sveltekit/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/vite/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/vite@svelte-5/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/webpack/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/webpack/webpack.config.mjs

@@ -1,8 +1,8 @@
+import path from "node:path";
+import carbonPreprocess from "carbon-preprocess-svelte";
 // @ts-check
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import path from "node:path";
-import carbonPreprocess from "carbon-preprocess-svelte";
 
 const { optimizeImports, OptimizeCssPlugin } = carbonPreprocess;
 

examples/webpack@svelte-5/src/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import "carbon-components-svelte/css/g100.css";
-  import { DataTable } from "carbon-components-svelte";
+import "carbon-components-svelte/css/g100.css";
+import { DataTable } from "carbon-components-svelte";
 </script>
 
 <DataTable

examples/webpack@svelte-5/webpack.config.mjs

@@ -1,8 +1,8 @@
+import path from "node:path";
+import carbonPreprocess from "carbon-preprocess-svelte";
 // @ts-check
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import path from "node:path";
-import carbonPreprocess from "carbon-preprocess-svelte";
 
 const { optimizeImports, OptimizeCssPlugin } = carbonPreprocess;
 

package.json

@@ -12,7 +12,7 @@
     "build:prune-package": "bunx culls",
     "test": "bun test",
     "test:e2e": "bun tests/test-e2e.ts",
-    "format": "bun --bun prettier --write . --cache",
+    "format": "bunx biome check --write .",
     "upgrade-examples": "bun scripts/upgrade-examples.ts"
   },
   "dependencies": {
@@ -22,11 +22,11 @@
     "postcss-discard-empty": "^7.0.0"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@types/bun": "latest",
     "@types/jest": "latest",
     "carbon-components-svelte": "0.87.0",
     "culls": "latest",
-    "prettier": "latest",
     "svelte": "^5.19.9",
     "typescript": "latest",
     "vite": "latest",
@@ -47,10 +47,6 @@
     "optimize imports",
     "optimize CSS"
   ],
-  "files": [
-    "dist"
-  ],
-  "maintainers": [
-    "Eric Liu (https://github.com/metonym)"
-  ]
+  "files": ["dist"],
+  "maintainers": ["Eric Liu (https://github.com/metonym)"]
 }

scripts/extract-selectors.ts

@@ -10,7 +10,7 @@ type ExtractSelectorsProps = {
 export function extractSelectors(props: ExtractSelectorsProps) {
   const { code, filename } = props;
   const ast = parse(code, { filename });
-  const selectors: Map<string, any> = new Map();
+  const selectors: Map<string, { type: string; name?: string }> = new Map();
   const components: Set<string> = new Set();
 
   walk(ast, {
@@ -31,12 +31,9 @@ export function extractSelectors(props: ExtractSelectorsProps) {
         // class="{c} c1 c2 c3"
         node.value?.map((value: ANode) => {
           if (value.type === "Text") {
-            value.data
-              .split(/\s+/)
-              .filter(Boolean)
-              .forEach((selector: string) =>
-                selectors.set(selector, { type: node.type }),
-              );
+            for (const selector of value.data.split(/\s+/).filter(Boolean)) {
+              selectors.set(selector, { type: node.type });
+            }
           }
         });
       }
@@ -72,23 +69,23 @@ export function extractSelectors(props: ExtractSelectorsProps) {
   const classes: string[] = [];
 
   // Iterate through all class attribute identifiers
-  Array.from(selectors).forEach((selector) => {
-    const [v = ""] = selector;
+  for (const [v = "", { type, name }] of selectors) {
+    const value = v.trim();
 
     if (typeof v === "string") {
       const value = v.trim();
 
       if (value.startsWith("bx--") && !value.startsWith(".")) {
-        classes.push("." + value);
+        classes.push(`.${value}`);
       } else {
         if (value.startsWith(".")) {
           classes.push(value);
         } else {
-          classes.push("." + value);
+          classes.push(`.${value}`);
         }
       }
     }
-  });
+  }
 
   return {
     /** Unique classes in the current component. */

scripts/index-components.ts

@@ -1,6 +1,6 @@
+import path from "node:path";
 import { Glob } from "bun";
 import { walk } from "estree-walker";
-import path from "node:path";
 import { parse } from "svelte/compiler";
 import { CarbonSvelte } from "../src/constants";
 import { isSvelteFile } from "../src/utils";
@@ -81,9 +81,10 @@ for (const [parent, components] of sub_components.entries()) {
   if (parent_map) {
     const sub_classes = components.flatMap((component) => {
       if (exports_map.has(component)) {
-        return exports_map.get(component)!.classes;
-      } else if (internal_components.has(component)) {
-        return internal_components.get(component)!.classes;
+        return exports_map.get(component)?.classes;
+      }
+      if (internal_components.has(component)) {
+        return internal_components.get(component)?.classes;
       }
 
       // Components that fall through here are icon components,
@@ -113,7 +114,6 @@ await Bun.write(
   `// @generated
 // This file was automatically generated and should not be edited.
 // @see scripts/index-components.ts
-// prettier-ignore
 
 export const components: Record<string, { path: string; classes: string[]; }> = Object.freeze(${JSON.stringify(
     components,

src/constants.ts

@@ -1,4 +1,4 @@
-export const enum CarbonSvelte {
+export enum CarbonSvelte {
   Components = "carbon-components-svelte",
   Icons = "carbon-icons-svelte",
   Pictograms = "carbon-pictograms-svelte",

src/plugins/print-diff.ts

@@ -4,14 +4,14 @@ const formatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
 
 function toHumanReadableSize(size_in_kb: number) {
   if (size_in_kb >= BITS_DENOM) {
-    return formatter.format(size_in_kb / BITS_DENOM) + " MB";
+    return `${formatter.format(size_in_kb / BITS_DENOM)} MB`;
   }
 
-  return formatter.format(size_in_kb) + " kB";
+  return `${formatter.format(size_in_kb)} kB`;
 }
 
 function percentageDiff(a: number, b: number) {
-  return formatter.format(((a - b) / a) * 100) + "%";
+  return `${formatter.format(((a - b) / a) * 100)}%`;
 }
 
 function stringSizeInKB(str: string) {

tests/OptimizeCssPlugin.test.ts

@@ -1,8 +1,14 @@
+import type { Compiler } from "webpack";
 import { CarbonSvelte } from "../src/constants";
 import OptimizeCssPlugin from "../src/plugins/OptimizeCssPlugin";
 
 // Mock webpack compiler and related types
-const createMockCompiler = (options: any = {}) => {
+const createMockCompiler = (
+  options: {
+    assets?: Record<string, unknown>;
+    fileDependencies?: string[];
+  } = {},
+) => {
   const { assets = {}, fileDependencies = [] } = options;
 
   const compilation = {
@@ -46,21 +52,27 @@ const createMockCompiler = (options: any = {}) => {
   };
 };
 
+const asCompiler = (mock: ReturnType<typeof createMockCompiler>): Compiler => {
+  return mock as unknown as Compiler;
+};
+
 describe("OptimizeCssPlugin", () => {
   test("constructor sets default options correctly", () => {
     const plugin = new OptimizeCssPlugin();
-    expect((plugin as any).options).toEqual({
+    // @ts-expect-error – options is private
+    expect(plugin.options).toEqual({
       verbose: true,
       preserveAllIBMFonts: false,
-    });
+    } as const);
   });
 
   test("constructor respects provided options", () => {
     const plugin = new OptimizeCssPlugin({
       verbose: false,
       preserveAllIBMFonts: true,
     });
-    expect((plugin as any).options).toEqual({
+    // @ts-expect-error – options is private
+    expect(plugin.options).toEqual({
       verbose: false,
       preserveAllIBMFonts: true,
     });
@@ -73,7 +85,7 @@ describe("OptimizeCssPlugin", () => {
       fileDependencies: ["regular-component.svelte"],
     });
 
-    plugin.apply(mockCompiler as any);
+    plugin.apply(asCompiler(mockCompiler));
 
     expect(mockCompiler.compilation.updateAsset).not.toHaveBeenCalled();
   });
@@ -90,7 +102,7 @@ describe("OptimizeCssPlugin", () => {
       fileDependencies: [carbonComponent],
     });
 
-    plugin.apply(mockCompiler as any);
+    plugin.apply(asCompiler(mockCompiler));
 
     expect(mockCompiler.compilation.updateAsset).toHaveBeenCalledWith(
       "styles.css",
@@ -110,7 +122,7 @@ describe("OptimizeCssPlugin", () => {
       fileDependencies: [carbonComponent],
     });
 
-    plugin.apply(mockCompiler as any);
+    plugin.apply(asCompiler(mockCompiler));
 
     expect(mockCompiler.compilation.updateAsset).toHaveBeenCalledWith(
       "styles.css",
@@ -130,7 +142,7 @@ describe("OptimizeCssPlugin", () => {
       fileDependencies: [carbonComponent],
     });
 
-    plugin.apply(mockCompiler as any);
+    plugin.apply(asCompiler(mockCompiler));
 
     expect(consoleSpy).toHaveBeenCalled();
     consoleSpy.mockRestore();