fontaine 0.4.0 → 0.5.0

package/README.md

@@ -48,10 +48,13 @@ yarn add -D fontaine
 ```js
 import { FontaineTransform } from 'fontaine'
 
+// Astro config - astro.config.mjs
+import { defineConfig } from 'astro/config'
+
 const options = {
   fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
   // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
-  resolvePath: (id) => 'file:///path/to/public/dir' + id,
+  resolvePath: id => `file:///path/to/public/dir${id}`,
   // overrideName: (originalName) => `${name} override`
   // sourcemap: false
   // skipFontFaceGeneration: (fallbackName) => fallbackName === 'Roboto override'
@@ -83,9 +86,9 @@ function fontainePlugin(_context, _options) {
         plugins: [
           fontaine.FontaineTransform.webpack(options),
         ],
-      };
+      }
     },
-  };
+  }
 }
 
 // Gatsby config - gatsby-node.js
@@ -97,17 +100,13 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
   actions.replaceWebpackConfig(config)
 }
 
-// Astro config - astro.config.mjs
-import { defineConfig } from 'astro/config'
-import { FontaineTransform } from 'fontaine'
-
 export default defineConfig({
   integrations: [],
   vite: {
     plugins: [
       FontaineTransform.vite({
         fallbacks: ['Arial'],
-        resolvePath: (id) => new URL(`./public${id}`, import.meta.url), // id is the font src value in the CSS
+        resolvePath: id => new URL(`./public${id}`, import.meta.url), // id is the font src value in the CSS
       }),
     ],
   },

package/dist/index.cjs

@@ -3,16 +3,39 @@
 const unplugin = require('unplugin');
 const magicRegexp = require('magic-regexp');
 const MagicString = require('magic-string');
+const ufo = require('ufo');
+const pathe = require('pathe');
 const node_url = require('node:url');
 const unpack = require('@capsizecss/unpack');
 const metrics = require('@capsizecss/metrics');
-const ufo = require('ufo');
-const pathe = require('pathe');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
 
+function toPercentage(value, fractionDigits = 4) {
+  const percentage = value * 100;
+  return `${+percentage.toFixed(fractionDigits)}%`;
+}
+function toCSS(properties, indent = 2) {
+  return Object.entries(properties).map(([key, value]) => `${" ".repeat(indent)}${key}: ${value};`).join("\n");
+}
+const QUOTES_RE = magicRegexp.createRegExp(
+  magicRegexp.charIn(`"'`).at.lineStart().or(magicRegexp.charIn(`"'`).at.lineEnd()),
+  ["g"]
+);
+const FAMILY_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("fontFamily"))
+);
+const SOURCE_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly("src:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("src")),
+  ["g"]
+);
+const URL_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly("url(").and(magicRegexp.charNotIn(")").times.any().as("url")).and(")"),
+  ["g"]
+);
+const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
 function* parseFontFace(css) {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
   const family = withoutQuotes(fontFamily?.split(",")[0] || "");
@@ -21,20 +44,18 @@ function* parseFontFace(css) {
     for (const entry of sources || []) {
       for (const url of entry.matchAll(URL_RE)) {
         const source = withoutQuotes(url.groups?.url || "");
-        if (source) {
+        if (source)
           yield { family, source };
-        }
       }
     }
   }
   yield { family: "", source: "" };
 }
