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

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.
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  ### Initial requirements
6
6
 
7
7
  1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
8
- 2. Create `salty-config.ts` to the root of your project
8
+ 2. Create `salty.config.ts` to the root of your project
9
9
  3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
10
10
  4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
11
11
 
@@ -54,8 +54,10 @@ export const IndexPage = () => {
54
54
  import { styled } from '@salty-css/react/styled';
55
55
 
56
56
  export const Wrapper = styled('div', {
57
- display: 'block',
58
- padding: '2vw',
57
+ base: {
58
+ display: 'block',
59
+ padding: '2vw',
60
+ },
59
61
  });
60
62
  ```
61
63
 
@@ -65,22 +67,24 @@ export const Wrapper = styled('div', {
65
67
  import { styled } from '@salty-css/react/styled';
66
68
 
67
69
  export const Button = styled('button', {
68
- display: 'block',
69
- padding: `0.6em 1.2em`,
70
- border: '1px solid currentColor',
71
- background: 'transparent',
72
- color: 'currentColor/40',
73
- cursor: 'pointer',
74
- transition: '200ms',
75
- textDecoration: 'none',
76
- '&:hover': {
77
- background: 'black',
78
- borderColor: 'black',
79
- color: 'white',
80
- },
81
- '&:disabled': {
82
- opacity: 0.25,
83
- pointerEvents: 'none',
70
+ base: {
71
+ display: 'block',
72
+ padding: `0.6em 1.2em`,
73
+ border: '1px solid currentColor',
74
+ background: 'transparent',
75
+ color: 'currentColor/40',
76
+ cursor: 'pointer',
77
+ transition: '200ms',
78
+ textDecoration: 'none',
79
+ '&:hover': {
80
+ background: 'black',
81
+ borderColor: 'black',
82
+ color: 'white',
83
+ },
84
+ '&:disabled': {
85
+ opacity: 0.25,
86
+ pointerEvents: 'none',
87
+ },
84
88
  },
85
89
  variants: {
86
90
  variant: {
package/index.cjs ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("esbuild"),z=require("child_process"),u=require("path"),m=require("fs"),J=require("fs/promises");function K(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 R=K(W),M=t=>String.fromCharCode(t+(t>25?39:97)),G=(t,s)=>{let e="",n;for(n=Math.abs(t);n>52;n=n/52|0)e=M(n%52)+e;return e=M(n%52)+e,e.length<s?e=e.padStart(s,"a"):e.length>s&&(e=e.slice(-s)),e},L=(t,s)=>{let e=s.length;for(;e;)t=t*33^s.charCodeAt(--e);return t},E=(t,s=3)=>{const e=L(5381,JSON.stringify(t))>>>0;return G(e,s)};function N(t){return t?typeof t!="string"?N(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:r,transform:y}=n;t=t.replace(r,$=>{const{value:a,css:f}=y($);return f&&e.push(f),a})}),{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},D=(t,s,e,n)=>{if(!t)return"";const r=[],y=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(([g,c])=>{c&&Object.entries(c).forEach(([d,l])=>{if(!l)return;const F=`${s}.${g}-${d}`,P=D(l,F);r.push(P)})}),a;if(i==="defaultVariants")return a;if(i==="compoundVariants")return o.forEach(g=>{const{css:c,...d}=g,l=Object.entries(d).reduce((P,[x,k])=>`${P}.${x}-${k}`,s),F=D(c,l);r.push(F)}),a;if(i.startsWith("@")){const g=D(o,s),c=`${i} {
2
+ ${g.replace(`
3
+ `,`
4
+ `)}
5
+ }`;return r.push(c),a}const b=f.includes("&")?i.replace("&",s):i.startsWith(":")?`${s}${i}`:`${s} ${i}`,C=D(o,b);return r.push(C),a}const p=i.startsWith("-")?i:N(i),h=(b,C=";")=>a=`${a}${b}${C}`,j=b=>h(`${p}:${b}`);if(typeof o=="number")return j(o);if(typeof o!="string")if("toString"in o)o=o.toString();else return a;const{modifiers:S}={},O=function*(){yield q(o),yield U(o,S)}();for(const{result:b,additionalCss:C=[]}of O)o=b,C.forEach(g=>{const c=D(g,"");h(c,"")});return j(o)},"");if(!y)return r.join(`
6
+ `);if(!s)return y;let $="";return $=`${s} { ${y} }`,[$,...r].join(`
7
+ `)},Z=(t,s=[])=>{if(!t)return"";const e=[],n={};if(Object.entries(t).forEach(([r,y])=>{if(typeof y=="object"){if(!y)return;const $=r.trim(),a=Z(y,[...s,$]);e.push(a)}else n[r]=y}),Object.keys(n).length){const r=s.map(N).join("-"),y=D(n,`.${r}`);e.push(y)}return e.join(`
8
+ `)},T=t=>u.join(t,"./saltygen"),X=["salty","css","styles","styled"],Y=(t=[])=>new RegExp(`\\.(${[...X,...t].join("|")})\\.`),V=(t,s=[])=>Y(s).test(t),Q=async t=>{const s=T(t),e=u.join(t,"salty.config.ts"),n=u.join(s,"salty.config.js");await R.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",external:["react"]});const r=Date.now(),{config:y}=await import(`${n}?t=${r}`);return y},I=async t=>{const s=await Q(t),e=new Set,n=(g,c=[])=>g?Object.entries(g).flatMap(([d,l])=>{if(!l)return;if(typeof l=="object")return n(l,[...c,d]);const F=[...c,d].join(".");e.add(`"${F}"`);const P=[...c.map(N),N(d)].join("-"),{result:x}=q(l);return`--${P}: ${x};`}):[],r=g=>g?Object.entries(g).flatMap(([c,d])=>{const l=n(d);return c==="base"?l.join(""):`${c} { ${l.join("")} }`}):[],y=g=>g?Object.entries(g).flatMap(([c,d])=>Object.entries(d).flatMap(([l,F])=>{const P=n(F,[c]),x=`.${c}-${l}, [data-${c}="${l}"]`,k=P.join("");return`${x} { ${k} }`})):[],$=n(s.variables),a=r(s.responsiveVariables),f=y(s.conditionalVariables),o=T(t),i=u.join(o,"css/variables.css"),p=`:root { ${$.join("")} ${a.join("")} } ${f.join("")}`;m.writeFileSync(i,p);const h=u.join(o,"types/css-tokens.d.ts"),S=`type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;m.writeFileSync(h,S);const w=u.join(o,"css/global.css"),O=D(s.global,"");m.writeFileSync(w,O);const b=u.join(o,"css/templates.css"),C=Z(s.templates);m.writeFileSync(b,C)},_=async(t,s)=>{const e=E(t),n=u.join(s,"js",e+".js");await R.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}`)},A=async t=>{const s=T(t),e=u.join(s,"salty.config.js"),{config:n}=await import(e);return n},v=async t=>{try{const s=[],e=[],n=T(t),r=u.join(n,"index.css");(()=>{m.existsSync(n)&&z.execSync("rm -rf "+n),m.mkdirSync(n),m.mkdirSync(u.join(n,"css")),m.mkdirSync(u.join(n,"types"))})(),await I(t);const $=await A(t);async function a(p,h){const j=m.statSync(p);if(j.isDirectory()){const S=m.readdirSync(p);await Promise.all(S.map(w=>a(u.join(p,w),u.join(h,w))))}else if(j.isFile()&&V(p)){const w=await _(p,n),O=[];Object.entries(w).forEach(([c,d])=>{if(d.isKeyframes&&d.css){const k=`${d.animationName}.css`,B=`css/${k}`,H=u.join(n,B);s.push(k),m.writeFileSync(H,d.css);return}if(!d.generator)return;const l=d.generator._withBuildContext({name:c,config:$}),F=`${l.hash}-${l.priority}.css`;e[l.priority]||(e[l.priority]=[]),e[l.priority].push(F),O.push(F);const P=`css/${F}`,x=u.join(n,P);m.writeFileSync(x,l.css)});const b=O.map(c=>`@import url('./${c}');`).join(`
9
+ `),C=E(p,6),g=u.join(n,`css/${C}.css`);m.writeFileSync(g,b)}}await a(t,n);const f=s.map(p=>`@import url('./css/${p}');`).join(`
10
+ `);let i=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
11
+
12
+ ${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
13
+ `)}
14
+ ${f}`;if($.importStrategy!=="component"){const p=e.flat().map(h=>`@import url('./css/${h}');`).join(`
15
+ `);i+=p}m.writeFileSync(r,i)}catch(s){console.error(s)}},tt=async(t,s)=>{try{const e=[],n=u.join(t,"./saltygen"),r=u.join(n,"index.css");if(V(s)){const $=await A(t),a=await _(s,n);Object.entries(a).forEach(([h,j])=>{if(!j.generator)return;const S=j.generator._withBuildContext({name:h,config:$}),w=`${S.hash}-${S.priority}.css`,O=`css/${w}`,b=u.join(n,O);e.push(w),m.writeFileSync(b,S.css)});const f=m.readFileSync(r,"utf8").split(`
16
+ `),o=e.map(h=>`@import url('../saltygen/css/${h}');`),p=[...new Set([...f,...o])].join(`
17
+ `);m.writeFileSync(r,p)}}catch(e){console.error(e)}},st=async(t,s)=>{try{const e=u.join(t,"./saltygen");if(V(s)){const r=m.readFileSync(s,"utf8");r.replace(/^(?!export\s)const\s.*/gm,i=>`export ${i}`)!==r&&await J.writeFile(s,r);const $=await A(t),a=await _(s,e);let f=r;Object.entries(a).forEach(([i,p])=>{var b;if(p.isKeyframes){console.log("value",p);return}if(!p.generator)return;const h=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=(b=j.at(1))==null?void 0:b.trim(),w=`${i} = styled(${S}, "${h.classNames}", "${h._callerName}", ${JSON.stringify(h.props)});`,O=new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");f=f.replace(O,w)});const o=E(s,6);return $.importStrategy==="component"&&(f=`import '../../saltygen/css/${o}.css';
18
+ ${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)}},et=t=>({name:"stylegen",buildStart:()=>v(t),load:async s=>{if(V(s))return await st(t,s)},watchChange:{handler:async s=>{V(s)&&await tt(t,s),s.includes("salty.config")&&await I(t)}}});exports.saltyPlugin=et;
package/index.js ADDED
@@ -0,0 +1,272 @@
1
+ import * as Z from "esbuild";
2
+ import { execSync as q } from "child_process";
3
+ import { join as u } from "path";
4
+ import { writeFileSync as C, existsSync as z, mkdirSync as T, statSync as G, readdirSync as L, readFileSync as I } from "fs";
5
+ import { writeFile as U } from "fs/promises";
6
+ const _ = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), X = (t, s) => {
7
+ let e = "", n;
8
+ for (n = Math.abs(t); n > 52; n = n / 52 | 0) e = _(n % 52) + e;
9
+ return e = _(n % 52) + e, e.length < s ? e = e.padStart(s, "a") : e.length > s && (e = e.slice(-s)), e;
10
+ }, Y = (t, s) => {
11
+ let e = s.length;
12
+ for (; e; ) t = t * 33 ^ s.charCodeAt(--e);
13
+ return t;
14
+ }, A = (t, s = 3) => {
15
+ const e = Y(5381, JSON.stringify(t)) >>> 0;
16
+ return X(e, s);
17
+ };
18
+ function V(t) {
19
+ return t ? typeof t != "string" ? V(String(t)) : t.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, e) => (e > 0 ? "-" : "") + s.toLowerCase()) : "";
20
+ }
21
+ const Q = (t, s) => {
22
+ if (typeof t != "string") return { result: t };
23
+ if (!s) return { result: t };
24
+ const e = [];
25
+ return Object.values(s).forEach((n) => {
26
+ const { pattern: r, transform: y } = n;
27
+ t = t.replace(r, ($) => {
28
+ const { value: a, css: f } = y($);
29
+ return f && e.push(f), a;
30
+ });
31
+ }), { result: t, additionalCss: e };
32
+ }, B = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${V(n[1].replaceAll(".", "-"))})`) } : { result: t }, O = (t, s, e, n) => {
33
+ if (!t) return "";
34
+ const r = [], y = Object.entries(t).reduce((a, [f, o]) => {
35
+ const i = f.trim();
36
+ if (typeof o == "function" && (o = o()), typeof o == "object") {
37
+ if (!o) return a;
38
+ if (i === "variants")
39
+ return Object.entries(o).forEach(([g, c]) => {
40
+ c && Object.entries(c).forEach(([m, l]) => {
41
+ if (!l) return;
42
+ const S = `${s}.${g}-${m}`, D = O(l, S);
43
+ r.push(D);
44
+ });
45
+ }), a;
46
+ if (i === "defaultVariants")
47
+ return a;
48
+ if (i === "compoundVariants")
49
+ return o.forEach((g) => {
50
+ const { css: c, ...m } = g, l = Object.entries(m).reduce((D, [N, P]) => `${D}.${N}-${P}`, s), S = O(c, l);
51
+ r.push(S);
52
+ }), a;
53
+ if (i.startsWith("@")) {
54
+ const g = O(o, s), c = `${i} {
55
+ ${g.replace(`
56
+ `, `
57
+ `)}
58
+ }`;
59
+ return r.push(c), a;
60
+ }
61
+ const d = f.includes("&") ? i.replace("&", s) : i.startsWith(":") ? `${s}${i}` : `${s} ${i}`, x = O(o, d);
62
+ return r.push(x), a;
63
+ }
64
+ const p = i.startsWith("-") ? i : V(i), h = (d, x = ";") => a = `${a}${d}${x}`, b = (d) => h(`${p}:${d}`);
65
+ if (typeof o == "number") return b(o);
66
+ if (typeof o != "string")
67
+ if ("toString" in o) o = o.toString();
68
+ else return a;
69
+ const { modifiers: j } = {}, F = function* () {
70
+ yield B(o), yield Q(o, j);
71
+ }();
72
+ for (const { result: d, additionalCss: x = [] } of F)
73
+ o = d, x.forEach((g) => {
74
+ const c = O(g, "");
75
+ h(c, "");
76
+ });
77
+ return b(o);
78
+ }, "");
79
+ if (!y) return r.join(`
80
+ `);
81
+ if (!s) return y;
82
+ let $ = "";
83
+ return $ = `${s} { ${y} }`, [$, ...r].join(`
84
+ `);
85
+ }, H = (t, s = []) => {
86
+ if (!t) return "";
87
+ const e = [], n = {};
88
+ if (Object.entries(t).forEach(([r, y]) => {
89
+ if (typeof y == "object") {
90
+ if (!y) return;
91
+ const $ = r.trim(), a = H(y, [...s, $]);
92
+ e.push(a);
93
+ } else
94
+ n[r] = y;
95
+ }), Object.keys(n).length) {
96
+ const r = s.map(V).join("-"), y = O(n, `.${r}`);
97
+ e.push(y);
98
+ }
99
+ return e.join(`
100
+ `);
101
+ }, E = (t) => u(t, "./saltygen"), v = ["salty", "css", "styles", "styled"], tt = (t = []) => new RegExp(`\\.(${[...v, ...t].join("|")})\\.`), k = (t, s = []) => tt(s).test(t), st = async (t) => {
102
+ const s = E(t), e = u(t, "salty.config.ts"), n = u(s, "salty.config.js");
103
+ await Z.build({
104
+ entryPoints: [e],
105
+ minify: !0,
106
+ treeShaking: !0,
107
+ bundle: !0,
108
+ outfile: n,
109
+ format: "esm",
110
+ external: ["react"]
111
+ });
112
+ const r = Date.now(), { config: y } = await import(`${n}?t=${r}`);
113
+ return y;
114
+ }, W = async (t) => {
115
+ const s = await st(t), e = /* @__PURE__ */ new Set(), n = (g, c = []) => g ? Object.entries(g).flatMap(([m, l]) => {
116
+ if (!l) return;
117
+ if (typeof l == "object") return n(l, [...c, m]);
118
+ const S = [...c, m].join(".");
119
+ e.add(`"${S}"`);
120
+ const D = [...c.map(V), V(m)].join("-"), { result: N } = B(l);
121
+ return `--${D}: ${N};`;
122
+ }) : [], r = (g) => g ? Object.entries(g).flatMap(([c, m]) => {
123
+ const l = n(m);
124
+ return c === "base" ? l.join("") : `${c} { ${l.join("")} }`;
125
+ }) : [], y = (g) => g ? Object.entries(g).flatMap(([c, m]) => Object.entries(m).flatMap(([l, S]) => {
126
+ const D = n(S, [c]), N = `.${c}-${l}, [data-${c}="${l}"]`, P = D.join("");
127
+ return `${N} { ${P} }`;
128
+ })) : [], $ = n(s.variables), a = r(s.responsiveVariables), f = y(s.conditionalVariables), o = E(t), i = u(o, "css/variables.css"), p = `:root { ${$.join("")} ${a.join("")} } ${f.join("")}`;
129
+ C(i, p);
130
+ const h = u(o, "types/css-tokens.d.ts"), j = `type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
131
+ C(h, j);
132
+ const w = u(o, "css/global.css"), F = O(s.global, "");
133
+ C(w, F);
134
+ const d = u(o, "css/templates.css"), x = H(s.templates);
135
+ C(d, x);
136
+ }, R = async (t, s) => {
137
+ const e = A(t), n = u(s, "js", e + ".js");
138
+ await Z.build({
139
+ entryPoints: [t],
140
+ minify: !0,
141
+ treeShaking: !0,
142
+ bundle: !0,
143
+ outfile: n,
144
+ format: "esm",
145
+ target: ["es2022"],
146
+ keepNames: !0,
147
+ external: ["react"]
148
+ });
149
+ const r = Date.now();
150
+ return await import(`${n}?t=${r}`);
151
+ }, M = async (t) => {
152
+ const s = E(t), e = u(s, "salty.config.js"), { config: n } = await import(e);
153
+ return n;
154
+ }, et = async (t) => {
155
+ try {
156
+ const s = [], e = [], n = E(t), r = u(n, "index.css");
157
+ (() => {
158
+ z(n) && q("rm -rf " + n), T(n), T(u(n, "css")), T(u(n, "types"));
159
+ })(), await W(t);
160
+ const $ = await M(t);
161
+ async function a(p, h) {
162
+ const b = G(p);
163
+ if (b.isDirectory()) {
164
+ const j = L(p);
165
+ await Promise.all(j.map((w) => a(u(p, w), u(h, w))));
166
+ } else if (b.isFile() && k(p)) {
167
+ const w = await R(p, n), F = [];
168
+ Object.entries(w).forEach(([c, m]) => {
169
+ if (m.isKeyframes && m.css) {
170
+ const P = `${m.animationName}.css`, J = `css/${P}`, K = u(n, J);
171
+ s.push(P), C(K, m.css);
172
+ return;
173
+ }
174
+ if (!m.generator) return;
175
+ const l = m.generator._withBuildContext({
176
+ name: c,
177
+ config: $
178
+ }), S = `${l.hash}-${l.priority}.css`;
179
+ e[l.priority] || (e[l.priority] = []), e[l.priority].push(S), F.push(S);
180
+ const D = `css/${S}`, N = u(n, D);
181
+ C(N, l.css);
182
+ });
183
+ const d = F.map((c) => `@import url('./${c}');`).join(`
184
+ `), x = A(p, 6), g = u(n, `css/${x}.css`);
185
+ C(g, d);
186
+ }
187
+ }
188
+ await a(t, n);
189
+ const f = s.map((p) => `@import url('./css/${p}');`).join(`
190
+ `);
191
+ let i = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
192
+
193
+ ${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
194
+ `)}
195
+ ${f}`;
196
+ if ($.importStrategy !== "component") {
197
+ const p = e.flat().map((h) => `@import url('./css/${h}');`).join(`
198
+ `);
199
+ i += p;
200
+ }
201
+ C(r, i);
202
+ } catch (s) {
203
+ console.error(s);
204
+ }
205
+ }, nt = async (t, s) => {
206
+ try {
207
+ const e = [], n = u(t, "./saltygen"), r = u(n, "index.css");
208
+ if (k(s)) {
209
+ const $ = await M(t), a = await R(s, n);
210
+ Object.entries(a).forEach(([h, b]) => {
211
+ if (!b.generator) return;
212
+ const j = b.generator._withBuildContext({
213
+ name: h,
214
+ config: $
215
+ }), w = `${j.hash}-${j.priority}.css`, F = `css/${w}`, d = u(n, F);
216
+ e.push(w), C(d, j.css);
217
+ });
218
+ const f = I(r, "utf8").split(`
219
+ `), o = e.map((h) => `@import url('../saltygen/css/${h}');`), p = [.../* @__PURE__ */ new Set([...f, ...o])].join(`
220
+ `);
221
+ C(r, p);
222
+ }
223
+ } catch (e) {
224
+ console.error(e);
225
+ }
226
+ }, rt = async (t, s) => {
227
+ try {
228
+ const e = u(t, "./saltygen");
229
+ if (k(s)) {
230
+ const r = I(s, "utf8");
231
+ r.replace(/^(?!export\s)const\s.*/gm, (i) => `export ${i}`) !== r && await U(s, r);
232
+ const $ = await M(t), a = await R(s, e);
233
+ let f = r;
234
+ Object.entries(a).forEach(([i, p]) => {
235
+ var d;
236
+ if (p.isKeyframes) {
237
+ console.log("value", p);
238
+ return;
239
+ }
240
+ if (!p.generator) return;
241
+ const h = p.generator._withBuildContext({
242
+ name: i,
243
+ config: $
244
+ }), b = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(r);
245
+ if (!b)
246
+ return console.error("Could not find the original declaration");
247
+ const j = (d = b.at(1)) == null ? void 0 : d.trim(), w = `${i} = styled(${j}, "${h.classNames}", "${h._callerName}", ${JSON.stringify(h.props)});`, F = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
248
+ f = f.replace(F, w);
249
+ });
250
+ const o = A(s, 6);
251
+ return $.importStrategy === "component" && (f = `import '../../saltygen/css/${o}.css';
252
+ ${f}`), f = f.replace("{ styled }", "{ styledClient as styled }"), f = f.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), f;
253
+ }
254
+ } catch (e) {
255
+ console.error(e);
256
+ }
257
+ }, lt = (t) => ({
258
+ name: "stylegen",
259
+ buildStart: () => et(t),
260
+ load: async (s) => {
261
+ if (k(s))
262
+ return await rt(t, s);
263
+ },
264
+ watchChange: {
265
+ handler: async (s) => {
266
+ k(s) && await nt(t, s), s.includes("salty.config") && await W(t);
267
+ }
268
+ }
269
+ });
270
+ export {
271
+ lt as saltyPlugin
272
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/vite",
3
- "version": "0.0.1-alpha.3",
3
+ "version": "0.0.1-alpha.30",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -15,10 +15,11 @@
15
15
  "url": "https://github.com/margarita-form/salty-css/issues"
16
16
  },
