style-zx 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/plugin.cjs +7 -7
  2. package/dist/plugin.js +74 -74
  3. package/package.json +1 -1
package/dist/plugin.cjs CHANGED
@@ -1,8 +1,8 @@
1
- "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+=`
2
- ${l}`;continue}(E[s]||[s]).forEach(u=>{const l=j(u),c=N(u,p);n+=`
3
- ${l}: ${c};`})}return n+=`
4
- }`,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+`
5
- `;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';
6
- `),{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(`
7
- `)}),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}">
1
+ "use strict";const b=require("@babel/parser"),g=require("@babel/traverse"),$=require("@babel/types"),S=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 s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=z($),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} {`,s="";for(const r in e){const u=e[r];if(r.startsWith("&")||r.startsWith(":")||r.startsWith("@")){const p=r.replace(/&/g,`.${t}`),o=x(u,"TEMP_CLASS").replace(".TEMP_CLASS",p);s+=`
2
+ ${o}`;continue}(E[r]||[r]).forEach(p=>{const o=j(p),i=N(p,u);n+=`
3
+ ${o}: ${i};`})}return n+=`
4
+ }`,n+s}function O(e){return w.createHash("md5").update(e).digest("hex").slice(0,8)}function h(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 t={};return e.properties.forEach(n=>{if(a.isObjectProperty(n)){const s=a.isIdentifier(n.key)?n.key.name:a.isStringLiteral(n.key)?n.key.value:null;if(!s)throw new Error(`Unsupported key type in zx prop: ${n.key.type}`);t[s]=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 s=b.parse(e,{sourceType:"module",plugins:["typescript","jsx"]}),r=new S(e);let u=!1,l="";return(g.default||g)(s,{JSXOpeningElement(o){const i=o.node.attributes.find(f=>a.isJSXAttribute(f)&&f.name.name==="zx");if(i&&(u=!0,a.isJSXExpressionContainer(i.value)&&a.isObjectExpression(i.value.expression))){let f={};try{f=h(i.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);l+=v+`
5
+ `;const c=o.node.attributes.find(m=>a.isJSXAttribute(m)&&m.name.name==="className");if(i.start!=null&&i.end!=null&&r.remove(i.start,i.end),c){if(a.isStringLiteral(c.value)&&c.value.start&&c.value.end)r.overwrite(c.value.start,c.value.end,`"${c.value.value} ${d}"`);else if(a.isJSXExpressionContainer(c.value)&&c.value.expression.start&&c.value.expression.end){const m=e.slice(c.value.expression.start,c.value.expression.end);r.overwrite(c.value.expression.start,c.value.expression.end,`\`\${${m}} ${d}\``)}}else r.appendLeft(i.start,` className="${d}" `)}}}),u?(n&&r.prepend(`import '${t}.style-zx.css';
6
+ `),{code:r.toString(),map:r.generateMap({hires:!0}),css:l,hasZx:!0}):null}function k(){const e=new Map;let t;const n=new Set;return[{name:"vite-plugin-style-zx",enforce:"pre",configResolved(s){t=s},resolveId(s){return s.endsWith(".style-zx.css")?s:null},load(s){if(s.endsWith(".style-zx.css")){const r=s.replace(".style-zx.css","");return e.get(r)||""}return null},transform(s,r){if(!/\.(t|j)sx?$/.test(r))return null;const u=t.command==="serve",l=y(s,r,u);return l&&l.hasZx?(e.set(r,l.css),t.command==="build"&&n.add(l.css),{code:l.code,map:l.map}):null},async handleHotUpdate({file:s,modules:r,read:u,server:l}){if(!/\.(t|j)sx?$/.test(s))return;const p=await u(),o=y(p,s,!0);if(o&&o.hasZx){e.set(s,o.css);const i=`${s}.style-zx.css`,f=l.moduleGraph.getModuleById(i);if(f)return[...r,f]}}},{name:"vite-plugin-style-zx-post",enforce:"post",generateBundle(s,r){if(t.command==="build"&&n.size>0){const u=this.emitFile({type:"asset",name:"style-zx.css",source:Array.from(n).join(`
7
+ `)}),l=this.getFileName(u),p=t.base||"/";for(const o of Object.values(r))if(o.type==="asset"&&o.fileName.endsWith(".html")){const i=o.source;i.includes("</head>")&&(o.source=i.replace("</head>",`<link rel="stylesheet" href="${p}${l}">
8
8
  </head>`))}}}}]}module.exports=k;
