style-zx 0.0.7 → 0.0.8

package/dist/plugin.cjs

@@ -1,6 +1,8 @@
-"use strict";const $=require("@babel/parser"),x=require("@babel/traverse"),b=require("@babel/types"),w=require("magic-string"),E=require("crypto");function L(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,s.get?s:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const a=L(b),j={m:["margin"],mt:["marginTop"],mr:["marginRight"],mb:["marginBottom"],ml:["marginLeft"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],p:["padding"],pt:["paddingTop"],pr:["paddingRight"],pb:["paddingBottom"],pl:["paddingLeft"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"],bg:["backgroundColor"]},z=new Set(["opacity","fontWeight","lineHeight","zIndex","flex","flexGrow","flexShrink","order"]);function O(e){return e.replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}function M(e,r){return typeof r=="number"&&!z.has(e)?`${r}px`:typeof r=="string"&&r.startsWith("$theme.")?`var(${r.replace("$theme.","--theme-").replace(/\./g,"-")})`:String(r)}function v(e,r){let t=`.${r} {`,s="";for(const n in e){const o=e[n];if(n.startsWith("&")||n.startsWith(":")||n.startsWith("@")){const u=n.replace(/&/g,`.${r}`),l=v(o,"TEMP_CLASS").replace(".TEMP_CLASS",u);s+=`
-${l}`;continue}(j[n]||[n]).forEach(u=>{const l=O(u),c=M(u,o);t+=`
-  ${l}: ${c};`})}return t+=`
-}`,t+s}function k(e){return E.createHash("md5").update(e).digest("hex").slice(0,8)}function S(e){if(a.isStringLiteral(e)||a.isNumericLiteral(e)||a.isBooleanLiteral(e))return e.value;if(a.isNullLiteral(e))return null;if(a.isUnaryExpression(e)&&e.operator==="-"&&a.isNumericLiteral(e.argument))return-e.argument.value;if(a.isObjectExpression(e)){const r={};return e.properties.forEach(t=>{if(a.isObjectProperty(t)){const s=a.isIdentifier(t.key)?t.key.name:a.isStringLiteral(t.key)?t.key.value:null;if(!s)throw new Error(`Unsupported key type in zx prop: ${t.key.type}`);r[s]=S(t.value)}else throw new Error(`Unsupported property type in zx prop: ${t.type}. Only static object properties are allowed.`)}),r}throw new Error(`Dynamic expressions are not allowed in zx prop. Found: ${e.type}. Use 'style' prop for dynamic values.`)}const y=new Map,d=new Map;function h(e,r){if(!e.includes("zx={"))return d.has(r)?(d.delete(r),{code:e,map:null,hasZx:!1}):null;const t=$.parse(e,{sourceType:"module",plugins:["typescript","jsx"]}),s=new w(e);let n=!1;const o=new Set;return(x.default||x)(t,{JSXOpeningElement(u){const l=u.node.attributes.find(c=>a.isJSXAttribute(c)&&c.name.name==="zx");if(l&&(n=!0,a.isJSXExpressionContainer(l.value)&&a.isObjectExpression(l.value.expression))){let c={};try{c=S(l.value.expression)}catch(p){throw new Error(`Error parsing zx prop in ${r}: ${p.message}`)}const m=k(JSON.stringify(c)),g=`zx-${m}`;if(!y.has(m)){const p=v(c,g);y.set(m,p)}o.add(m);const i=u.node.attributes.find(p=>a.isJSXAttribute(p)&&p.name.name==="className");if(l.start!=null&&l.end!=null&&s.remove(l.start,l.end),i){if(a.isStringLiteral(i.value)&&i.value.start&&i.value.end)s.overwrite(i.value.start,i.value.end,`"${i.value.value} ${g}"`);else if(a.isJSXExpressionContainer(i.value)&&i.value.expression.start&&i.value.expression.end){const p=e.slice(i.value.expression.start,i.value.expression.end);s.overwrite(i.value.expression.start,i.value.expression.end,`\`\${${p}} ${g}\``)}}else s.appendLeft(l.start,` className="${g}" `)}}}),n?(d.set(r,o),s.prepend(`import 'virtual:style-zx.css';
-`),{code:s.toString(),map:s.generateMap({hires:!0}),hasZx:!0}):(d.delete(r),null)}function N(){const e="virtual:style-zx.css",r="\0"+e;return{name:"vite-plugin-style-zx",enforce:"pre",resolveId(t){return t===e?r:null},load(t){if(t===r){const s=new Set;for(const o of d.values())o.forEach(f=>s.add(f));let n="";return s.forEach(o=>{y.has(o)&&(n+=y.get(o)+`
-`)}),n}return null},transform(t,s){if(!/\.(t|j)sx?$/.test(s))return null;const n=h(t,s);return n&&n.hasZx?{code:n.code,map:n.map}:null},async handleHotUpdate({file:t,modules:s,read:n,server:o}){if(!/\.(t|j)sx?$/.test(t))return;const f=await n();h(f,t);const u=o.moduleGraph.getModuleById(r);if(u)return o.moduleGraph.invalidateModule(u),[...s,u]}}}module.exports=N;
+"use strict";const b=require("@babel/parser"),g=require("@babel/traverse"),S=require("@babel/types"),$=require("magic-string"),w=require("crypto");function z(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const i=z(S),E={m:["margin"],mt:["marginTop"],mr:["marginRight"],mb:["marginBottom"],ml:["marginLeft"],mx:["marginLeft","marginRight"],my:["marginTop","marginBottom"],p:["padding"],pt:["paddingTop"],pr:["paddingRight"],pb:["paddingBottom"],pl:["paddingLeft"],px:["paddingLeft","paddingRight"],py:["paddingTop","paddingBottom"],bg:["backgroundColor"]},L=new Set(["opacity","fontWeight","lineHeight","zIndex","flex","flexGrow","flexShrink","order"]);function j(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function N(e,t){return typeof t=="number"&&!L.has(e)?`${t}px`:typeof t=="string"&&t.startsWith("$theme.")?`var(${t.replace("$theme.","--theme-").replace(/\./g,"-")})`:String(t)}function x(e,t){let n=`.${t} {`,r="";for(const s in e){const p=e[s];if(s.startsWith("&")||s.startsWith(":")||s.startsWith("@")){const u=s.replace(/&/g,`.${t}`),l=x(p,"TEMP_CLASS").replace(".TEMP_CLASS",u);r+=`
+${l}`;continue}(E[s]||[s]).forEach(u=>{const l=j(u),c=N(u,p);n+=`
+  ${l}: ${c};`})}return n+=`
+}`,n+r}function O(e){return w.createHash("md5").update(e).digest("hex").slice(0,8)}function h(e){if(i.isStringLiteral(e)||i.isNumericLiteral(e)||i.isBooleanLiteral(e))return e.value;if(i.isNullLiteral(e))return null;if(i.isUnaryExpression(e)&&e.operator==="-"&&i.isNumericLiteral(e.argument))return-e.argument.value;if(i.isObjectExpression(e)){const t={};return e.properties.forEach(n=>{if(i.isObjectProperty(n)){const r=i.isIdentifier(n.key)?n.key.name:i.isStringLiteral(n.key)?n.key.value:null;if(!r)throw new Error(`Unsupported key type in zx prop: ${n.key.type}`);t[r]=h(n.value)}else throw new Error(`Unsupported property type in zx prop: ${n.type}. Only static object properties are allowed.`)}),t}throw new Error(`Dynamic expressions are not allowed in zx prop. Found: ${e.type}. Use 'style' prop for dynamic values.`)}function y(e,t,n){if(!e.includes("zx={"))return null;const r=b.parse(e,{sourceType:"module",plugins:["typescript","jsx"]}),s=new $(e);let p=!1,a="";return(g.default||g)(r,{JSXOpeningElement(l){const c=l.node.attributes.find(f=>i.isJSXAttribute(f)&&f.name.name==="zx");if(c&&(p=!0,i.isJSXExpressionContainer(c.value)&&i.isObjectExpression(c.value.expression))){let f={};try{f=h(c.value.expression)}catch(m){throw new Error(`Error parsing zx prop in ${t}: ${m.message}`)}const d=`zx-${O(JSON.stringify(f))}`,v=x(f,d);a+=v+`
+`;const o=l.node.attributes.find(m=>i.isJSXAttribute(m)&&m.name.name==="className");if(c.start!=null&&c.end!=null&&s.remove(c.start,c.end),o){if(i.isStringLiteral(o.value)&&o.value.start&&o.value.end)s.overwrite(o.value.start,o.value.end,`"${o.value.value} ${d}"`);else if(i.isJSXExpressionContainer(o.value)&&o.value.expression.start&&o.value.expression.end){const m=e.slice(o.value.expression.start,o.value.expression.end);s.overwrite(o.value.expression.start,o.value.expression.end,`\`\${${m}} ${d}\``)}}else s.appendLeft(c.start,` className="${d}" `)}}}),p?(n&&s.prepend(`import '${t}.style-zx.css';
+`),{code:s.toString(),map:s.generateMap({hires:!0}),css:a,hasZx:!0}):null}function k(){const e=new Map;let t;const n=new Set;return[{name:"vite-plugin-style-zx",enforce:"pre",configResolved(r){t=r},resolveId(r){return r.endsWith(".style-zx.css")?r:null},load(r){if(r.endsWith(".style-zx.css")){const s=r.replace(".style-zx.css","");return e.get(s)||""}return null},transform(r,s){if(!/\.(t|j)sx?$/.test(s))return null;const p=t.command==="serve",a=y(r,s,p);return a&&a.hasZx?(e.set(s,a.css),t.command==="build"&&n.add(a.css),{code:a.code,map:a.map}):null},async handleHotUpdate({file:r,modules:s,read:p,server:a}){if(!/\.(t|j)sx?$/.test(r))return;const u=await p(),l=y(u,r,!0);if(l&&l.hasZx){e.set(r,l.css);const c=`${r}.style-zx.css`,f=a.moduleGraph.getModuleById(c);if(f)return[...s,f]}}},{name:"vite-plugin-style-zx-post",enforce:"post",generateBundle(r,s){if(t.command==="build"&&n.size>0){const p=this.emitFile({type:"asset",name:"style-zx.css",source:Array.from(n).join(`
+`)}),a=this.getFileName(p);for(const u of Object.values(s))if(u.type==="asset"&&u.fileName.endsWith(".html")){const l=u.source;l.includes("</head>")&&(u.source=l.replace("</head>",`<link rel="stylesheet" href="/${a}">
+</head>`))}}}}]}module.exports=k;

package/dist/plugin.js

@@ -1,9 +1,9 @@
 import { parse as $ } from "@babel/parser";
-import h from "@babel/traverse";
-import * as a from "@babel/types";
-import w from "magic-string";
-import E from "crypto";
-const b = {
+import g from "@babel/traverse";
+import * as i from "@babel/types";
+import S from "magic-string";
+import b from "crypto";
+const w = {
   m: ["margin"],
   mt: ["marginTop"],
   mr: ["marginRight"],
@@ -19,7 +19,7 @@ const b = {
   px: ["paddingLeft", "paddingRight"],
   py: ["paddingTop", "paddingBottom"],
   bg: ["backgroundColor"]
-}, L = /* @__PURE__ */ new Set([
+}, z = /* @__PURE__ */ new Set([
   "opacity",
   "fontWeight",
   "lineHeight",
@@ -29,142 +29,164 @@ const b = {
   "flexShrink",
   "order"
 ]);
-function z(e) {
-  return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+function E(e) {
+  return e.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
 }
-function M(e, t) {
-  return typeof t == "number" && !L.has(e) ? `${t}px` : typeof t == "string" && t.startsWith("$theme.") ? `var(${t.replace("$theme.", "--theme-").replace(/\./g, "-")})` : String(t);
+function L(e, r) {
+  return typeof r == "number" && !z.has(e) ? `${r}px` : typeof r == "string" && r.startsWith("$theme.") ? `var(${r.replace("$theme.", "--theme-").replace(/\./g, "-")})` : String(r);
 }
-function v(e, t) {
-  let r = `.${t} {`, s = "";
-  for (const n in e) {
-    const o = e[n];
-    if (n.startsWith("&") || n.startsWith(":") || n.startsWith("@")) {
-      const u = n.replace(/&/g, `.${t}`), l = v(o, "TEMP_CLASS").replace(".TEMP_CLASS", u);
+function y(e, r) {
+  let n = `.${r} {`, s = "";
+  for (const t in e) {
+    const p = e[t];
+    if (t.startsWith("&") || t.startsWith(":") || t.startsWith("@")) {
+      const u = t.replace(/&/g, `.${r}`), l = y(p, "TEMP_CLASS").replace(".TEMP_CLASS", u);
       s += `
 ${l}`;
       continue;
     }
-    (b[n] || [n]).forEach((u) => {
-      const l = z(u), p = M(u, o);
-      r += `
-  ${l}: ${p};`;
+    (w[t] || [t]).forEach((u) => {
+      const l = E(u), c = L(u, p);
+      n += `
+  ${l}: ${c};`;
     });
   }
-  return r += `
-}`, r + s;
+  return n += `
+}`, n + s;
 }
-function k(e) {
-  return E.createHash("md5").update(e).digest("hex").slice(0, 8);
+function N(e) {
+  return b.createHash("md5").update(e).digest("hex").slice(0, 8);
 }
-function S(e) {
-  if (a.isStringLiteral(e) || a.isNumericLiteral(e) || a.isBooleanLiteral(e)) return e.value;
-  if (a.isNullLiteral(e)) return null;
-  if (a.isUnaryExpression(e) && e.operator === "-" && a.isNumericLiteral(e.argument))
+function h(e) {
+  if (i.isStringLiteral(e) || i.isNumericLiteral(e) || i.isBooleanLiteral(e)) return e.value;
+  if (i.isNullLiteral(e)) return null;
+  if (i.isUnaryExpression(e) && e.operator === "-" && i.isNumericLiteral(e.argument))
     return -e.argument.value;
-  if (a.isObjectExpression(e)) {
-    const t = {};
-    return e.properties.forEach((r) => {
-      if (a.isObjectProperty(r)) {
-        const s = a.isIdentifier(r.key) ? r.key.name : a.isStringLiteral(r.key) ? r.key.value : null;
+  if (i.isObjectExpression(e)) {
+    const r = {};
+    return e.properties.forEach((n) => {
+      if (i.isObjectProperty(n)) {
+        const s = i.isIdentifier(n.key) ? n.key.name : i.isStringLiteral(n.key) ? n.key.value : null;
         if (!s)
-          throw new Error(`Unsupported key type in zx prop: ${r.key.type}`);
-        t[s] = S(r.value);
+          throw new Error(`Unsupported key type in zx prop: ${n.key.type}`);
+        r[s] = h(n.value);
       } else
-        throw new Error(`Unsupported property type in zx prop: ${r.type}. Only static object properties are allowed.`);
-    }), t;
+        throw new Error(`Unsupported property type in zx prop: ${n.type}. Only static object properties are allowed.`);
+    }), r;
   }
   throw new Error(`Dynamic expressions are not allowed in zx prop. Found: ${e.type}. Use 'style' prop for dynamic values.`);
 }
-const x = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
-function y(e, t) {
+function x(e, r, n) {
   if (!e.includes("zx={"))
-    return m.has(t) ? (m.delete(t), { code: e, map: null, hasZx: !1 }) : null;
-  const r = $(e, {
+    return null;
+  const s = $(e, {
     sourceType: "module",
     plugins: ["typescript", "jsx"]
-  }), s = new w(e);
-  let n = !1;
-  const o = /* @__PURE__ */ new Set();
-  return (h.default || h)(r, {
-    JSXOpeningElement(u) {
-      const l = u.node.attributes.find(
-        (p) => a.isJSXAttribute(p) && p.name.name === "zx"
+  }), t = new S(e);
+  let p = !1, a = "";
+  return (g.default || g)(s, {
+    JSXOpeningElement(l) {
+      const c = l.node.attributes.find(
+        (m) => i.isJSXAttribute(m) && m.name.name === "zx"
       );
-      if (l && (n = !0, a.isJSXExpressionContainer(l.value) && a.isObjectExpression(l.value.expression))) {
-        let p = {};
+      if (c && (p = !0, i.isJSXExpressionContainer(c.value) && i.isObjectExpression(c.value.expression))) {
+        let m = {};
         try {
-          p = S(l.value.expression);
-        } catch (c) {
-          throw new Error(`Error parsing zx prop in ${t}: ${c.message}`);
+          m = h(c.value.expression);
+        } catch (f) {
+          throw new Error(`Error parsing zx prop in ${r}: ${f.message}`);
         }
-        const d = k(JSON.stringify(p)), g = `zx-${d}`;
-        if (!x.has(d)) {
-          const c = v(p, g);
-          x.set(d, c);
-        }
-        o.add(d);
-        const i = u.node.attributes.find(
-          (c) => a.isJSXAttribute(c) && c.name.name === "className"
+        const d = `zx-${N(JSON.stringify(m))}`, v = y(m, d);
+        a += v + `
+`;
+        const o = l.node.attributes.find(
+          (f) => i.isJSXAttribute(f) && f.name.name === "className"
         );
-        if (l.start != null && l.end != null && s.remove(l.start, l.end), i) {
-          if (a.isStringLiteral(i.value) && i.value.start && i.value.end)
-            s.overwrite(i.value.start, i.value.end, `"${i.value.value} ${g}"`);
-          else if (a.isJSXExpressionContainer(i.value) && i.value.expression.start && i.value.expression.end) {
-            const c = e.slice(i.value.expression.start, i.value.expression.end);
-            s.overwrite(i.value.expression.start, i.value.expression.end, `\`\${${c}} ${g}\``);
+        if (c.start != null && c.end != null && t.remove(c.start, c.end), o) {
+          if (i.isStringLiteral(o.value) && o.value.start && o.value.end)
+            t.overwrite(o.value.start, o.value.end, `"${o.value.value} ${d}"`);
+          else if (i.isJSXExpressionContainer(o.value) && o.value.expression.start && o.value.expression.end) {
+            const f = e.slice(o.value.expression.start, o.value.expression.end);
+            t.overwrite(o.value.expression.start, o.value.expression.end, `\`\${${f}} ${d}\``);
           }
         } else
-          s.appendLeft(l.start, ` className="${g}" `);
+          t.appendLeft(c.start, ` className="${d}" `);
       }
     }
-  }), n ? (m.set(t, o), s.prepend(`import 'virtual:style-zx.css';
+  }), p ? (n && t.prepend(`import '${r}.style-zx.css';
 `), {
-    code: s.toString(),
-    map: s.generateMap({ hires: !0 }),
+    code: t.toString(),
+    map: t.generateMap({ hires: !0 }),
+    css: a,
     hasZx: !0
-  }) : (m.delete(t), null);
+  }) : null;
 }
 function I() {
-  const e = "virtual:style-zx.css", t = "\0" + e;
-  return {
-    name: "vite-plugin-style-zx",
-    enforce: "pre",
-    resolveId(r) {
-      return r === e ? t : null;
-    },
-    load(r) {
-      if (r === t) {
-        const s = /* @__PURE__ */ new Set();
-        for (const o of m.values())
-          o.forEach((f) => s.add(f));
-        let n = "";
-        return s.forEach((o) => {
-          x.has(o) && (n += x.get(o) + `
-`);
-        }), n;
-      }
-      return null;
-    },
-    transform(r, s) {
-      if (!/\.(t|j)sx?$/.test(s))
+  const e = /* @__PURE__ */ new Map();
+  let r;
+  const n = /* @__PURE__ */ new Set();
+  return [
+    {
+      name: "vite-plugin-style-zx",
+      enforce: "pre",
+      configResolved(s) {
+        r = s;
+      },
+      resolveId(s) {
+        return s.endsWith(".style-zx.css") ? s : null;
+      },
+      load(s) {
+        if (s.endsWith(".style-zx.css")) {
+          const t = s.replace(".style-zx.css", "");
+          return e.get(t) || "";
+        }
         return null;
-      const n = y(r, s);
-      return n && n.hasZx ? {
-        code: n.code,
-        map: n.map
-      } : null;
+      },
+      transform(s, t) {
+        if (!/\.(t|j)sx?$/.test(t))
+          return null;
+        const p = r.command === "serve", a = x(s, t, p);
+        return a && a.hasZx ? (e.set(t, a.css), r.command === "build" && n.add(a.css), {
+          code: a.code,
+          map: a.map
+        }) : null;
+      },
+      async handleHotUpdate({ file: s, modules: t, read: p, server: a }) {
+        if (!/\.(t|j)sx?$/.test(s))
+          return;
+        const u = await p(), l = x(u, s, !0);
+        if (l && l.hasZx) {
+          e.set(s, l.css);
+          const c = `${s}.style-zx.css`, m = a.moduleGraph.getModuleById(c);
+          if (m)
+            return [...t, m];
+        }
+      }
     },
-    async handleHotUpdate({ file: r, modules: s, read: n, server: o }) {
-      if (!/\.(t|j)sx?$/.test(r))
-        return;
-      const f = await n();
-      y(f, r);
-      const u = o.moduleGraph.getModuleById(t);
-      if (u)
-        return o.moduleGraph.invalidateModule(u), [...s, u];
+    {
+      name: "vite-plugin-style-zx-post",
+      enforce: "post",
+      generateBundle(s, t) {
+        if (r.command === "build" && n.size > 0) {
+          const p = this.emitFile({
+            type: "asset",
+            name: "style-zx.css",
+            source: Array.from(n).join(`
+`)
+          }), a = this.getFileName(p);
+          for (const u of Object.values(t))
+            if (u.type === "asset" && u.fileName.endsWith(".html")) {
+              const l = u.source;
+              l.includes("</head>") && (u.source = l.replace(
+                "</head>",
+                `<link rel="stylesheet" href="/${a}">
+</head>`
+              ));
+            }
+        }
+      }
     }
-  };
+  ];
 }
 export {
   I as default

package/dist/vite-plugin-style-zx/index.d.ts

@@ -1,2 +1,2 @@
 import { Plugin } from 'vite';
-export default function styleZx(): Plugin;
+export default function styleZx(): Plugin[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "style-zx",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "type": "module",
   "repository": {