-const generateFallbackName = (name) => {
+function generateFallbackName(name) {
   const firstFamily = withoutQuotes(name.split(",").shift());
   return `${firstFamily} fallback`;
-};
-const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
-const generateFontFace = (metrics, fallback) => {
+}
+function generateFontFace(metrics, fallback) {
   const {
     name: fallbackName,
     font: fallbackFontName,
@@ -50,7 +71,7 @@ const generateFontFace = (metrics, fallback) => {
   const lineGapOverride = metrics.lineGap / adjustedEmSquare;
   const declaration = {
     "font-family": JSON.stringify(fallbackName),
-    src: `local(${JSON.stringify(fallbackFontName)})`,
+    "src": `local(${JSON.stringify(fallbackFontName)})`,
     "size-adjust": toPercentage(sizeAdjust),
     "ascent-override": toPercentage(ascentOverride),
     "descent-override": toPercentage(descentOverride),
@@ -61,49 +82,31 @@ const generateFontFace = (metrics, fallback) => {
 ${toCSS(declaration)}
 }
 `;
-};
-const toPercentage = (value, fractionDigits = 4) => {
-  const percentage = value * 100;
-  return +percentage.toFixed(fractionDigits) + "%";
-};
-const toCSS = (properties, indent = 2) => Object.entries(properties).map(([key, value]) => " ".repeat(indent) + `${key}: ${value};`).join("\n");
-const QUOTES_RE = magicRegexp.createRegExp(
-  magicRegexp.charIn(`"'`).at.lineStart().or(magicRegexp.charIn(`"'`).at.lineEnd()),
-  ["g"]
-);
-const FAMILY_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("fontFamily"))
-);
-const SOURCE_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("src:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("src")),
-  ["g"]
-);
-const URL_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("url(").and(magicRegexp.charNotIn(")").times.any().as("url")).and(")"),
-  ["g"]
-);
+}
 
 const metricCache = {};
-const filterRequiredMetrics = ({
+function filterRequiredMetrics({
   ascent,
   descent,
   lineGap,
   unitsPerEm,
   xWidthAvg
-}) => ({
-  ascent,
-  descent,
-  lineGap,
-  unitsPerEm,
-  xWidthAvg
-});
+}) {
+  return {
+    ascent,
+    descent,
+    lineGap,
+    unitsPerEm,
+    xWidthAvg
+  };
+}
 async function getMetricsForFamily(family) {
   family = withoutQuotes(family);
   if (family in metricCache)
     return metricCache[family];
   try {
     const name = metrics.fontFamilyToCamelCase(family);
-    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection/dist/capsizecss-metrics-entireMetricsCollection.cjs.js');
+    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection');
     const metrics$1 = entireMetricsCollection[name];
     const filteredMetrics = filterRequiredMetrics(metrics$1);
     metricCache[family] = filteredMetrics;
@@ -115,9 +118,8 @@ async function getMetricsForFamily(family) {
 }
 async function readMetrics(_source) {
   const source = typeof _source !== "string" && "href" in _source ? _source.href : _source;
-  if (source in metricCache) {
+  if (source in metricCache)
     return Promise.resolve(metricCache[source]);
-  }
   const { protocol } = ufo.parseURL(source);
   if (!protocol)
     return null;
@@ -128,6 +130,17 @@ async function readMetrics(_source) {
 }
 
 const supportedExtensions = ["woff2", "woff", "ttf"];
+const FONT_FACE_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly("@font-face").and(magicRegexp.whitespace.times.any()).and("{").and(magicRegexp.charNotIn("}").times.any()).and("}"),
+  ["g"]
+);
+const FONT_FAMILY_RE = magicRegexp.createRegExp(
+  magicRegexp.charNotIn(";}").times.any().as("family").after(magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.times.any())).before(magicRegexp.charIn(";}").or(magicRegexp.exactly("").at.lineEnd())),
+  ["g"]
+);
+const CSS_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly(".").and(magicRegexp.anyOf("sass", "css", "scss")).at.lineEnd()
+);
 const FontaineTransform = unplugin.createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
