@salty-css/vite 0.0.1-alpha.114 → 0.0.1-alpha.116
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 +49 -48
- package/index.cjs +13 -13
- package/index.js +154 -150
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -16,38 +16,31 @@ In the world of frontend dev is there anything saltier than CSS? Salty CSS is bu
|
|
|
16
16
|
- Create component: `npx salty-css generate [filePath]`
|
|
17
17
|
- Build: `npx salty-css build [directory]`
|
|
18
18
|
|
|
19
|
-
###
|
|
19
|
+
### Initialize
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
- [Core](https://www.npmjs.com/package/@salty-css/react) → `npm install @salty-css/core` (This package contains code for internal use)
|
|
23
|
+
- Next.js → [Next.js guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
|
|
24
|
+
- React → [React guide](#react) + [React example code](#code-examples)
|
|
25
|
+
- Vite → [Vite guide](#vite)
|
|
26
|
+
- Webpack → Guide coming soon
|
|
27
|
+
- ESLint → Guide coming soon
|
|
29
28
|
|
|
30
|
-
###
|
|
29
|
+
### Salty CSS CLI
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
In your existing repository you can use `npx salty-css [command]` to initialize a project, generate components, update related packages and build required files.
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
- Initialize project → `npx salty-css init [directory]` - Installs required packages, detects framework in use and creates project files to the provided directory. Directory can be left blank if you want files to be created to the current directory.
|
|
34
|
+
- Generate component → `npx salty-css update [version]` - Update @salty-css packages in your repository. Default version is "latest". Additional options like `--dir`, `--tag`, `--name` and `--className` are also supported.
|
|
35
|
+
- Build files → `npx salty-css build [directory]` - Compile Salty CSS related files in your project. This should not be needed if you are using tools like Next.js or Vite
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
### Guides
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
#### Build / Compile Salty CSS
|
|
41
|
-
|
|
42
|
-
If you want to manually build your project that can be done by running `npx salty-css build [directory]`. Directory is not required as CLI can use default directory defined in `.saltyrc.json`. Note that build generates css files but Vite / Webpack plugin is still required for full support.
|
|
43
|
-
|
|
44
|
-
#### Update Salty CSS packages
|
|
45
|
-
|
|
46
|
-
To ease the pain of package updates all Salty CSS packages can be updated with `npx salty-css update`
|
|
39
|
+
#### Next.js
|
|
47
40
|
|
|
48
|
-
|
|
41
|
+
In your existing Next.js repository you can run `npx salty-css init` to automatically configure Salty CSS.
|
|
49
42
|
|
|
50
|
-
|
|
43
|
+
##### Manual configuration
|
|
51
44
|
|
|
52
45
|
1. For Next.js support install `npm i @salty-css/next @salty-css/core @salty-css/react`
|
|
53
46
|
2. Create `salty.config.ts` to your app directory
|
|
@@ -62,15 +55,11 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
|
|
|
62
55
|
|
|
63
56
|
[Check out Next.js demo project](https://github.com/margarita-form/salty-css-website) or [react example code](#code-examples)
|
|
64
57
|
|
|
65
|
-
####
|
|
66
|
-
|
|
67
|
-
1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
|
|
68
|
-
2. Create `salty.config.ts` to your app directory
|
|
69
|
-
3. Configure your build tool to support Salty CSS ([Vite](#vite) or Webpack)
|
|
58
|
+
#### Vite
|
|
70
59
|
|
|
71
|
-
|
|
60
|
+
In your existing Vite repository you can run `npx salty-css init` to automatically configure Salty CSS.
|
|
72
61
|
|
|
73
|
-
|
|
62
|
+
##### Manual configuration
|
|
74
63
|
|
|
75
64
|
1. For Vite support install `npm i @salty-css/vite @salty-css/core`
|
|
76
65
|
2. In `vite.config` add import for salty plugin `import { saltyPlugin } from '@salty-css/vite';` and then add `saltyPlugin(__dirname)` to your vite configuration plugins
|
|
@@ -78,6 +67,18 @@ To ease the pain of package updates all Salty CSS packages can be updated with `
|
|
|
78
67
|
4. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
|
|
79
68
|
5. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
|
|
80
69
|
|
|
70
|
+
#### React
|
|
71
|
+
|
|
72
|
+
In your existing React repository you can run `npx salty-css init` to automatically configure Salty CSS.
|
|
73
|
+
|
|
74
|
+
##### Manual configuration
|
|
75
|
+
|
|
76
|
+
1. Install related dependencies: `npm i @salty-css/core @salty-css/react`
|
|
77
|
+
2. Create `salty.config.ts` to your app directory
|
|
78
|
+
3. Configure your build tool to support Salty CSS ([Vite](#vite) or Webpack) or after changes run `npx salty-css build`
|
|
79
|
+
|
|
80
|
+
[Check out react example code](#code-examples)
|
|
81
|
+
|
|
81
82
|
### Create components
|
|
82
83
|
|
|
83
84
|
1. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
|
|
@@ -106,23 +107,6 @@ export const config = defineConfig({
|
|
|
106
107
|
});
|
|
107
108
|
```
|
|
108
109
|
|
|
109
|
-
**Your React component file**
|
|
110
|
-
|
|
111
|
-
```tsx
|
|
112
|
-
import { Wrapper } from '../components/wrapper/wrapper.css';
|
|
113
|
-
import { Button } from '../components/button/button.css';
|
|
114
|
-
|
|
115
|
-
export const IndexPage = () => {
|
|
116
|
-
return (
|
|
117
|
-
<Wrapper>
|
|
118
|
-
<Button variant="solid" onClick={() => alert('It is a button.')}>
|
|
119
|
-
Outlined
|
|
120
|
-
</Button>
|
|
121
|
-
</Wrapper>
|
|
122
|
-
);
|
|
123
|
-
};
|
|
124
|
-
```
|
|
125
|
-
|
|
126
110
|
**Wrapper** (`components/wrapper/wrapper.css.ts`)
|
|
127
111
|
|
|
128
112
|
```tsx
|
|
@@ -147,7 +131,7 @@ export const Button = styled('button', {
|
|
|
147
131
|
padding: `0.6em 1.2em`,
|
|
148
132
|
border: '1px solid currentColor',
|
|
149
133
|
background: 'transparent',
|
|
150
|
-
color: 'currentColor
|
|
134
|
+
color: 'currentColor',
|
|
151
135
|
cursor: 'pointer',
|
|
152
136
|
transition: '200ms',
|
|
153
137
|
textDecoration: 'none',
|
|
@@ -183,4 +167,21 @@ export const Button = styled('button', {
|
|
|
183
167
|
});
|
|
184
168
|
```
|
|
185
169
|
|
|
170
|
+
**Your React component file**
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
import { Wrapper } from '../components/wrapper/wrapper.css';
|
|
174
|
+
import { Button } from '../components/button/button.css';
|
|
175
|
+
|
|
176
|
+
export const IndexPage = () => {
|
|
177
|
+
return (
|
|
178
|
+
<Wrapper>
|
|
179
|
+
<Button variant="solid" onClick={() => alert('It is a button.')}>
|
|
180
|
+
Outlined
|
|
181
|
+
</Button>
|
|
182
|
+
</Wrapper>
|
|
183
|
+
);
|
|
184
|
+
};
|
|
185
|
+
```
|
|
186
|
+
|
|
186
187
|
More examples coming soon
|
package/index.cjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
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 it=require("esbuild"),ct=require("child_process"),l=require("path"),f=require("fs"),L=require("fs/promises"),V=require("winston");var J=typeof document<"u"?document.currentScript:null;function at(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const K=at(it),z=t=>String.fromCharCode(t+(t>25?39:97)),lt=(t,e)=>{let n="",s;for(s=Math.abs(t);s>52;s=s/52|0)n=z(s%52)+n;return n=z(s%52)+n,n.length<e?n=n.padStart(e,"a"):n.length>e&&(n=n.slice(-e)),n},ut=(t,e)=>{let n=e.length;for(;n;)t=t*33^e.charCodeAt(--n);return t},Z=(t,e=3)=>{const n=ut(5381,JSON.stringify(t))>>>0;return lt(n,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,n)=>(n>0?"-":"")+e.toLowerCase()):""}const ft=(t,e)=>{if(typeof t!="string")return{result:t};if(!e)return{result:t};const n=[];return Object.values(e).forEach(s=>{const{pattern:o,transform:i}=s;t=t.replace(o,y=>{const{value:a,css:j}=i(y);return j&&n.push(j),a})}),{result:t,additionalCss:n}},U=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...s)=>`var(--${N(s[1].replaceAll(".","-"))})`)}:{result:t},M=(t,e,n,s)=>{if(!t)return"";const o=[],i=Object.entries(t).reduce((a,[j,r])=>{const d=j.trim();if(typeof r=="function"&&(r=r()),typeof r=="object"){if(!r)return a;if(d==="variants")return Object.entries(r).forEach(([S,c])=>{c&&Object.entries(c).forEach(([p,m])=>{if(!m)return;const h=`${e}.${S}-${p}`,T=M(m,h);o.push(T)})}),a;if(d==="defaultVariants")return a;if(d==="compoundVariants")return r.forEach(S=>{const{css:c,...p}=S,m=Object.entries(p).reduce((T,[w,F])=>`${T}.${w}-${F}`,e),h=M(c,m);o.push(h)}),a;if(d.startsWith("@")){const S=M(r,e),c=`${d} {
|
|
2
2
|
${S.replace(`
|
|
3
3
|
`,`
|
|
4
4
|
`)}
|
|
5
|
-
}`;return o.push(c),a}const g=j.includes("&")?d.replace("&",e):d.startsWith(":")?`${e}${d}`:`${e} ${d}`,$=
|
|
5
|
+
}`;return o.push(c),a}const g=j.includes("&")?d.replace("&",e):d.startsWith(":")?`${e}${d}`:`${e} ${d}`,$=M(r,g);return o.push($),a}const b=d.startsWith("-")?d:N(d),C=(g,$=";")=>a=`${a}${g}${$}`,k=g=>C(`${b}:${g}`);if(typeof r=="number")return k(r);if(typeof r!="string")if("toString"in r)r=r.toString();else return a;const{modifiers:u}={},O=function*(){yield U(r),yield ft(r,u)}();for(const{result:g,additionalCss:$=[]}of O)r=g,$.forEach(S=>{const c=M(S,"");C(c,"")});return k(r)},"");if(!i)return o.join(`
|
|
6
6
|
`);if(!e)return i;let y="";return y=`${e} { ${i} }`,[y,...o].join(`
|
|
7
|
-
`)},
|
|
8
|
-
`)},
|
|
7
|
+
`)},G=(t,e=[])=>{if(!t)return"";const n=[],s={};if(Object.entries(t).forEach(([o,i])=>{if(typeof i=="object"){if(!i)return;const y=o.trim(),a=G(i,[...e,y]);n.push(a)}else s[o]=i}),Object.keys(s).length){const o=e.map(N).join("-"),i=M(s,`.${o}`);n.push(i)}return n.join(`
|
|
8
|
+
`)},pt=t=>Object.entries(t).reduce((e,[n,s])=>(typeof s=="object"&&(e[n]=H(s).map(o=>`"${o}"`).join(" | ")),e),{}),H=(t,e="",n=new Set)=>t?(Object.entries(t).forEach(([s,o])=>{const i=e?`${e}.${s}`:s;return typeof o=="object"?H(o,i,n):n.add(e)}),[...n]):[],X=t=>{if(!t||t==="/")throw new Error("Could not find package.json file");const e=l.join(t,"package.json");return f.existsSync(e)?e:X(l.join(t,".."))},dt=async t=>{const e=X(t);return await L.readFile(e,"utf-8").then(JSON.parse).catch(()=>{})},yt=async t=>{const e=await dt(t);if(e)return e.type};let E;const Y=async t=>{if(E)return E;const e=await yt(t);return e==="module"?E="esm":(e==="commonjs"||(typeof document>"u"?require("url").pathToFileURL(__filename).href:J&&J.tagName.toUpperCase()==="SCRIPT"&&J.src||new URL("index.cjs",document.baseURI).href).endsWith(".cjs"))&&(E="cjs"),E||"esm"},B=V.createLogger({level:"debug",format:V.format.combine(V.format.colorize(),V.format.cli()),transports:[new V.transports.Console({})]});function Q(t){return t?typeof t!="string"?Q(String(t)):t.replace(/[\s-]/g,".").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(e,n)=>(n>0?".":"")+e.toLowerCase()):""}const R={externalModules:[]},v=t=>{if(R.externalModules.length>0)return R.externalModules;const e=l.join(t,"salty.config.ts"),s=f.readFileSync(e,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!s)return[];const o=s[1].split(",").map(i=>i.replace(/['"`]/g,"").trim());return R.externalModules=o,o},A=t=>l.join(t,"./saltygen"),gt=["salty","css","styles","styled"],mt=(t=[])=>new RegExp(`\\.(${[...gt,...t].join("|")})\\.`),_=(t,e=[])=>mt(e).test(t),ht=async t=>{const e=A(t),n=l.join(t,"salty.config.ts"),s=l.join(e,"salty.config.js"),o=await Y(t),i=v(t);await K.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:o,external:i});const y=Date.now(),{config:a}=await import(`${s}?t=${y}`);return a},tt=async t=>{const e=await ht(t),n=new Set,s=(c,p=[])=>c?Object.entries(c).flatMap(([m,h])=>{if(!h)return;if(typeof h=="object")return s(h,[...p,m]);const T=Q(m),w=N(m),F=[...p,T].join(".");n.add(`"${F}"`);const P=[...p.map(N),w].join("-"),{result:D}=U(h);return`--${P}: ${D};`}):[],o=c=>c?Object.entries(c).flatMap(([p,m])=>{const h=s(m);return p==="base"?h.join(""):`${p} { ${h.join("")} }`}):[],i=c=>c?Object.entries(c).flatMap(([p,m])=>Object.entries(m).flatMap(([h,T])=>{const w=s(T,[p]),F=`.${p}-${h}, [data-${p}="${h}"]`,P=w.join("");return`${F} { ${P} }`})):[],y=s(e.variables),a=o(e.responsiveVariables),j=i(e.conditionalVariables),r=A(t),d=l.join(r,"css/variables.css"),b=`:root { ${y.join("")} ${a.join("")} } ${j.join("")}`;f.writeFileSync(d,b);const C=l.join(r,"css/global.css"),k=M(e.global,"");f.writeFileSync(C,k);const u=l.join(r,"css/templates.css"),x=G(e.templates),O=pt(e.templates);f.writeFileSync(u,x);const g=l.join(r,"types/css-tokens.d.ts"),S=`
|
|
9
9
|
// Variable types
|
|
10
|
-
type VariableTokens = ${[...
|
|
10
|
+
type VariableTokens = ${[...n].join("|")};
|
|
11
11
|
type PropertyValueToken = \`{\${VariableTokens}}\`;
|
|
12
12
|
|
|
13
13
|
// Template types
|
|
@@ -15,14 +15,14 @@
|
|
|
15
15
|
${Object.entries(O).map(([c,p])=>`${c}?: ${p}`).join(`
|
|
16
16
|
`)}
|
|
17
17
|
}
|
|
18
|
-
`;f.writeFileSync(g,S)},
|
|
19
|
-
`),m=
|
|
20
|
-
`);let
|
|
18
|
+
`;f.writeFileSync(g,S)},q=async(t,e,n)=>{const s=Z(e),o=l.join(n,"./temp");f.existsSync(o)||f.mkdirSync(o);const i=l.parse(e);let y=f.readFileSync(e,"utf8");y=y.replace(/styled\([^"'`{,]+,/g,"styled('div',");const a=l.join(n,"js",s+".js"),j=v(t),r=await Y(t);await K.build({stdin:{contents:y,sourcefile:i.base,resolveDir:i.dir,loader:"tsx"},minify:!1,treeShaking:!0,bundle:!0,outfile:a,format:r,target:["node20"],keepNames:!0,external:j,packages:"external"});const d=Date.now();return await import(`${a}?t=${d}`)},I=async t=>{const e=A(t),n=l.join(e,"salty.config.js"),{config:s}=await import(n);return s},et=()=>{try{return process.env.NODE_ENV==="production"}catch{return!1}},jt=async(t,e=et())=>{try{e?B.info("Generating CSS in production mode! 🔥"):B.info("Generating CSS in development mode! 🚀");const n=[],s=[],o=A(t),i=l.join(o,"index.css");(()=>{f.existsSync(o)&&ct.execSync("rm -rf "+o),f.mkdirSync(o),f.mkdirSync(l.join(o,"css")),f.mkdirSync(l.join(o,"types"))})(),await tt(t);const a=await I(t);async function j(u,x){const O=["node_modules","saltygen"],g=f.statSync(u);if(g.isDirectory()){const $=f.readdirSync(u);if(O.some(c=>u.includes(c)))return;await Promise.all($.map(c=>j(l.join(u,c),l.join(x,c))))}else if(g.isFile()&&_(u)){const S=await q(t,u,o),c=[];Object.entries(S).forEach(([T,w])=>{if(w.isKeyframes&&w.css){const W=`${w.animationName}.css`,ot=`css/${W}`,rt=l.join(o,ot);n.push(W),f.writeFileSync(rt,w.css);return}if(!w.generator)return;const F=w.generator._withBuildContext({name:T,config:a,prod:e}),P=`${F.hash}-${F.priority}.css`;s[F.priority]||(s[F.priority]=[]),s[F.priority].push(P),c.push(P);const D=`css/${P}`,st=l.join(o,D);f.writeFileSync(st,F.css)});const p=c.map(T=>`@import url('./${T}');`).join(`
|
|
19
|
+
`),m=Z(u,6),h=l.join(o,`css/${m}.css`);f.writeFileSync(h,p)}}await j(t,o);const r=n.map(u=>`@import url('./css/${u}');`).join(`
|
|
20
|
+
`);let k=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
|
21
21
|
|
|
22
22
|
${["variables.css","global.css","templates.css"].filter(u=>{try{return f.readFileSync(l.join(o,"css",u),"utf8").length>0}catch{return!1}}).map(u=>`@import url('./css/${u}');`).join(`
|
|
23
23
|
`)}
|
|
24
|
-
${r}`;if(a.importStrategy!=="component"){const u=
|
|
25
|
-
`);
|
|
26
|
-
`),r=
|
|
27
|
-
`);f.writeFileSync(o,b)}}catch(
|
|
28
|
-
${r}`),r=r.replace("{ styled }","{ styledClient as styled }"),r=r.replace("@salty-css/react/styled","@salty-css/react/styled-client"),r}}catch(
|
|
24
|
+
${r}`;if(a.importStrategy!=="component"){const u=s.flat().map(x=>`@import url('./css/${x}');`).join(`
|
|
25
|
+
`);k+=u}f.writeFileSync(i,k)}catch(n){console.error(n)}},bt=async(t,e)=>{try{const n=[],s=l.join(t,"./saltygen"),o=l.join(s,"index.css");if(_(e)){const y=await I(t),a=await q(t,e,s);Object.entries(a).forEach(([C,k])=>{if(!k.generator)return;const u=k.generator._withBuildContext({name:C,config:y}),x=`${u.hash}-${u.priority}.css`,O=`css/${x}`,g=l.join(s,O);n.push(x),f.writeFileSync(g,u.css)});const j=f.readFileSync(o,"utf8").split(`
|
|
26
|
+
`),r=n.map(C=>`@import url('../saltygen/css/${C}');`),b=[...new Set([...j,...r])].join(`
|
|
27
|
+
`);f.writeFileSync(o,b)}}catch(n){console.error(n)}},$t=async(t,e,n=et())=>{try{const s=l.join(t,"./saltygen");if(_(e)){const i=f.readFileSync(e,"utf8");i.replace(/^(?!export\s)const\s.*/gm,b=>`export ${b}`)!==i&&await L.writeFile(e,i);const a=await I(t),j=await q(t,e,s);let r=i;Object.entries(j).forEach(([b,C])=>{var P;if(C.isKeyframes||!C.generator)return;const k=C.generator._withBuildContext({name:b,config:a,prod:n}),u=new RegExp(`\\s${b}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(i);if(!u)return console.error("Could not find the original declaration");const x=(P=u.at(1))==null?void 0:P.trim(),O=new RegExp(`\\s${b}[=\\s]+styled\\(`,"g").exec(r);if(!O)return console.error("Could not find the original declaration");const{index:g}=O;let $=!1;const S=setTimeout(()=>$=!0,5e3);let c=0,p=!1,m=0;for(;!p&&!$;){const D=r[g+c];D==="("&&m++,D===")"&&m--,m===0&&D===")"&&(p=!0),c>r.length&&($=!0),c++}if(!$)clearTimeout(S);else throw new Error("Failed to find the end of the styled call and timed out");const h=g+c,T=r.slice(g,h),w=r,F=` ${b} = styled(${x}, "${k.classNames}", ${JSON.stringify(k.props)});`;r=r.replace(T,F),w===r&&console.error("Minimize file failed to change content",{name:b,tagName:x})});const d=Z(e,6);return a.importStrategy==="component"&&(r=`import '../../saltygen/css/${d}.css';
|
|
28
|
+
${r}`),r=r.replace("{ styled }","{ styledClient as styled }"),r=r.replace("@salty-css/react/styled","@salty-css/react/styled-client"),r}}catch(s){console.error("Error in minimizeFile:",s)}},nt=t=>({name:"stylegen",buildStart:()=>jt(t),load:async e=>{if(_(e))return await $t(t,e)},watchChange:{handler:async e=>{_(e)&&await bt(t,e),e.includes("salty.config")&&await tt(t)}}});exports.default=nt;exports.saltyPlugin=nt;
|
package/index.js
CHANGED
|
@@ -1,87 +1,87 @@
|
|
|
1
1
|
import * as L from "esbuild";
|
|
2
|
-
import { execSync as
|
|
3
|
-
import { join as f, parse as
|
|
4
|
-
import { existsSync as
|
|
5
|
-
import { readFile as
|
|
6
|
-
import { createLogger as pt, format as
|
|
7
|
-
const
|
|
2
|
+
import { execSync as it } from "child_process";
|
|
3
|
+
import { join as f, parse as ct } from "path";
|
|
4
|
+
import { existsSync as W, writeFileSync as P, mkdirSync as J, statSync as at, readdirSync as lt, readFileSync as A } from "fs";
|
|
5
|
+
import { readFile as ft, writeFile as ut } from "fs/promises";
|
|
6
|
+
import { createLogger as pt, format as R, transports as dt } from "winston";
|
|
7
|
+
const G = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), gt = (t, e) => {
|
|
8
8
|
let s = "", n;
|
|
9
|
-
for (n = Math.abs(t); n > 52; n = n / 52 | 0) s =
|
|
10
|
-
return s =
|
|
11
|
-
},
|
|
9
|
+
for (n = Math.abs(t); n > 52; n = n / 52 | 0) s = G(n % 52) + s;
|
|
10
|
+
return s = G(n % 52) + s, s.length < e ? s = s.padStart(e, "a") : s.length > e && (s = s.slice(-e)), s;
|
|
11
|
+
}, yt = (t, e) => {
|
|
12
12
|
let s = e.length;
|
|
13
13
|
for (; s; ) t = t * 33 ^ e.charCodeAt(--s);
|
|
14
14
|
return t;
|
|
15
|
-
},
|
|
16
|
-
const s =
|
|
15
|
+
}, B = (t, e = 3) => {
|
|
16
|
+
const s = yt(5381, JSON.stringify(t)) >>> 0;
|
|
17
17
|
return gt(s, e);
|
|
18
18
|
};
|
|
19
|
-
function
|
|
20
|
-
return t ? typeof t != "string" ?
|
|
19
|
+
function M(t) {
|
|
20
|
+
return t ? typeof t != "string" ? M(String(t)) : t.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (e, s) => (s > 0 ? "-" : "") + e.toLowerCase()) : "";
|
|
21
21
|
}
|
|
22
|
-
const
|
|
22
|
+
const mt = (t, e) => {
|
|
23
23
|
if (typeof t != "string") return { result: t };
|
|
24
24
|
if (!e) return { result: t };
|
|
25
25
|
const s = [];
|
|
26
26
|
return Object.values(e).forEach((n) => {
|
|
27
27
|
const { pattern: o, transform: i } = n;
|
|
28
|
-
t = t.replace(o, (
|
|
29
|
-
const { value: a, css: h } = i(
|
|
28
|
+
t = t.replace(o, (d) => {
|
|
29
|
+
const { value: a, css: h } = i(d);
|
|
30
30
|
return h && s.push(h), a;
|
|
31
31
|
});
|
|
32
32
|
}), { result: t, additionalCss: s };
|
|
33
|
-
}, q = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${
|
|
33
|
+
}, q = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${M(n[1].replaceAll(".", "-"))})`) } : { result: t }, O = (t, e, s, n) => {
|
|
34
34
|
if (!t) return "";
|
|
35
35
|
const o = [], i = Object.entries(t).reduce((a, [h, r]) => {
|
|
36
|
-
const
|
|
36
|
+
const p = h.trim();
|
|
37
37
|
if (typeof r == "function" && (r = r()), typeof r == "object") {
|
|
38
38
|
if (!r) return a;
|
|
39
|
-
if (
|
|
39
|
+
if (p === "variants")
|
|
40
40
|
return Object.entries(r).forEach(([j, c]) => {
|
|
41
|
-
c && Object.entries(c).forEach(([
|
|
41
|
+
c && Object.entries(c).forEach(([u, y]) => {
|
|
42
42
|
if (!y) return;
|
|
43
|
-
const m = `${e}.${j}-${
|
|
43
|
+
const m = `${e}.${j}-${u}`, x = O(y, m);
|
|
44
44
|
o.push(x);
|
|
45
45
|
});
|
|
46
46
|
}), a;
|
|
47
|
-
if (
|
|
47
|
+
if (p === "defaultVariants")
|
|
48
48
|
return a;
|
|
49
|
-
if (
|
|
49
|
+
if (p === "compoundVariants")
|
|
50
50
|
return r.forEach((j) => {
|
|
51
|
-
const { css: c, ...
|
|
51
|
+
const { css: c, ...u } = j, y = Object.entries(u).reduce((x, [w, S]) => `${x}.${w}-${S}`, e), m = O(c, y);
|
|
52
52
|
o.push(m);
|
|
53
53
|
}), a;
|
|
54
|
-
if (
|
|
55
|
-
const j =
|
|
54
|
+
if (p.startsWith("@")) {
|
|
55
|
+
const j = O(r, e), c = `${p} {
|
|
56
56
|
${j.replace(`
|
|
57
57
|
`, `
|
|
58
58
|
`)}
|
|
59
59
|
}`;
|
|
60
60
|
return o.push(c), a;
|
|
61
61
|
}
|
|
62
|
-
const
|
|
62
|
+
const g = h.includes("&") ? p.replace("&", e) : p.startsWith(":") ? `${e}${p}` : `${e} ${p}`, b = O(r, g);
|
|
63
63
|
return o.push(b), a;
|
|
64
64
|
}
|
|
65
|
-
const $ =
|
|
66
|
-
if (typeof r == "number") return
|
|
65
|
+
const $ = p.startsWith("-") ? p : M(p), C = (g, b = ";") => a = `${a}${g}${b}`, F = (g) => C(`${$}:${g}`);
|
|
66
|
+
if (typeof r == "number") return F(r);
|
|
67
67
|
if (typeof r != "string")
|
|
68
68
|
if ("toString" in r) r = r.toString();
|
|
69
69
|
else return a;
|
|
70
70
|
const { modifiers: l } = {}, T = function* () {
|
|
71
|
-
yield q(r), yield
|
|
71
|
+
yield q(r), yield mt(r, l);
|
|
72
72
|
}();
|
|
73
|
-
for (const { result:
|
|
74
|
-
r =
|
|
75
|
-
const c =
|
|
76
|
-
|
|
73
|
+
for (const { result: g, additionalCss: b = [] } of T)
|
|
74
|
+
r = g, b.forEach((j) => {
|
|
75
|
+
const c = O(j, "");
|
|
76
|
+
C(c, "");
|
|
77
77
|
});
|
|
78
|
-
return
|
|
78
|
+
return F(r);
|
|
79
79
|
}, "");
|
|
80
80
|
if (!i) return o.join(`
|
|
81
81
|
`);
|
|
82
82
|
if (!e) return i;
|
|
83
|
-
let
|
|
84
|
-
return
|
|
83
|
+
let d = "";
|
|
84
|
+
return d = `${e} { ${i} }`, [d, ...o].join(`
|
|
85
85
|
`);
|
|
86
86
|
}, U = (t, e = []) => {
|
|
87
87
|
if (!t) return "";
|
|
@@ -89,51 +89,55 @@ const yt = (t, e) => {
|
|
|
89
89
|
if (Object.entries(t).forEach(([o, i]) => {
|
|
90
90
|
if (typeof i == "object") {
|
|
91
91
|
if (!i) return;
|
|
92
|
-
const
|
|
92
|
+
const d = o.trim(), a = U(i, [...e, d]);
|
|
93
93
|
s.push(a);
|
|
94
94
|
} else
|
|
95
95
|
n[o] = i;
|
|
96
96
|
}), Object.keys(n).length) {
|
|
97
|
-
const o = e.map(
|
|
97
|
+
const o = e.map(M).join("-"), i = O(n, `.${o}`);
|
|
98
98
|
s.push(i);
|
|
99
99
|
}
|
|
100
100
|
return s.join(`
|
|
101
101
|
`);
|
|
102
|
-
},
|
|
102
|
+
}, ht = (t) => Object.entries(t).reduce((e, [s, n]) => (typeof n == "object" && (e[s] = X(n).map((o) => `"${o}"`).join(" | ")), e), {}), X = (t, e = "", s = /* @__PURE__ */ new Set()) => t ? (Object.entries(t).forEach(([n, o]) => {
|
|
103
103
|
const i = e ? `${e}.${n}` : n;
|
|
104
104
|
return typeof o == "object" ? X(o, i, s) : s.add(e);
|
|
105
105
|
}), [...s]) : [], Y = (t) => {
|
|
106
106
|
if (!t || t === "/") throw new Error("Could not find package.json file");
|
|
107
107
|
const e = f(t, "package.json");
|
|
108
|
-
return
|
|
109
|
-
},
|
|
108
|
+
return W(e) ? e : Y(f(t, ".."));
|
|
109
|
+
}, $t = async (t) => {
|
|
110
110
|
const e = Y(t);
|
|
111
|
-
return await
|
|
111
|
+
return await ft(e, "utf-8").then(JSON.parse).catch(() => {
|
|
112
112
|
});
|
|
113
|
-
},
|
|
114
|
-
const e = await
|
|
113
|
+
}, bt = async (t) => {
|
|
114
|
+
const e = await $t(t);
|
|
115
115
|
if (e)
|
|
116
116
|
return e.type;
|
|
117
117
|
};
|
|
118
|
-
let
|
|
118
|
+
let V;
|
|
119
119
|
const Q = async (t) => {
|
|
120
|
-
if (
|
|
121
|
-
const e = await
|
|
122
|
-
return e === "module" ?
|
|
123
|
-
},
|
|
120
|
+
if (V) return V;
|
|
121
|
+
const e = await bt(t);
|
|
122
|
+
return e === "module" ? V = "esm" : (e === "commonjs" || import.meta.url.endsWith(".cjs")) && (V = "cjs"), V || "esm";
|
|
123
|
+
}, H = pt({
|
|
124
124
|
level: "debug",
|
|
125
|
-
format:
|
|
126
|
-
transports: [new
|
|
127
|
-
})
|
|
125
|
+
format: R.combine(R.colorize(), R.cli()),
|
|
126
|
+
transports: [new dt.Console({})]
|
|
127
|
+
});
|
|
128
|
+
function v(t) {
|
|
129
|
+
return t ? typeof t != "string" ? v(String(t)) : t.replace(/[\s-]/g, ".").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (e, s) => (s > 0 ? "." : "") + e.toLowerCase()) : "";
|
|
130
|
+
}
|
|
131
|
+
const _ = {
|
|
128
132
|
externalModules: []
|
|
129
|
-
},
|
|
130
|
-
if (
|
|
131
|
-
const e = f(t, "salty.config.ts"), n =
|
|
133
|
+
}, tt = (t) => {
|
|
134
|
+
if (_.externalModules.length > 0) return _.externalModules;
|
|
135
|
+
const e = f(t, "salty.config.ts"), n = A(e, "utf8").match(/externalModules:\s?\[(.*)\]/);
|
|
132
136
|
if (!n) return [];
|
|
133
137
|
const o = n[1].split(",").map((i) => i.replace(/['"`]/g, "").trim());
|
|
134
|
-
return
|
|
135
|
-
},
|
|
136
|
-
const e =
|
|
138
|
+
return _.externalModules = o, o;
|
|
139
|
+
}, Z = (t) => f(t, "./saltygen"), jt = ["salty", "css", "styles", "styled"], wt = (t = []) => new RegExp(`\\.(${[...jt, ...t].join("|")})\\.`), N = (t, e = []) => wt(e).test(t), St = async (t) => {
|
|
140
|
+
const e = Z(t), s = f(t, "salty.config.ts"), n = f(e, "salty.config.js"), o = await Q(t), i = tt(t);
|
|
137
141
|
await L.build({
|
|
138
142
|
entryPoints: [s],
|
|
139
143
|
minify: !0,
|
|
@@ -143,50 +147,50 @@ const Q = async (t) => {
|
|
|
143
147
|
format: o,
|
|
144
148
|
external: i
|
|
145
149
|
});
|
|
146
|
-
const
|
|
150
|
+
const d = Date.now(), { config: a } = await import(`${n}?t=${d}`);
|
|
147
151
|
return a;
|
|
148
|
-
},
|
|
149
|
-
const e = await
|
|
152
|
+
}, et = async (t) => {
|
|
153
|
+
const e = await St(t), s = /* @__PURE__ */ new Set(), n = (c, u = []) => c ? Object.entries(c).flatMap(([y, m]) => {
|
|
150
154
|
if (!m) return;
|
|
151
|
-
if (typeof m == "object") return n(m, [...
|
|
152
|
-
const x = [...
|
|
153
|
-
s.add(`"${
|
|
154
|
-
const
|
|
155
|
-
return `--${
|
|
156
|
-
}) : [], o = (c) => c ? Object.entries(c).flatMap(([
|
|
155
|
+
if (typeof m == "object") return n(m, [...u, y]);
|
|
156
|
+
const x = v(y), w = M(y), S = [...u, x].join(".");
|
|
157
|
+
s.add(`"${S}"`);
|
|
158
|
+
const E = [...u.map(M), w].join("-"), { result: D } = q(m);
|
|
159
|
+
return `--${E}: ${D};`;
|
|
160
|
+
}) : [], o = (c) => c ? Object.entries(c).flatMap(([u, y]) => {
|
|
157
161
|
const m = n(y);
|
|
158
|
-
return
|
|
159
|
-
}) : [], i = (c) => c ? Object.entries(c).flatMap(([
|
|
160
|
-
const w = n(x, [
|
|
161
|
-
return `${S} { ${
|
|
162
|
-
})) : [],
|
|
163
|
-
|
|
164
|
-
const
|
|
165
|
-
|
|
166
|
-
const l = f(r, "css/templates.css"), k = U(e.templates), T =
|
|
167
|
-
|
|
168
|
-
const
|
|
162
|
+
return u === "base" ? m.join("") : `${u} { ${m.join("")} }`;
|
|
163
|
+
}) : [], i = (c) => c ? Object.entries(c).flatMap(([u, y]) => Object.entries(y).flatMap(([m, x]) => {
|
|
164
|
+
const w = n(x, [u]), S = `.${u}-${m}, [data-${u}="${m}"]`, E = w.join("");
|
|
165
|
+
return `${S} { ${E} }`;
|
|
166
|
+
})) : [], d = n(e.variables), a = o(e.responsiveVariables), h = i(e.conditionalVariables), r = Z(t), p = f(r, "css/variables.css"), $ = `:root { ${d.join("")} ${a.join("")} } ${h.join("")}`;
|
|
167
|
+
P(p, $);
|
|
168
|
+
const C = f(r, "css/global.css"), F = O(e.global, "");
|
|
169
|
+
P(C, F);
|
|
170
|
+
const l = f(r, "css/templates.css"), k = U(e.templates), T = ht(e.templates);
|
|
171
|
+
P(l, k);
|
|
172
|
+
const g = f(r, "types/css-tokens.d.ts"), j = `
|
|
169
173
|
// Variable types
|
|
170
174
|
type VariableTokens = ${[...s].join("|")};
|
|
171
175
|
type PropertyValueToken = \`{\${VariableTokens}}\`;
|
|
172
176
|
|
|
173
177
|
// Template types
|
|
174
178
|
type TemplateTokens = {
|
|
175
|
-
${Object.entries(T).map(([c,
|
|
179
|
+
${Object.entries(T).map(([c, u]) => `${c}?: ${u}`).join(`
|
|
176
180
|
`)}
|
|
177
181
|
}
|
|
178
182
|
`;
|
|
179
|
-
|
|
180
|
-
},
|
|
181
|
-
const n =
|
|
182
|
-
|
|
183
|
-
const i =
|
|
184
|
-
let
|
|
185
|
-
|
|
186
|
-
const a = f(s, "js", n + ".js"), h =
|
|
183
|
+
P(g, j);
|
|
184
|
+
}, I = async (t, e, s) => {
|
|
185
|
+
const n = B(e), o = f(s, "./temp");
|
|
186
|
+
W(o) || J(o);
|
|
187
|
+
const i = ct(e);
|
|
188
|
+
let d = A(e, "utf8");
|
|
189
|
+
d = d.replace(/styled\([^"'`{,]+,/g, "styled('div',");
|
|
190
|
+
const a = f(s, "js", n + ".js"), h = tt(t), r = await Q(t);
|
|
187
191
|
await L.build({
|
|
188
192
|
stdin: {
|
|
189
|
-
contents:
|
|
193
|
+
contents: d,
|
|
190
194
|
sourcefile: i.base,
|
|
191
195
|
resolveDir: i.dir,
|
|
192
196
|
loader: "tsx"
|
|
@@ -201,37 +205,37 @@ const Q = async (t) => {
|
|
|
201
205
|
external: h,
|
|
202
206
|
packages: "external"
|
|
203
207
|
});
|
|
204
|
-
const
|
|
205
|
-
return await import(`${a}?t=${
|
|
208
|
+
const p = Date.now();
|
|
209
|
+
return await import(`${a}?t=${p}`);
|
|
206
210
|
}, z = async (t) => {
|
|
207
|
-
const e =
|
|
211
|
+
const e = Z(t), s = f(e, "salty.config.js"), { config: n } = await import(s);
|
|
208
212
|
return n;
|
|
209
|
-
},
|
|
213
|
+
}, st = () => {
|
|
210
214
|
try {
|
|
211
215
|
return process.env.NODE_ENV === "production";
|
|
212
216
|
} catch {
|
|
213
217
|
return !1;
|
|
214
218
|
}
|
|
215
|
-
},
|
|
219
|
+
}, Ct = async (t, e = st()) => {
|
|
216
220
|
try {
|
|
217
|
-
e ?
|
|
218
|
-
const s = [], n = [], o =
|
|
221
|
+
e ? H.info("Generating CSS in production mode! 🔥") : H.info("Generating CSS in development mode! 🚀");
|
|
222
|
+
const s = [], n = [], o = Z(t), i = f(o, "index.css");
|
|
219
223
|
(() => {
|
|
220
|
-
|
|
221
|
-
})(), await
|
|
224
|
+
W(o) && it("rm -rf " + o), J(o), J(f(o, "css")), J(f(o, "types"));
|
|
225
|
+
})(), await et(t);
|
|
222
226
|
const a = await z(t);
|
|
223
227
|
async function h(l, k) {
|
|
224
|
-
const T = ["node_modules", "saltygen"],
|
|
225
|
-
if (
|
|
226
|
-
const b =
|
|
228
|
+
const T = ["node_modules", "saltygen"], g = at(l);
|
|
229
|
+
if (g.isDirectory()) {
|
|
230
|
+
const b = lt(l);
|
|
227
231
|
if (T.some((c) => l.includes(c))) return;
|
|
228
232
|
await Promise.all(b.map((c) => h(f(l, c), f(k, c))));
|
|
229
|
-
} else if (
|
|
230
|
-
const j = await
|
|
233
|
+
} else if (g.isFile() && N(l)) {
|
|
234
|
+
const j = await I(t, l, o), c = [];
|
|
231
235
|
Object.entries(j).forEach(([x, w]) => {
|
|
232
236
|
if (w.isKeyframes && w.css) {
|
|
233
|
-
const
|
|
234
|
-
s.push(
|
|
237
|
+
const K = `${w.animationName}.css`, ot = `css/${K}`, rt = f(o, ot);
|
|
238
|
+
s.push(K), P(rt, w.css);
|
|
235
239
|
return;
|
|
236
240
|
}
|
|
237
241
|
if (!w.generator) return;
|
|
@@ -239,24 +243,24 @@ const Q = async (t) => {
|
|
|
239
243
|
name: x,
|
|
240
244
|
config: a,
|
|
241
245
|
prod: e
|
|
242
|
-
}),
|
|
243
|
-
n[S.priority] || (n[S.priority] = []), n[S.priority].push(
|
|
244
|
-
const
|
|
245
|
-
|
|
246
|
+
}), E = `${S.hash}-${S.priority}.css`;
|
|
247
|
+
n[S.priority] || (n[S.priority] = []), n[S.priority].push(E), c.push(E);
|
|
248
|
+
const D = `css/${E}`, nt = f(o, D);
|
|
249
|
+
P(nt, S.css);
|
|
246
250
|
});
|
|
247
|
-
const
|
|
248
|
-
`), y =
|
|
249
|
-
|
|
251
|
+
const u = c.map((x) => `@import url('./${x}');`).join(`
|
|
252
|
+
`), y = B(l, 6), m = f(o, `css/${y}.css`);
|
|
253
|
+
P(m, u);
|
|
250
254
|
}
|
|
251
255
|
}
|
|
252
256
|
await h(t, o);
|
|
253
257
|
const r = s.map((l) => `@import url('./css/${l}');`).join(`
|
|
254
258
|
`);
|
|
255
|
-
let
|
|
259
|
+
let F = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
|
256
260
|
|
|
257
261
|
${["variables.css", "global.css", "templates.css"].filter((l) => {
|
|
258
262
|
try {
|
|
259
|
-
return
|
|
263
|
+
return A(f(o, "css", l), "utf8").length > 0;
|
|
260
264
|
} catch {
|
|
261
265
|
return !1;
|
|
262
266
|
}
|
|
@@ -266,9 +270,9 @@ ${r}`;
|
|
|
266
270
|
if (a.importStrategy !== "component") {
|
|
267
271
|
const l = n.flat().map((k) => `@import url('./css/${k}');`).join(`
|
|
268
272
|
`);
|
|
269
|
-
|
|
273
|
+
F += l;
|
|
270
274
|
}
|
|
271
|
-
|
|
275
|
+
P(i, F);
|
|
272
276
|
} catch (s) {
|
|
273
277
|
console.error(s);
|
|
274
278
|
}
|
|
@@ -276,76 +280,76 @@ ${r}`;
|
|
|
276
280
|
try {
|
|
277
281
|
const s = [], n = f(t, "./saltygen"), o = f(n, "index.css");
|
|
278
282
|
if (N(e)) {
|
|
279
|
-
const
|
|
280
|
-
Object.entries(a).forEach(([
|
|
281
|
-
if (!
|
|
282
|
-
const l =
|
|
283
|
-
name:
|
|
284
|
-
config:
|
|
285
|
-
}), k = `${l.hash}-${l.priority}.css`, T = `css/${k}`,
|
|
286
|
-
s.push(k),
|
|
283
|
+
const d = await z(t), a = await I(t, e, n);
|
|
284
|
+
Object.entries(a).forEach(([C, F]) => {
|
|
285
|
+
if (!F.generator) return;
|
|
286
|
+
const l = F.generator._withBuildContext({
|
|
287
|
+
name: C,
|
|
288
|
+
config: d
|
|
289
|
+
}), k = `${l.hash}-${l.priority}.css`, T = `css/${k}`, g = f(n, T);
|
|
290
|
+
s.push(k), P(g, l.css);
|
|
287
291
|
});
|
|
288
|
-
const h =
|
|
289
|
-
`), r = s.map((
|
|
292
|
+
const h = A(o, "utf8").split(`
|
|
293
|
+
`), r = s.map((C) => `@import url('../saltygen/css/${C}');`), $ = [.../* @__PURE__ */ new Set([...h, ...r])].join(`
|
|
290
294
|
`);
|
|
291
|
-
|
|
295
|
+
P(o, $);
|
|
292
296
|
}
|
|
293
297
|
} catch (s) {
|
|
294
298
|
console.error(s);
|
|
295
299
|
}
|
|
296
|
-
},
|
|
300
|
+
}, kt = async (t, e, s = st()) => {
|
|
297
301
|
try {
|
|
298
302
|
const n = f(t, "./saltygen");
|
|
299
303
|
if (N(e)) {
|
|
300
|
-
const i =
|
|
301
|
-
i.replace(/^(?!export\s)const\s.*/gm, ($) => `export ${$}`) !== i && await
|
|
302
|
-
const a = await z(t), h = await
|
|
304
|
+
const i = A(e, "utf8");
|
|
305
|
+
i.replace(/^(?!export\s)const\s.*/gm, ($) => `export ${$}`) !== i && await ut(e, i);
|
|
306
|
+
const a = await z(t), h = await I(t, e, n);
|
|
303
307
|
let r = i;
|
|
304
|
-
Object.entries(h).forEach(([$,
|
|
305
|
-
var
|
|
306
|
-
if (
|
|
307
|
-
const
|
|
308
|
+
Object.entries(h).forEach(([$, C]) => {
|
|
309
|
+
var E;
|
|
310
|
+
if (C.isKeyframes || !C.generator) return;
|
|
311
|
+
const F = C.generator._withBuildContext({
|
|
308
312
|
name: $,
|
|
309
313
|
config: a,
|
|
310
314
|
prod: s
|
|
311
315
|
}), l = new RegExp(`\\s${$}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(i);
|
|
312
316
|
if (!l) return console.error("Could not find the original declaration");
|
|
313
|
-
const k = (
|
|
317
|
+
const k = (E = l.at(1)) == null ? void 0 : E.trim(), T = new RegExp(`\\s${$}[=\\s]+styled\\(`, "g").exec(r);
|
|
314
318
|
if (!T) return console.error("Could not find the original declaration");
|
|
315
|
-
const { index:
|
|
319
|
+
const { index: g } = T;
|
|
316
320
|
let b = !1;
|
|
317
321
|
const j = setTimeout(() => b = !0, 5e3);
|
|
318
|
-
let c = 0,
|
|
319
|
-
for (; !
|
|
320
|
-
const
|
|
321
|
-
|
|
322
|
+
let c = 0, u = !1, y = 0;
|
|
323
|
+
for (; !u && !b; ) {
|
|
324
|
+
const D = r[g + c];
|
|
325
|
+
D === "(" && y++, D === ")" && y--, y === 0 && D === ")" && (u = !0), c > r.length && (b = !0), c++;
|
|
322
326
|
}
|
|
323
327
|
if (!b) clearTimeout(j);
|
|
324
328
|
else throw new Error("Failed to find the end of the styled call and timed out");
|
|
325
|
-
const m =
|
|
329
|
+
const m = g + c, x = r.slice(g, m), w = r, S = ` ${$} = styled(${k}, "${F.classNames}", ${JSON.stringify(F.props)});`;
|
|
326
330
|
r = r.replace(x, S), w === r && console.error("Minimize file failed to change content", { name: $, tagName: k });
|
|
327
331
|
});
|
|
328
|
-
const
|
|
329
|
-
return a.importStrategy === "component" && (r = `import '../../saltygen/css/${
|
|
332
|
+
const p = B(e, 6);
|
|
333
|
+
return a.importStrategy === "component" && (r = `import '../../saltygen/css/${p}.css';
|
|
330
334
|
${r}`), r = r.replace("{ styled }", "{ styledClient as styled }"), r = r.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), r;
|
|
331
335
|
}
|
|
332
336
|
} catch (n) {
|
|
333
337
|
console.error("Error in minimizeFile:", n);
|
|
334
338
|
}
|
|
335
|
-
},
|
|
339
|
+
}, Ot = (t) => ({
|
|
336
340
|
name: "stylegen",
|
|
337
|
-
buildStart: () =>
|
|
341
|
+
buildStart: () => Ct(t),
|
|
338
342
|
load: async (e) => {
|
|
339
343
|
if (N(e))
|
|
340
|
-
return await
|
|
344
|
+
return await kt(t, e);
|
|
341
345
|
},
|
|
342
346
|
watchChange: {
|
|
343
347
|
handler: async (e) => {
|
|
344
|
-
N(e) && await Ft(t, e), e.includes("salty.config") && await
|
|
348
|
+
N(e) && await Ft(t, e), e.includes("salty.config") && await et(t);
|
|
345
349
|
}
|
|
346
350
|
}
|
|
347
351
|
});
|
|
348
352
|
export {
|
|
349
|
-
|
|
350
|
-
|
|
353
|
+
Ot as default,
|
|
354
|
+
Ot as saltyPlugin
|
|
351
355
|
};
|
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.116",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"typings": "./dist/index.d.ts",
|
|
@@ -34,6 +34,6 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@salty-css/core": "^0.0.1-alpha.
|
|
37
|
+
"@salty-css/core": "^0.0.1-alpha.116"
|
|
38
38
|
}
|
|
39
39
|
}
|