pure-glyf 0.1.0 → 1.0.0

package/README.md

@@ -1,5 +1,7 @@
 # pure-glyf
 
+[![npm version](https://badge.fury.io/js/pure-glyf.svg)](https://badge.fury.io/js/pure-glyf)
+
 **Vite plugin and runtime to compile SVG icons into tree-shakeable CSS masks for modern web applications.**
 
 `pure-glyf` takes a different approach to icon management. Instead of inlining SVGs (bloating your DOM) or using sprites (complexity), it converts your SVGs into CSS classes that inject their styles on demand. The result? Zero runtime overhead for unused icons, perfect tree-shaking, and a developer experience that feels like magic.

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=new Set;exports.sheet=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=new Map,a=new Set;let t=null;const r=`
 .pure-glyf-icon {
     display: inline-block;
     width: 1em;
@@ -10,4 +10,4 @@
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center;
     -webkit-mask-size: contain;
-}`;let t=null;function r(){typeof document>"u"||t||(t=document.createElement("style"),t.textContent=exports.sheet,document.head.appendChild(t))}const o=new Set;function c(e){o.add(e)}function a(e){n.has(e)||(n.add(e),exports.sheet+=e,t&&(t.textContent=exports.sheet),o.forEach(i=>i(e)))}exports.injectCSS=a;exports.mount=r;exports.onInject=c;
+}`;exports.sheet=r;function s(){typeof document>"u"||t||(t=document.createElement("style"),t.textContent=exports.sheet,document.head.appendChild(t))}function l(e){a.add(e)}function u(e){const n=e.match(/^\.([\w-]+)/),o=n?n[1]:e;c.has(o)||(c.set(o,e),exports.sheet+=e,t&&(t.textContent=exports.sheet),a.forEach(i=>i(e)))}function m(e){const n=new Set;for(const[o,i]of c.entries())e.includes(o)&&n.add(i);return r+Array.from(n).join("")}exports.extractCriticalCSS=m;exports.injectCSS=u;exports.mount=s;exports.onInject=l;

package/dist/index.d.ts

@@ -1 +1 @@
-export { injectCSS, sheet, mount, onInject } from './inject';
+export { injectCSS, sheet, mount, onInject, extractCriticalCSS } from './inject';

package/dist/index.js

@@ -1,5 +1,6 @@
-const o = /* @__PURE__ */ new Set();
-let n = `
+const a = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set();
+let t = null;
+const s = `
 .pure-glyf-icon {
     display: inline-block;
     width: 1em;
@@ -11,20 +12,28 @@ let n = `
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center;
     -webkit-mask-size: contain;
-}`, t = null;
-function a() {
-  typeof document > "u" || t || (t = document.createElement("style"), t.textContent = n, document.head.appendChild(t));
+}`;
+let c = s;
+function l() {
+  typeof document > "u" || t || (t = document.createElement("style"), t.textContent = c, document.head.appendChild(t));
 }
