style-zx 0.0.8 → 0.0.10

package/README.md

@@ -6,18 +6,18 @@
 
 ## Features
 
--   **Zero Runtime**: Styles are extracted to static CSS files during the build process. No runtime style injection or overhead.
--   **Ultra Lightweight**: The plugin output is tiny (~5KB), ensuring minimal impact on your build process.
--   **`zx` Prop**: Style any component directly with the `zx` prop (inspired by MUI's `sx` and other similar libraries).
--   **TypeScript Support**: Full type safety for CSS properties and theme variables.
--   **Theming**: Define a theme and access variables easily (e.g., `"$theme.colors.primary"`).
--   **Aliases**: Shorthand properties for common styles (e.g., `p`, `m`, `px`, `my`, `bg`).
--   **Nested Selectors**: Support for pseudo-classes and nested selectors (e.g., `&:hover`, `& > div`).
--   **Vite Integration**: Seamless integration as a Vite plugin with HMR support.
+- **Zero Runtime**: Styles are extracted to static CSS files during the build process. No runtime style injection or overhead.
+- **Ultra Lightweight**: The plugin output is tiny (~5KB), ensuring minimal impact on your build process.
+- **`zx` Prop**: Style any component directly with the `zx` prop (inspired by MUI's `sx` and other similar libraries).
+- **TypeScript Support**: Full type safety for CSS properties and theme variables.
+- **Theming**: Define a theme and access variables easily (e.g., `"$theme.colors.primary"`).
+- **Aliases**: Shorthand properties for common styles (e.g., `p`, `m`, `px`, `my`, `bg`).
+- **Nested Selectors**: Support for pseudo-classes and nested selectors (e.g., `&:hover`, `& > div`).
+- **Vite Integration**: Seamless integration as a Vite plugin with HMR support.
 
 ## Installation
 
-1.  **Install the package** (assuming local or published package):
+1. **Install the package** (assuming local or published package):
 
     ```bash
     npm install style-zx
@@ -25,15 +25,15 @@
     yarn add style-zx
     ```
 
-2.  **Add the Vite plugin** in `vite.config.ts`:
+2. **Add the Vite plugin** in `vite.config.ts`:
 
     ```typescript
     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
-    import styleZx from 'style-zx/vite-plugin' // Adjust path if local
+    import styleZx from 'style-zx/plugin'
 
     export default defineConfig({
-      plugins: [react(), styleZx()],
+      plugins: [styleZx(), react()],
     })
     ```
 
@@ -56,7 +56,7 @@ Use the `zx` prop on any HTML element. Numeric values for dimensions are treated
 
 ### Theming
 
-1.  **Define your theme** and create the hook:
+1. **Define your theme** and create the hook:
 
     ```typescript
     // src/style-zx/theme.ts
@@ -75,7 +75,7 @@ Use the `zx` prop on any HTML element. Numeric values for dimensions are treated
     });
     ```
 
-2.  **Use theme variables** in your components. You can reference them as strings starting with `$theme.`.
+2. **Use theme variables** in your components. You can reference them as strings starting with `$theme.`.
 
     ```tsx
     import { useTheme } from './style-zx';
@@ -116,33 +116,38 @@ You can use standard CSS nesting syntax.
 ## Comparison & Concept
 
 ### The Concept
+
 `style-zx` relies on **static analysis**. The build plugin scans your code for the `zx` prop, extracts the object literal, generates a unique class hash, creates CSS rules, and replaces the `zx` prop with a `className`.
 
 ### vs. Pigment CSS
+
 Both libraries aim for zero-runtime CSS-in-JS.
--   **Pigment CSS**: A more robust, complex solution often integrated with Next.js and MUI's ecosystem. It handles more complex dynamic scenarios but requires deeper integration. Also the project is not actively maintained at the moment.
--   **Style-ZX**: A lightweight, Vite-first approach. It focuses on simplicity and the specific `zx` prop API. It's easier to set up for simple Vite projects but may have fewer features than Pigment.
+
+- **Pigment CSS**: A more robust, complex solution often integrated with Next.js and MUI's ecosystem. It handles more complex dynamic scenarios but requires deeper integration. Also the project is not actively maintained at the moment.
+- **Style-ZX**: A lightweight, Vite-first approach. It focuses on simplicity and the specific `zx` prop API. It's easier to set up for simple Vite projects but may have fewer features than Pigment.
 
 ### vs. Emotion / Styled-Components
--   **Emotion/Styled-Components**: Runtime CSS-in-JS. They parse styles in the browser, generate classes, and inject tags. This offers great flexibility (dynamic props) but incurs a runtime performance cost (script execution + style recalculation).
--   **Style-ZX**: No runtime cost. The browser just loads a CSS file.
+
+- **Emotion/Styled-Components**: Runtime CSS-in-JS. They parse styles in the browser, generate classes, and inject tags. This offers great flexibility (dynamic props) but incurs a runtime performance cost (script execution + style recalculation).
+- **Style-ZX**: No runtime cost. The browser just loads a CSS file.
 
 ### vs. Tailwind CSS
--   **Tailwind**: Utility-first. You compose classes (`p-4 bg-white`).
--   **Style-ZX**: Object-based. You write CSS-like objects (`{ p: 16, bg: 'white' }`). This is often preferred by developers who like keeping styles colocated but find long class strings hard to read.
+
+- **Tailwind**: Utility-first. You compose classes (`p-4 bg-white`).
+- **Style-ZX**: Object-based. You write CSS-like objects (`{ p: 16, bg: 'white' }`). This is often preferred by developers who like keeping styles colocated but find long class strings hard to read.
 
 ## Caveats & Limitations
 
-1.  **Static Analysis Only**: The values in `zx` must be statically analyzable at build time.
-    -   ✅ `zx={{ color: 'red' }}`
-    -   ✅ `zx={{ color: '$theme.colors.primary' }}` (if theme is static)
-    -   ❌ `zx={{ color: props.color }}` (Dynamic props are **not** supported directly in the build step. Use CSS variables for dynamic values).
-2.  **Vite Only**: Currently designed specifically as a Vite plugin.
-3.  **No Dynamic Function Interpolations**: You cannot pass a function to `zx` that depends on runtime state.
+1. **Static Analysis Only**: The values in `zx` must be statically analyzable at build time.
+    - ✅ `zx={{ color: 'red' }}`
+    - ✅ `zx={{ color: '$theme.colors.primary' }}` (if theme is static)
+    - ❌ `zx={{ color: props.color }}` (Dynamic props are **not** supported directly in the build step. Use CSS variables for dynamic values).
+2. **Vite Only**: Currently designed specifically as a Vite plugin.
+3. **No Dynamic Function Interpolations**: You cannot pass a function to `zx` that depends on runtime state.
 
 ## Gains
 
--   **Performance**: Zero JS runtime for styles means faster TTI (Time to Interactive) and less main-thread work.
--   **Bundle Size**: The plugin itself is extremely small (~5KB), keeping your dev dependencies lean.
--   **Developer Experience**: Write styles in TypeScript right next to your components. Get autocomplete and type checking.
--   **Maintainability**: Styles are scoped and colocated, reducing dead code and global namespace pollution.
+- **Performance**: Zero JS runtime for styles means faster TTI (Time to Interactive) and less main-thread work.
+- **Bundle Size**: The plugin itself is extremely small (~5KB), keeping your dev dependencies lean.
+- **Developer Experience**: Write styles in TypeScript right next to your components. Get autocomplete and type checking.
+- **Maintainability**: Styles are scoped and colocated, reducing dead code and global namespace pollution.

package/dist/plugin.cjs

@@ -1,8 +1,8 @@
-"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}">
+"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+=`
+${o}`;continue}(E[r]||[r]).forEach(p=>{const o=j(p),i=N(p,u);n+=`
+  ${o}: ${i};`})}return n+=`
+}`,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+`
+`;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';
+`),{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(`
+`)}),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}">
 </head>`))}}}}]}module.exports=k;

package/dist/plugin.js

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

package/package.json

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