vite-plugin-capsize-radix 0.0.1 → 0.0.2

package/README.md

@@ -2,6 +2,8 @@
 
 Generate bulletproof typography css for [@radix-ui/themes](https://www.radix-ui.com/)
 
+Now changing fonts is as easy as changing colors.
+
 ## Why
 
 Getting custom fonts to look right is hard on the web — so most peoply
@@ -13,7 +15,7 @@ as the rest of your application.
 https://github.com/KyleAMathews/vite-plugin-capsize-radix-ui/assets/71047/3ec5d6ca-bf00-4b79-8552-4e3da3454f52
 
 Capsize makes fonts render the way you expect them to. With Capsize, if you
-want a font to have 16px height, it _actually_ will.
+assign a font to occupy 16px of height, it _actually_ will.
 
 This plugin glues Capsize with the fantastic Radix theming components.
 
@@ -43,7 +45,7 @@ export default defineConfig({
     capsizeRadixPlugin({
       // Import this file into your app.
       outputPath: `./public/merriweather.css`,
-      // Pass in Capsize font metric objects for generating the right CSS.
+      // Pass in Capsize font metric objects.
       defaultFontStack: [merriweather, arial],
       headingFontStack: [merriweatherSans, arial],
     }),

package/dist/index.cjs

@@ -0,0 +1,231 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  radixCapsizePlugin: () => radixCapsizePlugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_fs = __toESM(require("fs"), 1);
+var import_core = require("@capsizecss/core");
+var import_mustache = __toESM(require("mustache"), 1);
+var import_segoeUI = __toESM(require("@capsizecss/metrics/segoeUI"), 1);
+var import_appleSystem = __toESM(require("@capsizecss/metrics/appleSystem"), 1);
+var import_roboto = __toESM(require("@capsizecss/metrics/roboto"), 1);
+var import_ubuntu = __toESM(require("@capsizecss/metrics/ubuntu"), 1);
+var import_notoSans = __toESM(require("@capsizecss/metrics/notoSans"), 1);
+var template = `/* Auto-generated by scripts/generate-typography-styles.ts */
+
+/* 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}}};
+
+  /* Mobile */
+{{#mobileFontData}}
+  --font-size-{{{i}}}: {{{fontSize}}};
+  --line-height-{{{i}}}: {{{lineHeight}}};
+{{/mobileFontData}}
+
+  /* Larger devices */
+  @media (min-width: 768px) {
+  {{#fontData}}
+    --font-size-{{{i}}}: {{{fontSize}}};
+    --line-height-{{{i}}}: {{{lineHeight}}};
+  {{/fontData}}
+  }
+}
+
+/* Otherwise links don't flow inline */
+.rt-Link {
+  display: inline-block;
+}
+
+/* Default text styles */
+{{{mobileTextStyles}}}
+@media (min-width: 768px) {
+  {{{textStyles}}}
+}
+
+/* Em text styles */
+{{{mobileEmStyles}}}
+@media (min-width: 768px) {
+  {{{emStyles}}}
+}
+
+/* Quote text styles */
+{{{mobileQuoteStyles}}}
+@media (min-width: 768px) {
+  {{{quoteStyles}}}
+}
+
+.rt-Em, .rt-Quote {
+  display: inline-block;
+}
+
+/* Class names for text elements */
+{{#mobileFontData}}
+{{{style}}}
+{{/mobileFontData}}
+@media (min-width: 768px) {
+  {{#fontData}}
+  {{{style}}}
+  {{/fontData}}
+}
+`;
+async function generate(options) {
+  let defaultFontStack;
+  let headingFontStack;
+  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`;
+  } else if (options.defaultFontStack) {
+    defaultFontStack = (0, import_core.createFontStack)(options.defaultFontStack);
+  }
+  if (options.headingFontStack) {
+    headingFontStack = (0, import_core.createFontStack)(options.headingFontStack);
+  } else {
+    headingFontStack = defaultFontStack;
+  }
+  const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
+    (fontSize, i) => {
+      const lineGap = options.lineHeights[i - 1] - 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 fontData = options.fontSizes.map((fontSize, i) => {
+    const lineGap = options.lineHeights[i] - 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 mobileTextStyles = (0, import_core.createStyleString)(`rt-Text`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  const mobileEmStyles = (0, import_core.createStyleString)(`rt-Em`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  const mobileQuoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  const textStyles = (0, import_core.createStyleString)(`rt-Text`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  const emStyles = (0, import_core.createStyleString)(`rt-Em`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  const quoteStyles = (0, import_core.createStyleString)(`rt-Quote`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0]
+  });
+  import_fs.default.writeFileSync(
+    options.outputPath,
+    import_mustache.default.render(template, {
+      headingFontStack,
+      defaultFontStack,
+      mobileFontData,
+      fontData,
+      mobileTextStyles,
+      textStyles,
+      mobileEmStyles,
+      emStyles,
+      mobileQuoteStyles,
+      quoteStyles
+    })
+  );
+}
+function radixCapsizePlugin({
+  outputPath,
+  fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
+  lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
+  defaultFontStack,
+  headingFontStack
+}) {
+  return {
+    name: `radix-capsize-plugin`,
+    buildStart() {
+      generate({
+        outputPath,
+        fontSizes,
+        lineHeights,
+        defaultFontStack,
+        headingFontStack
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  radixCapsizePlugin
+});

package/dist/index.d.cts

@@ -0,0 +1,13 @@
+import { Plugin } from 'vite';
+import { FontMetrics } from '@capsizecss/core';
+
+interface Options {
+    outputPath: string;
+    fontSizes?: number[];
+    lineHeights?: number[];
+    defaultFontStack?: FontMetrics[];
+    headingFontStack?: FontMetrics[];
+}
+declare function radixCapsizePlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
+
+export { radixCapsizePlugin };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { Plugin } from 'vite';
+import { FontMetrics } from '@capsizecss/core';
+
+interface Options {
+    outputPath: string;
+    fontSizes?: number[];
+    lineHeights?: number[];
+    defaultFontStack?: FontMetrics[];
+    headingFontStack?: FontMetrics[];
+}
+declare function radixCapsizePlugin({ outputPath, fontSizes, lineHeights, defaultFontStack, headingFontStack, }: Options): Plugin;
+
+export { radixCapsizePlugin };

package/{plugin.ts → dist/index.js}

@@ -1,22 +1,17 @@
-import { Plugin } from "vite"
-import fs from "fs"
+// src/index.ts
+import fs from "fs";
 import {
   createStyleObject,
   createStyleString,
-  createFontStack,
-  FontMetrics,
-} from "@capsizecss/core"
-import Mustache from "mustache"
-
-// Metrics for system fonts
-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 cantarell from "@capsizecss/metrics/cantarell"
-import notoSans from "@capsizecss/metrics/notoSans"
-
-const template = `/* Auto-generated by scripts/generate-typography-styles.ts */
+  createFontStack
+} from "@capsizecss/core";
+import Mustache from "mustache";
+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 template = `/* Auto-generated by scripts/generate-typography-styles.ts */
 
 /* Override Radix variables */
 .radix-themes {
@@ -76,109 +71,94 @@ const template = `/* Auto-generated by scripts/generate-typography-styles.ts */
   {{{style}}}
   {{/fontData}}
 }
-`
-
+`;
 async function generate(options) {
-  let defaultFontStack
-  let headingFontStack
-  if (options.defaultFontStack) {
-    defaultFontStack = createFontStack(options.defaultFontStack)
-  } else {
-    options.defaultFontStack = [
-      appleSystem,
-      segoeUI,
-      roboto,
-      ubuntu,
-      cantarell,
-      notoSans,
-    ]
-    defaultFontStack = createFontStack(options.defaultFontStack)
-
-    // We prefer to determanistically pick the font w/ the stack above so then the font trimmings work
-    // but we if we can't, we'll fall back to these.
-    defaultFontStack.fontFamily += `, ui-sans-serif, system-ui, sans-serif`
+  let defaultFontStack;
+  let headingFontStack;
+  if (!options.defaultFontStack) {
+    options.defaultFontStack = [appleSystem, segoeUI, roboto, ubuntu, notoSans];
+    defaultFontStack = createFontStack(options.defaultFontStack);
+    defaultFontStack.fontFamily += `, ui-sans-serif, system-ui, sans-serif`;
+  } else if (options.defaultFontStack) {
+    defaultFontStack = createFontStack(options.defaultFontStack);
   }
   if (options.headingFontStack) {
-    headingFontStack = createFontStack(options.headingFontStack)
+    headingFontStack = createFontStack(options.headingFontStack);
   } else {
-    headingFontStack = defaultFontStack
+    headingFontStack = defaultFontStack;
   }
-
   const mobileFontData = [options.fontSizes[0], ...options.fontSizes].map(
     (fontSize, i) => {
-      const lineGap = options.lineHeights[i - 1] - fontSize
+      const lineGap = options.lineHeights[i - 1] - fontSize;
       const style = createStyleString(
         `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
         {
           capHeight: fontSize,
           lineGap,
-          fontMetrics: options.defaultFontStack[0],
+          fontMetrics: options.defaultFontStack[0]
         }
-      )
+      );
       return {
         style,
         ...createStyleObject({
           capHeight: fontSize,
           lineGap,
-          fontMetrics: options.defaultFontStack[0],
+          fontMetrics: options.defaultFontStack[0]
         }),
-        i: i + 1,
-      }
+        i: i + 1
+      };
     }
-  )
+  );
   const fontData = options.fontSizes.map((fontSize, i) => {
-    const lineGap = options.lineHeights[i] - fontSize
+    const lineGap = options.lineHeights[i] - fontSize;
     const style = createStyleString(
       `rt-r-size-${i + 1}:not(.rt-DialogContent)`,
       {
         capHeight: fontSize,
         lineGap,
-        fontMetrics: options.defaultFontStack[0],
+        fontMetrics: options.defaultFontStack[0]
       }
-    )
+    );
     return {
       style,
       ...createStyleObject({
         capHeight: fontSize,
         lineGap,
-        fontMetrics: options.defaultFontStack[0],
+        fontMetrics: options.defaultFontStack[0]
       }),
-      i: i + 1,
-    }
-  })
-
+      i: i + 1
+    };
+  });
   const mobileTextStyles = createStyleString(`rt-Text`, {
     capHeight: options.fontSizes[1],
     lineGap: options.lineHeights[1] - options.fontSizes[1],
-    fontMetrics: options.defaultFontStack[0],
-  })
+    fontMetrics: options.defaultFontStack[0]
+  });
   const mobileEmStyles = createStyleString(`rt-Em`, {
     capHeight: options.fontSizes[1],
     lineGap: options.lineHeights[1] - options.fontSizes[1],
-    fontMetrics: options.defaultFontStack[0],
-  })
+    fontMetrics: options.defaultFontStack[0]
+  });
   const mobileQuoteStyles = createStyleString(`rt-Quote`, {
     capHeight: options.fontSizes[1],
     lineGap: options.lineHeights[1] - options.fontSizes[1],
-    fontMetrics: options.defaultFontStack[0],
-  })
-
+    fontMetrics: options.defaultFontStack[0]
+  });
   const textStyles = createStyleString(`rt-Text`, {
     capHeight: options.fontSizes[2],
     lineGap: options.lineHeights[2] - options.fontSizes[2],
-    fontMetrics: options.defaultFontStack[0],
-  })
+    fontMetrics: options.defaultFontStack[0]
+  });
   const emStyles = createStyleString(`rt-Em`, {
     capHeight: options.fontSizes[2],
     lineGap: options.lineHeights[2] - options.fontSizes[2],
-    fontMetrics: options.defaultFontStack[0],
-  })
+    fontMetrics: options.defaultFontStack[0]
+  });
   const quoteStyles = createStyleString(`rt-Quote`, {
     capHeight: options.fontSizes[2],
     lineGap: options.lineHeights[2] - options.fontSizes[2],
-    fontMetrics: options.defaultFontStack[0],
-  })
-
+    fontMetrics: options.defaultFontStack[0]
+  });
   fs.writeFileSync(
     options.outputPath,
     Mustache.render(template, {
@@ -191,24 +171,17 @@ async function generate(options) {
       mobileEmStyles,
       emStyles,
       mobileQuoteStyles,
-      quoteStyles,
+      quoteStyles
     })
-  )
+  );
 }
-
-export function radixCapsizePlugin({
+function radixCapsizePlugin({
   outputPath,
   fontSizes = [9, 11, 12, 14, 18, 24, 36, 48, 64],
   lineHeights = [21, 24, 26, 27, 29, 36, 44, 52, 64],
   defaultFontStack,
-  headingFontStack,
-}: {
-  outputPath: string
-  fontSizes?: number[]
-  lineHeights?: number[]
-  defaultFontStack?: FontMetrics[]
-  headingFontStack?: FontMetrics[]
-}): Plugin {
+  headingFontStack
+}) {
   return {
     name: `radix-capsize-plugin`,
     buildStart() {
@@ -217,8 +190,11 @@ export function radixCapsizePlugin({
         fontSizes,
         lineHeights,
         defaultFontStack,
-        headingFontStack,
-      })
-    },
-  }
+        headingFontStack
+      });
+    }
+  };
 }
+export {
+  radixCapsizePlugin
+};

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "vite-plugin-capsize-radix",
   "description": "Great Typography with Radix & Capsize",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "@capsizecss/core": "^4.1.0",
-    "@capsizecss/metrics": "^2.2.0",
-    "@types/mustache": "^4.2.5",
-    "mustache": "^4.2.0"
+    "@capsizecss/core": "^4.1.0"
   },
   "devDependencies": {
+    "@capsizecss/metrics": "^2.2.0",
     "@capsizecss/unpack": "^2.1.0",
+    "@types/mustache": "^4.2.5",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "eslint": "^8.57.0",
@@ -20,7 +19,10 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "mustache": "^4.2.0",
     "prettier": "^3.2.5",
+    "shx": "^0.3.4",
+    "tsup": "^8.0.2",
     "typescript": "^5.4.3",
     "vite": "^5.2.6",
     "vitest": "^1.4.0"
@@ -30,12 +32,17 @@
   },
   "exports": {
     ".": {
-      "types": "./plugin.ts",
-      "import": "./plugin.ts"
-    }
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
-    "plugin.ts"
+    "dist"
   ],
   "keywords": [
     "capsizecss",
@@ -44,10 +51,24 @@
     "vite-plugin"
   ],
   "license": "MIT",
-  "main": "index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "scripts": {
+    "build": "npm run clean && tsup --external @capsizecss/core --external mustache --external @capsizecss/metrics",
+    "check": "tsc",
+    "clean": "shx rm -rf dist *.d.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "esm",
+      "cjs"
+    ],
+    "dts": true
+  },
   "type": "module",
-  "types": "./plugin.ts"
+  "types": "./dist/index.d.ts"
 }