-const i = /* @__PURE__ */ new Set();
-function c(e) {
-  i.add(e);
+function u(e) {
+  r.add(e);
+}
+function m(e) {
+  const n = e.match(/^\.([\w-]+)/), o = n ? n[1] : e;
+  a.has(o) || (a.set(o, e), c += e, t && (t.textContent = c), r.forEach((i) => i(e)));
 }
 function d(e) {
-  o.has(e) || (o.add(e), n += e, t && (t.textContent = n), i.forEach((r) => r(e)));
+  const n = /* @__PURE__ */ new Set();
+  for (const [o, i] of a.entries())
+    e.includes(o) && n.add(i);
+  return s + Array.from(n).join("");
 }
 export {
-  d as injectCSS,
-  a as mount,
-  c as onInject,
-  n as sheet
+  d as extractCriticalCSS,
+  m as injectCSS,
+  l as mount,
+  u as onInject,
+  c as sheet
 };

package/dist/inject.d.ts

@@ -7,7 +7,7 @@
  */
 /**
  * Accumulated CSS string for Server-Side Rendering (SSR).
- * Reset it if needed between requests in a server environment.
+ * Contains all injected styles.
  */
 export declare let sheet: string;
 /**
@@ -18,3 +18,10 @@ export declare let sheet: string;
 export declare function mount(): void;
 export declare function onInject(callback: (css: string) => void): void;
 export declare function injectCSS(css: string): void;
+/**
+ * Scans the provided HTML for usage of injected icons and returns
+ * a critical CSS string containing only the necessary styles.
+ *
+ * @param html The full HTML string to scan
+ */
+export declare function extractCriticalCSS(html: string): string;

package/dist/plugin.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("node:fs"),p=require("node:path");function C(c){return c.replace(/[-_./\\]+(.)/g,(r,s)=>s.toUpperCase()).replace(/^./,r=>r.toUpperCase())}function I(c){return`data:image/svg+xml,${c.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E").replace(/\s+/g," ")}`}function y(c,r){let s=[];return d.existsSync(c)&&d.readdirSync(c).forEach(i=>{const a=p.join(c,i),l=d.statSync(a);l&&l.isDirectory()?s=s.concat(y(a,r)):i.endsWith(".svg")&&s.push(p.relative(r,a))}),s}function P(c,r=!1){const s=[];for(const[n,e]of Object.entries(c)){const o=p.resolve(process.cwd(),e);if(!d.existsSync(o)){console.warn(`[pure-glyf] Warning: Icon directory not found: ${o}`);continue}y(o,o).forEach(g=>{const S=p.join(o,g),v=d.readFileSync(S,"utf-8"),m=g.replace(/\.svg$/,""),$=C(m),j=n+$,x=`glyf-${n.toLowerCase()}-${m.replace(/[^a-zA-Z0-9-]/g,"-")}`,h=I(v),w=`.${x}{mask-image:url("${h}");-webkit-mask-image:url("${h}");}`;s.push({name:j,css:w})})}const u=["import { injectCSS, mount, sheet, onInject } from 'pure-glyf';","export { mount, sheet, onInject };",""];let i="",a;r?(u.unshift("import 'pure-glyf/icons.css';"),i=s.map(n=>n.css).join(""),a=s.map(n=>{const e=n.css.match(/^\s*\.(\S+)\{/),o=e?e[1]:"error-class";return`export const ${n.name} = "pure-glyf-icon ${o}";`})):a=s.map(n=>{const e=n.css.match(/^\s*\.(\S+)\{/),o=e?e[1]:"error-class";return`export const ${n.name} = /*#__PURE__*/ (() => {
-    injectCSS(\`${n.css}\`);
-    return "pure-glyf-icon ${o}";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("node:fs"),p=require("node:path");function C(o){return o.replace(/[-_./\\]+(.)/g,(c,s)=>s.toUpperCase()).replace(/^./,c=>c.toUpperCase())}function I(o){return`data:image/svg+xml,${o.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E").replace(/\s+/g," ")}`}function v(o,c){let s=[];return d.existsSync(o)&&d.readdirSync(o).forEach(i=>{const a=p.join(o,i),l=d.statSync(a);l&&l.isDirectory()?s=s.concat(v(a,c)):i.endsWith(".svg")&&s.push(p.relative(c,a))}),s}function P(o,c=!1){const s=[];for(const[t,e]of Object.entries(o)){const n=p.resolve(process.cwd(),e);if(!d.existsSync(n)){console.warn(`[pure-glyf] Warning: Icon directory not found: ${n}`);continue}v(n,n).forEach(g=>{const y=p.join(n,g),S=d.readFileSync(y,"utf-8"),m=g.replace(/\.svg$/,""),$=C(m),j=t+$,x=`glyf-${t.toLowerCase()}-${m.replace(/[^a-zA-Z0-9-]/g,"-")}`,h=I(S),w=`.${x}{mask-image:url("${h}");-webkit-mask-image:url("${h}");}`;s.push({name:j,css:w})})}const u=["import { injectCSS, mount, sheet, onInject } from 'pure-glyf';","export { mount, sheet, onInject };",""];let i="",a;c?(u.unshift("import 'pure-glyf/icons.css';"),i=s.map(t=>t.css).join(""),a=s.map(t=>{const e=t.css.match(/^\s*\.(\S+)\{/),n=e?e[1]:"error-class";return`export const ${t.name} = "pure-glyf-icon ${n}";`})):a=s.map(t=>{const e=t.css.match(/^\s*\.(\S+)\{/),n=e?e[1]:"error-class";return`export const ${t.name} = /*#__PURE__*/ (() => {
+    injectCSS(\`${t.css}\`);
+    return "pure-glyf-icon ${n}";
 })();`});const l=u.concat(a).join(`
-`),t=["declare module 'pure-glyf/icons' {","    export function mount(): void;","    export const sheet: string;","    export function onInject(callback: (css: string) => void): void;"];s.forEach(n=>{t.push(`    export const ${n.name}: string;`)}),t.push("}");const f=t.join(`
-`);return{code:l,css:i,dts:f}}function b(c){const r="pure-glyf/icons",s="\0"+r,u="pure-glyf/icons.css",i="\0"+u,a=c.dts||"pure-glyf.d.ts";let l=null,t=null,f=!1;function n(){try{if(l=P(c.icons,f),d.writeFileSync(p.resolve(process.cwd(),a),l.dts),t){const e=t.moduleGraph.getModuleById(s);e&&(t.moduleGraph.invalidateModule(e),t.ws.send({type:"full-reload",path:"*"}))}}catch(e){console.error("[pure-glyf] Generation failed:",e)}}return{name:"vite-plugin-pure-glyf",enforce:"pre",configResolved(e){f=e.command==="serve"},configureServer(e){t=e,Object.values(c.icons).forEach(o=>{t==null||t.watcher.add(p.resolve(o))}),t==null||t.watcher.on("change",o=>{o.endsWith(".svg")&&n()}),t==null||t.watcher.on("add",o=>{o.endsWith(".svg")&&n()}),t==null||t.watcher.on("unlink",o=>{o.endsWith(".svg")&&n()})},buildStart(){n()},resolveId(e){if(e===r)return s;if(e===u)return i},load(e){if(e===s)return l.code;if(e===i)return l.css}}}exports.pureGlyfPlugin=b;
+`),r=["declare module 'pure-glyf/icons' {","    export function mount(): void;","    export const sheet: string;","    export function onInject(callback: (css: string) => void): void;"];s.forEach(t=>{r.push(`    export const ${t.name}: string;`)}),r.push("}");const f=r.join(`
+`);return{code:l,css:i,dts:f}}function b(o){const c="pure-glyf/icons",s="\0"+c,u="pure-glyf/icons.css",i="\0"+u,a=o.dts||"pure-glyf.d.ts";let l=null,r=null,f=!1;function t(){try{if(l=P(o.icons,f),d.writeFileSync(p.resolve(process.cwd(),a),l.dts),r){const e=r.moduleGraph.getModuleById(s);e&&(r.moduleGraph.invalidateModule(e),r.ws.send({type:"full-reload",path:"*"}))}}catch(e){console.error("[pure-glyf] Generation failed:",e)}}return{name:"vite-plugin-pure-glyf",enforce:"pre",configResolved(e){f=e.command==="serve"},configureServer(e){r=e,Object.values(o.icons).forEach(n=>{r?.watcher.add(p.resolve(n))}),r?.watcher.on("change",n=>{n.endsWith(".svg")&&t()}),r?.watcher.on("add",n=>{n.endsWith(".svg")&&t()}),r?.watcher.on("unlink",n=>{n.endsWith(".svg")&&t()})},buildStart(){t()},resolveId(e){if(e===c)return s;if(e===u)return i},load(e){if(e===s)return l.code;if(e===i)return l.css}}}exports.pureGlyfPlugin=b;

package/dist/plugin.js

@@ -1,29 +1,29 @@
 import p from "node:fs";
 import d from "node:path";
-function C(c) {
-  return c.replace(/[-_./\\]+(.)/g, (r, n) => n.toUpperCase()).replace(/^./, (r) => r.toUpperCase());
+function C(o) {
+  return o.replace(/[-_./\\]+(.)/g, (c, s) => s.toUpperCase()).replace(/^./, (c) => c.toUpperCase());
 }
-function I(c) {
-  return `data:image/svg+xml,${c.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/{/g, "%7B").replace(/}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ")}`;
+function I(o) {
+  return `data:image/svg+xml,${o.replace(/"/g, "'").replace(/%/g, "%25").replace(/#/g, "%23").replace(/{/g, "%7B").replace(/}/g, "%7D").replace(/</g, "%3C").replace(/>/g, "%3E").replace(/\s+/g, " ")}`;
 }
-function y(c, r) {
-  let n = [];
-  return p.existsSync(c) && p.readdirSync(c).forEach((i) => {
-    const a = d.join(c, i), l = p.statSync(a);
-    l && l.isDirectory() ? n = n.concat(y(a, r)) : i.endsWith(".svg") && n.push(d.relative(r, a));
-  }), n;
+function v(o, c) {
+  let s = [];
+  return p.existsSync(o) && p.readdirSync(o).forEach((i) => {
+    const a = d.join(o, i), l = p.statSync(a);
+    l && l.isDirectory() ? s = s.concat(v(a, c)) : i.endsWith(".svg") && s.push(d.relative(c, a));
+  }), s;
 }
-function P(c, r = !1) {
-  const n = [];
-  for (const [s, e] of Object.entries(c)) {
-    const o = d.resolve(process.cwd(), e);
-    if (!p.existsSync(o)) {
-      console.warn(`[pure-glyf] Warning: Icon directory not found: ${o}`);
+function P(o, c = !1) {
+  const s = [];
+  for (const [t, e] of Object.entries(o)) {
+    const n = d.resolve(process.cwd(), e);
+    if (!p.existsSync(n)) {
+      console.warn(`[pure-glyf] Warning: Icon directory not found: ${n}`);
       continue;
     }
-    y(o, o).forEach((g) => {
-      const S = d.join(o, g), v = p.readFileSync(S, "utf-8"), m = g.replace(/\.svg$/, ""), $ = C(m), x = s + $, j = `glyf-${s.toLowerCase()}-${m.replace(/[^a-zA-Z0-9-]/g, "-")}`, h = I(v), w = `.${j}{mask-image:url("${h}");-webkit-mask-image:url("${h}");}`;
-      n.push({ name: x, css: w });
+    v(n, n).forEach((g) => {
+      const y = d.join(n, g), S = p.readFileSync(y, "utf-8"), m = g.replace(/\.svg$/, ""), $ = C(m), x = t + $, j = `glyf-${t.toLowerCase()}-${m.replace(/[^a-zA-Z0-9-]/g, "-")}`, h = I(S), w = `.${j}{mask-image:url("${h}");-webkit-mask-image:url("${h}");}`;
+      s.push({ name: x, css: w });
     });
   }
   const u = [
@@ -32,38 +32,38 @@ function P(c, r = !1) {
     ""
   ];
   let i = "", a;
-  r ? (u.unshift("import 'pure-glyf/icons.css';"), i = n.map((s) => s.css).join(""), a = n.map((s) => {
-    const e = s.css.match(/^\s*\.(\S+)\{/), o = e ? e[1] : "error-class";
-    return `export const ${s.name} = "pure-glyf-icon ${o}";`;
-  })) : a = n.map((s) => {
-    const e = s.css.match(/^\s*\.(\S+)\{/), o = e ? e[1] : "error-class";
-    return `export const ${s.name} = /*#__PURE__*/ (() => {
-    injectCSS(\`${s.css}\`);
-    return "pure-glyf-icon ${o}";
+  c ? (u.unshift("import 'pure-glyf/icons.css';"), i = s.map((t) => t.css).join(""), a = s.map((t) => {
+    const e = t.css.match(/^\s*\.(\S+)\{/), n = e ? e[1] : "error-class";
+    return `export const ${t.name} = "pure-glyf-icon ${n}";`;
+  })) : a = s.map((t) => {
+    const e = t.css.match(/^\s*\.(\S+)\{/), n = e ? e[1] : "error-class";
+    return `export const ${t.name} = /*#__PURE__*/ (() => {
+    injectCSS(\`${t.css}\`);
+    return "pure-glyf-icon ${n}";
 })();`;
   });
   const l = u.concat(a).join(`
-`), t = [
+`), r = [
     "declare module 'pure-glyf/icons' {",
     "    export function mount(): void;",
     "    export const sheet: string;",
     "    export function onInject(callback: (css: string) => void): void;"
   ];
-  n.forEach((s) => {
-    t.push(`    export const ${s.name}: string;`);
-  }), t.push("}");
-  const f = t.join(`
+  s.forEach((t) => {
+    r.push(`    export const ${t.name}: string;`);
+  }), r.push("}");
+  const f = r.join(`
 `);
   return { code: l, css: i, dts: f };
 }
-function _(c) {
-  const r = "pure-glyf/icons", n = "\0" + r, u = "pure-glyf/icons.css", i = "\0" + u, a = c.dts || "pure-glyf.d.ts";
-  let l = null, t = null, f = !1;
-  function s() {
+function _(o) {
+  const c = "pure-glyf/icons", s = "\0" + c, u = "pure-glyf/icons.css", i = "\0" + u, a = o.dts || "pure-glyf.d.ts";
+  let l = null, r = null, f = !1;
+  function t() {
     try {
-      if (l = P(c.icons, f), p.writeFileSync(d.resolve(process.cwd(), a), l.dts), t) {
-        const e = t.moduleGraph.getModuleById(n);
-        e && (t.moduleGraph.invalidateModule(e), t.ws.send({
+      if (l = P(o.icons, f), p.writeFileSync(d.resolve(process.cwd(), a), l.dts), r) {
+        const e = r.moduleGraph.getModuleById(s);
+        e && (r.moduleGraph.invalidateModule(e), r.ws.send({
           type: "full-reload",
           path: "*"
         }));
@@ -79,27 +79,27 @@ function _(c) {
       f = e.command === "serve";
     },
     configureServer(e) {
-      t = e, Object.values(c.icons).forEach((o) => {
-        t == null || t.watcher.add(d.resolve(o));
-      }), t == null || t.watcher.on("change", (o) => {
-        o.endsWith(".svg") && s();
-      }), t == null || t.watcher.on("add", (o) => {
-        o.endsWith(".svg") && s();
-      }), t == null || t.watcher.on("unlink", (o) => {
-        o.endsWith(".svg") && s();
+      r = e, Object.values(o.icons).forEach((n) => {
+        r?.watcher.add(d.resolve(n));
+      }), r?.watcher.on("change", (n) => {
+        n.endsWith(".svg") && t();
+      }), r?.watcher.on("add", (n) => {
+        n.endsWith(".svg") && t();
+      }), r?.watcher.on("unlink", (n) => {
+        n.endsWith(".svg") && t();
       });
     },
     buildStart() {
-      s();
+      t();
     },
     resolveId(e) {
-      if (e === r)
-        return n;
+      if (e === c)
+        return s;
       if (e === u)
         return i;
     },
     load(e) {
-      if (e === n)
+      if (e === s)
         return l.code;
       if (e === i)
         return l.css;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pure-glyf",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"description": "Vite plugin and runtime for compiling SVGs into tree-shakeable CSS masks",
 	"type": "module",
 	"keywords": [
@@ -38,7 +38,9 @@
 			"types": "./dist/inject.d.ts",
 			"import": "./dist/inject.js",
 			"require": "./dist/inject.cjs"
-		}
+		},
+		"./src": "./src/index.ts",
+		"./src/*": "./src/*"
 	},
 	"files": [
 		"dist"
@@ -50,10 +52,10 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@types/node": "^25.0.9",
+		"@types/node": "25.0.10",
 		"tsx": "^4.21.0",
 		"typescript": "^5.7.0",
-		"vite": "^6.0.0",
+		"vite": "7.3.1",
 		"vite-plugin-dts": "^4.0.0"
 	},
 	"license": "MIT",