webfont 12.0.0 → 12.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webfont",
-  "version": "12.0.0",
+  "version": "12.1.1",
   "description": "Generator of fonts from SVG icons; decompress WOFF/WOFF2 to embedded TTF/OTF (not TTF↔OTF transcoding)",
   "directories": {
     "lib": "dist",
@@ -15,13 +15,40 @@
     "README.md",
     "NOTICE.md"
   ],
+  "type": "commonjs",
+  "sideEffects": false,
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "browser": "dist/browser.js",
   "bin": "dist/cli.mjs",
   "source": "src/index.ts",
   "types": "dist/src/index.d.ts",
   "typings": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/src/index.d.ts",
+        "default": "./dist/browser.js"
+      },
+      "node": {
+        "import": {
+          "types": "./dist/src/index.d.mts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/src/index.d.ts",
+          "default": "./dist/index.js"
+        }
+      },
+      "default": {
+        "types": "./dist/src/index.d.ts",
+        "default": "./dist/browser.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "build": "vite build --mode library && vite build --mode cli",
+    "build": "vite build --mode library && vite build --mode library-esm && vite build --mode browser && vite build --mode cli && node scripts/emit-mts-types.mjs",
     "clean": "rm -rf dist/ temp/",
     "demo": "node dist/cli.mjs './src/fixtures/svg-icons/*.svg' -d demo -t html --normalize --center-horizontally",
     "lint": "biome check .",
@@ -29,13 +56,18 @@
     "prebuild": "npm run clean && npm run lint",
     "prepare": "lefthook install",
     "predemo": "npm run build",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run test:package",
     "pretest": "npm run build",
     "prettify": "biome check --write .",
     "test": "vitest run src",
+    "test:attw": "attw --pack .",
+    "test:pack": "node scripts/pack-smoke-test.mjs",
+    "test:package": "npm run test:publint && npm run test:attw && npm run test:pack",
+    "test:publint": "publint --level=warning",
     "testc": "vitest run src --coverage",
     "test-debug": "vitest run src --no-file-parallelism",
-    "testu": "vitest run src -u"
+    "testu": "vitest run src -u",
+    "deprecate-pre-12": "npm deprecate 'webfont@>=10.0.0 <12.0.0' 'Deprecated: upgrade to webfont@12. v10–11 enabled ligatures by default (browser hangs on large fonts, #558). 12.x: ligatures off, Node 24.14+, named import, unicode-range off, template fixes. See MIGRATION.md'"
   },
   "dependencies": {
     "cosmiconfig": "9.0.2",
@@ -48,23 +80,23 @@
     "resolve-from": "^5.0.0",
     "svg2ttf": "^6.1.0",
     "svgicons2svgfont": "^16.0.0",
+    "svgo": "4.0.1",
     "ttf2eot": "3.1.0",
     "ttf2woff": "^3.0.0",
-    "wawoff2": "2.0.0",
+    "wawoff2": "2.0.1",
     "xml2js": "0.6.2"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.4",
     "@biomejs/biome": "2.5.2",
-    "@types/node": "^22.15.0",
+    "@types/node": "26.1.0",
     "@types/nunjucks": "3.2.6",
-    "@types/rimraf": "latest",
     "@types/svg2ttf": "5.0.3",
     "@types/ttf2eot": "2.0.2",
     "@types/ttf2woff": "2.0.4",
     "@types/wawoff2": "1.0.2",
     "@types/xml2js": "0.4.14",
     "@vitest/coverage-v8": "4.1.9",
-    "fast-glob": "3.2.12",
     "is-eot": "latest",
     "is-svg": "6.1.0",
     "is-ttf": "latest",
@@ -72,7 +104,7 @@
     "is-woff2": "latest",
     "knip": "6.24.0",
     "lefthook": "2.1.9",
-    "rimraf": "latest",
+    "publint": "0.3.21",
     "typescript": "6.0.3",
     "vite": "8.1.3",
     "vite-plugin-checker": "0.14.4",
@@ -80,7 +112,6 @@
     "vitest": "4.1.9"
   },
   "overrides": {
-    "fast-glob": "3.2.12",
     "minimatch": "10.2.5",
     "test-exclude": "7.0.2",
     "woff2sfnt-sfnt2woff": "1.0.0"
@@ -108,7 +139,7 @@
   },
   "homepage": "https://github.com/itgalaxy/webfont#readme",
   "engines": {
-    "node": ">= 24.14.0"
+    "node": ">=24.14.0"
   },
   "keywords": [
     "cli",

package/templates/template.css.njk

@@ -1,8 +1,11 @@
 @font-face {
   font-display: auto;
-  font-family: "{{ fontName }}";
+  font-family: "{{ fontFamily }}";
   font-style: normal;
   font-weight: 400;
+  {% if unicodeRange %}
+  unicode-range: {{ unicodeRange }};
+  {% endif %}
   {% if formats.indexOf('eot')>-1 -%}
     src: url("{{ fontPath }}{{ fontName }}.eot?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}");
   {%- endif %}
@@ -32,13 +35,13 @@
     {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
   {%- endif -%}
   {%- if svgIndex != -1 -%}
-    url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
+    url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ svgFontId }}") format("svg");
   {%- endif %}
 }
 
 .{{ className }} {
   display: inline-block;
-  font-family: "{{ fontName }}";
+  font-family: "{{ fontFamily }}";
   font-weight: 400;
   font-style: normal;
   font-variant: normal;

package/templates/template.html.njk

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>{{ fontName }}</title>
+    <title>{{ fontFamily }}</title>
     <style type="text/css">
       body {
         margin: 0;
@@ -48,9 +48,13 @@
 
       @font-face {
         font-display: block;
-        font-family: "{{ fontName }}";
+        font-family: "{{ fontFamily }}";
         font-style: normal;
         font-weight: 400;
+        {# Ligature preview types ASCII names; unicode-range limited to PUA blocks the font for those code points. #}
+        {% if unicodeRange and not (templateFontLigatures and ligatures) %}
+        unicode-range: {{ unicodeRange }};
+        {% endif %}
         {% if formats.indexOf('eot')>-1 -%}
           src: url("{{ fontPath }}{{ fontName }}.eot?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}");
         {%- endif %}
@@ -80,13 +84,13 @@
           {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
         {%- endif -%}
         {%- if svgIndex != -1 -%}
-          url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
+          url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ svgFontId }}") format("svg");
         {%- endif %}
       }
 
       .{{ className }} {
         display: inline-block;
-        font-family: "{{ fontName }}";
+        font-family: "{{ fontFamily }}";
         font-weight: 400;
         font-style: normal;
         font-variant: normal;
@@ -177,6 +181,13 @@
         margin-left: 0.3em;
       }
 
+      {% if templateFontLigatures %}
+      #icon-ligatures .{{ className }} {
+        font-feature-settings: "liga" 1;
+        font-variant-ligatures: common-ligatures;
+      }
+      {% endif %}
+
       {% for glyph in glyphs %}
       .{{ className }}-{{ glyph.name }}::before {
         content: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";

package/templates/template.scss.njk

@@ -4,9 +4,12 @@
 
 @font-face {
   font-display: block;
-  font-family: "{{ fontName }}";
+  font-family: "{{ fontFamily }}";
   font-style: normal;
   font-weight: 400;
+  {% if unicodeRange %}
+  unicode-range: {{ unicodeRange }};
+  {% endif %}
   {% if formats.indexOf('eot')>-1 -%}
     src: url("{{ fontPath }}{{ fontName }}.eot?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}");
   {%- endif -%}
@@ -36,13 +39,13 @@
     {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
   {%- endif -%}
   {%- if svgIndex != -1 -%}
-    url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
+    url("{{ fontPath }}{{ fontName }}.svg?{{ cacheString }}{% if hash %}&v={{ hash }}{% endif %}#{{ svgFontId }}") format("svg");
   {%- endif %}
 }
 
 %{{ className }} {
 display: inline-block;
-  font-family: "{{ fontName }}";
+  font-family: "{{ fontFamily }}";
   font-weight: 400;
   font-style: normal;
   font-variant: normal;

package/templates/template.styl.njk

@@ -2,7 +2,10 @@
 %}${{ className }}-{{ glyph.name }} = "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}";
 {% endfor %}
 @font-face {
-    font-family: {{ fontName }};
+    font-family: {{ fontFamily }};
+    {% if unicodeRange %}
+    unicode-range: {{ unicodeRange }};
+    {% endif %}
     {% if formats.indexOf('eot')>-1 -%}
         src: url("{{ fontPath }}{{ fontName }}.eot{% if hash %}?v={{ hash }}{% endif %}");
     {%- endif -%}
@@ -32,7 +35,7 @@
             {%- if formats.length != 0 -%}, {% else -%}; {% endif -%}
         {%- endif -%}
         {%- if svgIndex != -1 -%}
-            url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ fontName }}") format("svg");
+            url("{{ fontPath }}{{ fontName }}.svg{% if hash %}?v={{ hash }}{% endif %}#{{ svgFontId }}") format("svg");
         {%- endif %}
     font-display: block;
     font-style: normal;
@@ -43,7 +46,7 @@
     display: inline-block;
     transform: translate(0, 0);
     text-rendering: auto;
-    font: normal normal 400 14px/1 {{ fontName }};
+    font: normal normal 400 14px/1 {{ fontFamily }};
     font-size: inherit;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;