@@ -162,15 +175,13 @@ const FontaineTransform = unplugin.createUnplugin(
             if (skipFontFaceGeneration(fallbackName(family)))
               continue;
             const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
-            if (!metrics) {
+            if (!metrics)
               continue;
-            }
             for (let i = options.fallbacks.length - 1; i >= 0; i--) {
               const fallback = options.fallbacks[i];
               const fallbackMetrics = await getMetricsForFamily(fallback);
-              if (!fallbackMetrics) {
+              if (!fallbackMetrics)
                 continue;
-              }
               const fontFace = generateFontFace(metrics, {
                 name: fallbackName(family),
                 font: fallback,
@@ -193,11 +204,11 @@ const FontaineTransform = unplugin.createUnplugin(
           s.overwrite(
             index,
             index + matchContent.length,
-            " " + [
+            ` ${[
               families[0],
               `"${generateFallbackName(families[0])}"`,
               ...families.slice(1)
-            ].join(", ")
+            ].join(", ")}`
           );
         }
         if (s.hasChanged()) {
@@ -210,17 +221,6 @@ const FontaineTransform = unplugin.createUnplugin(
     };
   }
 );
-const FONT_FACE_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("@font-face").and(magicRegexp.whitespace.times.any()).and("{").and(magicRegexp.charNotIn("}").times.any()).and("}"),
-  ["g"]
-);
-const FONT_FAMILY_RE = magicRegexp.createRegExp(
-  magicRegexp.charNotIn(";}").times.any().as("family").after(magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.times.any())).before(magicRegexp.charIn(";}").or(magicRegexp.exactly("").at.lineEnd())),
-  ["g"]
-);
-const CSS_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly(".").and(magicRegexp.anyOf("sass", "css", "scss")).at.lineEnd()
-);
 
 exports.FontaineTransform = FontaineTransform;
 exports.generateFallbackName = generateFallbackName;

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+import * as unplugin from 'unplugin';
+import { Font } from '@capsizecss/unpack';
+
+interface FontaineTransformOptions {
+    css?: {
+        value?: string;
+    };
+    fallbacks: string[];
+    resolvePath?: (path: string) => string | URL;
+    skipFontFaceGeneration?: (fallbackName: string) => boolean;
+    /** this should produce an unquoted font family name */
+    fallbackName?: (name: string) => string;
+    /** @deprecated use fallbackName */
+    overrideName?: (name: string) => string;
+    sourcemap?: boolean;
+}
+declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions, boolean>;
+
+declare function generateFallbackName(name: string): string;
+interface FallbackOptions {
+    name: string;
+    font: string;
+    metrics?: FontFaceMetrics;
+    [key: string]: any;
+}
+type FontFaceMetrics = Pick<Font, 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'>;
+declare function generateFontFace(metrics: FontFaceMetrics, fallback: FallbackOptions): string;
+
+declare function getMetricsForFamily(family: string): Promise<FontFaceMetrics | null>;
+declare function readMetrics(_source: URL | string): Promise<FontFaceMetrics | null>;
+
+export { FontaineTransform, type FontaineTransformOptions, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/dist/index.d.mts

@@ -0,0 +1,32 @@
+import * as unplugin from 'unplugin';
+import { Font } from '@capsizecss/unpack';
+
+interface FontaineTransformOptions {
+    css?: {
+        value?: string;
+    };
+    fallbacks: string[];
+    resolvePath?: (path: string) => string | URL;
+    skipFontFaceGeneration?: (fallbackName: string) => boolean;
+    /** this should produce an unquoted font family name */
+    fallbackName?: (name: string) => string;
+    /** @deprecated use fallbackName */
+    overrideName?: (name: string) => string;
+    sourcemap?: boolean;
+}
+declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions, boolean>;
+
+declare function generateFallbackName(name: string): string;
+interface FallbackOptions {
+    name: string;
+    font: string;
+    metrics?: FontFaceMetrics;
+    [key: string]: any;
+}
+type FontFaceMetrics = Pick<Font, 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'>;
+declare function generateFontFace(metrics: FontFaceMetrics, fallback: FallbackOptions): string;
+
+declare function getMetricsForFamily(family: string): Promise<FontFaceMetrics | null>;
+declare function readMetrics(_source: URL | string): Promise<FontFaceMetrics | null>;
+
+export { FontaineTransform, type FontaineTransformOptions, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/dist/index.d.ts

@@ -16,7 +16,7 @@ interface FontaineTransformOptions {
 }
 declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions, boolean>;
 
-declare const generateFallbackName: (name: string) => string;
+declare function generateFallbackName(name: string): string;
 interface FallbackOptions {
     name: string;
     font: string;
@@ -24,9 +24,9 @@ interface FallbackOptions {
     [key: string]: any;
 }
 type FontFaceMetrics = Pick<Font, 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'>;
-declare const generateFontFace: (metrics: FontFaceMetrics, fallback: FallbackOptions) => string;
+declare function generateFontFace(metrics: FontFaceMetrics, fallback: FallbackOptions): string;
 
 declare function getMetricsForFamily(family: string): Promise<FontFaceMetrics | null>;
 declare function readMetrics(_source: URL | string): Promise<FontFaceMetrics | null>;
 
-export { FontaineTransform, FontaineTransformOptions, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };
+export { FontaineTransform, type FontaineTransformOptions, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/dist/index.mjs

@@ -1,12 +1,35 @@
 import { createUnplugin } from 'unplugin';
 import { createRegExp, charIn, exactly, whitespace, charNotIn, anyOf } from 'magic-regexp';
 import MagicString from 'magic-string';
+import { parseURL } from 'ufo';
+import { isAbsolute, join } from 'pathe';
 import { fileURLToPath } from 'node:url';
 import { fromFile, fromUrl } from '@capsizecss/unpack';
 import { fontFamilyToCamelCase } from '@capsizecss/metrics';
-import { parseURL } from 'ufo';
-import { isAbsolute, join } from 'pathe';
 
+function toPercentage(value, fractionDigits = 4) {
+  const percentage = value * 100;
+  return `${+percentage.toFixed(fractionDigits)}%`;
+}
+function toCSS(properties, indent = 2) {
+  return Object.entries(properties).map(([key, value]) => `${" ".repeat(indent)}${key}: ${value};`).join("\n");
+}
+const QUOTES_RE = createRegExp(
+  charIn(`"'`).at.lineStart().or(charIn(`"'`).at.lineEnd()),
+  ["g"]
+);
+const FAMILY_RE = createRegExp(
+  exactly("font-family:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("fontFamily"))
+);
+const SOURCE_RE = createRegExp(
+  exactly("src:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("src")),
+  ["g"]
+);
+const URL_RE = createRegExp(
+  exactly("url(").and(charNotIn(")").times.any().as("url")).and(")"),
+  ["g"]
+);
+const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
 function* parseFontFace(css) {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
   const family = withoutQuotes(fontFamily?.split(",")[0] || "");
@@ -15,20 +38,18 @@ function* parseFontFace(css) {
     for (const entry of sources || []) {
       for (const url of entry.matchAll(URL_RE)) {
         const source = withoutQuotes(url.groups?.url || "");
-        if (source) {
+        if (source)
           yield { family, source };
-        }
       }
     }
   }
   yield { family: "", source: "" };
 }
-const generateFallbackName = (name) => {
+function generateFallbackName(name) {
   const firstFamily = withoutQuotes(name.split(",").shift());
   return `${firstFamily} fallback`;
-};
-const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
-const generateFontFace = (metrics, fallback) => {
+}
+function generateFontFace(metrics, fallback) {
   const {
     name: fallbackName,
     font: fallbackFontName,
@@ -44,7 +65,7 @@ const generateFontFace = (metrics, fallback) => {
   const lineGapOverride = metrics.lineGap / adjustedEmSquare;
   const declaration = {
     "font-family": JSON.stringify(fallbackName),
-    src: `local(${JSON.stringify(fallbackFontName)})`,
+    "src": `local(${JSON.stringify(fallbackFontName)})`,
     "size-adjust": toPercentage(sizeAdjust),
     "ascent-override": toPercentage(ascentOverride),
     "descent-override": toPercentage(descentOverride),
@@ -55,49 +76,31 @@ const generateFontFace = (metrics, fallback) => {
 ${toCSS(declaration)}
 }
 `;
-};
-const toPercentage = (value, fractionDigits = 4) => {
-  const percentage = value * 100;
-  return +percentage.toFixed(fractionDigits) + "%";
-};
-const toCSS = (properties, indent = 2) => Object.entries(properties).map(([key, value]) => " ".repeat(indent) + `${key}: ${value};`).join("\n");
-const QUOTES_RE = createRegExp(
-  charIn(`"'`).at.lineStart().or(charIn(`"'`).at.lineEnd()),
-  ["g"]
-);
-const FAMILY_RE = createRegExp(
-  exactly("font-family:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("fontFamily"))
-);
-const SOURCE_RE = createRegExp(
-  exactly("src:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("src")),
-  ["g"]
-);
-const URL_RE = createRegExp(
-  exactly("url(").and(charNotIn(")").times.any().as("url")).and(")"),
-  ["g"]
-);
+}
 
 const metricCache = {};
-const filterRequiredMetrics = ({
+function filterRequiredMetrics({
   ascent,
   descent,
   lineGap,
   unitsPerEm,
   xWidthAvg
-}) => ({
-  ascent,
-  descent,
-  lineGap,
-  unitsPerEm,
-  xWidthAvg
-});
+}) {
+  return {
+    ascent,
+    descent,
+    lineGap,
+    unitsPerEm,
+    xWidthAvg
+  };
+}
 async function getMetricsForFamily(family) {
   family = withoutQuotes(family);
   if (family in metricCache)
     return metricCache[family];
   try {
     const name = fontFamilyToCamelCase(family);
-    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection/dist/capsizecss-metrics-entireMetricsCollection.cjs.js');
+    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection');
     const metrics = entireMetricsCollection[name];
     const filteredMetrics = filterRequiredMetrics(metrics);
     metricCache[family] = filteredMetrics;
@@ -109,9 +112,8 @@ async function getMetricsForFamily(family) {
 }
 async function readMetrics(_source) {
   const source = typeof _source !== "string" && "href" in _source ? _source.href : _source;
-  if (source in metricCache) {
+  if (source in metricCache)
     return Promise.resolve(metricCache[source]);
-  }
   const { protocol } = parseURL(source);
   if (!protocol)
     return null;
@@ -122,6 +124,17 @@ async function readMetrics(_source) {
 }
 
 const supportedExtensions = ["woff2", "woff", "ttf"];
+const FONT_FACE_RE = createRegExp(
+  exactly("@font-face").and(whitespace.times.any()).and("{").and(charNotIn("}").times.any()).and("}"),
+  ["g"]
+);
+const FONT_FAMILY_RE = createRegExp(
+  charNotIn(";}").times.any().as("family").after(exactly("font-family:").and(whitespace.times.any())).before(charIn(";}").or(exactly("").at.lineEnd())),
+  ["g"]
+);
+const CSS_RE = createRegExp(
+  exactly(".").and(anyOf("sass", "css", "scss")).at.lineEnd()
+);
 const FontaineTransform = createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
@@ -156,15 +169,13 @@ const FontaineTransform = createUnplugin(
             if (skipFontFaceGeneration(fallbackName(family)))
               continue;
             const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
-            if (!metrics) {
+            if (!metrics)
               continue;
-            }
             for (let i = options.fallbacks.length - 1; i >= 0; i--) {
               const fallback = options.fallbacks[i];
               const fallbackMetrics = await getMetricsForFamily(fallback);
-              if (!fallbackMetrics) {
+              if (!fallbackMetrics)
                 continue;
-              }
               const fontFace = generateFontFace(metrics, {
                 name: fallbackName(family),
                 font: fallback,
@@ -187,11 +198,11 @@ const FontaineTransform = createUnplugin(
           s.overwrite(
             index,
             index + matchContent.length,
-            " " + [
+            ` ${[
               families[0],
               `"${generateFallbackName(families[0])}"`,
               ...families.slice(1)
-            ].join(", ")
+            ].join(", ")}`
           );
         }
         if (s.hasChanged()) {
@@ -204,16 +215,5 @@ const FontaineTransform = createUnplugin(
     };
   }
 );
-const FONT_FACE_RE = createRegExp(
-  exactly("@font-face").and(whitespace.times.any()).and("{").and(charNotIn("}").times.any()).and("}"),
-  ["g"]
-);
-const FONT_FAMILY_RE = createRegExp(
-  charNotIn(";}").times.any().as("family").after(exactly("font-family:").and(whitespace.times.any())).before(charIn(";}").or(exactly("").at.lineEnd())),
-  ["g"]
-);
-const CSS_RE = createRegExp(
-  exactly(".").and(anyOf("sass", "css", "scss")).at.lineEnd()
-);
 
 export { FontaineTransform, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "fontaine",
-  "version": "0.4.0",
+  "type": "module",
+  "version": "0.5.0",
+  "packageManager": "pnpm@8.15.4",
   "description": "Automatic font fallback based on font metrics",
+  "author": {
+    "name": "Daniel Roe <daniel@roe.dev>",
+    "url": "https://github.com/danielroe"
+  },
+  "license": "MIT",
   "repository": "unjs/fontaine",
   "keywords": [
     "fonts",
@@ -9,13 +16,7 @@
     "web-vitals",
     "performance"
   ],
-  "author": {
-    "name": "Daniel Roe <daniel@roe.dev>",
-    "url": "https://github.com/danielroe"
-  },
-  "license": "MIT",
   "sideEffects": false,
-  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -33,49 +34,53 @@
     "dev": "vitest",
     "demo": "vite dev playground",
     "demo:dev": "pnpm demo --config test/vite.config.mjs",
-    "lint": "pnpm lint:all:eslint && pnpm lint:all:prettier",
-    "lint:all:eslint": "pnpm lint:eslint --ext .ts,.js,.mjs,.cjs .",
-    "lint:all:prettier": "pnpm lint:prettier \"{src,test}/**/*.{js,json,ts}\"",
-    "lint:eslint": "eslint --fix",
-    "lint:prettier": "prettier --write --loglevel warn",
-    "prepare": "husky install && pnpm build",
+    "lint": "eslint --fix .",
+    "prepare": "simple-git-hooks install && pnpm build",
     "prepublishOnly": "pnpm lint && pnpm test",
     "release": "pnpm test && bumpp && npm publish",
     "test": "vitest run"
   },
   "dependencies": {
-    "@capsizecss/metrics": "^1.1.1",
-    "@capsizecss/unpack": "^1.0.0",
-    "magic-regexp": "^0.7.0",
-    "magic-string": "^0.30.0",
-    "pathe": "^1.1.0",
-    "ufo": "^1.1.1",
-    "unplugin": "^1.3.1"
+    "@capsizecss/metrics": "^2.1.1",
+    "@capsizecss/unpack": "^2.0.1",
+    "magic-regexp": "^0.8.0",
+    "magic-string": "^0.30.8",
+    "pathe": "^1.1.2",
+    "ufo": "^1.4.0",
+    "unplugin": "^1.8.3"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "^2.8.0",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@types/node": "18.16.16",
-    "@types/serve-handler": "6.1.1",
-    "@typescript-eslint/eslint-plugin": "5.59.8",
-    "@typescript-eslint/parser": "5.59.8",
-    "@vitest/coverage-v8": "0.32.0",
-    "bumpp": "9.1.1",
-    "eslint": "8.42.0",
-    "eslint-config-prettier": "8.8.0",
+    "@types/node": "20.11.25",
+    "@types/serve-handler": "6.1.4",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
+    "@vitest/coverage-v8": "1.3.1",
+    "bumpp": "9.4.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "latest",
-    "execa": "7.1.1",
-    "get-port-please": "3.0.1",
-    "husky": "latest",
-    "lint-staged": "13.2.2",
+    "execa": "8.0.1",
+    "get-port-please": "3.1.2",
+    "lint-staged": "15.2.2",
     "prettier": "latest",
     "serve-handler": "6.1.5",
-    "typescript": "5.1.3",
+    "simple-git-hooks": "^2.10.0",
+    "typescript": "5.4.2",
     "unbuild": "latest",
-    "vite": "4.3.9",
-    "vitest": "0.32.0"
+    "vite": "5.1.5",
+    "vitest": "1.3.1"
   },
   "resolutions": {
     "fontaine": "link:."
   },
-  "packageManager": "pnpm@8.6.0"
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,ts,mjs,cjs,json,.*rc}": [
+      "pnpm eslint --fix"
+    ]
+  }
 }