@teacss/preset-icons 0.4.7 → 0.5.0

package/README.md

@@ -1,31 +1,6 @@
 # @teacss/preset-icons
 
-**Pure-CSS icon utilities for TeaCSS.**
-
-## Purpose
-
-`@teacss/preset-icons` is the official opt-in icon preset for application
-authors who want icons compiled from `icon:<collection>-<icon-name>` classes.
-It bundles the Lucide (UI icons), Carbon (IBM's design-system icons), Flagpack
-(country flags), and Cryptocurrency Color (coins and tokens, as `crypto`)
-datasets, emits icons as CSS masks or backgrounds, and exposes
-icon-specific merge metadata for custom runtime mergers. The generated icons require no client-side runtime
-script.
-
-Icon data comes from the `@iconify-json/lucide`, `@iconify-json/flagpack`, and
-`@iconify-json/cryptocurrency-color`, and `@iconify-json/carbon` packages this preset depends on, so it installs with the preset and resolves as
-an ordinary module import. Each dataset is imported only when one of its icons
-is used, so a build that never writes `icon:flagpack-*` does not load the flag
-data.
-**Generation never reaches the network**: there is no CDN fetch, no registry
-install, and no filesystem probing for collection packages. A build works
-fully offline.
-
-This package owns only the icon vocabulary and its loading behavior:
-`@teacss/core` owns parsing and CSS generation,
-`@teacss/preset-standard` supplies general utilities, themes, conditions, and
-preflights, and `@teacss/preset-articles` supplies long-form content styling.
-None of those other preset vocabularies are bundled here.
+Pure-CSS icon utilities with no client-side runtime.
 
 ## Usage
 
@@ -35,44 +10,23 @@ None of those other preset vocabularies are bundled here.
 @teacss;
 ```
 
-The `icons` short name works with either the application-facing `teacss`
-package or a direct `@teacss/preset-icons` installation. Nothing else to
-install or configure — the bundled data resolves immediately.
-
 ```html
 <span class="icon:lucide-sun"></span>
-<span class="icon:lucide-moon@dark"></span>
+<span class="icon:carbon-sun"></span>
 <span class="icon:flagpack-nl"></span>
 <span class="icon:crypto-btc"></span>
-<span class="icon:carbon-sun"></span>
 ```
 
-The only utility grammar is `icon:<collection>-<icon-name>`. The value must
-include its collection, so bundled icons are written `icon:lucide-*`,
-`icon:carbon-*`, `icon:flagpack-*`, or `icon:crypto-*`. Flagpack ids are lowercase ISO country
-codes (`icon:flagpack-jp`); coin ids are tickers, some of which start with a
-digit (`icon:crypto-0xbtc`). `crypto` is this preset's name for Iconify's
-Cryptocurrency Color set — Iconify's own `cryptocurrency` is the monochrome
-variant, which is not bundled. When collection names overlap, the longest known
-collection prefix determines the split and TeaCSS loads that collection only;
-missing icons do not fall back to a shorter collection name.
-
-`<icon-name>` is the collection's own kebab-case id. Its camelCase spelling
-resolves to the same icon for every bundled id — `icon:carbon-db2Database`,
-`icon:lucide-barChart3`, `icon:lucide-arrowDown01` — and both spellings are
-case-insensitive. Nothing else resolves: a partial or arbitrary re-hyphenation
-such as `icon:lucide-bar-chart3` or `icon:carbon-add--alt` emits no CSS. The
-kebab id stays canonical.
-
-`mode: "auto"` chooses a mask for `currentColor` icons and a background image
-for multicolor icons. Lucide and Carbon use `currentColor`, so their icons
-resolve to masks and take their color from the surrounding text; Flagpack flags and `crypto`
-coins carry their own colors, so they resolve to
-background images and ignore text color.
-Override one icon with `?mask`, `?bg`, or `?auto`, for example
-`icon:lucide-sun?bg`.
-
-CSS integrations also resolve the raw qualified name through `icon(...)`:
+The grammar is `icon:<collection>-<icon-name>`. The preset bundles Lucide,
+Carbon, Flagpack, and Cryptocurrency Color (named `crypto`) and works offline.
+Datasets load only when a matching icon is used.
+
+Names are case-insensitive and accept each collection's canonical kebab-case or
+camelCase form. Arbitrary re-hyphenation emits no CSS. Missing icons do not fall
+back to a shorter collection name.
+
+`mode: "auto"` uses masks for `currentColor` icons and background images for
+multicolor icons. Override one icon with `?mask`, `?bg`, or `?auto`.
 
 ```css
 .logo {
@@ -80,62 +34,34 @@ CSS integrations also resolve the raw qualified name through `icon(...)`:
 }
 ```
 
-### Other collections
+## Custom collections
 
-`lucide`, `carbon`, `flagpack`, and `crypto` are the collections with bundled
-data. Add another one
-by handing the preset data it can read locally through `collections` — an
-inline map, a loader function, or a helper such as `FileSystemIconLoader` from
-`@iconify/utils/lib/loader/fs`:
+Pass local data or a loader through `collections`:
 
 ```ts
 import { icons as tabler } from "@iconify-json/tabler";
+import { presetIcons } from "@teacss/preset-icons";
 
 presetIcons({ collections: { tabler: () => tabler } });
 ```
 
-A collection with neither bundled data nor a `collections` entry emits
-nothing. Set `warn: true` to report those tokens during generation.
+Generation never downloads or installs collections. An unknown collection,
+missing icon, or failed loader emits nothing. Set `warn: true` to report it.
+Programmatic integrations can call `preset.api.resolveIcon(name)`.
 
-A `collections` loader that throws is treated the same way: that one token emits
-nothing, every other icon still generates, and the build does not abort. `warn`
-is the only thing that decides whether it is reported, and the reported line
-carries the thrown message.
+## Runtime merging
 
-Programmatic integrations should use the preset's `api.resolveIcon(name)`, which
-resolves a qualified name against the bundled data and the configured
-`collections`.
-
-For runtime class merging, the `/merge` entry exports both a lazy icon-only
-`cn` and the self-contained plugin:
-
-```sh
-bun add @teacss/classes
-```
+The `/merge` entry exports an icon-only `cn` and `pluginIcon`:
 
 ```ts
 import { createMerger } from "@teacss/classes";
-import {
-  cn as iconCn,
-  pluginIcon,
-} from "@teacss/preset-icons/merge";
+import { cn as iconCn, pluginIcon } from "@teacss/preset-icons/merge";
 
 const cn = createMerger({ plugins: [pluginIcon] });
-
-iconCn("icon:lucide-sun", "icon:not-real-name"); // "icon:not-real-name"
 ```
 
-The application `cn` from `teacss` already composes this plugin with the
-standard vocabulary. The zero-config `cn` from
-`@teacss/preset-standard/merge` remains standard-only. Runtime merging checks
-only the canonical lexical grammar, not whether a collection or icon exists.
-Canonical nonexistent resources merge normally; non-canonical `icon:*`
-declarations are opaque, so different raw strings survive and exact duplicates
-keep their last position. The bare keyword `icon` has no canonical value and
-is opaque as well.
-
-## Status
+The application `cn` from `teacss` already combines icon and Standard merge
+metadata. Merging validates only the canonical token shape, not whether the icon
+exists.
 
-Pre-1.0. Icon output follows the bundled `@iconify-json/lucide`,
-`@iconify-json/flagpack`, `@iconify-json/cryptocurrency-color`, and
-`@iconify-json/carbon` data.
+Pre-1.0. Output follows the bundled Iconify datasets.

package/dist/browser.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./core-DvPxBdOd.js";import r from"./index.js";export{t as BUNDLED_COLLECTIONS,r as default,n as icons,e as presetIcons};
+import{n as e,r as t,t as n}from"./core-BTaY9Bti.js";import r from"./index.js";export{t as BUNDLED_COLLECTIONS,r as default,n as icons,e as presetIcons};

package/dist/core-BTaY9Bti.js

@@ -0,0 +1 @@
+import{t as e}from"./syntax-DmIPw0tH.js";import{loadIcon as t}from"@iconify/utils";import{encodeSvgForCss as n}from"@iconify/utils/lib/svg/encode-svg-for-css";import{definePreset as r,getEnvFlags as i,warnOnce as a}from"@teacss/core";import{searchForIcon as o}from"@iconify/utils/lib/loader/modern";const s=new Map([[`carbon`,()=>import(`@iconify-json/carbon`).then(e=>e.icons)],[`crypto`,()=>import(`@iconify-json/cryptocurrency-color`).then(e=>e.icons)],[`flagpack`,()=>import(`@iconify-json/flagpack`).then(e=>e.icons)],[`lucide`,()=>import(`@iconify-json/lucide`).then(e=>e.icons)]]),c=[...s.keys()];function l(e){return e.replace(/-([a-z0-9])/g,(e,t)=>t.toUpperCase())}const u=new WeakMap;function d(e){let t=0;for(let n of e)n===`-`&&t++;return t}function f(e,t,n){let r=d(e)-d(t);if(r!==0)return r<0;let i=Number(n(t))-Number(n(e));return i===0?e<t:i<0}function p(e){let t=u.get(e);if(t)return t;let n=new Map,r=t=>Object.hasOwn(e.icons,t);for(let t of[...Object.keys(e.icons),...Object.keys(e.aliases??{})]){let e=l(t).toLowerCase(),i=n.get(e);(i===void 0||f(t,i,r))&&n.set(e,t)}return u.set(e,n),n}async function m(e,t,n){let r=s.get(e);if(!r)return;let i=await r(),a=t.toLowerCase(),c=p(i).get(a),l=[...new Set([t,a,...c==null?[]:[c]])];return await o(i,e,l,n)}const h=c;async function g(e,n,r){return await m(e,n,r)??await t(e,n,r)}function _(e,t){return`${e}\0${t}`}function v(e,t,n){let r=(t,r)=>{n.set(_(e,t),r instanceof Error?r.message:String(r))};return typeof t==`function`?(async e=>{try{return await t(e)}catch(t){r(e,t);return}}):t&&Object.fromEntries(Object.entries(t).map(([e,t])=>[e,typeof t==`function`?async()=>{try{return await t()}catch(t){r(e,t);return}}:t]))}const y=r((t={})=>{let{scale:r=1,mode:o=`auto`,warn:s=!1,collections:c,extraProperties:l={},customizations:u={},layer:d=`icons`,unit:f,processor:p}=t,m=i(),y=new Map,x={addXmlNs:!0,scale:r,customCollections:c?Object.fromEntries(Object.entries(c).map(([e,t])=>[e,v(e,t,y)])):void 0,warn:void 0,customizations:{...u,additionalProps:{...l},trimCustomSvg:!0,async iconCustomizer(e,t,n){await u.iconCustomizer?.(e,t,n),f&&(n.width||=`${r}${f}`,n.height||=`${r}${f}`)}}},S=new Set([...h,...Object.keys(c||{})]),C=async(e,t)=>{let n=b(e,S);if(!n)return;let r=await g(n.collection,n.name,t?{...x,usedProps:t}:x);if(r)return{...n,svg:r};let i=_(n.collection,n.name),a=y.get(i);if(a!==void 0)throw y.delete(i),Error(a)};return{name:`@teacss/preset-icons`,enforce:`pre`,options:t,layers:{[d]:-30},api:{encodeSvgForCss:n,resolveIcon:e=>C(e)},rules:[[e,async e=>{let[t,r,i=o]=e,c={},l;try{l=await C(r,c)}catch(e){s&&!m.isESLint&&a(`failed to load icon "${t}": ${e instanceof Error?e.message:String(e)}`);return}if(!l){s&&!m.isESLint&&a(`failed to load icon "${t}"`);return}let u,d=`url("data:image/svg+xml;utf8,${n(l.svg)}")`;return i===`auto`&&(i=/currentcolor/i.test(l.svg)?`mask`:`bg`),u=i===`mask`?{"--tea-icon":d,display:`inline-block`,"-webkit-mask":`var(--tea-icon) no-repeat`,mask:`var(--tea-icon) no-repeat`,"-webkit-mask-size":`100% 100%`,"mask-size":`100% 100%`,"background-color":`currentColor`,"background-image":`none`,color:`inherit`,...c}:{display:`inline-block`,"-webkit-mask":`none`,mask:`none`,background:`${d} no-repeat`,"background-size":`100% 100%`,"background-color":`transparent`,...c},await p?.(u,{...l,icon:l.name,mode:i}),u},{layer:d}]]}});function b(e,t){let n=e.split(`-`);if(!(n.length<2||n.some(e=>e.length===0)))for(let e=n.length-1;e>=1;e--){let r=n.slice(0,e).join(`-`);if(t.has(r))return{collection:r,name:n.slice(e).join(`-`)}}}export{y as n,c as r,h as t};

package/dist/core.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./core-DvPxBdOd.js";export{t as BUNDLED_COLLECTIONS,n as icons,e as presetIcons};
+import{n as e,r as t,t as n}from"./core-BTaY9Bti.js";export{t as BUNDLED_COLLECTIONS,n as icons,e as presetIcons};

package/dist/index.js

@@ -1 +1 @@
-import{n as e,r as t,t as n}from"./core-DvPxBdOd.js";var r=e;export{t as BUNDLED_COLLECTIONS,r as default,n as icons,e as presetIcons};
+import{n as e,r as t,t as n}from"./core-BTaY9Bti.js";var r=e;export{t as BUNDLED_COLLECTIONS,r as default,n as icons,e as presetIcons};

package/dist/merge.d.ts

@@ -1,8 +1,7 @@
 import { Merger, MergerPlugin } from "@teacss/classes";
 //#region src/merge.d.ts
 /** Merger metadata for the canonical `icon:<collection>-<name>` vocabulary. */
-declare const pluginIcon: MergerPlugin;
+export declare const pluginIcon: MergerPlugin;
 /** Lazily initialized merger bound only to the canonical icon vocabulary. */
-declare const cn: Merger;
-//#endregion
-export { cn, pluginIcon };
+export declare const cn: Merger;
+//#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teacss/preset-icons",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "Pure-CSS Iconify icon utilities for TeaCSS — one class per icon, no runtime.",
   "homepage": "https://css.teasim.com",
   "funding": "https://github.com/sponsors/billgo",
@@ -28,14 +28,14 @@
     "dev": "tsdown --config-loader unrun --watch"
   },
   "dependencies": {
-    "@iconify-json/carbon": "^1.2.25",
+    "@iconify-json/carbon": "^1.2.26",
     "@iconify-json/cryptocurrency-color": "^1.2.4",
     "@iconify-json/flagpack": "^1.2.8",
-    "@iconify-json/lucide": "^1.2.123",
+    "@iconify-json/lucide": "^1.2.129",
     "@iconify/types": "^2.0.0",
-    "@iconify/utils": "^3.1.4",
-    "@teacss/classes": "0.4.7",
-    "@teacss/core": "0.4.7"
+    "@iconify/utils": "^3.1.5",
+    "@teacss/classes": "0.5.0",
+    "@teacss/core": "0.5.0"
   },
   "engines": {
     "node": ">=22.12.0"

package/dist/core-DvPxBdOd.js

@@ -1 +0,0 @@
-import{t as e}from"./syntax-DmIPw0tH.js";import{loadIcon as t}from"@iconify/utils";import{encodeSvgForCss as n}from"@iconify/utils/lib/svg/encode-svg-for-css";import{definePreset as r,getEnvFlags as i,warnOnce as a}from"@teacss/core";import{searchForIcon as o}from"@iconify/utils/lib/loader/modern";const s=new Map([[`carbon`,()=>import(`@iconify-json/carbon`).then(e=>e.icons)],[`crypto`,()=>import(`@iconify-json/cryptocurrency-color`).then(e=>e.icons)],[`flagpack`,()=>import(`@iconify-json/flagpack`).then(e=>e.icons)],[`lucide`,()=>import(`@iconify-json/lucide`).then(e=>e.icons)]]),c=[...s.keys()];function l(e){return e.replace(/-([a-z0-9])/g,(e,t)=>t.toUpperCase())}const u=new WeakMap;function d(e){let t=0;for(let n of e)n===`-`&&t++;return t}function f(e,t,n){let r=d(e)-d(t);if(r!==0)return r<0;let i=Number(n(t))-Number(n(e));return i===0?e<t:i<0}function p(e){let t=u.get(e);if(t)return t;let n=new Map,r=t=>Object.hasOwn(e.icons,t);for(let t of[...Object.keys(e.icons),...Object.keys(e.aliases??{})]){let e=l(t).toLowerCase(),i=n.get(e);(i===void 0||f(t,i,r))&&n.set(e,t)}return u.set(e,n),n}async function m(e,t,n){let r=s.get(e);if(!r)return;let i=await r(),a=t.toLowerCase(),c=p(i).get(a);return await o(i,e,[...new Set([t,a,...c==null?[]:[c]])],n)}const h=c;async function g(e,n,r){return await m(e,n,r)??await t(e,n,r)}function _(e,t){return`${e}\0${t}`}function v(e,t,n){let r=(t,r)=>{n.set(_(e,t),r instanceof Error?r.message:String(r))};return typeof t==`function`?(async e=>{try{return await t(e)}catch(t){r(e,t);return}}):t&&Object.fromEntries(Object.entries(t).map(([e,t])=>[e,typeof t==`function`?async()=>{try{return await t()}catch(t){r(e,t);return}}:t]))}const y=r((t={})=>{let{scale:r=1,mode:o=`auto`,warn:s=!1,collections:c,extraProperties:l={},customizations:u={},layer:d=`icons`,unit:f,processor:p}=t,m=i(),y=new Map,x={addXmlNs:!0,scale:r,customCollections:c?Object.fromEntries(Object.entries(c).map(([e,t])=>[e,v(e,t,y)])):void 0,warn:void 0,customizations:{...u,additionalProps:{...l},trimCustomSvg:!0,async iconCustomizer(e,t,n){await u.iconCustomizer?.(e,t,n),f&&(n.width||=`${r}${f}`,n.height||=`${r}${f}`)}}},S=new Set([...h,...Object.keys(c||{})]),C=async(e,t)=>{let n=b(e,S);if(!n)return;let r=await g(n.collection,n.name,t?{...x,usedProps:t}:x);if(r)return{...n,svg:r};let i=_(n.collection,n.name),a=y.get(i);if(a!==void 0)throw y.delete(i),Error(a)};return{name:`@teacss/preset-icons`,enforce:`pre`,options:t,layers:{[d]:-30},api:{encodeSvgForCss:n,resolveIcon:e=>C(e)},rules:[[e,async e=>{let[t,r,i=o]=e,c={},l;try{l=await C(r,c)}catch(e){s&&!m.isESLint&&a(`failed to load icon "${t}": ${e instanceof Error?e.message:String(e)}`);return}if(!l){s&&!m.isESLint&&a(`failed to load icon "${t}"`);return}let u,d=`url("data:image/svg+xml;utf8,${n(l.svg)}")`;return i===`auto`&&(i=/currentcolor/i.test(l.svg)?`mask`:`bg`),u=i===`mask`?{"--tea-icon":d,display:`inline-block`,"-webkit-mask":`var(--tea-icon) no-repeat`,mask:`var(--tea-icon) no-repeat`,"-webkit-mask-size":`100% 100%`,"mask-size":`100% 100%`,"background-color":`currentColor`,"background-image":`none`,color:`inherit`,...c}:{display:`inline-block`,"-webkit-mask":`none`,mask:`none`,background:`${d} no-repeat`,"background-size":`100% 100%`,"background-color":`transparent`,...c},await p?.(u,{...l,icon:l.name,mode:i}),u},{layer:d}]]}});function b(e,t){let n=e.split(`-`);if(!(n.length<2||n.some(e=>e.length===0)))for(let e=n.length-1;e>=1;e--){let r=n.slice(0,e).join(`-`);if(t.has(r))return{collection:r,name:n.slice(e).join(`-`)}}}export{y as n,c as r,h as t};