vite-plugin-capsize-radix 0.1.1 → 0.1.3

package/README.md

@@ -31,6 +31,7 @@ if you're interested on collaborating on one.
 ### Add to vite.config.ts
 
 A sample React config:
+
 ```ts
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react-swc"
@@ -51,11 +52,12 @@ export default defineConfig({
       headingFontStack: [merriweatherSans, arial],
       codingFontStack: [sourceCodePro, arial],
     }),
-  ]
+  ],
 })
 ```
 
 ### Using with Radix UI
+
 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)
 
@@ -87,26 +89,27 @@ Capsize has precalculated metrics for system and many open source fonts. If you'
 using a custom font, you can calculate the font metrics using their [@capsizecss/unpack](https://github.com/seek-oss/capsize?tab=readme-ov-file#unpack) package.
 
 ## Responsive styles
+
 This plugin automatically generates responsive styles. Typically you want your mobile font-size
 to be slightly smaller than on desktop. We do that by shifting the text a size smaller on mobile.
 
 ## Parameters:
 
-* __outputPath (string): Required__. The file path where the generated CSS or design tokens should be saved.
-* __textStyles (TextStyle[]): Optional__. An array of objects, each representing a text style. Each object contains two properties: `fontSize` and `lineHeight`, which are numerical values, pixels for `fontSize` and pixels or relative value for `lineHeight`. Defaults to:
-    ```ts
-    [
-      { fontSize: 9, lineHeight: 21 },
-      { fontSize: 11, lineHeight: 23 },
-      { fontSize: 12, lineHeight: 25 },
-      { fontSize: 14, lineHeight: 27 },
-      { fontSize: 18, lineHeight: 29 },
-      { fontSize: 24, lineHeight: 36 },
-      { fontSize: 36, lineHeight: 44 },
-      { fontSize: 48, lineHeight: 52 },
-      { fontSize: 64, lineHeight: 64 }
-    ]
-    ```
-* __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`.
+- **outputPath (string): Required**. The file path where the generated CSS or design tokens should be saved.
+- **textStyles (TextStyle[]): Optional**. An array of objects, each representing a text style. Each object contains two properties: `fontSize` and `lineHeight`, which are numerical values, pixels for `fontSize` and pixels or relative value for `lineHeight`. Defaults to:
+  ```ts
+  ;[
+    { fontSize: 9, lineHeight: 19 },
+    { fontSize: 11, lineHeight: 23 },
+    { fontSize: 12, lineHeight: 25 },
+    { fontSize: 14, lineHeight: 28 },
+    { fontSize: 18, lineHeight: 30 },
+    { fontSize: 24, lineHeight: 36 },
+    { fontSize: 36, lineHeight: 44 },
+    { fontSize: 48, lineHeight: 52 },
+    { fontSize: 64, lineHeight: 64 },
+  ]
+  ```
+- **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.js

@@ -36,11 +36,15 @@ module.exports = __toCommonJS(index_exports);
 var import_fs = __toESM(require("fs"));
 var import_core = require("@capsizecss/core");
 var import_mustache = __toESM(require("mustache"));
+var import_path = __toESM(require("path"));
 var import_segoeUI = __toESM(require("@capsizecss/metrics/segoeUI"));
 var import_appleSystem = __toESM(require("@capsizecss/metrics/appleSystem"));
 var import_roboto = __toESM(require("@capsizecss/metrics/roboto"));
 var import_ubuntu = __toESM(require("@capsizecss/metrics/ubuntu"));
 var import_notoSans = __toESM(require("@capsizecss/metrics/notoSans"));
+var TEXT_ELEMENTS = `.rt-Text, .rt-Heading, .rt-Em, .rt-Quote, .rt-Link`;
+var TEXT_SELECTOR_PLACEHOLDER = `__CAPSIZE_TEXT__`;
+var TEXT_SELECTOR_REPLACEMENT = `:where(${TEXT_ELEMENTS})`;
 var template = `/* Auto-generated by vite-plugin-capsize-radix */
 
 /* Override Radix variables */
@@ -109,7 +113,7 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   display: inline-block;
 }
 