package/dist/plugin.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { parse as $ } from "@babel/parser";
2
2
  import g from "@babel/traverse";
3
- import * as i from "@babel/types";
3
+ import * as a from "@babel/types";
4
4
  import S from "magic-string";
5
5
  import b from "crypto";
6
6
  const w = {
@@ -30,134 +30,134 @@ const w = {
30
30
  "order"
31
31
  ]);
32
32
  function E(e) {
33
- return e.replace(/[A-Z]/g, (r) => `-${r.toLowerCase()}`);
33
+ return e.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
34
34
  }
35
- function L(e, r) {
36
- return typeof r == "number" && !z.has(e) ? `${r}px` : typeof r == "string" && r.startsWith("$theme.") ? `var(${r.replace("$theme.", "--theme-").replace(/\./g, "-")})` : String(r);
35
+ function L(e, s) {
36
+ return typeof s == "number" && !z.has(e) ? `${s}px` : typeof s == "string" && s.startsWith("$theme.") ? `var(${s.replace("$theme.", "--theme-").replace(/\./g, "-")})` : String(s);
37
37
  }
38
- function y(e, r) {
39
- let n = `.${r} {`, s = "";
38
+ function y(e, s) {
39
+ let n = `.${s} {`, r = "";
40
40
  for (const t in e) {
41
- const p = e[t];
41
+ const u = e[t];
42
42
  if (t.startsWith("&") || t.startsWith(":") || t.startsWith("@")) {
43
- const u = t.replace(/&/g, `.${r}`), l = y(p, "TEMP_CLASS").replace(".TEMP_CLASS", u);
44
- s += `
45
- ${l}`;
43
+ const p = t.replace(/&/g, `.${s}`), o = y(u, "TEMP_CLASS").replace(".TEMP_CLASS", p);
44
+ r += `
45
+ ${o}`;
46
46
  continue;
47
47
  }
48
- (w[t] || [t]).forEach((u) => {
49
- const l = E(u), c = L(u, p);
48
+ (w[t] || [t]).forEach((p) => {
49
+ const o = E(p), i = L(p, u);
50
50
  n += `
51
- ${l}: ${c};`;
51
+ ${o}: ${i};`;
52
52
  });
53
53
  }
54
54
  return n += `
55
- }`, n + s;
55
+ }`, n + r;
56
56
  }
57
57
  function N(e) {
58
58
  return b.createHash("md5").update(e).digest("hex").slice(0, 8);
59
59
  }
60
60
  function h(e) {
61
- if (i.isStringLiteral(e) || i.isNumericLiteral(e) || i.isBooleanLiteral(e)) return e.value;
62
- if (i.isNullLiteral(e)) return null;
63
- if (i.isUnaryExpression(e) && e.operator === "-" && i.isNumericLiteral(e.argument))
61
+ if (a.isStringLiteral(e) || a.isNumericLiteral(e) || a.isBooleanLiteral(e)) return e.value;
62
+ if (a.isNullLiteral(e)) return null;
63
+ if (a.isUnaryExpression(e) && e.operator === "-" && a.isNumericLiteral(e.argument))
64
64
  return -e.argument.value;
65
- if (i.isObjectExpression(e)) {
66
- const r = {};
65
+ if (a.isObjectExpression(e)) {
66
+ const s = {};
67
67
  return e.properties.forEach((n) => {
68
- if (i.isObjectProperty(n)) {
69
- const s = i.isIdentifier(n.key) ? n.key.name : i.isStringLiteral(n.key) ? n.key.value : null;
70
- if (!s)
68
+ if (a.isObjectProperty(n)) {
69
+ const r = a.isIdentifier(n.key) ? n.key.name : a.isStringLiteral(n.key) ? n.key.value : null;
70
+ if (!r)
71
71
  throw new Error(`Unsupported key type in zx prop: ${n.key.type}`);
72
- r[s] = h(n.value);
72
+ s[r] = h(n.value);
73
73
  } else
74
74
  throw new Error(`Unsupported property type in zx prop: ${n.type}. Only static object properties are allowed.`);
75
- }), r;
75
+ }), s;
76
76
  }
77
77
  throw new Error(`Dynamic expressions are not allowed in zx prop. Found: ${e.type}. Use 'style' prop for dynamic values.`);
78
78
  }
79
- function x(e, r, n) {
79
+ function x(e, s, n) {
80
80
  if (!e.includes("zx={"))
81
81
  return null;
82
- const s = $(e, {
82
+ const r = $(e, {
83
83
  sourceType: "module",
84
84
  plugins: ["typescript", "jsx"]
85
85
  }), t = new S(e);
86
- let p = !1, a = "";
87
- return (g.default || g)(s, {
88
- JSXOpeningElement(l) {
89
- const c = l.node.attributes.find(
90
- (m) => i.isJSXAttribute(m) && m.name.name === "zx"
86
+ let u = !1, l = "";
87
+ return (g.default || g)(r, {
88
+ JSXOpeningElement(o) {
89
+ const i = o.node.attributes.find(
90
+ (m) => a.isJSXAttribute(m) && m.name.name === "zx"
91
91
  );
92
- if (c && (p = !0, i.isJSXExpressionContainer(c.value) && i.isObjectExpression(c.value.expression))) {
92
+ if (i && (u = !0, a.isJSXExpressionContainer(i.value) && a.isObjectExpression(i.value.expression))) {
93
93
  let m = {};
94
94
  try {
95
- m = h(c.value.expression);
95
+ m = h(i.value.expression);
96
96
  } catch (f) {
97
- throw new Error(`Error parsing zx prop in ${r}: ${f.message}`);
97
+ throw new Error(`Error parsing zx prop in ${s}: ${f.message}`);
98
98
  }
99
99
  const d = `zx-${N(JSON.stringify(m))}`, v = y(m, d);
100
- a += v + `
100
+ l += v + `
101
101
  `;
102
- const o = l.node.attributes.find(
103
- (f) => i.isJSXAttribute(f) && f.name.name === "className"
102
+ const c = o.node.attributes.find(
103
+ (f) => a.isJSXAttribute(f) && f.name.name === "className"
104
104
  );
105
- if (c.start != null && c.end != null && t.remove(c.start, c.end), o) {
106
- if (i.isStringLiteral(o.value) && o.value.start && o.value.end)
107
- t.overwrite(o.value.start, o.value.end, `"${o.value.value} ${d}"`);
108
- else if (i.isJSXExpressionContainer(o.value) && o.value.expression.start && o.value.expression.end) {
109
- const f = e.slice(o.value.expression.start, o.value.expression.end);
110
- t.overwrite(o.value.expression.start, o.value.expression.end, `\`\${${f}} ${d}\``);
105
+ if (i.start != null && i.end != null && t.remove(i.start, i.end), c) {
106
+ if (a.isStringLiteral(c.value) && c.value.start && c.value.end)
107
+ t.overwrite(c.value.start, c.value.end, `"${c.value.value} ${d}"`);
108
+ else if (a.isJSXExpressionContainer(c.value) && c.value.expression.start && c.value.expression.end) {
109
+ const f = e.slice(c.value.expression.start, c.value.expression.end);
110
+ t.overwrite(c.value.expression.start, c.value.expression.end, `\`\${${f}} ${d}\``);
111
111
  }
112
112
  } else
113
- t.appendLeft(c.start, ` className="${d}" `);
113
+ t.appendLeft(i.start, ` className="${d}" `);
114
114
  }
115
115
  }
116
- }), p ? (n && t.prepend(`import '${r}.style-zx.css';
116
+ }), u ? (n && t.prepend(`import '${s}.style-zx.css';
117
117
  `), {
118
118
  code: t.toString(),
119
119
  map: t.generateMap({ hires: !0 }),
120
- css: a,
120
+ css: l,
121
121
  hasZx: !0
122
122
  }) : null;
123
123
  }
124
124
  function I() {
125
125
  const e = /* @__PURE__ */ new Map();
126
- let r;
126
+ let s;
127
127
  const n = /* @__PURE__ */ new Set();
128
128
  return [
129
129
  {
130
130
  name: "vite-plugin-style-zx",
131
131
  enforce: "pre",
132
- configResolved(s) {
133
- r = s;
132
+ configResolved(r) {
133
+ s = r;
134
134
  },
135
- resolveId(s) {
136
- return s.endsWith(".style-zx.css") ? s : null;
135
+ resolveId(r) {
136
+ return r.endsWith(".style-zx.css") ? r : null;
137
137
  },
138
- load(s) {
139
- if (s.endsWith(".style-zx.css")) {
140
- const t = s.replace(".style-zx.css", "");
138
+ load(r) {
139
+ if (r.endsWith(".style-zx.css")) {
140
+ const t = r.replace(".style-zx.css", "");
141
141
  return e.get(t) || "";
142
142
  }
143
143
  return null;
144
144
  },
145
- transform(s, t) {
145
+ transform(r, t) {
146
146
  if (!/\.(t|j)sx?$/.test(t))
147
147
  return null;
148
- const p = r.command === "serve", a = x(s, t, p);
149
- return a && a.hasZx ? (e.set(t, a.css), r.command === "build" && n.add(a.css), {
150
- code: a.code,
151
- map: a.map
148
+ const u = s.command === "serve", l = x(r, t, u);
149
+ return l && l.hasZx ? (e.set(t, l.css), s.command === "build" && n.add(l.css), {
150
+ code: l.code,
151
+ map: l.map
152
152
  }) : null;
153
153
  },
154
- async handleHotUpdate({ file: s, modules: t, read: p, server: a }) {
155
- if (!/\.(t|j)sx?$/.test(s))
154
+ async handleHotUpdate({ file: r, modules: t, read: u, server: l }) {
155
+ if (!/\.(t|j)sx?$/.test(r))
156
156
  return;
157
- const u = await p(), l = x(u, s, !0);
158
- if (l && l.hasZx) {
159
- e.set(s, l.css);
160
- const c = `${s}.style-zx.css`, m = a.moduleGraph.getModuleById(c);
157
+ const p = await u(), o = x(p, r, !0);
158
+ if (o && o.hasZx) {
159
+ e.set(r, o.css);
160
+ const i = `${r}.style-zx.css`, m = l.moduleGraph.getModuleById(i);
161
161
  if (m)
162
162
  return [...t, m];
163
163
  }
@@ -166,20 +166,20 @@ function I() {
166
166
  {
167
167
  name: "vite-plugin-style-zx-post",
168
168
  enforce: "post",
169
- generateBundle(s, t) {
170
- if (r.command === "build" && n.size > 0) {
171
- const p = this.emitFile({
169
+ generateBundle(r, t) {
170
+ if (s.command === "build" && n.size > 0) {
171
+ const u = this.emitFile({
172
172
  type: "asset",
173
173
  name: "style-zx.css",
174
174
  source: Array.from(n).join(`
175
175
  `)
176
- }), a = this.getFileName(p);
177
- for (const u of Object.values(t))
178
- if (u.type === "asset" && u.fileName.endsWith(".html")) {
179
- const l = u.source;
180
- l.includes("</head>") && (u.source = l.replace(
176
+ }), l = this.getFileName(u), p = s.base || "/";
177
+ for (const o of Object.values(t))
178
+ if (o.type === "asset" && o.fileName.endsWith(".html")) {
179
+ const i = o.source;
180
+ i.includes("</head>") && (o.source = i.replace(
181
181
  "</head>",
182
- `<link rel="stylesheet" href="/${a}">
182
+ `<link rel="stylesheet" href="${p}${l}">
183
183
  </head>`
184
184
  ));
185
185
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "style-zx",
3
3
  "private": false,
4
- "version": "0.0.9",
4
+ "version": "0.0.10",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "repository": {