@salty-css/vite 0.0.1-alpha.50 → 0.0.1-alpha.52
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 +13 -2
- package/index.cjs +13 -13
- package/index.js +157 -151
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ In the world of frontend dev is there anything saltier than CSS? Salty CSS is bu
|
|
|
22
22
|
|
|
23
23
|
#### Initialize Salty CSS for a project
|
|
24
24
|
|
|
25
|
-
In your existing repository run `npx salty-css init [directory]` which installs required salty-css packages to the current directory and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory. Init will also create `.saltyrc` which contains some metadata for future CLI commands.
|
|
25
|
+
In your existing repository run `npx salty-css init [directory]` which installs required salty-css packages to the current directory, detects framework in use (current support for vite and next.js) and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory. Init will also create `.saltyrc` which contains some metadata for future CLI commands.
|
|
26
26
|
|
|
27
27
|
#### Create components
|
|
28
28
|
|
|
@@ -43,11 +43,22 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
|
|
|
43
43
|
1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
|
|
44
44
|
2. Create `salty.config.ts` to your app directory
|
|
45
45
|
|
|
46
|
+
#### Next.js
|
|
47
|
+
|
|
48
|
+
1. First check the instructions for React
|
|
49
|
+
2. For Next.js support install `npm i -D @salty-css/next`
|
|
50
|
+
3. Add Salty CSS plugin to next.js config
|
|
51
|
+
|
|
52
|
+
- **Next.js 15:** In `next.config.ts` add import for salty plugin `import { withSaltyCss } from '@salty-css/next';` and then add `withSaltyCss` to wrap your nextConfig export like so `export default withSaltyCss(nextConfig);`
|
|
53
|
+
- **Next.js 14 and older:** In `next.config.js` add import for salty plugin `const { withSaltyCss } = require('@salty-css/next');` and then add `withSaltyCss` to wrap your nextConfig export like so `module.exports = withSaltyCss(nextConfig);`
|
|
54
|
+
|
|
55
|
+
4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
|
|
56
|
+
|
|
46
57
|
#### Vite
|
|
47
58
|
|
|
48
59
|
1. First check the instructions for React
|
|
49
60
|
2. For Vite support install `npm i -D @salty-css/vite`
|
|
50
|
-
3. In `vite.config
|
|
61
|
+
3. In `vite.config` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
|
|
51
62
|
4. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
|
|
52
63
|
|
|
53
64
|
### Create components
|
package/index.cjs
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const K=require("esbuild"),G=require("child_process"),p=require("path"),m=require("fs"),L=require("fs/promises");function U(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,n.get?n:{enumerable:!0,get:()=>t[s]})}}return e.default=t,Object.freeze(e)}const B=U(K),q=t=>String.fromCharCode(t+(t>25?39:97)),X=(t,e)=>{let s="",n;for(n=Math.abs(t);n>52;n=n/52|0)s=q(n%52)+s;return s=q(n%52)+s,s.length<e?s=s.padStart(e,"a"):s.length>e&&(s=s.slice(-e)),s},Y=(t,e)=>{let s=e.length;for(;s;)t=t*33^e.charCodeAt(--s);return t},_=(t,e=3)=>{const s=Y(5381,JSON.stringify(t))>>>0;return X(s,e)};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,(e,s)=>(s>0?"-":"")+e.toLowerCase()):""}const Q=(t,e)=>{if(typeof t!="string")return{result:t};if(!e)return{result:t};const s=[];return Object.values(e).forEach(n=>{const{pattern:r,transform:d}=n;t=t.replace(r,$=>{const{value:u,css:i}=d($);return i&&s.push(i),u})}),{result:t,additionalCss:s}},I=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${N(n[1].replaceAll(".","-"))})`)}:{result:t},P=(t,e,s,n)=>{if(!t)return"";const r=[],d=Object.entries(t).reduce((u,[i,o])=>{const c=i.trim();if(typeof o=="function"&&(o=o()),typeof o=="object"){if(!o)return u;if(c==="variants")return Object.entries(o).forEach(([f,l])=>{l&&Object.entries(l).forEach(([h,g])=>{if(!g)return;const b=`${e}.${f}-${h}`,j=P(g,b);r.push(j)})}),u;if(c==="defaultVariants")return u;if(c==="compoundVariants")return o.forEach(f=>{const{css:l,...h}=f,g=Object.entries(h).reduce((j,[x,k])=>`${j}.${x}-${k}`,e),b=P(l,g);r.push(b)}),u;if(c.startsWith("@")){const f=P(o,e),l=`${c} {
|
|
2
2
|
${f.replace(`
|
|
3
3
|
`,`
|
|
4
4
|
`)}
|
|
5
|
-
}`;return r.push(
|
|
6
|
-
`);if(!e)return
|
|
7
|
-
`)},
|
|
8
|
-
`)},V=t=>
|
|
9
|
-
`),
|
|
10
|
-
`);let
|
|
5
|
+
}`;return r.push(l),u}const y=i.includes("&")?c.replace("&",e):c.startsWith(":")?`${e}${c}`:`${e} ${c}`,C=P(o,y);return r.push(C),u}const D=c.startsWith("-")?c:N(c),S=(y,C=";")=>u=`${u}${y}${C}`,a=y=>S(`${D}:${y}`);if(typeof o=="number")return a(o);if(typeof o!="string")if("toString"in o)o=o.toString();else return u;const{modifiers:w}={},F=function*(){yield I(o),yield Q(o,w)}();for(const{result:y,additionalCss:C=[]}of F)o=y,C.forEach(f=>{const l=P(f,"");S(l,"")});return a(o)},"");if(!d)return r.join(`
|
|
6
|
+
`);if(!e)return d;let $="";return $=`${e} { ${d} }`,[$,...r].join(`
|
|
7
|
+
`)},W=(t,e=[])=>{if(!t)return"";const s=[],n={};if(Object.entries(t).forEach(([r,d])=>{if(typeof d=="object"){if(!d)return;const $=r.trim(),u=W(d,[...e,$]);s.push(u)}else n[r]=d}),Object.keys(n).length){const r=e.map(N).join("-"),d=P(n,`.${r}`);s.push(d)}return s.join(`
|
|
8
|
+
`)},V=t=>p.join(t,"./saltygen"),v=["salty","css","styles","styled"],tt=(t=[])=>new RegExp(`\\.(${[...v,...t].join("|")})\\.`),T=(t,e=[])=>tt(e).test(t),et=async t=>{const e=V(t),s=p.join(t,"salty.config.ts"),n=p.join(e,"salty.config.js");await B.build({entryPoints:[s],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",external:["react"]});const r=Date.now(),{config:d}=await import(`${n}?t=${r}`);return d},Z=async t=>{const e=await et(t),s=new Set,n=(f,l=[])=>f?Object.entries(f).flatMap(([h,g])=>{if(!g)return;if(typeof g=="object")return n(g,[...l,h]);const b=[...l,h].join(".");s.add(`"${b}"`);const j=[...l.map(N),N(h)].join("-"),{result:x}=I(g);return`--${j}: ${x};`}):[],r=f=>f?Object.entries(f).flatMap(([l,h])=>{const g=n(h);return l==="base"?g.join(""):`${l} { ${g.join("")} }`}):[],d=f=>f?Object.entries(f).flatMap(([l,h])=>Object.entries(h).flatMap(([g,b])=>{const j=n(b,[l]),x=`.${l}-${g}, [data-${l}="${g}"]`,k=j.join("");return`${x} { ${k} }`})):[],$=n(e.variables),u=r(e.responsiveVariables),i=d(e.conditionalVariables),o=V(t),c=p.join(o,"css/variables.css"),D=`:root { ${$.join("")} ${u.join("")} } ${i.join("")}`;m.writeFileSync(c,D);const S=p.join(o,"types/css-tokens.d.ts"),w=`type VariableTokens = ${[...s].join("|")||'""'}; type PropertyValueToken = \`{\${VariableTokens}}\``;m.writeFileSync(S,w);const O=p.join(o,"css/global.css"),F=P(e.global,"");m.writeFileSync(O,F);const y=p.join(o,"css/templates.css"),C=W(e.templates);m.writeFileSync(y,C)},M=async(t,e)=>{const s=_(t),n=p.join(e,"js",s+".js");await B.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 e=V(t),s=p.join(e,"salty.config.js"),{config:n}=await import(s);return n},st=async t=>{try{const e=[],s=[],n=V(t),r=p.join(n,"index.css");(()=>{m.existsSync(n)&&G.execSync("rm -rf "+n),m.mkdirSync(n),m.mkdirSync(p.join(n,"css")),m.mkdirSync(p.join(n,"types"))})(),await Z(t);const $=await A(t);async function u(a,w){const O=m.statSync(a);if(O.isDirectory()){const F=m.readdirSync(a);await Promise.all(F.map(y=>u(p.join(a,y),p.join(w,y))))}else if(O.isFile()&&T(a)){const y=await M(a,n),C=[];Object.entries(y).forEach(([g,b])=>{if(b.isKeyframes&&b.css){const R=`${b.animationName}.css`,H=`css/${R}`,J=p.join(n,H);e.push(R),m.writeFileSync(J,b.css);return}if(!b.generator)return;const j=b.generator._withBuildContext({name:g,config:$}),x=`${j.hash}-${j.priority}.css`;s[j.priority]||(s[j.priority]=[]),s[j.priority].push(x),C.push(x);const k=`css/${x}`,E=p.join(n,k);m.writeFileSync(E,j.css)});const f=C.map(g=>`@import url('./${g}');`).join(`
|
|
9
|
+
`),l=_(a,6),h=p.join(n,`css/${l}.css`);m.writeFileSync(h,f)}}await u(t,n);const i=e.map(a=>`@import url('./css/${a}');`).join(`
|
|
10
|
+
`);let S=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
|
11
11
|
|
|
12
|
-
${["
|
|
12
|
+
${["variables.css","global.css","templates.css"].filter(a=>{try{return m.readFileSync(p.join(n,"css",a),"utf8").length>0}catch{return!1}}).map(a=>`@import url('./css/${a}');`).join(`
|
|
13
13
|
`)}
|
|
14
|
-
${i}`;if($.importStrategy!=="component"){const
|
|
15
|
-
`);
|
|
16
|
-
`),o=s.map(
|
|
17
|
-
`);
|
|
18
|
-
${i}`),i=i.replace("{ styled }","{ styledClient as styled }"),i=i.replace("@salty-css/react/styled","@salty-css/react/styled-client"),i}}catch(s){console.error("Error in minimizeFile:",s)}},z=t=>({name:"stylegen",buildStart:()=>
|
|
14
|
+
${i}`;if($.importStrategy!=="component"){const a=s.flat().map(w=>`@import url('./css/${w}');`).join(`
|
|
15
|
+
`);S+=a}m.writeFileSync(r,S)}catch(e){console.error(e)}},nt=async(t,e)=>{try{const s=[],n=p.join(t,"./saltygen"),r=p.join(n,"index.css");if(T(e)){const $=await A(t),u=await M(e,n);Object.entries(u).forEach(([S,a])=>{if(!a.generator)return;const w=a.generator._withBuildContext({name:S,config:$}),O=`${w.hash}-${w.priority}.css`,F=`css/${O}`,y=p.join(n,F);s.push(O),m.writeFileSync(y,w.css)});const i=m.readFileSync(r,"utf8").split(`
|
|
16
|
+
`),o=s.map(S=>`@import url('../saltygen/css/${S}');`),D=[...new Set([...i,...o])].join(`
|
|
17
|
+
`);m.writeFileSync(r,D)}}catch(s){console.error(s)}},rt=async(t,e)=>{try{const s=p.join(t,"./saltygen");if(T(e)){const r=m.readFileSync(e,"utf8");r.replace(/^(?!export\s)const\s.*/gm,c=>`export ${c}`)!==r&&await L.writeFile(e,r);const $=await A(t),u=await M(e,s);let i=r;Object.entries(u).forEach(([c,D])=>{var k;if(D.isKeyframes||!D.generator)return;const S=D.generator._withBuildContext({name:c,config:$}),a=new RegExp(`\\s${c}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(r);if(!a)return console.error("Could not find the original declaration");const w=(k=a.at(1))==null?void 0:k.trim(),O=new RegExp(`\\s${c}[=\\s]+styled\\(`,"g").exec(i);if(!O)return console.error("Could not find the original declaration");const{index:F}=O;let y=!1;const C=setTimeout(()=>y=!0,5e3);let f=0,l=!1,h=0;for(;!l&&!y;){const E=i[F+f];E==="("&&h++,E===")"&&h--,h===0&&E===")"&&(l=!0),f>i.length&&(y=!0),f++}if(!y)clearTimeout(C);else throw new Error("Failed to find the end of the styled call and timed out");const g=F+f,b=i.slice(F,g),j=i,x=` ${c} = styled(${w}, "${S.classNames}", "${S._callerName}", ${JSON.stringify(S.props)});`;i=i.replace(b,x),j===i&&console.error("Minimize file failed to change content",{name:c,tagName:w})});const o=_(e,6);return $.importStrategy==="component"&&(i=`import '../../saltygen/css/${o}.css';
|
|
18
|
+
${i}`),i=i.replace("{ styled }","{ styledClient as styled }"),i=i.replace("@salty-css/react/styled","@salty-css/react/styled-client"),i}}catch(s){console.error("Error in minimizeFile:",s)}},z=t=>({name:"stylegen",buildStart:()=>st(t),load:async e=>{if(T(e))return await rt(t,e)},watchChange:{handler:async e=>{T(e)&&await nt(t,e),e.includes("salty.config")&&await Z(t)}}});exports.default=z;exports.saltyPlugin=z;
|
package/index.js
CHANGED
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { execSync as
|
|
3
|
-
import { join as
|
|
4
|
-
import { writeFileSync as k, existsSync as
|
|
5
|
-
import { writeFile as
|
|
6
|
-
const
|
|
1
|
+
import * as Z from "esbuild";
|
|
2
|
+
import { execSync as G } from "child_process";
|
|
3
|
+
import { join as u } from "path";
|
|
4
|
+
import { writeFileSync as k, existsSync as L, mkdirSync as A, statSync as U, readdirSync as X, readFileSync as M } from "fs";
|
|
5
|
+
import { writeFile as Y } from "fs/promises";
|
|
6
|
+
const W = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), Q = (t, s) => {
|
|
7
7
|
let e = "", n;
|
|
8
|
-
for (n = Math.abs(t); n > 52; n = n / 52 | 0) e =
|
|
9
|
-
return e =
|
|
10
|
-
},
|
|
8
|
+
for (n = Math.abs(t); n > 52; n = n / 52 | 0) e = W(n % 52) + e;
|
|
9
|
+
return e = W(n % 52) + e, e.length < s ? e = e.padStart(s, "a") : e.length > s && (e = e.slice(-s)), e;
|
|
10
|
+
}, v = (t, s) => {
|
|
11
11
|
let e = s.length;
|
|
12
12
|
for (; e; ) t = t * 33 ^ s.charCodeAt(--e);
|
|
13
13
|
return t;
|
|
14
|
-
},
|
|
15
|
-
const e =
|
|
16
|
-
return
|
|
14
|
+
}, R = (t, s = 3) => {
|
|
15
|
+
const e = v(5381, JSON.stringify(t)) >>> 0;
|
|
16
|
+
return Q(e, s);
|
|
17
17
|
};
|
|
18
18
|
function O(t) {
|
|
19
19
|
return t ? typeof t != "string" ? O(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
20
|
}
|
|
21
|
-
const
|
|
21
|
+
const tt = (t, s) => {
|
|
22
22
|
if (typeof t != "string") return { result: t };
|
|
23
23
|
if (!s) return { result: t };
|
|
24
24
|
const e = [];
|
|
25
25
|
return Object.values(s).forEach((n) => {
|
|
26
|
-
const { pattern: r, transform:
|
|
26
|
+
const { pattern: r, transform: m } = n;
|
|
27
27
|
t = t.replace(r, (h) => {
|
|
28
|
-
const { value: p, css: i } =
|
|
28
|
+
const { value: p, css: i } = m(h);
|
|
29
29
|
return i && e.push(i), p;
|
|
30
30
|
});
|
|
31
31
|
}), { result: t, additionalCss: e };
|
|
32
32
|
}, z = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, N = (t, s, e, n) => {
|
|
33
33
|
if (!t) return "";
|
|
34
|
-
const r = [],
|
|
34
|
+
const r = [], m = Object.entries(t).reduce((p, [i, o]) => {
|
|
35
35
|
const c = i.trim();
|
|
36
36
|
if (typeof o == "function" && (o = o()), typeof o == "object") {
|
|
37
37
|
if (!o) return p;
|
|
38
38
|
if (c === "variants")
|
|
39
|
-
return Object.entries(o).forEach(([f,
|
|
40
|
-
|
|
41
|
-
if (!
|
|
42
|
-
const
|
|
43
|
-
r.push(
|
|
39
|
+
return Object.entries(o).forEach(([f, l]) => {
|
|
40
|
+
l && Object.entries(l).forEach(([d, g]) => {
|
|
41
|
+
if (!g) return;
|
|
42
|
+
const $ = `${s}.${f}-${d}`, b = N(g, $);
|
|
43
|
+
r.push(b);
|
|
44
44
|
});
|
|
45
45
|
}), p;
|
|
46
46
|
if (c === "defaultVariants")
|
|
47
47
|
return p;
|
|
48
48
|
if (c === "compoundVariants")
|
|
49
49
|
return o.forEach((f) => {
|
|
50
|
-
const { css:
|
|
51
|
-
r.push(
|
|
50
|
+
const { css: l, ...d } = f, g = Object.entries(d).reduce((b, [x, E]) => `${b}.${x}-${E}`, s), $ = N(l, g);
|
|
51
|
+
r.push($);
|
|
52
52
|
}), p;
|
|
53
53
|
if (c.startsWith("@")) {
|
|
54
|
-
const f = N(o, s),
|
|
54
|
+
const f = N(o, s), l = `${c} {
|
|
55
55
|
${f.replace(`
|
|
56
56
|
`, `
|
|
57
57
|
`)}
|
|
58
58
|
}`;
|
|
59
|
-
return r.push(
|
|
59
|
+
return r.push(l), p;
|
|
60
60
|
}
|
|
61
|
-
const
|
|
62
|
-
return r.push(
|
|
61
|
+
const y = i.includes("&") ? c.replace("&", s) : c.startsWith(":") ? `${s}${c}` : `${s} ${c}`, F = N(o, y);
|
|
62
|
+
return r.push(F), p;
|
|
63
63
|
}
|
|
64
|
-
const
|
|
65
|
-
if (typeof o == "number") return
|
|
64
|
+
const D = c.startsWith("-") ? c : O(c), w = (y, F = ";") => p = `${p}${y}${F}`, a = (y) => w(`${D}:${y}`);
|
|
65
|
+
if (typeof o == "number") return a(o);
|
|
66
66
|
if (typeof o != "string")
|
|
67
67
|
if ("toString" in o) o = o.toString();
|
|
68
68
|
else return p;
|
|
69
|
-
const { modifiers:
|
|
70
|
-
yield z(o), yield
|
|
69
|
+
const { modifiers: j } = {}, S = function* () {
|
|
70
|
+
yield z(o), yield tt(o, j);
|
|
71
71
|
}();
|
|
72
|
-
for (const { result:
|
|
73
|
-
o =
|
|
74
|
-
const
|
|
75
|
-
|
|
72
|
+
for (const { result: y, additionalCss: F = [] } of S)
|
|
73
|
+
o = y, F.forEach((f) => {
|
|
74
|
+
const l = N(f, "");
|
|
75
|
+
w(l, "");
|
|
76
76
|
});
|
|
77
|
-
return
|
|
77
|
+
return a(o);
|
|
78
78
|
}, "");
|
|
79
|
-
if (!
|
|
79
|
+
if (!m) return r.join(`
|
|
80
80
|
`);
|
|
81
|
-
if (!s) return
|
|
81
|
+
if (!s) return m;
|
|
82
82
|
let h = "";
|
|
83
|
-
return h = `${s} { ${
|
|
83
|
+
return h = `${s} { ${m} }`, [h, ...r].join(`
|
|
84
84
|
`);
|
|
85
85
|
}, H = (t, s = []) => {
|
|
86
86
|
if (!t) return "";
|
|
87
87
|
const e = [], n = {};
|
|
88
|
-
if (Object.entries(t).forEach(([r,
|
|
89
|
-
if (typeof
|
|
90
|
-
if (!
|
|
91
|
-
const h = r.trim(), p = H(
|
|
88
|
+
if (Object.entries(t).forEach(([r, m]) => {
|
|
89
|
+
if (typeof m == "object") {
|
|
90
|
+
if (!m) return;
|
|
91
|
+
const h = r.trim(), p = H(m, [...s, h]);
|
|
92
92
|
e.push(p);
|
|
93
93
|
} else
|
|
94
|
-
n[r] =
|
|
94
|
+
n[r] = m;
|
|
95
95
|
}), Object.keys(n).length) {
|
|
96
|
-
const r = s.map(O).join("-"),
|
|
97
|
-
e.push(
|
|
96
|
+
const r = s.map(O).join("-"), m = N(n, `.${r}`);
|
|
97
|
+
e.push(m);
|
|
98
98
|
}
|
|
99
99
|
return e.join(`
|
|
100
100
|
`);
|
|
101
|
-
}, T = (t) =>
|
|
102
|
-
const s = T(t), e =
|
|
103
|
-
await
|
|
101
|
+
}, T = (t) => u(t, "./saltygen"), st = ["salty", "css", "styles", "styled"], et = (t = []) => new RegExp(`\\.(${[...st, ...t].join("|")})\\.`), V = (t, s = []) => et(s).test(t), nt = async (t) => {
|
|
102
|
+
const s = T(t), e = u(t, "salty.config.ts"), n = u(s, "salty.config.js");
|
|
103
|
+
await Z.build({
|
|
104
104
|
entryPoints: [e],
|
|
105
105
|
minify: !0,
|
|
106
106
|
treeShaking: !0,
|
|
@@ -109,33 +109,33 @@ const Q = (t, s) => {
|
|
|
109
109
|
format: "esm",
|
|
110
110
|
external: ["react"]
|
|
111
111
|
});
|
|
112
|
-
const r = Date.now(), { config:
|
|
113
|
-
return
|
|
114
|
-
},
|
|
115
|
-
const s = await
|
|
116
|
-
if (!
|
|
117
|
-
if (typeof
|
|
118
|
-
const
|
|
119
|
-
e.add(`"${
|
|
120
|
-
const
|
|
121
|
-
return `--${
|
|
122
|
-
}) : [], r = (f) => f ? Object.entries(f).flatMap(([
|
|
123
|
-
const
|
|
124
|
-
return
|
|
125
|
-
}) : [],
|
|
126
|
-
const
|
|
127
|
-
return `${
|
|
128
|
-
})) : [], h = n(s.variables), p = r(s.responsiveVariables), i =
|
|
129
|
-
k(c,
|
|
130
|
-
const
|
|
131
|
-
k(
|
|
132
|
-
const
|
|
133
|
-
k(
|
|
134
|
-
const
|
|
135
|
-
k(
|
|
136
|
-
},
|
|
137
|
-
const e =
|
|
138
|
-
await
|
|
112
|
+
const r = Date.now(), { config: m } = await import(`${n}?t=${r}`);
|
|
113
|
+
return m;
|
|
114
|
+
}, J = async (t) => {
|
|
115
|
+
const s = await nt(t), e = /* @__PURE__ */ new Set(), n = (f, l = []) => f ? Object.entries(f).flatMap(([d, g]) => {
|
|
116
|
+
if (!g) return;
|
|
117
|
+
if (typeof g == "object") return n(g, [...l, d]);
|
|
118
|
+
const $ = [...l, d].join(".");
|
|
119
|
+
e.add(`"${$}"`);
|
|
120
|
+
const b = [...l.map(O), O(d)].join("-"), { result: x } = z(g);
|
|
121
|
+
return `--${b}: ${x};`;
|
|
122
|
+
}) : [], r = (f) => f ? Object.entries(f).flatMap(([l, d]) => {
|
|
123
|
+
const g = n(d);
|
|
124
|
+
return l === "base" ? g.join("") : `${l} { ${g.join("")} }`;
|
|
125
|
+
}) : [], m = (f) => f ? Object.entries(f).flatMap(([l, d]) => Object.entries(d).flatMap(([g, $]) => {
|
|
126
|
+
const b = n($, [l]), x = `.${l}-${g}, [data-${l}="${g}"]`, E = b.join("");
|
|
127
|
+
return `${x} { ${E} }`;
|
|
128
|
+
})) : [], h = n(s.variables), p = r(s.responsiveVariables), i = m(s.conditionalVariables), o = T(t), c = u(o, "css/variables.css"), D = `:root { ${h.join("")} ${p.join("")} } ${i.join("")}`;
|
|
129
|
+
k(c, D);
|
|
130
|
+
const w = u(o, "types/css-tokens.d.ts"), j = `type VariableTokens = ${[...e].join("|") || '""'}; type PropertyValueToken = \`{\${VariableTokens}}\``;
|
|
131
|
+
k(w, j);
|
|
132
|
+
const C = u(o, "css/global.css"), S = N(s.global, "");
|
|
133
|
+
k(C, S);
|
|
134
|
+
const y = u(o, "css/templates.css"), F = H(s.templates);
|
|
135
|
+
k(y, F);
|
|
136
|
+
}, _ = async (t, s) => {
|
|
137
|
+
const e = R(t), n = u(s, "js", e + ".js");
|
|
138
|
+
await Z.build({
|
|
139
139
|
entryPoints: [t],
|
|
140
140
|
minify: !0,
|
|
141
141
|
treeShaking: !0,
|
|
@@ -148,133 +148,139 @@ const Q = (t, s) => {
|
|
|
148
148
|
});
|
|
149
149
|
const r = Date.now();
|
|
150
150
|
return await import(`${n}?t=${r}`);
|
|
151
|
-
},
|
|
152
|
-
const s = T(t), e =
|
|
151
|
+
}, B = async (t) => {
|
|
152
|
+
const s = T(t), e = u(s, "salty.config.js"), { config: n } = await import(e);
|
|
153
153
|
return n;
|
|
154
|
-
},
|
|
154
|
+
}, rt = async (t) => {
|
|
155
155
|
try {
|
|
156
|
-
const s = [], e = [], n = T(t), r =
|
|
156
|
+
const s = [], e = [], n = T(t), r = u(n, "index.css");
|
|
157
157
|
(() => {
|
|
158
|
-
|
|
159
|
-
})(), await
|
|
160
|
-
const h = await
|
|
161
|
-
async function p(
|
|
162
|
-
const
|
|
163
|
-
if (
|
|
164
|
-
const
|
|
165
|
-
await Promise.all(
|
|
166
|
-
} else if (
|
|
167
|
-
const
|
|
168
|
-
Object.entries(
|
|
169
|
-
if (
|
|
170
|
-
const
|
|
171
|
-
s.push(
|
|
158
|
+
L(n) && G("rm -rf " + n), A(n), A(u(n, "css")), A(u(n, "types"));
|
|
159
|
+
})(), await J(t);
|
|
160
|
+
const h = await B(t);
|
|
161
|
+
async function p(a, j) {
|
|
162
|
+
const C = U(a);
|
|
163
|
+
if (C.isDirectory()) {
|
|
164
|
+
const S = X(a);
|
|
165
|
+
await Promise.all(S.map((y) => p(u(a, y), u(j, y))));
|
|
166
|
+
} else if (C.isFile() && V(a)) {
|
|
167
|
+
const y = await _(a, n), F = [];
|
|
168
|
+
Object.entries(y).forEach(([g, $]) => {
|
|
169
|
+
if ($.isKeyframes && $.css) {
|
|
170
|
+
const I = `${$.animationName}.css`, K = `css/${I}`, q = u(n, K);
|
|
171
|
+
s.push(I), k(q, $.css);
|
|
172
172
|
return;
|
|
173
173
|
}
|
|
174
|
-
if (
|
|
175
|
-
const
|
|
176
|
-
name:
|
|
174
|
+
if (!$.generator) return;
|
|
175
|
+
const b = $.generator._withBuildContext({
|
|
176
|
+
name: g,
|
|
177
177
|
config: h
|
|
178
|
-
}),
|
|
179
|
-
e[
|
|
180
|
-
const
|
|
181
|
-
k(
|
|
178
|
+
}), x = `${b.hash}-${b.priority}.css`;
|
|
179
|
+
e[b.priority] || (e[b.priority] = []), e[b.priority].push(x), F.push(x);
|
|
180
|
+
const E = `css/${x}`, P = u(n, E);
|
|
181
|
+
k(P, b.css);
|
|
182
182
|
});
|
|
183
|
-
const
|
|
184
|
-
`),
|
|
185
|
-
k(
|
|
183
|
+
const f = F.map((g) => `@import url('./${g}');`).join(`
|
|
184
|
+
`), l = R(a, 6), d = u(n, `css/${l}.css`);
|
|
185
|
+
k(d, f);
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
188
|
await p(t, n);
|
|
189
|
-
const i = s.map((
|
|
189
|
+
const i = s.map((a) => `@import url('./css/${a}');`).join(`
|
|
190
190
|
`);
|
|
191
|
-
let
|
|
191
|
+
let w = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
|
192
192
|
|
|
193
|
-
${["
|
|
193
|
+
${["variables.css", "global.css", "templates.css"].filter((a) => {
|
|
194
|
+
try {
|
|
195
|
+
return M(u(n, "css", a), "utf8").length > 0;
|
|
196
|
+
} catch {
|
|
197
|
+
return !1;
|
|
198
|
+
}
|
|
199
|
+
}).map((a) => `@import url('./css/${a}');`).join(`
|
|
194
200
|
`)}
|
|
195
201
|
${i}`;
|
|
196
202
|
if (h.importStrategy !== "component") {
|
|
197
|
-
const
|
|
203
|
+
const a = e.flat().map((j) => `@import url('./css/${j}');`).join(`
|
|
198
204
|
`);
|
|
199
|
-
|
|
205
|
+
w += a;
|
|
200
206
|
}
|
|
201
|
-
k(r,
|
|
207
|
+
k(r, w);
|
|
202
208
|
} catch (s) {
|
|
203
209
|
console.error(s);
|
|
204
210
|
}
|
|
205
|
-
},
|
|
211
|
+
}, ot = async (t, s) => {
|
|
206
212
|
try {
|
|
207
|
-
const e = [], n =
|
|
213
|
+
const e = [], n = u(t, "./saltygen"), r = u(n, "index.css");
|
|
208
214
|
if (V(s)) {
|
|
209
|
-
const h = await
|
|
210
|
-
Object.entries(p).forEach(([
|
|
211
|
-
if (!
|
|
212
|
-
const
|
|
213
|
-
name:
|
|
215
|
+
const h = await B(t), p = await _(s, n);
|
|
216
|
+
Object.entries(p).forEach(([w, a]) => {
|
|
217
|
+
if (!a.generator) return;
|
|
218
|
+
const j = a.generator._withBuildContext({
|
|
219
|
+
name: w,
|
|
214
220
|
config: h
|
|
215
|
-
}),
|
|
216
|
-
e.push(
|
|
221
|
+
}), C = `${j.hash}-${j.priority}.css`, S = `css/${C}`, y = u(n, S);
|
|
222
|
+
e.push(C), k(y, j.css);
|
|
217
223
|
});
|
|
218
|
-
const i =
|
|
219
|
-
`), o = e.map((
|
|
224
|
+
const i = M(r, "utf8").split(`
|
|
225
|
+
`), o = e.map((w) => `@import url('../saltygen/css/${w}');`), D = [.../* @__PURE__ */ new Set([...i, ...o])].join(`
|
|
220
226
|
`);
|
|
221
|
-
k(r,
|
|
227
|
+
k(r, D);
|
|
222
228
|
}
|
|
223
229
|
} catch (e) {
|
|
224
230
|
console.error(e);
|
|
225
231
|
}
|
|
226
|
-
},
|
|
232
|
+
}, it = async (t, s) => {
|
|
227
233
|
try {
|
|
228
|
-
const e =
|
|
234
|
+
const e = u(t, "./saltygen");
|
|
229
235
|
if (V(s)) {
|
|
230
|
-
const r =
|
|
231
|
-
r.replace(/^(?!export\s)const\s.*/gm, (c) => `export ${c}`) !== r && await
|
|
232
|
-
const h = await
|
|
236
|
+
const r = M(s, "utf8");
|
|
237
|
+
r.replace(/^(?!export\s)const\s.*/gm, (c) => `export ${c}`) !== r && await Y(s, r);
|
|
238
|
+
const h = await B(t), p = await _(s, e);
|
|
233
239
|
let i = r;
|
|
234
|
-
Object.entries(p).forEach(([c,
|
|
240
|
+
Object.entries(p).forEach(([c, D]) => {
|
|
235
241
|
var E;
|
|
236
|
-
if (
|
|
237
|
-
const
|
|
242
|
+
if (D.isKeyframes || !D.generator) return;
|
|
243
|
+
const w = D.generator._withBuildContext({
|
|
238
244
|
name: c,
|
|
239
245
|
config: h
|
|
240
|
-
}),
|
|
241
|
-
if (!
|
|
242
|
-
const
|
|
243
|
-
if (!
|
|
244
|
-
const { index:
|
|
245
|
-
let
|
|
246
|
-
const
|
|
247
|
-
let f = 0,
|
|
248
|
-
for (; !
|
|
249
|
-
const P = i[
|
|
250
|
-
P === "(" &&
|
|
246
|
+
}), a = new RegExp(`\\s${c}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(r);
|
|
247
|
+
if (!a) return console.error("Could not find the original declaration");
|
|
248
|
+
const j = (E = a.at(1)) == null ? void 0 : E.trim(), C = new RegExp(`\\s${c}[=\\s]+styled\\(`, "g").exec(i);
|
|
249
|
+
if (!C) return console.error("Could not find the original declaration");
|
|
250
|
+
const { index: S } = C;
|
|
251
|
+
let y = !1;
|
|
252
|
+
const F = setTimeout(() => y = !0, 5e3);
|
|
253
|
+
let f = 0, l = !1, d = 0;
|
|
254
|
+
for (; !l && !y; ) {
|
|
255
|
+
const P = i[S + f];
|
|
256
|
+
P === "(" && d++, P === ")" && d--, d === 0 && P === ")" && (l = !0), f > i.length && (y = !0), f++;
|
|
251
257
|
}
|
|
252
|
-
if (!
|
|
258
|
+
if (!y) clearTimeout(F);
|
|
253
259
|
else throw new Error("Failed to find the end of the styled call and timed out");
|
|
254
|
-
const
|
|
255
|
-
i = i.replace(
|
|
260
|
+
const g = S + f, $ = i.slice(S, g), b = i, x = ` ${c} = styled(${j}, "${w.classNames}", "${w._callerName}", ${JSON.stringify(w.props)});`;
|
|
261
|
+
i = i.replace($, x), b === i && console.error("Minimize file failed to change content", { name: c, tagName: j });
|
|
256
262
|
});
|
|
257
|
-
const o =
|
|
263
|
+
const o = R(s, 6);
|
|
258
264
|
return h.importStrategy === "component" && (i = `import '../../saltygen/css/${o}.css';
|
|
259
265
|
${i}`), i = i.replace("{ styled }", "{ styledClient as styled }"), i = i.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), i;
|
|
260
266
|
}
|
|
261
267
|
} catch (e) {
|
|
262
268
|
console.error("Error in minimizeFile:", e);
|
|
263
269
|
}
|
|
264
|
-
},
|
|
270
|
+
}, pt = (t) => ({
|
|
265
271
|
name: "stylegen",
|
|
266
|
-
buildStart: () =>
|
|
272
|
+
buildStart: () => rt(t),
|
|
267
273
|
load: async (s) => {
|
|
268
274
|
if (V(s))
|
|
269
|
-
return await
|
|
275
|
+
return await it(t, s);
|
|
270
276
|
},
|
|
271
277
|
watchChange: {
|
|
272
278
|
handler: async (s) => {
|
|
273
|
-
V(s) && await
|
|
279
|
+
V(s) && await ot(t, s), s.includes("salty.config") && await J(t);
|
|
274
280
|
}
|
|
275
281
|
}
|
|
276
282
|
});
|
|
277
283
|
export {
|
|
278
|
-
|
|
279
|
-
|
|
284
|
+
pt as default,
|
|
285
|
+
pt as saltyPlugin
|
|
280
286
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salty-css/vite",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.52",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"typings": "./dist/index.d.ts",
|
|
@@ -29,6 +29,6 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@salty-css/core": "^0.0.1-alpha.
|
|
32
|
+
"@salty-css/core": "^0.0.1-alpha.52"
|
|
33
33
|
}
|
|
34
34
|
}
|