@salty-css/vite 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/README.md

@@ -0,0 +1,107 @@
+# Salty Css
+
+## Basic usage example with Button
+
+### Initial requirements
+
+1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
+2. Create `salty-config.ts` to the root of your project
+3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
+4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
+
+### Code examples
+
+**Salty config**
+
+```tsx
+import { defineConfig } from '@salty-css/core/config';
+
+export const config = defineConfig({
+  variables: {
+    colors: {
+      brand: '#111',
+      highlight: 'yellow',
+    },
+  },
+  global: {
+    html: {
+      backgroundColor: '#f8f8f8',
+    },
+  },
+});
+```
+
+**Your React component file**
+
+```tsx
+import { Wrapper } from '../components/wrapper/wrapper.css';
+import { Button } from '../components/button/button.css';
+
+export const IndexPage = () => {
+  return (
+    <Wrapper>
+      <Button variant="solid" onClick={() => alert('It is a button.')}>
+        Outlined
+      </Button>
+    </Wrapper>
+  );
+};
+```
+
+**Wrapper** (`components/wrapper/wrapper.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Wrapper = styled('div', {
+  display: 'block',
+  padding: '2vw',
+});
+```
+
+**Button** (`components/button/button.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Button = styled('button', {
+  display: 'block',
+  padding: `0.6em 1.2em`,
+  border: '1px solid currentColor',
+  background: 'transparent',
+  color: 'currentColor/40',
+  cursor: 'pointer',
+  transition: '200ms',
+  textDecoration: 'none',
+  '&:hover': {
+    background: 'black',
+    borderColor: 'black',
+    color: 'white',
+  },
+  '&:disabled': {
+    opacity: 0.25,
+    pointerEvents: 'none',
+  },
+  variants: {
+    variant: {
+      outlined: {
+        // same as default styles
+      },
+      solid: {
+        '&:not(:hover)': {
+          background: 'black',
+          borderColor: 'black',
+          color: 'white',
+        },
+        '&:hover': {
+          background: 'transparent',
+          borderColor: 'currentColor',
+          color: 'currentColor',
+        },
+      },
+    },
+  },
+});
+```
+
+More examples coming soon

package/dist/index.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("esbuild"),W=require("winston"),L=require("child_process"),y=require("path"),d=require("fs"),G=require("fs/promises");function R(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(s,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return s.default=t,Object.freeze(s)}const Z=R(K),x=R(W),q=t=>String.fromCharCode(t+(t>25?39:97)),U=(t,s)=>{let e="",n;for(n=Math.abs(t);n>52;n=n/52|0)e=q(n%52)+e;return e=q(n%52)+e,e.length<s?e=e.padStart(s,"a"):e.length>s&&(e=e.slice(-s)),e},X=(t,s)=>{let e=s.length;for(;e;)t=t*33^s.charCodeAt(--e);return t},E=(t,s=3)=>{const e=X(5381,JSON.stringify(t))>>>0;return U(e,s)};function V(t){return t?typeof t!="string"?String(t):t.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(s,e)=>(e>0?"-":"")+s.toLowerCase()):""}const Y=(t,s)=>{if(typeof t!="string")return{result:t};if(!s)return{result:t};const e=[];return Object.values(s).forEach(n=>{const{pattern:r,transform:g}=n;t=t.replace(r,$=>{const{value:a,css:f}=g($);return f&&e.push(f),a})}),{result:t,additionalCss:e}},I=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${V(n[1].replaceAll(".","-"))})`)}:{result:t},N=(t,s,e,n)=>{const r=[],g=Object.entries(t).reduce((a,[f,o])=>{const i=f.trim();if(typeof o=="function"&&(o=o()),typeof o=="object"){if(!o)return a;if(i==="variants")return Object.entries(o).forEach(([u,c])=>{c&&Object.entries(c).forEach(([m,l])=>{if(!l)return;const O=`${s}.${u}-${m}`,P=N(l,O);r.push(P)})}),a;if(i==="defaultVariants")return a;if(i==="compoundVariants")return o.forEach(u=>{const{css:c,...m}=u,l=Object.entries(m).reduce((P,[D,k])=>`${P}.${D}-${k}`,s),O=N(c,l);r.push(O)}),a;if(i.startsWith("@")){const u=N(o,s),c=`${i} {
+ ${u.replace(`
+`,`
+ `)}
+}`;return r.push(c),a}const h=f.includes("&")?i.replace("&",s):i.startsWith(":")?`${s}${i}`:`${s} ${i}`,F=N(o,h);return r.push(F),a}const p=i.startsWith("-")?i:V(i),b=(h,F=";")=>a=`${a}${h}${F}`,j=h=>b(`${p}:${h}`);if(typeof o=="number")return j(o);if(typeof o!="string")if("toString"in o)o=o.toString();else return a;const{modifiers:S}={},C=function*(){yield I(o),yield Y(o,S)}();for(const{result:h,additionalCss:F=[]}of C)o=h,F.forEach(u=>{const c=N(u,"");b(c,"")});return j(o)},"");if(!g)return r.join(`
+`);if(!s)return g;let $="";return $=`${s} { ${g} }`,[$,...r].join(`
+`)},z=(t,s=[])=>{const e=[],n={};if(Object.entries(t).forEach(([r,g])=>{if(typeof g=="object"){if(!g)return;const $=r.trim(),a=z(g,[...s,$]);e.push(a)}else n[r]=g}),Object.keys(n).length){const r=s.map(V).join("-"),g=N(n,`.${r}`);e.push(g)}return e.join(`
+`)};x.createLogger({level:"info",format:x.format.combine(x.format.colorize(),x.format.cli()),transports:[new x.transports.Console({})]});const T=t=>y.join(t,"./saltygen"),Q=["salty","css","styles","styled"],_=t=>new RegExp(`\\.(${Q.join("|")})\\.`).test(t),v=async t=>{const s=T(t),e=y.join(t,"salty-config.ts"),n=y.join(s,"salty-config.js");await Z.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",external:["react"]});const r=Date.now(),{config:g}=await import(`${n}?t=${r}`);return g},B=async t=>{const s=await v(t),e=new Set,n=(u,c=[])=>u?Object.entries(u).flatMap(([m,l])=>{if(!l)return;if(typeof l=="object")return n(l,[...c,m]);const O=[...c,m].join(".");e.add(`"${O}"`);const P=[...c.map(V),V(m)].join("-"),{result:D}=I(l);return`--${P}: ${D};`}):[],r=u=>u?Object.entries(u).flatMap(([c,m])=>{const l=n(m);return c==="base"?l.join(""):`${c} { ${l.join("")} }`}):[],g=u=>u?Object.entries(u).flatMap(([c,m])=>Object.entries(m).flatMap(([l,O])=>{const P=n(O,[c]),D=`.${c}-${l}, [data-${c}="${l}"]`,k=P.join("");return`${D} { ${k} }`})):[],$=n(s.variables),a=r(s.responsiveVariables),f=g(s.conditionalVariables),o=T(t),i=y.join(o,"css/variables.css"),p=`:root { ${$.join("")} ${a.join("")} } ${f.join("")}`;d.writeFileSync(i,p);const b=y.join(o,"types/css-tokens.d.ts"),S=`type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;d.writeFileSync(b,S);const w=y.join(o,"css/global.css"),C=N(s.global,"");d.writeFileSync(w,C);const h=y.join(o,"css/templates.css"),F=z(s.templates);d.writeFileSync(h,F)},A=async(t,s)=>{const e=E(t),n=y.join(s,"js",e+".js");await Z.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const r=Date.now();return await import(`${n}?t=${r}`)},M=async t=>{const s=T(t),e=y.join(s,"salty-config.js"),{config:n}=await import(e);return n},tt=async t=>{try{const s=[],e=[],n=T(t),r=y.join(n,"index.css");(()=>{d.existsSync(n)&&L.execSync("rm -rf "+n),d.mkdirSync(n),d.mkdirSync(y.join(n,"css")),d.mkdirSync(y.join(n,"types"))})(),await B(t);const $=await M(t);async function a(p,b){const j=d.statSync(p);if(j.isDirectory()){const S=d.readdirSync(p);await Promise.all(S.map(w=>a(y.join(p,w),y.join(b,w))))}else if(j.isFile()&&_(p)){const w=await A(p,n),C=[];Object.entries(w).forEach(([c,m])=>{if(m.isKeyframes&&m.css){const k=`${m.animationName}.css`,H=`css/${k}`,J=y.join(n,H);s.push(k),d.writeFileSync(J,m.css);return}if(!m.generator)return;const l=m.generator._withBuildContext({name:c,config:$}),O=`${l.hash}-${l.priority}.css`;e[l.priority]||(e[l.priority]=[]),e[l.priority].push(O),C.push(O);const P=`css/${O}`,D=y.join(n,P);d.writeFileSync(D,l.css)});const h=C.map(c=>`@import url('./${c}');`).join(`
+`),F=E(p,6),u=y.join(n,`css/${F}.css`);d.writeFileSync(u,h)}}await a(t,n);const f=s.map(p=>`@import url('./css/${p}');`).join(`
+`);let i=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
+`)}
+${f}`;if($.importStrategy!=="component"){const p=e.flat().map(b=>`@import url('./css/${b}');`).join(`
+`);i+=p}d.writeFileSync(r,i)}catch(s){console.error(s)}},st=async(t,s)=>{try{const e=[],n=y.join(t,"./saltygen"),r=y.join(n,"index.css");if(_(s)){const $=await M(t),a=await A(s,n);Object.entries(a).forEach(([b,j])=>{if(!j.generator)return;const S=j.generator._withBuildContext({name:b,config:$}),w=`${S.hash}-${S.priority}.css`,C=`css/${w}`,h=y.join(n,C);e.push(w),d.writeFileSync(h,S.css)});const f=d.readFileSync(r,"utf8").split(`
+`),o=e.map(b=>`@import url('../saltygen/css/${b}');`),p=[...new Set([...f,...o])].join(`
+`);d.writeFileSync(r,p)}}catch(e){console.error(e)}},et=async(t,s)=>{try{const e=y.join(t,"./saltygen");if(_(s)){let r=d.readFileSync(s,"utf8");r.replace(/^(?!export\s)const\s.*/gm,i=>`export ${i}`)!==r&&await G.writeFile(s,r);const $=await M(t),a=await A(s,e);let f=r;Object.entries(a).forEach(([i,p])=>{var u;if(p.isKeyframes){console.log("value",p);return}if(!p.generator)return;const b=p.generator._withBuildContext({name:i,config:$}),j=new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(r);if(!j)return console.error("Could not find the original declaration");const S=(u=j.at(1))==null?void 0:u.trim(),{element:w,variantKeys:C}=b.props,h=`${i} = styled(${S}, "${b.classNames}", "${b._callerName}", ${JSON.stringify(w)}, ${JSON.stringify(C)});`,F=new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");f=f.replace(F,h)});const o=E(s,6);return $.importStrategy==="component"&&(f=`import '../../saltygen/css/${o}.css';
+${f}`),f=f.replace("{ styled }","{ styledClient as styled }"),f=f.replace("@salty-css/react/styled","@salty-css/react/styled-client"),f}}catch(e){console.error(e)}},nt=t=>({name:"stylegen",buildStart:()=>tt(t),load:async s=>{if(s.includes(".salty."))return await et(t,s)},watchChange:{handler:async s=>{s.includes(".salty.")&&await st(t,s),s.includes("salty-config")&&await B(t)}}});exports.saltyPlugin=nt;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export declare const saltyPlugin: (dir: string) => {
+    name: string;
+    buildStart: () => Promise<void>;
+    load: (filePath: string) => Promise<string | undefined>;
+    watchChange: {
+        handler: (filePath: string) => Promise<void>;
+    };
+};

package/dist/index.js

@@ -0,0 +1,279 @@
+import * as I from "esbuild";
+import * as P from "winston";
+import { execSync as L } from "child_process";
+import { join as y } from "path";
+import { writeFileSync as x, existsSync as q, mkdirSync as T, statSync as G, readdirSync as U, readFileSync as B } from "fs";
+import { writeFile as X } from "fs/promises";
+const Z = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), Y = (t, s) => {
+  let e = "", n;
+  for (n = Math.abs(t); n > 52; n = n / 52 | 0) e = Z(n % 52) + e;
+  return e = Z(n % 52) + e, e.length < s ? e = e.padStart(s, "a") : e.length > s && (e = e.slice(-s)), e;
+}, Q = (t, s) => {
+  let e = s.length;
+  for (; e; ) t = t * 33 ^ s.charCodeAt(--e);
+  return t;
+}, A = (t, s = 3) => {
+  const e = Q(5381, JSON.stringify(t)) >>> 0;
+  return Y(e, s);
+};
+function k(t) {
+  return t ? typeof t != "string" ? String(t) : t.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, e) => (e > 0 ? "-" : "") + s.toLowerCase()) : "";
+}
+const v = (t, s) => {
+  if (typeof t != "string") return { result: t };
+  if (!s) return { result: t };
+  const e = [];
+  return Object.values(s).forEach((n) => {
+    const { pattern: r, transform: g } = n;
+    t = t.replace(r, ($) => {
+      const { value: a, css: f } = g($);
+      return f && e.push(f), a;
+    });
+  }), { result: t, additionalCss: e };
+}, H = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${k(n[1].replaceAll(".", "-"))})`) } : { result: t }, O = (t, s, e, n) => {
+  const r = [], g = Object.entries(t).reduce((a, [f, o]) => {
+    const i = f.trim();
+    if (typeof o == "function" && (o = o()), typeof o == "object") {
+      if (!o) return a;
+      if (i === "variants")
+        return Object.entries(o).forEach(([u, c]) => {
+          c && Object.entries(c).forEach(([m, l]) => {
+            if (!l) return;
+            const F = `${s}.${u}-${m}`, N = O(l, F);
+            r.push(N);
+          });
+        }), a;
+      if (i === "defaultVariants")
+        return a;
+      if (i === "compoundVariants")
+        return o.forEach((u) => {
+          const { css: c, ...m } = u, l = Object.entries(m).reduce((N, [D, V]) => `${N}.${D}-${V}`, s), F = O(c, l);
+          r.push(F);
+        }), a;
+      if (i.startsWith("@")) {
+        const u = O(o, s), c = `${i} {
+ ${u.replace(`
+`, `
+ `)}
+}`;
+        return r.push(c), a;
+      }
+      const d = f.includes("&") ? i.replace("&", s) : i.startsWith(":") ? `${s}${i}` : `${s} ${i}`, S = O(o, d);
+      return r.push(S), a;
+    }
+    const p = i.startsWith("-") ? i : k(i), h = (d, S = ";") => a = `${a}${d}${S}`, b = (d) => h(`${p}:${d}`);
+    if (typeof o == "number") return b(o);
+    if (typeof o != "string")
+      if ("toString" in o) o = o.toString();
+      else return a;
+    const { modifiers: j } = {}, C = function* () {
+      yield H(o), yield v(o, j);
+    }();
+    for (const { result: d, additionalCss: S = [] } of C)
+      o = d, S.forEach((u) => {
+        const c = O(u, "");
+        h(c, "");
+      });
+    return b(o);
+  }, "");
+  if (!g) return r.join(`
+`);
+  if (!s) return g;
+  let $ = "";
+  return $ = `${s} { ${g} }`, [$, ...r].join(`
+`);
+}, J = (t, s = []) => {
+  const e = [], n = {};
+  if (Object.entries(t).forEach(([r, g]) => {
+    if (typeof g == "object") {
+      if (!g) return;
+      const $ = r.trim(), a = J(g, [...s, $]);
+      e.push(a);
+    } else
+      n[r] = g;
+  }), Object.keys(n).length) {
+    const r = s.map(k).join("-"), g = O(n, `.${r}`);
+    e.push(g);
+  }
+  return e.join(`
+`);
+};
+P.createLogger({
+  level: "info",
+  format: P.format.combine(P.format.colorize(), P.format.cli()),
+  transports: [new P.transports.Console({})]
+});
+const E = (t) => y(t, "./saltygen"), tt = ["salty", "css", "styles", "styled"], M = (t) => new RegExp(`\\.(${tt.join("|")})\\.`).test(t), st = async (t) => {
+  const s = E(t), e = y(t, "salty-config.ts"), n = y(s, "salty-config.js");
+  await I.build({
+    entryPoints: [e],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: n,
+    format: "esm",
+    external: ["react"]
+  });
+  const r = Date.now(), { config: g } = await import(`${n}?t=${r}`);
+  return g;
+}, K = async (t) => {
+  const s = await st(t), e = /* @__PURE__ */ new Set(), n = (u, c = []) => u ? Object.entries(u).flatMap(([m, l]) => {
+    if (!l) return;
+    if (typeof l == "object") return n(l, [...c, m]);
+    const F = [...c, m].join(".");
+    e.add(`"${F}"`);
+    const N = [...c.map(k), k(m)].join("-"), { result: D } = H(l);
+    return `--${N}: ${D};`;
+  }) : [], r = (u) => u ? Object.entries(u).flatMap(([c, m]) => {
+    const l = n(m);
+    return c === "base" ? l.join("") : `${c} { ${l.join("")} }`;
+  }) : [], g = (u) => u ? Object.entries(u).flatMap(([c, m]) => Object.entries(m).flatMap(([l, F]) => {
+    const N = n(F, [c]), D = `.${c}-${l}, [data-${c}="${l}"]`, V = N.join("");
+    return `${D} { ${V} }`;
+  })) : [], $ = n(s.variables), a = r(s.responsiveVariables), f = g(s.conditionalVariables), o = E(t), i = y(o, "css/variables.css"), p = `:root { ${$.join("")} ${a.join("")} } ${f.join("")}`;
+  x(i, p);
+  const h = y(o, "types/css-tokens.d.ts"), j = `type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
+  x(h, j);
+  const w = y(o, "css/global.css"), C = O(s.global, "");
+  x(w, C);
+  const d = y(o, "css/templates.css"), S = J(s.templates);
+  x(d, S);
+}, R = async (t, s) => {
+  const e = A(t), n = y(s, "js", e + ".js");
+  await I.build({
+    entryPoints: [t],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: n,
+    format: "esm",
+    target: ["es2022"],
+    keepNames: !0,
+    external: ["react"]
+  });
+  const r = Date.now();
+  return await import(`${n}?t=${r}`);
+}, _ = async (t) => {
+  const s = E(t), e = y(s, "salty-config.js"), { config: n } = await import(e);
+  return n;
+}, et = async (t) => {
+  try {
+    const s = [], e = [], n = E(t), r = y(n, "index.css");
+    (() => {
+      q(n) && L("rm -rf " + n), T(n), T(y(n, "css")), T(y(n, "types"));
+    })(), await K(t);
+    const $ = await _(t);
+    async function a(p, h) {
+      const b = G(p);
+      if (b.isDirectory()) {
+        const j = U(p);
+        await Promise.all(j.map((w) => a(y(p, w), y(h, w))));
+      } else if (b.isFile() && M(p)) {
+        const w = await R(p, n), C = [];
+        Object.entries(w).forEach(([c, m]) => {
+          if (m.isKeyframes && m.css) {
+            const V = `${m.animationName}.css`, W = `css/${V}`, z = y(n, W);
+            s.push(V), x(z, m.css);
+            return;
+          }
+          if (!m.generator) return;
+          const l = m.generator._withBuildContext({
+            name: c,
+            config: $
+          }), F = `${l.hash}-${l.priority}.css`;
+          e[l.priority] || (e[l.priority] = []), e[l.priority].push(F), C.push(F);
+          const N = `css/${F}`, D = y(n, N);
+          x(D, l.css);
+        });
+        const d = C.map((c) => `@import url('./${c}');`).join(`
+`), S = A(p, 6), u = y(n, `css/${S}.css`);
+        x(u, d);
+      }
+    }
+    await a(t, n);
+    const f = s.map((p) => `@import url('./css/${p}');`).join(`
+`);
+    let i = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
+`)}
+${f}`;
+    if ($.importStrategy !== "component") {
+      const p = e.flat().map((h) => `@import url('./css/${h}');`).join(`
+`);
+      i += p;
+    }
+    x(r, i);
+  } catch (s) {
+    console.error(s);
+  }
+}, nt = async (t, s) => {
+  try {
+    const e = [], n = y(t, "./saltygen"), r = y(n, "index.css");
+    if (M(s)) {
+      const $ = await _(t), a = await R(s, n);
+      Object.entries(a).forEach(([h, b]) => {
+        if (!b.generator) return;
+        const j = b.generator._withBuildContext({
+          name: h,
+          config: $
+        }), w = `${j.hash}-${j.priority}.css`, C = `css/${w}`, d = y(n, C);
+        e.push(w), x(d, j.css);
+      });
+      const f = B(r, "utf8").split(`
+`), o = e.map((h) => `@import url('../saltygen/css/${h}');`), p = [.../* @__PURE__ */ new Set([...f, ...o])].join(`
+`);
+      x(r, p);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}, rt = async (t, s) => {
+  try {
+    const e = y(t, "./saltygen");
+    if (M(s)) {
+      let r = B(s, "utf8");
+      r.replace(/^(?!export\s)const\s.*/gm, (i) => `export ${i}`) !== r && await X(s, r);
+      const $ = await _(t), a = await R(s, e);
+      let f = r;
+      Object.entries(a).forEach(([i, p]) => {
+        var u;
+        if (p.isKeyframes) {
+          console.log("value", p);
+          return;
+        }
+        if (!p.generator) return;
+        const h = p.generator._withBuildContext({
+          name: i,
+          config: $
+        }), b = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(r);
+        if (!b)
+          return console.error("Could not find the original declaration");
+        const j = (u = b.at(1)) == null ? void 0 : u.trim(), { element: w, variantKeys: C } = h.props, d = `${i} = styled(${j}, "${h.classNames}", "${h._callerName}", ${JSON.stringify(w)}, ${JSON.stringify(
+          C
+        )});`, S = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
+        f = f.replace(S, d);
+      });
+      const o = A(s, 6);
+      return $.importStrategy === "component" && (f = `import '../../saltygen/css/${o}.css';
+${f}`), f = f.replace("{ styled }", "{ styledClient as styled }"), f = f.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), f;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+}, lt = (t) => ({
+  name: "stylegen",
+  buildStart: () => et(t),
+  load: async (s) => {
+    if (s.includes(".salty."))
+      return await rt(t, s);
+  },
+  watchChange: {
+    handler: async (s) => {
+      s.includes(".salty.") && await nt(t, s), s.includes("salty-config") && await K(t);
+    }
+  }
+});
+export {
+  lt as saltyPlugin
+};

package/dist/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@salty-css/vite",
+  "version": "0.0.1-alpha.3",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "typings": "./dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/margarita-form/salty-css",
+  "bugs": {
+    "url": "https://github.com/margarita-form/salty-css/issues"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "vite"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/vite",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",