vite-plugin-capsize-radix 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kyle Mathews
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# vite-plugin-capsize-radix
+
+Generate bulletproof typography css for [@radix-ui/themes](https://www.radix-ui.com/)
+
+## 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.
+
+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.
+
+This plugin glues Capsize with the fantastic Radix theming components.
+
+Similar plugins could be built for other meta-frameworks & component libraries — open an issue
+if you're interested on collaborating on one.
+
+## How to use
+
+### Install
+
+`npm install vite-plugin-capsize-radix`
+
+### Add to vite.config.ts
+
+A sample React config:
+```ts
+import { defineConfig } from "vite"
+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 arial from "@capsizecss/metrics/arial"
+
+export default defineConfig({
+  plugins: [
+    react(),
+    capsizeRadixPlugin({
+      // Import this file into your app.
+      outputPath: `./public/merriweather.css`,
+      // Pass in Capsize font metric objects for generating the right CSS.
+      defaultFontStack: [merriweather, arial],
+      headingFontStack: [merriweatherSans, 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)
+
+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
+`fontSizes` array passed to the plugin e.g. `size="0"` is the first value of
+the array, etc. `<Text>` defaults to `size="2"` and `<Heading>` defaults to
+`size="6"`.
+
+### Fallback fonts
+
+Another great freebie Capsize gives you is it automatically generates CSS for
+aligning your fallback font with your main font, which can dramatically improve
+the [Cumulative Layout Shift](https://web.dev/cls/) metric for sites that depend on a web font
+
+### Custom fonts
+
+Capsize has precalculated metrics for system and many open source fonts. If you're
+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.
+* __fontSizes (number[]): Optional__: An array of numerical font size values (presumably in pixels). Defaults to [9, 11, 12, 14, 18, 24, 36, 48, 64].
+* __lineHeights (number[]): Optional__: An array of numerical line height values. Defaults to [21, 24, 26, 27, 29, 36, 44, 52, 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`.

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "vite-plugin-capsize-radix",
+  "description": "Great Typography with Radix & Capsize",
+  "version": "0.0.1",
+  "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"
+  },
+  "devDependencies": {
+    "@capsizecss/unpack": "^2.1.0",
+    "@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-react": "^1.1.7",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
+    "vitest": "^1.4.0"
+  },
+  "directories": {
+    "example": "example"
+  },
+  "exports": {
+    ".": {
+      "types": "./plugin.ts",
+      "import": "./plugin.ts"
+    }
+  },
+  "files": [
+    "plugin.ts"
+  ],
+  "keywords": [
+    "capsizecss",
+    "radix-ui",
+    "typography",
+    "vite-plugin"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "type": "module",
+  "types": "./plugin.ts"
+}

package/plugin.ts

@@ -0,0 +1,224 @@
+import { Plugin } from "vite"
+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 */
+
+/* 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) {
+    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`
+  }
+  if (options.headingFontStack) {
+    headingFontStack = 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 = 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 fontData = options.fontSizes.map((fontSize, i) => {
+    const lineGap = options.lineHeights[i] - 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 mobileTextStyles = createStyleString(`rt-Text`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0],
+  })
+  const mobileEmStyles = createStyleString(`rt-Em`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0],
+  })
+  const mobileQuoteStyles = createStyleString(`rt-Quote`, {
+    capHeight: options.fontSizes[1],
+    lineGap: options.lineHeights[1] - options.fontSizes[1],
+    fontMetrics: options.defaultFontStack[0],
+  })
+
+  const textStyles = createStyleString(`rt-Text`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0],
+  })
+  const emStyles = createStyleString(`rt-Em`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0],
+  })
+  const quoteStyles = createStyleString(`rt-Quote`, {
+    capHeight: options.fontSizes[2],
+    lineGap: options.lineHeights[2] - options.fontSizes[2],
+    fontMetrics: options.defaultFontStack[0],
+  })
+
+  fs.writeFileSync(
+    options.outputPath,
+    Mustache.render(template, {
+      headingFontStack,
+      defaultFontStack,
+      mobileFontData,
+      fontData,
+      mobileTextStyles,
+      textStyles,
+      mobileEmStyles,
+      emStyles,
+      mobileQuoteStyles,
+      quoteStyles,
+    })
+  )
+}
+
+export 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 {
+  return {
+    name: `radix-capsize-plugin`,
+    buildStart() {
+      generate({
+        outputPath,
+        fontSizes,
+        lineHeights,
+        defaultFontStack,
+        headingFontStack,
+      })
+    },
+  }
+}