-/* Class names for text elements */
+/* Size variants for text elements only */
 {{#mobileFontData}}
 {{{style}}}
 {{/mobileFontData}}
@@ -119,9 +123,39 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   {{/fontData}}
 }
 `;
-async function generate(options) {
+function validateOptions(options) {
+  if (!options.outputPath) {
+    throw new Error(`[capsize-radix] outputPath is required`);
+  }
+  if (options.textStyles.length < 3) {
+    throw new Error(
+      `[capsize-radix] textStyles must have at least 3 entries (found ${options.textStyles.length})`
+    );
+  }
+  for (let i = 0; i < options.textStyles.length; i++) {
+    const style = options.textStyles[i];
+    if (typeof style.fontSize !== `number` || style.fontSize <= 0) {
+      throw new Error(
+        `[capsize-radix] textStyles[${i}].fontSize must be a positive number`
+      );
+    }
+    if (typeof style.lineHeight !== `number` || style.lineHeight <= 0) {
+      throw new Error(
+        `[capsize-radix] textStyles[${i}].lineHeight must be a positive number`
+      );
+    }
+  }
+  const outputDir = import_path.default.dirname(options.outputPath);
+  if (!import_fs.default.existsSync(outputDir)) {
+    throw new Error(
+      `[capsize-radix] Output directory does not exist: ${outputDir}`
+    );
+  }
+}
+function generate(options) {
+  validateOptions(options);
   let defaultFontFamily;
-  let headingFontFamiliy;
+  let headingFontFamily;
   let codingFontFamily;
   if (!options.defaultFontStack) {
     options.defaultFontStack = [
@@ -133,13 +167,13 @@ async function generate(options) {
     ];
     defaultFontFamily = (0, import_core.createFontStack)(options.defaultFontStack);
     defaultFontFamily.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
-  } else if (options.defaultFontStack) {
+  } else {
     defaultFontFamily = (0, import_core.createFontStack)(options.defaultFontStack);
   }
   if (options.headingFontStack) {
-    headingFontFamiliy = (0, import_core.createFontStack)(options.headingFontStack);
+    headingFontFamily = (0, import_core.createFontStack)(options.headingFontStack);
   } else {
-    headingFontFamiliy = defaultFontFamily;
+    headingFontFamily = defaultFontFamily;
   }
   if (options.codingFontStack) {
     codingFontFamily = (0, import_core.createFontStack)(options.codingFontStack);
@@ -154,7 +188,7 @@ async function generate(options) {
   ].map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = (0, import_core.createStyleString)(
-      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      `${TEXT_SELECTOR_PLACEHOLDER}.rt-r-size-${i + 1}`,
       {
         capHeight: fontSize,
         lineGap,
@@ -194,7 +228,7 @@ async function generate(options) {
   const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = (0, import_core.createStyleString)(
-      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      `${TEXT_SELECTOR_PLACEHOLDER}.rt-r-size-${i + 1}`,
       {
         capHeight: fontSize,
         lineGap,
@@ -268,26 +302,36 @@ async function generate(options) {
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.codingFontStack[0]
   });
-  import_fs.default.writeFileSync(
-    options.outputPath,
-    import_mustache.default.render(template, {
-      headingFontFamiliy,
-      defaultFontFamily,
-      codingFontFamily,
-      mobileFontData,
-      fontData,
-      mobileCodeFontData,
-      codeFontData,
-      mobileTextStyles,
-      textStyles,
-      mobileEmStyles,
-      emStyles,
-      mobileQuoteStyles,
-      quoteStyles,
-      mobileCodeStyles,
-      codeStyles
-    })
+  const output = import_mustache.default.render(template, {
+    headingFontFamily,
+    defaultFontFamily,
+    codingFontFamily,
+    mobileFontData,
+    fontData,
+    mobileCodeFontData,
+    codeFontData,
+    mobileTextStyles,
+    textStyles,
+    mobileEmStyles,
+    emStyles,
+    mobileQuoteStyles,
+    quoteStyles,
+    mobileCodeStyles,
+    codeStyles
+  });
+  const placeholderRegex = new RegExp(`\\.${TEXT_SELECTOR_PLACEHOLDER}`, `g`);
+  const finalOutput = output.replace(
+    placeholderRegex,
+    TEXT_SELECTOR_REPLACEMENT
   );
+  try {
+    import_fs.default.writeFileSync(options.outputPath, finalOutput);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(
+      `[capsize-radix] Failed to write CSS to ${options.outputPath}: ${message}`
+    );
+  }
 }
 function capsizeRadixPlugin({
   outputPath,

package/dist/index.mjs

@@ -6,11 +6,15 @@ import {
   createFontStack
 } from "@capsizecss/core";
 import Mustache from "mustache";
+import path from "path";
 import segoeUI from "@capsizecss/metrics/segoeUI";
 import appleSystem from "@capsizecss/metrics/appleSystem";
 import roboto from "@capsizecss/metrics/roboto";
 import ubuntu from "@capsizecss/metrics/ubuntu";
 import notoSans from "@capsizecss/metrics/notoSans";
+var TEXT_ELEMENTS = `.rt-Text, .rt-Heading, .rt-Em, .rt-Quote, .rt-Link`;
+var TEXT_SELECTOR_PLACEHOLDER = `__CAPSIZE_TEXT__`;
+var TEXT_SELECTOR_REPLACEMENT = `:where(${TEXT_ELEMENTS})`;
 var template = `/* Auto-generated by vite-plugin-capsize-radix */
 
 /* Override Radix variables */
@@ -79,7 +83,7 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   display: inline-block;
 }
 