17
17
  "files": [
18
- "dist",
18
+ "**/*",
19
19
  "!**/*.tsbuildinfo"
20
20
  ],
21
21
  "nx": {
22
+ "sourceRoot": "libs/vite/src",
22
23
  "name": "vite"
23
24
  },
24
25
  "exports": {
@@ -26,5 +27,8 @@
26
27
  "import": "./index.js",
27
28
  "require": "./index.cjs"
28
29
  }
30
+ },
31
+ "dependencies": {
32
+ "@salty-css/core": "^0.0.1-alpha.30"
29
33
  }
30
34
  }
package/dist/README.md DELETED
@@ -1,107 +0,0 @@
1
- # Salty Css
2
-
3
- ## Basic usage example with Button
4
-
5
- ### Initial requirements
6
-
7
- 1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
8
- 2. Create `salty-config.ts` to the root of your project
9
- 3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
10
- 4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
11
-
12
- ### Code examples
13
-
14
- **Salty config**
15
-
16
- ```tsx
17
- import { defineConfig } from '@salty-css/core/config';
18
-
19
- export const config = defineConfig({
20
- variables: {
21
- colors: {
22
- brand: '#111',
23
- highlight: 'yellow',
24
- },
25
- },
26
- global: {
27
- html: {
28
- backgroundColor: '#f8f8f8',
29
- },
30
- },
31
- });
32
- ```
33
-
34
- **Your React component file**
35
-
36
- ```tsx
37
- import { Wrapper } from '../components/wrapper/wrapper.css';
38
- import { Button } from '../components/button/button.css';
39
-
40
- export const IndexPage = () => {
41
- return (
42
- <Wrapper>
43
- <Button variant="solid" onClick={() => alert('It is a button.')}>
44
- Outlined
45
- </Button>
46
- </Wrapper>
47
- );
48
- };
49
- ```
50
-
51
- **Wrapper** (`components/wrapper/wrapper.css.ts`)
52
-
53
- ```tsx
54
- import { styled } from '@salty-css/react/styled';
55
-
56
- export const Wrapper = styled('div', {
57
- display: 'block',
58
- padding: '2vw',
59
- });
60
- ```
61
-
62
- **Button** (`components/button/button.css.ts`)
63
-
64
- ```tsx
65
- import { styled } from '@salty-css/react/styled';
66
-
67
- export const Button = styled('button', {
68
- display: 'block',
69
- padding: `0.6em 1.2em`,
70
- border: '1px solid currentColor',
71
- background: 'transparent',
72
- color: 'currentColor/40',
73
- cursor: 'pointer',
74
- transition: '200ms',
75
- textDecoration: 'none',
76
- '&:hover': {
77
- background: 'black',
78
- borderColor: 'black',
79
- color: 'white',
80
- },
81
- '&:disabled': {
82
- opacity: 0.25,
83
- pointerEvents: 'none',
84
- },
85
- variants: {
86
- variant: {
87
- outlined: {
88
- // same as default styles
89
- },
90
- solid: {
91
- '&:not(:hover)': {
92
- background: 'black',
93
- borderColor: 'black',
94
- color: 'white',
95
- },
96
- '&:hover': {
97
- background: 'transparent',
98
- borderColor: 'currentColor',
99
- color: 'currentColor',
100
- },
101
- },
102
- },
103
- },
104
- });
105
- ```
106
-
107
- More examples coming soon
package/dist/index.cjs DELETED
@@ -1,18 +0,0 @@
1
- "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} {
2
- ${u.replace(`
3
- `,`
4
- `)}
5
- }`;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(`
6
- `);if(!s)return g;let $="";return $=`${s} { ${g} }`,[$,...r].join(`
7
- `)},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(`
8
- `)};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(`
9
- `),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(`
10
- `);let i=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
11
-
12
- ${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
13
- `)}
14
- ${f}`;if($.importStrategy!=="component"){const p=e.flat().map(b=>`@import url('./css/${b}');`).join(`
15
- `);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(`
16
- `),o=e.map(b=>`@import url('../saltygen/css/${b}');`),p=[...new Set([...f,...o])].join(`
17
- `);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';
18
- ${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.js DELETED
@@ -1,279 +0,0 @@
1
- import * as I from "esbuild";
2
- import * as P from "winston";
3
- import { execSync as L } from "child_process";
4
- import { join as y } from "path";
5
- import { writeFileSync as x, existsSync as q, mkdirSync as T, statSync as G, readdirSync as U, readFileSync as B } from "fs";
6
- import { writeFile as X } from "fs/promises";
7
- const Z = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), Y = (t, s) => {
8
- let e = "", n;
9
- for (n = Math.abs(t); n > 52; n = n / 52 | 0) e = Z(n % 52) + e;
10
- return e = Z(n % 52) + e, e.length < s ? e = e.padStart(s, "a") : e.length > s && (e = e.slice(-s)), e;
11
- }, Q = (t, s) => {
12
- let e = s.length;
13
- for (; e; ) t = t * 33 ^ s.charCodeAt(--e);
14
- return t;
15
- }, A = (t, s = 3) => {
16
- const e = Q(5381, JSON.stringify(t)) >>> 0;
17
- return Y(e, s);
18
- };
19
- function k(t) {
20
- 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()) : "";
21
- }
22
- const v = (t, s) => {
23
- if (typeof t != "string") return { result: t };
24
- if (!s) return { result: t };
25
- const e = [];
26
- return Object.values(s).forEach((n) => {
27
- const { pattern: r, transform: g } = n;
28
- t = t.replace(r, ($) => {
29
- const { value: a, css: f } = g($);
30
- return f && e.push(f), a;
31
- });
32
- }), { result: t, additionalCss: e };
33
- }, 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) => {
34
- const r = [], g = Object.entries(t).reduce((a, [f, o]) => {
35
- const i = f.trim();
36
- if (typeof o == "function" && (o = o()), typeof o == "object") {
37
- if (!o) return a;
38
- if (i === "variants")
39
- return Object.entries(o).forEach(([u, c]) => {
40
- c && Object.entries(c).forEach(([m, l]) => {
41
- if (!l) return;
42
- const F = `${s}.${u}-${m}`, N = O(l, F);
43
- r.push(N);
44
- });
45
- }), a;
46
- if (i === "defaultVariants")
47
- return a;
48
- if (i === "compoundVariants")
49
- return o.forEach((u) => {
50
- const { css: c, ...m } = u, l = Object.entries(m).reduce((N, [D, V]) => `${N}.${D}-${V}`, s), F = O(c, l);
51
- r.push(F);
52
- }), a;
53
- if (i.startsWith("@")) {
54
- const u = O(o, s), c = `${i} {
55
- ${u.replace(`
56
- `, `
57
- `)}
58
- }`;
59
- return r.push(c), a;
60
- }
61
- const d = f.includes("&") ? i.replace("&", s) : i.startsWith(":") ? `${s}${i}` : `${s} ${i}`, S = O(o, d);
62
- return r.push(S), a;
63
- }
64
- const p = i.startsWith("-") ? i : k(i), h = (d, S = ";") => a = `${a}${d}${S}`, b = (d) => h(`${p}:${d}`);
65
- if (typeof o == "number") return b(o);
66
- if (typeof o != "string")
67
- if ("toString" in o) o = o.toString();
68
- else return a;
69
- const { modifiers: j } = {}, C = function* () {
70
- yield H(o), yield v(o, j);
71
- }();
72
- for (const { result: d, additionalCss: S = [] } of C)
73
- o = d, S.forEach((u) => {
74
- const c = O(u, "");
75
- h(c, "");
76
- });
77
- return b(o);
78
- }, "");
79
- if (!g) return r.join(`
80
- `);
81
- if (!s) return g;
82
- let $ = "";
83
- return $ = `${s} { ${g} }`, [$, ...r].join(`
84
- `);
85
- }, J = (t, s = []) => {
86
- const e = [], n = {};
87
- if (Object.entries(t).forEach(([r, g]) => {
88
- if (typeof g == "object") {
89
- if (!g) return;
90
- const $ = r.trim(), a = J(g, [...s, $]);
91
- e.push(a);
92
- } else
93
- n[r] = g;
94
- }), Object.keys(n).length) {
95
- const r = s.map(k).join("-"), g = O(n, `.${r}`);
96
- e.push(g);
97
- }
98
- return e.join(`
99
- `);
100
- };
101
- P.createLogger({
102
- level: "info",
103
- format: P.format.combine(P.format.colorize(), P.format.cli()),
104
- transports: [new P.transports.Console({})]
105
- });
106
- const E = (t) => y(t, "./saltygen"), tt = ["salty", "css", "styles", "styled"], M = (t) => new RegExp(`\\.(${tt.join("|")})\\.`).test(t), st = async (t) => {
107
- const s = E(t), e = y(t, "salty-config.ts"), n = y(s, "salty-config.js");
108
- await I.build({
109
- entryPoints: [e],
110
- minify: !0,
111
- treeShaking: !0,
112
- bundle: !0,
113
- outfile: n,
114
- format: "esm",
115
- external: ["react"]
116
- });
117
- const r = Date.now(), { config: g } = await import(`${n}?t=${r}`);
118
- return g;
119
- }, K = async (t) => {
120
- const s = await st(t), e = /* @__PURE__ */ new Set(), n = (u, c = []) => u ? Object.entries(u).flatMap(([m, l]) => {
121
- if (!l) return;
122
- if (typeof l == "object") return n(l, [...c, m]);
123
- const F = [...c, m].join(".");
124
- e.add(`"${F}"`);
125
- const N = [...c.map(k), k(m)].join("-"), { result: D } = H(l);
126
- return `--${N}: ${D};`;
127
- }) : [], r = (u) => u ? Object.entries(u).flatMap(([c, m]) => {
128
- const l = n(m);
129
- return c === "base" ? l.join("") : `${c} { ${l.join("")} }`;
130
- }) : [], g = (u) => u ? Object.entries(u).flatMap(([c, m]) => Object.entries(m).flatMap(([l, F]) => {
131
- const N = n(F, [c]), D = `.${c}-${l}, [data-${c}="${l}"]`, V = N.join("");
132
- return `${D} { ${V} }`;
133
- })) : [], $ = 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("")}`;
134
- x(i, p);
135
- const h = y(o, "types/css-tokens.d.ts"), j = `type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
136
- x(h, j);
137
- const w = y(o, "css/global.css"), C = O(s.global, "");
138
- x(w, C);
139
- const d = y(o, "css/templates.css"), S = J(s.templates);
140
- x(d, S);
141
- }, R = async (t, s) => {
142
- const e = A(t), n = y(s, "js", e + ".js");
143
- await I.build({
144
- entryPoints: [t],
145
- minify: !0,
146
- treeShaking: !0,
147
- bundle: !0,
148
- outfile: n,
149
- format: "esm",
150
- target: ["es2022"],
151
- keepNames: !0,
152
- external: ["react"]
153
- });
154
- const r = Date.now();
155
- return await import(`${n}?t=${r}`);
156
- }, _ = async (t) => {
157
- const s = E(t), e = y(s, "salty-config.js"), { config: n } = await import(e);
158
- return n;
159
- }, et = async (t) => {
160
- try {
161
- const s = [], e = [], n = E(t), r = y(n, "index.css");
162
- (() => {
163
- q(n) && L("rm -rf " + n), T(n), T(y(n, "css")), T(y(n, "types"));
164
- })(), await K(t);
165
- const $ = await _(t);
166
- async function a(p, h) {
167
- const b = G(p);
168
- if (b.isDirectory()) {
169
- const j = U(p);
170
- await Promise.all(j.map((w) => a(y(p, w), y(h, w))));
171
- } else if (b.isFile() && M(p)) {
172
- const w = await R(p, n), C = [];
173
- Object.entries(w).forEach(([c, m]) => {
174
- if (m.isKeyframes && m.css) {
175
- const V = `${m.animationName}.css`, W = `css/${V}`, z = y(n, W);
176
- s.push(V), x(z, m.css);
177
- return;
178
- }
179
- if (!m.generator) return;
180
- const l = m.generator._withBuildContext({
181
- name: c,
182
- config: $
183
- }), F = `${l.hash}-${l.priority}.css`;
184
- e[l.priority] || (e[l.priority] = []), e[l.priority].push(F), C.push(F);
185
- const N = `css/${F}`, D = y(n, N);
186
- x(D, l.css);
187
- });
188
- const d = C.map((c) => `@import url('./${c}');`).join(`
189
- `), S = A(p, 6), u = y(n, `css/${S}.css`);
190
- x(u, d);
191
- }
192
- }
193
- await a(t, n);
194
- const f = s.map((p) => `@import url('./css/${p}');`).join(`
195
- `);
196
- let i = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
197
-
198
- ${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
199
- `)}
200
- ${f}`;
201
- if ($.importStrategy !== "component") {
202
- const p = e.flat().map((h) => `@import url('./css/${h}');`).join(`
203
- `);
204
- i += p;
205
- }
206
- x(r, i);
207
- } catch (s) {
208
- console.error(s);
209
- }
210
- }, nt = async (t, s) => {
211
- try {
212
- const e = [], n = y(t, "./saltygen"), r = y(n, "index.css");
213
- if (M(s)) {
214
- const $ = await _(t), a = await R(s, n);
215
- Object.entries(a).forEach(([h, b]) => {
216
- if (!b.generator) return;
217
- const j = b.generator._withBuildContext({
218
- name: h,
219
- config: $
220
- }), w = `${j.hash}-${j.priority}.css`, C = `css/${w}`, d = y(n, C);
221
- e.push(w), x(d, j.css);
222
- });
223
- const f = B(r, "utf8").split(`
224
- `), o = e.map((h) => `@import url('../saltygen/css/${h}');`), p = [.../* @__PURE__ */ new Set([...f, ...o])].join(`
225
- `);
226
- x(r, p);
227
- }
228
- } catch (e) {
229
- console.error(e);
230
- }
231
- }, rt = async (t, s) => {
232
- try {
233
- const e = y(t, "./saltygen");
234
- if (M(s)) {
235
- let r = B(s, "utf8");
236
- r.replace(/^(?!export\s)const\s.*/gm, (i) => `export ${i}`) !== r && await X(s, r);
237
- const $ = await _(t), a = await R(s, e);
238
- let f = r;
239
- Object.entries(a).forEach(([i, p]) => {
240
- var u;
241
- if (p.isKeyframes) {
242
- console.log("value", p);
243
- return;
244
- }
245
- if (!p.generator) return;
246
- const h = p.generator._withBuildContext({
247
- name: i,
248
- config: $
249
- }), b = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(r);
250
- if (!b)
251
- return console.error("Could not find the original declaration");
252
- 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(
253
- C
254
- )});`, S = new RegExp(`${i}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
255
- f = f.replace(S, d);
256
- });
257
- const o = A(s, 6);
258
- return $.importStrategy === "component" && (f = `import '../../saltygen/css/${o}.css';
259
- ${f}`), f = f.replace("{ styled }", "{ styledClient as styled }"), f = f.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), f;
260
- }
261
- } catch (e) {
262
- console.error(e);
263
- }
264
- }, lt = (t) => ({
265
- name: "stylegen",
266
- buildStart: () => et(t),
267
- load: async (s) => {
268
- if (s.includes(".salty."))
269
- return await rt(t, s);
270
- },
271
- watchChange: {
272
- handler: async (s) => {
273
- s.includes(".salty.") && await nt(t, s), s.includes("salty-config") && await K(t);
274
- }
275
- }
276
- });
277
- export {
278
- lt as saltyPlugin
279
- };
package/dist/package.json DELETED
@@ -1,30 +0,0 @@
1
- {
2
- "name": "@salty-css/vite",
3
- "version": "0.0.1-alpha.3",
4
- "main": "./dist/index.js",
5
- "module": "./dist/index.mjs",
6
- "typings": "./dist/index.d.ts",
7
- "type": "module",
8
- "license": "MIT",
9
- "private": false,
10
- "publishConfig": {
11
- "access": "public"
12
- },
13
- "homepage": "https://github.com/margarita-form/salty-css",
14
- "bugs": {
15
- "url": "https://github.com/margarita-form/salty-css/issues"
16
- },
17
- "files": [
18
- "dist",
19
- "!**/*.tsbuildinfo"
20
- ],
21
- "nx": {
22
- "name": "vite"
23
- },
24
- "exports": {
25
- ".": {
26
- "import": "./index.js",
27
- "require": "./index.cjs"
28
- }
29
- }
30
- }
File without changes