vite-plugin-capsize-radix 0.0.9 → 0.1.1

package/README.md

@@ -6,11 +6,11 @@ Now changing fonts is as easy as changing colors.
 
 ## Why
 
-Getting custom fonts to look right is hard on the web — so most peoply
-rely on a few typography frameworks and fonts. But it doesn't have to be that
-way. [Capsize](https://seek-oss.github.io/capsize/) fixes text sizing and layout
-so changing fonts is as easy as changing colors. Your fonts should be as distinctive
-as the rest of your application.
+Getting fonts to look right on the web is [_hard_](https://fantasai.inkedblade.net/style/talks/atypi-2021/atypi-2021-precise-text-alignment.mp4) — so most peoply rely on
+a few typography frameworks and fonts. But it doesn't have to be that way.
+[Capsize](https://seek-oss.github.io/capsize/) fixes text sizing and layout
+allowing for precise text alignment so changing fonts is as easy as changing
+colors.
 
 https://github.com/KyleAMathews/vite-plugin-capsize-radix-ui/assets/71047/3ec5d6ca-bf00-4b79-8552-4e3da3454f52
 
@@ -37,17 +37,19 @@ import react from "@vitejs/plugin-react-swc"
 import { capsizeRadixPlugin } from "vite-plugin-capsize-radix"
 import merriweather from "@capsizecss/metrics/merriweather"
 import merriweatherSans from "@capsizecss/metrics/merriweatherSans"
+import sourceCodePro from "@capsizecss/metrics/sourceCodePro"
 import arial from "@capsizecss/metrics/arial"
 
 export default defineConfig({
   plugins: [
     react(),
     capsizeRadixPlugin({
-      // Import this file into your app.
+      // Import this file into your app after you import Radix's CSS.
       outputPath: `./public/merriweather.css`,
       // Pass in Capsize font metric objects.
       defaultFontStack: [merriweather, arial],
       headingFontStack: [merriweatherSans, arial],
+      codingFontStack: [sourceCodePro, arial],
     }),
   ]
 })
@@ -57,6 +59,10 @@ export default defineConfig({
 This plugin overrides all typography related CSS for Radix so you can simply
 use their typography components as normal (e.g. `<Heading>`, `<Text>`, `<Strong>`, etc)
 
+The plugin sets the variables for Radix's Type scale and Font family for Radix.
+It doesn't set Font weight. It sets the strong, em, and quote to use the default font family.
+You can set the default, heading, and coding font stacks separately.
+
 See e.g. the [documentation for `<Text>`](https://www.radix-ui.com/themes/docs/components/text).
 
 They all share a `size` prop from "1" to "10". This corresponds to the optional
@@ -64,6 +70,11 @@ They all share a `size` prop from "1" to "10". This corresponds to the optional
 the array, etc. `<Text>` defaults to `size="2"` and `<Heading>` defaults to
 `size="6"`.
 
+As Capsize trims _all_ space around text, you'll find that `<Flex gap="[space]">` becomes
+your best friend for controlling spacing between elements e.g.
+
+<img width="669" alt="Screenshot 2024-03-28 at 10 44 10 AM" src="https://github.com/KyleAMathews/vite-plugin-capsize-radix-ui/assets/71047/b8552d58-4e2d-42d6-9b7b-a595466c2725">
+
 ### Fallback fonts
 
 Another great freebie Capsize gives you is it automatically generates CSS for
@@ -86,8 +97,8 @@ to be slightly smaller than on desktop. We do that by shifting the text a size s
     ```ts
     [
       { fontSize: 9, lineHeight: 21 },
-      { fontSize: 11, lineHeight: 24 },
-      { fontSize: 12, lineHeight: 26 },
+      { fontSize: 11, lineHeight: 23 },
+      { fontSize: 12, lineHeight: 25 },
       { fontSize: 14, lineHeight: 27 },
       { fontSize: 18, lineHeight: 29 },
       { fontSize: 24, lineHeight: 36 },
@@ -98,3 +109,4 @@ to be slightly smaller than on desktop. We do that by shifting the text a size s
     ```
 * __defaultFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to a System Font stack.
 * __headingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.
+* __codingFontStack (FontMetrics[]): Optional__. An array of `FontMetrics` objects. Defaults to your `defaultFontStack`.

package/dist/index.d.mts

@@ -10,7 +10,8 @@ interface Options {
     textStyles?: TextStyle[];
     defaultFontStack?: FontMetrics[];
     headingFontStack?: FontMetrics[];
+    codingFontStack?: FontMetrics[];
 }
-declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
+declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, codingFontStack, }: Options): Plugin;
 
 export { capsizeRadixPlugin };

package/dist/index.d.ts

@@ -10,7 +10,8 @@ interface Options {
     textStyles?: TextStyle[];
     defaultFontStack?: FontMetrics[];
     headingFontStack?: FontMetrics[];
+    codingFontStack?: FontMetrics[];
 }
-declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, }: Options): Plugin;
+declare function capsizeRadixPlugin({ outputPath, textStyles, defaultFontStack, headingFontStack, codingFontStack, }: Options): Plugin;
 
 export { capsizeRadixPlugin };

package/dist/index.js

@@ -28,11 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   capsizeRadixPlugin: () => capsizeRadixPlugin
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_fs = __toESM(require("fs"));
 var import_core = require("@capsizecss/core");
 var import_mustache = __toESM(require("mustache"));
@@ -45,10 +45,11 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
 
 /* Override Radix variables */
 .radix-themes {
-  --default-font-family: {{{defaultFontStack.fontFamily}}};
-  --em-font-family: {{{defaultFontStack.fontFamily}}};
-  --quote-font-family: {{{defaultFontStack.fontFamily}}};
-  --heading-font-family: {{{headingFontStack.fontFamily}}};
+  --default-font-family: {{{defaultFontFamily.fontFamily}}};
+  --em-font-family: {{{defaultFontFamily.fontFamily}}};
+  --quote-font-family: {{{defaultFontFamily.fontFamily}}};
+  --heading-font-family: {{{headingFontFamily.fontFamily}}};
+  --code-font-family: {{{codingFontFamily.fontFamily}}};
 
   /* Mobile */
 {{#mobileFontData}}
@@ -88,7 +89,23 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   {{{quoteStyles}}}
 }
 
-.rt-Em, .rt-Quote {
+/* Code text styles */
+{{{mobileCodeStyles}}}
+@media (min-width: 768px) {
+  {{{codeStyles}}}
+}
+
+/* Code size variants */
+{{#mobileCodeFontData}}
+{{{style}}}
+{{/mobileCodeFontData}}
+@media (min-width: 768px) {
+  {{#codeFontData}}
+  {{{style}}}
+  {{/codeFontData}}
+}
+
+.rt-Em, .rt-Quote, .rt-Code {
   display: inline-block;
 }
 
@@ -103,42 +120,77 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
 }
 `;
 async function generate(options) {
-  let defaultFontStack;
-  let headingFontStack;
+  let defaultFontFamily;
+  let headingFontFamiliy;
+  let codingFontFamily;
   if (!options.defaultFontStack) {
-    options.defaultFontStack = [import_appleSystem.default, import_segoeUI.default, import_roboto.default, import_ubuntu.default, import_notoSans.default];
-    defaultFontStack = (0, import_core.createFontStack)(options.defaultFontStack);
-    defaultFontStack.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
+    options.defaultFontStack = [
+      import_appleSystem.default,
+      import_segoeUI.default,
+      import_roboto.default,
+      import_ubuntu.default,
+      import_notoSans.default
+    ];
+    defaultFontFamily = (0, import_core.createFontStack)(options.defaultFontStack);
+    defaultFontFamily.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
   } else if (options.defaultFontStack) {
-    defaultFontStack = (0, import_core.createFontStack)(options.defaultFontStack);
+    defaultFontFamily = (0, import_core.createFontStack)(options.defaultFontStack);
   }
   if (options.headingFontStack) {
-    headingFontStack = (0, import_core.createFontStack)(options.headingFontStack);
+    headingFontFamiliy = (0, import_core.createFontStack)(options.headingFontStack);
   } else {
-    headingFontStack = defaultFontStack;
+    headingFontFamiliy = defaultFontFamily;
   }
-  const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
-    ({ fontSize, lineHeight }, i) => {
-      const lineGap = lineHeight - fontSize;
-      const style = (0, import_core.createStyleString)(
-        `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
-        {
-          capHeight: fontSize,
-          lineGap,
-          fontMetrics: options.defaultFontStack[0]
-        }
-      );
-      return {
-        style,
-        ...(0, import_core.createStyleObject)({
-          capHeight: fontSize,
-          lineGap,
-          fontMetrics: options.defaultFontStack[0]
-        }),
-        i: i + 1
-      };
-    }
-  );
+  if (options.codingFontStack) {
+    codingFontFamily = (0, import_core.createFontStack)(options.codingFontStack);
+  } else {
+    options.codingFontStack = [import_appleSystem.default];
+    codingFontFamily = (0, import_core.createFontStack)(options.codingFontStack);
+    codingFontFamily.fontFamily += `, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace`;
+  }
+  const mobileFontData = [
+    options.textStyles[0],
+    ...options.textStyles.slice(1)
+  ].map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = (0, import_core.createStyleString)(
+      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      {
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.defaultFontStack[0]
+      }
+    );
+    return {
+      style,
+      ...(0, import_core.createStyleObject)({
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.defaultFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
+  const mobileCodeFontData = [
+    options.textStyles[0],
+    ...options.textStyles.slice(1)
+  ].map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = (0, import_core.createStyleString)(`rt-Code.rt-r-size-${i + 1}`, {
+      capHeight: fontSize * 0.95,
+      lineGap,
+      fontMetrics: options.codingFontStack[0]
+    });
+    return {
+      style,
+      ...(0, import_core.createStyleObject)({
+        capHeight: fontSize * 0.95,
+        lineGap,
+        fontMetrics: options.codingFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
   const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = (0, import_core.createStyleString)(
@@ -159,6 +211,23 @@ async function generate(options) {
       i: i + 1
     };
   });
+  const codeFontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = (0, import_core.createStyleString)(`rt-Code.rt-r-size-${i + 1}`, {
+      capHeight: fontSize,
+      lineGap,
+      fontMetrics: options.codingFontStack[0]
+    });
+    return {
+      style,
+      ...(0, import_core.createStyleObject)({
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.codingFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
   const mobileTextStyles = (0, import_core.createStyleString)(`rt-Text`, {
     capHeight: options.textStyles[1].fontSize,
     lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
@@ -174,6 +243,11 @@ async function generate(options) {
     lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
+  const mobileCodeStyles = (0, import_core.createStyleString)(`rt-Code`, {
+    capHeight: options.textStyles[1].fontSize * 0.95,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
+    fontMetrics: options.codingFontStack[0]
+  });
   const textStyles = (0, import_core.createStyleString)(`rt-Text`, {
     capHeight: options.textStyles[2].fontSize,
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
@@ -189,19 +263,29 @@ async function generate(options) {
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
+  const codeStyles = (0, import_core.createStyleString)(`rt-Code`, {
+    capHeight: options.textStyles[2].fontSize * 0.95,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
+    fontMetrics: options.codingFontStack[0]
+  });
   import_fs.default.writeFileSync(
     options.outputPath,
     import_mustache.default.render(template, {
-      headingFontStack,
-      defaultFontStack,
+      headingFontFamiliy,
+      defaultFontFamily,
+      codingFontFamily,
       mobileFontData,
       fontData,
+      mobileCodeFontData,
+      codeFontData,
       mobileTextStyles,
       textStyles,
       mobileEmStyles,
       emStyles,
       mobileQuoteStyles,
-      quoteStyles
+      quoteStyles,
+      mobileCodeStyles,
+      codeStyles
     })
   );
 }
@@ -219,7 +303,8 @@ function capsizeRadixPlugin({
     { fontSize: 64, lineHeight: 64 }
   ],
   defaultFontStack,
-  headingFontStack
+  headingFontStack,
+  codingFontStack
 }) {
   return {
     name: `radix-capsize-plugin`,
@@ -228,7 +313,8 @@ function capsizeRadixPlugin({
         outputPath,
         textStyles,
         defaultFontStack,
-        headingFontStack
+        headingFontStack,
+        codingFontStack
       });
     }
   };

package/dist/index.mjs

@@ -15,10 +15,11 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
 
 /* Override Radix variables */
 .radix-themes {
-  --default-font-family: {{{defaultFontStack.fontFamily}}};
-  --em-font-family: {{{defaultFontStack.fontFamily}}};
-  --quote-font-family: {{{defaultFontStack.fontFamily}}};
-  --heading-font-family: {{{headingFontStack.fontFamily}}};
+  --default-font-family: {{{defaultFontFamily.fontFamily}}};
+  --em-font-family: {{{defaultFontFamily.fontFamily}}};
+  --quote-font-family: {{{defaultFontFamily.fontFamily}}};
+  --heading-font-family: {{{headingFontFamily.fontFamily}}};
+  --code-font-family: {{{codingFontFamily.fontFamily}}};
 
   /* Mobile */
 {{#mobileFontData}}
@@ -58,7 +59,23 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   {{{quoteStyles}}}
 }
 
-.rt-Em, .rt-Quote {
+/* Code text styles */
+{{{mobileCodeStyles}}}
+@media (min-width: 768px) {
+  {{{codeStyles}}}
+}
+
+/* Code size variants */
+{{#mobileCodeFontData}}
+{{{style}}}
+{{/mobileCodeFontData}}
+@media (min-width: 768px) {
+  {{#codeFontData}}
+  {{{style}}}
+  {{/codeFontData}}
+}
+
+.rt-Em, .rt-Quote, .rt-Code {
   display: inline-block;
 }
 
@@ -73,42 +90,77 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
 }
 `;
 async function generate(options) {
-  let defaultFontStack;
-  let headingFontStack;
+  let defaultFontFamily;
+  let headingFontFamiliy;
+  let codingFontFamily;
   if (!options.defaultFontStack) {
-    options.defaultFontStack = [appleSystem, segoeUI, roboto, ubuntu, notoSans];
-    defaultFontStack = createFontStack(options.defaultFontStack);
-    defaultFontStack.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
+    options.defaultFontStack = [
+      appleSystem,
+      segoeUI,
+      roboto,
+      ubuntu,
+      notoSans
+    ];
+    defaultFontFamily = createFontStack(options.defaultFontStack);
+    defaultFontFamily.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
   } else if (options.defaultFontStack) {
-    defaultFontStack = createFontStack(options.defaultFontStack);
+    defaultFontFamily = createFontStack(options.defaultFontStack);
   }
   if (options.headingFontStack) {
-    headingFontStack = createFontStack(options.headingFontStack);
+    headingFontFamiliy = createFontStack(options.headingFontStack);
   } else {
-    headingFontStack = defaultFontStack;
+    headingFontFamiliy = defaultFontFamily;
   }
-  const mobileFontData = [options.textStyles[0], ...options.textStyles].map(
-    ({ fontSize, lineHeight }, i) => {
-      const lineGap = lineHeight - fontSize;
-      const style = createStyleString(
-        `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
-        {
-          capHeight: fontSize,
-          lineGap,
-          fontMetrics: options.defaultFontStack[0]
-        }
-      );
-      return {
-        style,
-        ...createStyleObject({
-          capHeight: fontSize,
-          lineGap,
-          fontMetrics: options.defaultFontStack[0]
-        }),
-        i: i + 1
-      };
-    }
-  );
+  if (options.codingFontStack) {
+    codingFontFamily = createFontStack(options.codingFontStack);
+  } else {
+    options.codingFontStack = [appleSystem];
+    codingFontFamily = createFontStack(options.codingFontStack);
+    codingFontFamily.fontFamily += `, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace`;
+  }
+  const mobileFontData = [
+    options.textStyles[0],
+    ...options.textStyles.slice(1)
+  ].map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = createStyleString(
+      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      {
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.defaultFontStack[0]
+      }
+    );
+    return {
+      style,
+      ...createStyleObject({
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.defaultFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
+  const mobileCodeFontData = [
+    options.textStyles[0],
+    ...options.textStyles.slice(1)
+  ].map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = createStyleString(`rt-Code.rt-r-size-${i + 1}`, {
+      capHeight: fontSize * 0.95,
+      lineGap,
+      fontMetrics: options.codingFontStack[0]
+    });
+    return {
+      style,
+      ...createStyleObject({
+        capHeight: fontSize * 0.95,
+        lineGap,
+        fontMetrics: options.codingFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
   const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = createStyleString(
@@ -129,6 +181,23 @@ async function generate(options) {
       i: i + 1
     };
   });
+  const codeFontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
+    const lineGap = lineHeight - fontSize;
+    const style = createStyleString(`rt-Code.rt-r-size-${i + 1}`, {
+      capHeight: fontSize,
+      lineGap,
+      fontMetrics: options.codingFontStack[0]
+    });
+    return {
+      style,
+      ...createStyleObject({
+        capHeight: fontSize,
+        lineGap,
+        fontMetrics: options.codingFontStack[0]
+      }),
+      i: i + 1
+    };
+  });
   const mobileTextStyles = createStyleString(`rt-Text`, {
     capHeight: options.textStyles[1].fontSize,
     lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
@@ -144,6 +213,11 @@ async function generate(options) {
     lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
+  const mobileCodeStyles = createStyleString(`rt-Code`, {
+    capHeight: options.textStyles[1].fontSize * 0.95,
+    lineGap: options.textStyles[1].lineHeight - options.textStyles[1].fontSize,
+    fontMetrics: options.codingFontStack[0]
+  });
   const textStyles = createStyleString(`rt-Text`, {
     capHeight: options.textStyles[2].fontSize,
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
@@ -159,19 +233,29 @@ async function generate(options) {
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.defaultFontStack[0]
   });
+  const codeStyles = createStyleString(`rt-Code`, {
+    capHeight: options.textStyles[2].fontSize * 0.95,
+    lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
+    fontMetrics: options.codingFontStack[0]
+  });
   fs.writeFileSync(
     options.outputPath,
     Mustache.render(template, {
-      headingFontStack,
-      defaultFontStack,
+      headingFontFamiliy,
+      defaultFontFamily,
+      codingFontFamily,
       mobileFontData,
       fontData,
+      mobileCodeFontData,
+      codeFontData,
       mobileTextStyles,
       textStyles,
       mobileEmStyles,
       emStyles,
       mobileQuoteStyles,
-      quoteStyles
+      quoteStyles,
+      mobileCodeStyles,
+      codeStyles
     })
   );
 }
@@ -189,7 +273,8 @@ function capsizeRadixPlugin({
     { fontSize: 64, lineHeight: 64 }
   ],
   defaultFontStack,
-  headingFontStack
+  headingFontStack,
+  codingFontStack
 }) {
   return {
     name: `radix-capsize-plugin`,
@@ -198,7 +283,8 @@ function capsizeRadixPlugin({
         outputPath,
         textStyles,
         defaultFontStack,
-        headingFontStack
+        headingFontStack,
+        codingFontStack
       });
     }
   };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "vite-plugin-capsize-radix",
   "description": "Great Typography with Radix & Capsize",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "@capsizecss/core": "^4.1.0",
-    "@capsizecss/metrics": "^2.2.0",
+    "@capsizecss/metrics": "^3.4.0",
     "mustache": "^4.2.0"
   },
   "devDependencies": {
@@ -24,8 +24,8 @@
     "shx": "^0.3.4",
     "tsup": "^8.0.2",
     "typescript": "^5.4.3",
-    "vite": "^5.2.6",
-    "vitest": "^1.4.0"
+    "vite": "^6.2.3",
+    "vitest": "^3.0.9"
   },
   "directories": {
     "example": "example"
@@ -54,10 +54,10 @@
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "scripts": {
-    "build": "npm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
+    "build": "pnpm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
     "check": "tsc",
     "clean": "shx rm -rf dist *.d.ts",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "pnpm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "tsup": {