-/* Class names for text elements */
+/* Size variants for text elements only */
 {{#mobileFontData}}
 {{{style}}}
 {{/mobileFontData}}
@@ -89,9 +93,39 @@ var template = `/* Auto-generated by vite-plugin-capsize-radix */
   {{/fontData}}
 }
 `;
-async function generate(options) {
+function validateOptions(options) {
+  if (!options.outputPath) {
+    throw new Error(`[capsize-radix] outputPath is required`);
+  }
+  if (options.textStyles.length < 3) {
+    throw new Error(
+      `[capsize-radix] textStyles must have at least 3 entries (found ${options.textStyles.length})`
+    );
+  }
+  for (let i = 0; i < options.textStyles.length; i++) {
+    const style = options.textStyles[i];
+    if (typeof style.fontSize !== `number` || style.fontSize <= 0) {
+      throw new Error(
+        `[capsize-radix] textStyles[${i}].fontSize must be a positive number`
+      );
+    }
+    if (typeof style.lineHeight !== `number` || style.lineHeight <= 0) {
+      throw new Error(
+        `[capsize-radix] textStyles[${i}].lineHeight must be a positive number`
+      );
+    }
+  }
+  const outputDir = path.dirname(options.outputPath);
+  if (!fs.existsSync(outputDir)) {
+    throw new Error(
+      `[capsize-radix] Output directory does not exist: ${outputDir}`
+    );
+  }
+}
+function generate(options) {
+  validateOptions(options);
   let defaultFontFamily;
-  let headingFontFamiliy;
+  let headingFontFamily;
   let codingFontFamily;
   if (!options.defaultFontStack) {
     options.defaultFontStack = [
@@ -103,13 +137,13 @@ async function generate(options) {
     ];
     defaultFontFamily = createFontStack(options.defaultFontStack);
     defaultFontFamily.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
-  } else if (options.defaultFontStack) {
+  } else {
     defaultFontFamily = createFontStack(options.defaultFontStack);
   }
   if (options.headingFontStack) {
-    headingFontFamiliy = createFontStack(options.headingFontStack);
+    headingFontFamily = createFontStack(options.headingFontStack);
   } else {
-    headingFontFamiliy = defaultFontFamily;
+    headingFontFamily = defaultFontFamily;
   }
   if (options.codingFontStack) {
     codingFontFamily = createFontStack(options.codingFontStack);
@@ -124,7 +158,7 @@ async function generate(options) {
   ].map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = createStyleString(
-      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      `${TEXT_SELECTOR_PLACEHOLDER}.rt-r-size-${i + 1}`,
       {
         capHeight: fontSize,
         lineGap,
@@ -164,7 +198,7 @@ async function generate(options) {
   const fontData = options.textStyles.map(({ fontSize, lineHeight }, i) => {
     const lineGap = lineHeight - fontSize;
     const style = createStyleString(
-      `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
+      `${TEXT_SELECTOR_PLACEHOLDER}.rt-r-size-${i + 1}`,
       {
         capHeight: fontSize,
         lineGap,
@@ -238,26 +272,36 @@ async function generate(options) {
     lineGap: options.textStyles[2].lineHeight - options.textStyles[2].fontSize,
     fontMetrics: options.codingFontStack[0]
   });
-  fs.writeFileSync(
-    options.outputPath,
-    Mustache.render(template, {
-      headingFontFamiliy,
-      defaultFontFamily,
-      codingFontFamily,
-      mobileFontData,
-      fontData,
-      mobileCodeFontData,
-      codeFontData,
-      mobileTextStyles,
-      textStyles,
-      mobileEmStyles,
-      emStyles,
-      mobileQuoteStyles,
-      quoteStyles,
-      mobileCodeStyles,
-      codeStyles
-    })
+  const output = Mustache.render(template, {
+    headingFontFamily,
+    defaultFontFamily,
+    codingFontFamily,
+    mobileFontData,
+    fontData,
+    mobileCodeFontData,
+    codeFontData,
+    mobileTextStyles,
+    textStyles,
+    mobileEmStyles,
+    emStyles,
+    mobileQuoteStyles,
+    quoteStyles,
+    mobileCodeStyles,
+    codeStyles
+  });
+  const placeholderRegex = new RegExp(`\\.${TEXT_SELECTOR_PLACEHOLDER}`, `g`);
+  const finalOutput = output.replace(
+    placeholderRegex,
+    TEXT_SELECTOR_REPLACEMENT
   );
+  try {
+    fs.writeFileSync(options.outputPath, finalOutput);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new Error(
+      `[capsize-radix] Failed to write CSS to ${options.outputPath}: ${message}`
+    );
+  }
 }
 function capsizeRadixPlugin({
   outputPath,

package/package.json

@@ -1,31 +1,32 @@
 {
   "name": "vite-plugin-capsize-radix",
   "description": "Great Typography with Radix & Capsize",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "@capsizecss/core": "^4.1.0",
-    "@capsizecss/metrics": "^3.4.0",
+    "@capsizecss/core": "^4.1.3",
+    "@capsizecss/metrics": "^3.6.2",
     "mustache": "^4.2.0"
   },
   "devDependencies": {
-    "@capsizecss/unpack": "^2.1.0",
-    "@types/mustache": "^4.2.5",
+    "@capsizecss/unpack": "^2.4.0",
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^25.0.3",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^9.1.2",
     "eslint-config-react": "^1.1.7",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
-    "prettier": "^3.2.5",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "prettier": "^3.7.4",
     "shx": "^0.3.4",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.3",
-    "vite": "^6.2.3",
-    "vitest": "^3.0.9"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4"
   },
   "directories": {
     "example": "example"
@@ -53,13 +54,6 @@
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
-  "scripts": {
-    "build": "pnpm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
-    "check": "tsc",
-    "clean": "shx rm -rf dist *.d.ts",
-    "prepublishOnly": "pnpm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "tsup": {
     "entry": [
       "src/index.ts"
@@ -70,5 +64,14 @@
     ],
     "dts": true
   },
-  "types": "./dist/index.d.ts"
-}
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "pnpm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
+    "check": "tsc",
+    "clean": "shx rm -rf dist *.d.ts",
+    "lint": "eslint src tests --ext .ts,.tsx",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run"
+  }
+}