@salty-css/webpack 0.0.1-alpha.10 → 0.0.1-alpha.12

package/index.cjs

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

package/index.d.ts

@@ -1,7 +1,2 @@
-import { LoaderContext } from 'webpack';
-interface SaltyLoaderOptions {
-    dir: string;
-}
-type WebpackLoaderThis = LoaderContext<SaltyLoaderOptions>;
-export default function (this: WebpackLoaderThis): Promise<string | undefined>;
-export {};
+import { Configuration } from 'webpack';
+export declare const saltyPlugin: (config: Configuration, dir: string) => void;

package/index.js

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

package/loader.d.ts

@@ -0,0 +1,7 @@
+import { LoaderContext } from 'webpack';
+interface SaltyLoaderOptions {
+    dir: string;
+}
+type WebpackLoaderThis = LoaderContext<SaltyLoaderOptions>;
+export default function (this: WebpackLoaderThis): Promise<string | undefined>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/webpack",
-  "version": "0.0.1-alpha.10",
+  "version": "0.0.1-alpha.12",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -19,6 +19,7 @@
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/webpack/src",
     "name": "webpack"
   },
   "exports": {