@salty-css/webpack 0.0.1-alpha.11 → 0.0.1-alpha.111

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
@@ -1,15 +1,90 @@
1
- # Salty Css
1
+ # Salty CSS - Kinda sweet but yet spicy CSS-in-JS library
2
2
 
3
- ## Basic usage example with Button
3
+ In the world of frontend dev is there anything saltier than CSS? Salty CSS is built to provide better developer experience for developers looking for performant and feature rich CSS-in-JS solutions.
4
4
 
5
- ### Initial requirements
5
+ ## Features
6
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`
7
+ - Build time compilation to achieve awesome runtime performance and minimal size
8
+ - Next.js, React Server Components, Vite and Webpack support
9
+ - Type safety with out of the box TypeScript and ESLint plugin
10
+ - Advanced CSS variables configuration to allow smooth token usage
11
+ - Style templates to create reusable styles easily
11
12
 
12
- ### Code examples
13
+ ## Get started
14
+
15
+ - Initialize: `npx salty-css init [directory]`
16
+ - Create component: `npx salty-css generate [filePath]`
17
+ - Build: `npx salty-css build [directory]`
18
+
19
+ ### Packages
20
+
21
+ Note: Fastest way to get started with any framework is [npx salty-css init [directory]](#initialize-salty-css-for-a-project) command
22
+
23
+ - [Next.js](#nextjs) → `npm install @salty-css/next` + [Next.js install guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
24
+ - [React](#react) → `npm install @salty-css/react` + [React install guide](#react) + [React example code](#code-examples)
25
+ - [Vite](#vite) → `npm install @salty-css/vite` + [(Vite install guide)](#vite)
26
+ - [Webpack](https://www.npmjs.com/package/@salty-css/webpack) → `npm install @salty-css/webpack` + Guide coming soon
27
+ - [ESLint](https://www.npmjs.com/package/@salty-css/eslint-plugin-core) → `npm install @salty-css/eslint-plugin-core` + Guide coming soon
28
+ - [Core](https://www.npmjs.com/package/@salty-css/react) → `npm install @salty-css/core` (This package contains code for internal use)
29
+
30
+ ### Add Salty CSS to your project with `salty-css` CLI
31
+
32
+ #### Initialize Salty CSS for a project
33
+
34
+ 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.json` which contains some metadata for future CLI commands.
35
+
36
+ #### Create components
37
+
38
+ Components can be created with `npx salty-css generate [filePath]` which then creates a new Salty CSS component file to the specified path. Additional options like `--dir, --tag, --name and --className` are also supported. Read more about them with `npx salty-css generate --help`
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`
47
+
48
+ ### Manual work
49
+
50
+ #### Next.js
51
+
52
+ 1. For Next.js support install `npm i @salty-css/next @salty-css/core @salty-css/react`
53
+ 2. Create `salty.config.ts` to your app directory
54
+ 3. Add Salty CSS plugin to next.js config
55
+
56
+ - **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);`
57
+ - **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);`
58
+
59
+ 4. Make sure that `salty.config.ts` and `next.config.ts` are in the same folder!
60
+ 5. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
61
+ 6. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
62
+
63
+ [Check out Next.js demo project](https://github.com/margarita-form/salty-css-website) or [react example code](#code-examples)
64
+
65
+ #### React
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)
70
+
71
+ [Check out react example code](#code-examples)
72
+
73
+ #### Vite
74
+
75
+ 1. For Vite support install `npm i @salty-css/vite @salty-css/core`
76
+ 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
77
+ 3. Make sure that `salty.config.ts` and `vite.config.ts` are in the same folder!
78
+ 4. Build `saltygen` directory by running your app once or with cli `npx salty-css build [directory]`
79
+ 5. Import global styles from `saltygen/index.css` to some global css file with `@import 'insert_path_to_index_css';`.
80
+
81
+ ### Create components
82
+
83
+ 1. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
84
+
85
+ ## Code examples
86
+
87
+ ### Basic usage example with Button
13
88
 
14
89
  **Salty config**
15
90
 
@@ -0,0 +1,341 @@
1
+ import * as L from "esbuild";
2
+ import { execSync as ot } from "child_process";
3
+ import { join as f, parse as rt } from "path";
4
+ import { existsSync as W, writeFileSync as P, readFileSync as N, mkdirSync as J, statSync as it, readdirSync as ct } from "fs";
5
+ import { readFile as at, writeFile as lt } from "fs/promises";
6
+ import { createLogger as ft, format as R, transports as pt } from "winston";
7
+ const H = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), ut = (t, e) => {
8
+ let s = "", n;
9
+ for (n = Math.abs(t); n > 52; n = n / 52 | 0) s = H(n % 52) + s;
10
+ return s = H(n % 52) + s, s.length < e ? s = s.padStart(e, "a") : s.length > e && (s = s.slice(-e)), s;
11
+ }, gt = (t, e) => {
12
+ let s = e.length;
13
+ for (; s; ) t = t * 33 ^ e.charCodeAt(--s);
14
+ return t;
15
+ }, B = (t, e = 3) => {
16
+ const s = gt(5381, JSON.stringify(t)) >>> 0;
17
+ return ut(s, e);
18
+ };
19
+ function V(t) {
20
+ 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()) : "";
21
+ }
22
+ const dt = (t, e) => {
23
+ if (typeof t != "string") return { result: t };
24
+ if (!e) return { result: t };
25
+ const s = [];
26
+ return Object.values(e).forEach((n) => {
27
+ const { pattern: o, transform: i } = n;
28
+ t = t.replace(o, (g) => {
29
+ const { value: a, css: h } = i(g);
30
+ return h && s.push(h), a;
31
+ });
32
+ }), { result: t, additionalCss: s };
33
+ }, q = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${V(n[1].replaceAll(".", "-"))})`) } : { result: t }, D = (t, e, s, n) => {
34
+ if (!t) return "";
35
+ const o = [], i = Object.entries(t).reduce((a, [h, r]) => {
36
+ const u = h.trim();
37
+ if (typeof r == "function" && (r = r()), typeof r == "object") {
38
+ if (!r) return a;
39
+ if (u === "variants")
40
+ return Object.entries(r).forEach(([j, c]) => {
41
+ c && Object.entries(c).forEach(([p, y]) => {
42
+ if (!y) return;
43
+ const m = `${e}.${j}-${p}`, F = D(y, m);
44
+ o.push(F);
45
+ });
46
+ }), a;
47
+ if (u === "defaultVariants")
48
+ return a;
49
+ if (u === "compoundVariants")
50
+ return r.forEach((j) => {
51
+ const { css: c, ...p } = j, y = Object.entries(p).reduce((F, [w, S]) => `${F}.${w}-${S}`, e), m = D(c, y);
52
+ o.push(m);
53
+ }), a;
54
+ if (u.startsWith("@")) {
55
+ const j = D(r, e), c = `${u} {
56
+ ${j.replace(`
57
+ `, `
58
+ `)}
59
+ }`;
60
+ return o.push(c), a;
61
+ }
62
+ const d = h.includes("&") ? u.replace("&", e) : u.startsWith(":") ? `${e}${u}` : `${e} ${u}`, b = D(r, d);
63
+ return o.push(b), a;
64
+ }
65
+ const $ = u.startsWith("-") ? u : V(u), k = (d, b = ";") => a = `${a}${d}${b}`, C = (d) => k(`${$}:${d}`);
66
+ if (typeof r == "number") return C(r);
67
+ if (typeof r != "string")
68
+ if ("toString" in r) r = r.toString();
69
+ else return a;
70
+ const { modifiers: l } = {}, T = function* () {
71
+ yield q(r), yield dt(r, l);
72
+ }();
73
+ for (const { result: d, additionalCss: b = [] } of T)
74
+ r = d, b.forEach((j) => {
75
+ const c = D(j, "");
76
+ k(c, "");
77
+ });
78
+ return C(r);
79
+ }, "");
80
+ if (!i) return o.join(`
81
+ `);
82
+ if (!e) return i;
83
+ let g = "";
84
+ return g = `${e} { ${i} }`, [g, ...o].join(`
85
+ `);
86
+ }, U = (t, e = []) => {
87
+ if (!t) return "";
88
+ const s = [], n = {};
89
+ if (Object.entries(t).forEach(([o, i]) => {
90
+ if (typeof i == "object") {
91
+ if (!i) return;
92
+ const g = o.trim(), a = U(i, [...e, g]);
93
+ s.push(a);
94
+ } else
95
+ n[o] = i;
96
+ }), Object.keys(n).length) {
97
+ const o = e.map(V).join("-"), i = D(n, `.${o}`);
98
+ s.push(i);
99
+ }
100
+ return s.join(`
101
+ `);
102
+ }, yt = (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
+ const i = e ? `${e}.${n}` : n;
104
+ return typeof o == "object" ? X(o, i, s) : s.add(e);
105
+ }), [...s]) : [], Y = (t) => {
106
+ if (!t || t === "/") throw new Error("Could not find package.json file");
107
+ const e = f(t, "package.json");
108
+ return W(e) ? e : Y(f(t, ".."));
109
+ }, mt = async (t) => {
110
+ const e = Y(t);
111
+ return await at(e, "utf-8").then(JSON.parse).catch(() => {
112
+ });
113
+ }, ht = async (t) => {
114
+ const e = await mt(t);
115
+ if (e)
116
+ return e.type;
117
+ };
118
+ let O;
119
+ const Q = async (t) => {
120
+ if (O) return O;
121
+ const e = await ht(t);
122
+ return e === "module" ? O = "esm" : (e === "commonjs" || import.meta.url.endsWith(".cjs")) && (O = "cjs"), O || "esm";
123
+ }, K = ft({
124
+ level: "debug",
125
+ format: R.combine(R.colorize(), R.cli()),
126
+ transports: [new pt.Console({})]
127
+ }), _ = {
128
+ externalModules: []
129
+ }, v = (t) => {
130
+ if (_.externalModules.length > 0) return _.externalModules;
131
+ const e = f(t, "salty.config.ts"), n = N(e, "utf8").match(/externalModules:\s?\[(.*)\]/);
132
+ if (!n) return [];
133
+ const o = n[1].split(",").map((i) => i.replace(/['"`]/g, "").trim());
134
+ return _.externalModules = o, o;
135
+ }, A = (t) => f(t, "./saltygen"), $t = ["salty", "css", "styles", "styled"], bt = (t = []) => new RegExp(`\\.(${[...$t, ...t].join("|")})\\.`), I = (t, e = []) => bt(e).test(t), jt = async (t) => {
136
+ const e = A(t), s = f(t, "salty.config.ts"), n = f(e, "salty.config.js"), o = await Q(t), i = v(t);
137
+ await L.build({
138
+ entryPoints: [s],
139
+ minify: !0,
140
+ treeShaking: !0,
141
+ bundle: !0,
142
+ outfile: n,
143
+ format: o,
144
+ external: i
145
+ });
146
+ const g = Date.now(), { config: a } = await import(`${n}?t=${g}`);
147
+ return a;
148
+ }, wt = async (t) => {
149
+ const e = await jt(t), s = /* @__PURE__ */ new Set(), n = (c, p = []) => c ? Object.entries(c).flatMap(([y, m]) => {
150
+ if (!m) return;
151
+ if (typeof m == "object") return n(m, [...p, y]);
152
+ const F = [...p, y].join(".");
153
+ s.add(`"${F}"`);
154
+ const w = [...p.map(V), V(y)].join("-"), { result: S } = q(m);
155
+ return `--${w}: ${S};`;
156
+ }) : [], o = (c) => c ? Object.entries(c).flatMap(([p, y]) => {
157
+ const m = n(y);
158
+ return p === "base" ? m.join("") : `${p} { ${m.join("")} }`;
159
+ }) : [], i = (c) => c ? Object.entries(c).flatMap(([p, y]) => Object.entries(y).flatMap(([m, F]) => {
160
+ const w = n(F, [p]), S = `.${p}-${m}, [data-${p}="${m}"]`, E = w.join("");
161
+ return `${S} { ${E} }`;
162
+ })) : [], g = n(e.variables), a = o(e.responsiveVariables), h = i(e.conditionalVariables), r = A(t), u = f(r, "css/variables.css"), $ = `:root { ${g.join("")} ${a.join("")} } ${h.join("")}`;
163
+ P(u, $);
164
+ const k = f(r, "css/global.css"), C = D(e.global, "");
165
+ P(k, C);
166
+ const l = f(r, "css/templates.css"), x = U(e.templates), T = yt(e.templates);
167
+ P(l, x);
168
+ const d = f(r, "types/css-tokens.d.ts"), j = `
169
+ // Variable types
170
+ type VariableTokens = ${[...s].join("|")};
171
+ type PropertyValueToken = \`{\${VariableTokens}}\`;
172
+
173
+ // Template types
174
+ type TemplateTokens = {
175
+ ${Object.entries(T).map(([c, p]) => `${c}?: ${p}`).join(`
176
+ `)}
177
+ }
178
+ `;
179
+ P(d, j);
180
+ }, Z = async (t, e, s) => {
181
+ const n = B(e), o = f(s, "./temp");
182
+ W(o) || J(o);
183
+ const i = rt(e);
184
+ let g = N(e, "utf8");
185
+ g = g.replace(/styled\([^"'`{,]+,/g, "styled('div',");
186
+ const a = f(s, "js", n + ".js"), h = v(t), r = await Q(t);
187
+ await L.build({
188
+ stdin: {
189
+ contents: g,
190
+ sourcefile: i.base,
191
+ resolveDir: i.dir,
192
+ loader: "ts"
193
+ },
194
+ minify: !1,
195
+ treeShaking: !0,
196
+ bundle: !0,
197
+ outfile: a,
198
+ format: r,
199
+ target: ["node20"],
200
+ keepNames: !0,
201
+ external: h,
202
+ packages: "external"
203
+ });
204
+ const u = Date.now();
205
+ return await import(`${a}?t=${u}`);
206
+ }, z = async (t) => {
207
+ const e = A(t), s = f(e, "salty.config.js"), { config: n } = await import(s);
208
+ return n;
209
+ }, tt = () => {
210
+ try {
211
+ return process.env.NODE_ENV === "production";
212
+ } catch {
213
+ return !1;
214
+ }
215
+ }, Tt = async (t, e = tt()) => {
216
+ try {
217
+ e ? K.info("Generating CSS in production mode! 🔥") : K.info("Generating CSS in development mode! 🚀");
218
+ const s = [], n = [], o = A(t), i = f(o, "index.css");
219
+ (() => {
220
+ W(o) && ot("rm -rf " + o), J(o), J(f(o, "css")), J(f(o, "types"));
221
+ })(), await wt(t);
222
+ const a = await z(t);
223
+ async function h(l, x) {
224
+ const T = ["node_modules", "saltygen"], d = it(l);
225
+ if (d.isDirectory()) {
226
+ const b = ct(l);
227
+ if (T.some((c) => l.includes(c))) return;
228
+ await Promise.all(b.map((c) => h(f(l, c), f(x, c))));
229
+ } else if (d.isFile() && I(l)) {
230
+ const j = await Z(t, l, o), c = [];
231
+ Object.entries(j).forEach(([F, w]) => {
232
+ if (w.isKeyframes && w.css) {
233
+ const G = `${w.animationName}.css`, st = `css/${G}`, nt = f(o, st);
234
+ s.push(G), P(nt, w.css);
235
+ return;
236
+ }
237
+ if (!w.generator) return;
238
+ const S = w.generator._withBuildContext({
239
+ name: F,
240
+ config: a,
241
+ prod: e
242
+ }), E = `${S.hash}-${S.priority}.css`;
243
+ n[S.priority] || (n[S.priority] = []), n[S.priority].push(E), c.push(E);
244
+ const M = `css/${E}`, et = f(o, M);
245
+ P(et, S.css);
246
+ });
247
+ const p = c.map((F) => `@import url('./${F}');`).join(`
248
+ `), y = B(l, 6), m = f(o, `css/${y}.css`);
249
+ P(m, p);
250
+ }
251
+ }
252
+ await h(t, o);
253
+ const r = s.map((l) => `@import url('./css/${l}');`).join(`
254
+ `);
255
+ let C = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
256
+
257
+ ${["variables.css", "global.css", "templates.css"].filter((l) => {
258
+ try {
259
+ return N(f(o, "css", l), "utf8").length > 0;
260
+ } catch {
261
+ return !1;
262
+ }
263
+ }).map((l) => `@import url('./css/${l}');`).join(`
264
+ `)}
265
+ ${r}`;
266
+ if (a.importStrategy !== "component") {
267
+ const l = n.flat().map((x) => `@import url('./css/${x}');`).join(`
268
+ `);
269
+ C += l;
270
+ }
271
+ P(i, C);
272
+ } catch (s) {
273
+ console.error(s);
274
+ }
275
+ }, Pt = async (t, e) => {
276
+ try {
277
+ const s = [], n = f(t, "./saltygen"), o = f(n, "index.css");
278
+ if (I(e)) {
279
+ const g = await z(t), a = await Z(t, e, n);
280
+ Object.entries(a).forEach(([k, C]) => {
281
+ if (!C.generator) return;
282
+ const l = C.generator._withBuildContext({
283
+ name: k,
284
+ config: g
285
+ }), x = `${l.hash}-${l.priority}.css`, T = `css/${x}`, d = f(n, T);
286
+ s.push(x), P(d, l.css);
287
+ });
288
+ const h = N(o, "utf8").split(`
289
+ `), r = s.map((k) => `@import url('../saltygen/css/${k}');`), $ = [.../* @__PURE__ */ new Set([...h, ...r])].join(`
290
+ `);
291
+ P(o, $);
292
+ }
293
+ } catch (s) {
294
+ console.error(s);
295
+ }
296
+ }, Et = async (t, e, s = tt()) => {
297
+ try {
298
+ const n = f(t, "./saltygen");
299
+ if (I(e)) {
300
+ const i = N(e, "utf8");
301
+ i.replace(/^(?!export\s)const\s.*/gm, ($) => `export ${$}`) !== i && await lt(e, i);
302
+ const a = await z(t), h = await Z(t, e, n);
303
+ let r = i;
304
+ Object.entries(h).forEach(([$, k]) => {
305
+ var E;
306
+ if (k.isKeyframes || !k.generator) return;
307
+ const C = k.generator._withBuildContext({
308
+ name: $,
309
+ config: a,
310
+ prod: s
311
+ }), l = new RegExp(`\\s${$}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(i);
312
+ if (!l) return console.error("Could not find the original declaration");
313
+ const x = (E = l.at(1)) == null ? void 0 : E.trim(), T = new RegExp(`\\s${$}[=\\s]+styled\\(`, "g").exec(r);
314
+ if (!T) return console.error("Could not find the original declaration");
315
+ const { index: d } = T;
316
+ let b = !1;
317
+ const j = setTimeout(() => b = !0, 5e3);
318
+ let c = 0, p = !1, y = 0;
319
+ for (; !p && !b; ) {
320
+ const M = r[d + c];
321
+ M === "(" && y++, M === ")" && y--, y === 0 && M === ")" && (p = !0), c > r.length && (b = !0), c++;
322
+ }
323
+ if (!b) clearTimeout(j);
324
+ else throw new Error("Failed to find the end of the styled call and timed out");
325
+ const m = d + c, F = r.slice(d, m), w = r, S = ` ${$} = styled(${x}, "${C.classNames}", ${JSON.stringify(C.props)});`;
326
+ r = r.replace(F, S), w === r && console.error("Minimize file failed to change content", { name: $, tagName: x });
327
+ });
328
+ const u = B(e, 6);
329
+ return a.importStrategy === "component" && (r = `import '../../saltygen/css/${u}.css';
330
+ ${r}`), r = r.replace("{ styled }", "{ styledClient as styled }"), r = r.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), r;
331
+ }
332
+ } catch (n) {
333
+ console.error("Error in minimizeFile:", n);
334
+ }
335
+ };
336
+ export {
337
+ Pt as a,
338
+ Tt as g,
339
+ Et as m,
340
+ bt as s
341
+ };
@@ -0,0 +1,28 @@
1
+ "use strict";const ot=require("esbuild"),rt=require("child_process"),l=require("path"),u=require("fs"),L=require("fs/promises"),V=require("winston");var J=typeof document<"u"?document.currentScript:null;function it(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 U=it(ot),B=t=>String.fromCharCode(t+(t>25?39:97)),ct=(t,e)=>{let s="",n;for(n=Math.abs(t);n>52;n=n/52|0)s=B(n%52)+s;return s=B(n%52)+s,s.length<e?s=s.padStart(e,"a"):s.length>e&&(s=s.slice(-e)),s},at=(t,e)=>{let s=e.length;for(;s;)t=t*33^e.charCodeAt(--s);return t},A=(t,e=3)=>{const s=at(5381,JSON.stringify(t))>>>0;return ct(s,e)};function M(t){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()):""}const lt=(t,e)=>{if(typeof t!="string")return{result:t};if(!e)return{result:t};const s=[];return Object.values(e).forEach(n=>{const{pattern:o,transform:i}=n;t=t.replace(o,y=>{const{value:a,css:j}=i(y);return j&&s.push(j),a})}),{result:t,additionalCss:s}},G=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${M(n[1].replaceAll(".","-"))})`)}:{result:t},D=(t,e,s,n)=>{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=D(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=D(c,m);o.push(h)}),a;if(d.startsWith("@")){const S=D(r,e),c=`${d} {
2
+ ${S.replace(`
3
+ `,`
4
+ `)}
5
+ }`;return o.push(c),a}const g=j.includes("&")?d.replace("&",e):d.startsWith(":")?`${e}${d}`:`${e} ${d}`,$=D(r,g);return o.push($),a}const b=d.startsWith("-")?d:M(d),k=(g,$=";")=>a=`${a}${g}${$}`,C=g=>k(`${b}:${g}`);if(typeof r=="number")return C(r);if(typeof r!="string")if("toString"in r)r=r.toString();else return a;const{modifiers:f}={},P=function*(){yield G(r),yield lt(r,f)}();for(const{result:g,additionalCss:$=[]}of P)r=g,$.forEach(S=>{const c=D(S,"");k(c,"")});return C(r)},"");if(!i)return o.join(`
6
+ `);if(!e)return i;let y="";return y=`${e} { ${i} }`,[y,...o].join(`
7
+ `)},H=(t,e=[])=>{if(!t)return"";const s=[],n={};if(Object.entries(t).forEach(([o,i])=>{if(typeof i=="object"){if(!i)return;const y=o.trim(),a=H(i,[...e,y]);s.push(a)}else n[o]=i}),Object.keys(n).length){const o=e.map(M).join("-"),i=D(n,`.${o}`);s.push(i)}return s.join(`
8
+ `)},ft=t=>Object.entries(t).reduce((e,[s,n])=>(typeof n=="object"&&(e[s]=K(n).map(o=>`"${o}"`).join(" | ")),e),{}),K=(t,e="",s=new Set)=>t?(Object.entries(t).forEach(([n,o])=>{const i=e?`${e}.${n}`:n;return typeof o=="object"?K(o,i,s):s.add(e)}),[...s]):[],X=t=>{if(!t||t==="/")throw new Error("Could not find package.json file");const e=l.join(t,"package.json");return u.existsSync(e)?e:X(l.join(t,".."))},ut=async t=>{const e=X(t);return await L.readFile(e,"utf-8").then(JSON.parse).catch(()=>{})},pt=async t=>{const e=await ut(t);if(e)return e.type};let E;const Y=async t=>{if(E)return E;const e=await pt(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-DfOEZJUz.cjs",document.baseURI).href).endsWith(".cjs"))&&(E="cjs"),E||"esm"},Z=V.createLogger({level:"debug",format:V.format.combine(V.format.colorize(),V.format.cli()),transports:[new V.transports.Console({})]}),R={externalModules:[]},Q=t=>{if(R.externalModules.length>0)return R.externalModules;const e=l.join(t,"salty.config.ts"),n=u.readFileSync(e,"utf8").match(/externalModules:\s?\[(.*)\]/);if(!n)return[];const o=n[1].split(",").map(i=>i.replace(/['"`]/g,"").trim());return R.externalModules=o,o},_=t=>l.join(t,"./saltygen"),dt=["salty","css","styles","styled"],v=(t=[])=>new RegExp(`\\.(${[...dt,...t].join("|")})\\.`),q=(t,e=[])=>v(e).test(t),yt=async t=>{const e=_(t),s=l.join(t,"salty.config.ts"),n=l.join(e,"salty.config.js"),o=await Y(t),i=Q(t);await U.build({entryPoints:[s],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:o,external:i});const y=Date.now(),{config:a}=await import(`${n}?t=${y}`);return a},gt=async t=>{const e=await yt(t),s=new Set,n=(c,p=[])=>c?Object.entries(c).flatMap(([m,h])=>{if(!h)return;if(typeof h=="object")return n(h,[...p,m]);const T=[...p,m].join(".");s.add(`"${T}"`);const w=[...p.map(M),M(m)].join("-"),{result:F}=G(h);return`--${w}: ${F};`}):[],o=c=>c?Object.entries(c).flatMap(([p,m])=>{const h=n(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=n(T,[p]),F=`.${p}-${h}, [data-${p}="${h}"]`,O=w.join("");return`${F} { ${O} }`})):[],y=n(e.variables),a=o(e.responsiveVariables),j=i(e.conditionalVariables),r=_(t),d=l.join(r,"css/variables.css"),b=`:root { ${y.join("")} ${a.join("")} } ${j.join("")}`;u.writeFileSync(d,b);const k=l.join(r,"css/global.css"),C=D(e.global,"");u.writeFileSync(k,C);const f=l.join(r,"css/templates.css"),x=H(e.templates),P=ft(e.templates);u.writeFileSync(f,x);const g=l.join(r,"types/css-tokens.d.ts"),S=`
9
+ // Variable types
10
+ type VariableTokens = ${[...s].join("|")};
11
+ type PropertyValueToken = \`{\${VariableTokens}}\`;
12
+
13
+ // Template types
14
+ type TemplateTokens = {
15
+ ${Object.entries(P).map(([c,p])=>`${c}?: ${p}`).join(`
16
+ `)}
17
+ }
18
+ `;u.writeFileSync(g,S)},I=async(t,e,s)=>{const n=A(e),o=l.join(s,"./temp");u.existsSync(o)||u.mkdirSync(o);const i=l.parse(e);let y=u.readFileSync(e,"utf8");y=y.replace(/styled\([^"'`{,]+,/g,"styled('div',");const a=l.join(s,"js",n+".js"),j=Q(t),r=await Y(t);await U.build({stdin:{contents:y,sourcefile:i.base,resolveDir:i.dir,loader:"ts"},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}`)},z=async t=>{const e=_(t),s=l.join(e,"salty.config.js"),{config:n}=await import(s);return n},tt=()=>{try{return process.env.NODE_ENV==="production"}catch{return!1}},mt=async(t,e=tt())=>{try{e?Z.info("Generating CSS in production mode! 🔥"):Z.info("Generating CSS in development mode! 🚀");const s=[],n=[],o=_(t),i=l.join(o,"index.css");(()=>{u.existsSync(o)&&rt.execSync("rm -rf "+o),u.mkdirSync(o),u.mkdirSync(l.join(o,"css")),u.mkdirSync(l.join(o,"types"))})(),await gt(t);const a=await z(t);async function j(f,x){const P=["node_modules","saltygen"],g=u.statSync(f);if(g.isDirectory()){const $=u.readdirSync(f);if(P.some(c=>f.includes(c)))return;await Promise.all($.map(c=>j(l.join(f,c),l.join(x,c))))}else if(g.isFile()&&q(f)){const S=await I(t,f,o),c=[];Object.entries(S).forEach(([T,w])=>{if(w.isKeyframes&&w.css){const W=`${w.animationName}.css`,st=`css/${W}`,nt=l.join(o,st);s.push(W),u.writeFileSync(nt,w.css);return}if(!w.generator)return;const F=w.generator._withBuildContext({name:T,config:a,prod:e}),O=`${F.hash}-${F.priority}.css`;n[F.priority]||(n[F.priority]=[]),n[F.priority].push(O),c.push(O);const N=`css/${O}`,et=l.join(o,N);u.writeFileSync(et,F.css)});const p=c.map(T=>`@import url('./${T}');`).join(`
19
+ `),m=A(f,6),h=l.join(o,`css/${m}.css`);u.writeFileSync(h,p)}}await j(t,o);const r=s.map(f=>`@import url('./css/${f}');`).join(`
20
+ `);let C=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
21
+
22
+ ${["variables.css","global.css","templates.css"].filter(f=>{try{return u.readFileSync(l.join(o,"css",f),"utf8").length>0}catch{return!1}}).map(f=>`@import url('./css/${f}');`).join(`
23
+ `)}
24
+ ${r}`;if(a.importStrategy!=="component"){const f=n.flat().map(x=>`@import url('./css/${x}');`).join(`
25
+ `);C+=f}u.writeFileSync(i,C)}catch(s){console.error(s)}},ht=async(t,e)=>{try{const s=[],n=l.join(t,"./saltygen"),o=l.join(n,"index.css");if(q(e)){const y=await z(t),a=await I(t,e,n);Object.entries(a).forEach(([k,C])=>{if(!C.generator)return;const f=C.generator._withBuildContext({name:k,config:y}),x=`${f.hash}-${f.priority}.css`,P=`css/${x}`,g=l.join(n,P);s.push(x),u.writeFileSync(g,f.css)});const j=u.readFileSync(o,"utf8").split(`
26
+ `),r=s.map(k=>`@import url('../saltygen/css/${k}');`),b=[...new Set([...j,...r])].join(`
27
+ `);u.writeFileSync(o,b)}}catch(s){console.error(s)}},jt=async(t,e,s=tt())=>{try{const n=l.join(t,"./saltygen");if(q(e)){const i=u.readFileSync(e,"utf8");i.replace(/^(?!export\s)const\s.*/gm,b=>`export ${b}`)!==i&&await L.writeFile(e,i);const a=await z(t),j=await I(t,e,n);let r=i;Object.entries(j).forEach(([b,k])=>{var O;if(k.isKeyframes||!k.generator)return;const C=k.generator._withBuildContext({name:b,config:a,prod:s}),f=new RegExp(`\\s${b}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(i);if(!f)return console.error("Could not find the original declaration");const x=(O=f.at(1))==null?void 0:O.trim(),P=new RegExp(`\\s${b}[=\\s]+styled\\(`,"g").exec(r);if(!P)return console.error("Could not find the original declaration");const{index:g}=P;let $=!1;const S=setTimeout(()=>$=!0,5e3);let c=0,p=!1,m=0;for(;!p&&!$;){const N=r[g+c];N==="("&&m++,N===")"&&m--,m===0&&N===")"&&(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}, "${C.classNames}", ${JSON.stringify(C.props)});`;r=r.replace(T,F),w===r&&console.error("Minimize file failed to change content",{name:b,tagName:x})});const d=A(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(n){console.error("Error in minimizeFile:",n)}};exports.generateCss=mt;exports.generateFile=ht;exports.minimizeFile=jt;exports.saltyFileRegExp=v;
package/index.cjs CHANGED
@@ -1,15 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("path"),z=require("esbuild"),H=require("winston"),L=require("child_process"),m=require("fs");require("fs/promises");function A(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(s,e,n.get?n:{enumerable:!0,get:()=>t[e]})}}return s.default=t,Object.freeze(s)}const _=A(z),T=A(H),x=t=>String.fromCharCode(t+(t>25?39:97)),B=(t,s)=>{let e="",n;for(n=Math.abs(t);n>52;n=n/52|0)e=x(n%52)+e;return e=x(n%52)+e,e.length<s?e=e.padStart(s,"a"):e.length>s&&(e=e.slice(-s)),e},G=(t,s)=>{let e=s.length;for(;e;)t=t*33^s.charCodeAt(--e);return t},M=(t,s=3)=>{const e=G(5381,JSON.stringify(t))>>>0;return B(e,s)};function N(t){return t?typeof t!="string"?String(t):t.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(s,e)=>(e>0?"-":"")+s.toLowerCase()):""}const J=(t,s)=>{if(typeof t!="string")return{result:t};if(!s)return{result:t};const e=[];return Object.values(s).forEach(n=>{const{pattern:o,transform:a}=n;t=t.replace(o,b=>{const{value:l,css:$}=a(b);return $&&e.push($),l})}),{result:t,additionalCss:e}},q=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${N(n[1].replaceAll(".","-"))})`)}:{result:t},k=(t,s,e,n)=>{const o=[],a=Object.entries(t).reduce((l,[$,r])=>{const y=$.trim();if(typeof r=="function"&&(r=r()),typeof r=="object"){if(!r)return l;if(y==="variants")return Object.entries(r).forEach(([f,i])=>{i&&Object.entries(i).forEach(([p,c])=>{if(!c)return;const h=`${s}.${f}-${p}`,S=k(c,h);o.push(S)})}),l;if(y==="defaultVariants")return l;if(y==="compoundVariants")return r.forEach(f=>{const{css:i,...p}=f,c=Object.entries(p).reduce((S,[P,V])=>`${S}.${P}-${V}`,s),h=k(i,c);o.push(h)}),l;if(y.startsWith("@")){const f=k(r,s),i=`${y} {
2
- ${f.replace(`
3
- `,`
4
- `)}
5
- }`;return o.push(i),l}const j=$.includes("&")?y.replace("&",s):y.startsWith(":")?`${s}${y}`:`${s} ${y}`,d=k(r,j);return o.push(d),l}const g=y.startsWith("-")?y:N(y),w=(j,d=";")=>l=`${l}${j}${d}`,O=j=>w(`${g}:${j}`);if(typeof r=="number")return O(r);if(typeof r!="string")if("toString"in r)r=r.toString();else return l;const{modifiers:C}={},D=function*(){yield q(r),yield J(r,C)}();for(const{result:j,additionalCss:d=[]}of D)r=j,d.forEach(f=>{const i=k(f,"");w(i,"")});return O(r)},"");if(!a)return o.join(`
6
- `);if(!s)return a;let b="";return b=`${s} { ${a} }`,[b,...o].join(`
7
- `)},Z=(t,s=[])=>{const e=[],n={};if(Object.entries(t).forEach(([o,a])=>{if(typeof a=="object"){if(!a)return;const b=o.trim(),l=Z(a,[...s,b]);e.push(l)}else n[o]=a}),Object.keys(n).length){const o=s.map(N).join("-"),a=k(n,`.${o}`);e.push(a)}return e.join(`
8
- `)};T.createLogger({level:"info",format:T.format.combine(T.format.colorize(),T.format.cli()),transports:[new T.transports.Console({})]});const E=t=>u.join(t,"./saltygen"),K=["salty","css","styles","styled"],R=(t=[])=>new RegExp(`\\.(${[...K,...t].join("|")})\\.`),U=(t,s=[])=>R(s).test(t),X=async t=>{const s=E(t),e=u.join(t,"salty-config.ts"),n=u.join(s,"salty-config.js");await _.build({entryPoints:[e],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",external:["react"]});const o=Date.now(),{config:a}=await import(`${n}?t=${o}`);return a},Y=async t=>{const s=await X(t),e=new Set,n=(f,i=[])=>f?Object.entries(f).flatMap(([p,c])=>{if(!c)return;if(typeof c=="object")return n(c,[...i,p]);const h=[...i,p].join(".");e.add(`"${h}"`);const S=[...i.map(N),N(p)].join("-"),{result:P}=q(c);return`--${S}: ${P};`}):[],o=f=>f?Object.entries(f).flatMap(([i,p])=>{const c=n(p);return i==="base"?c.join(""):`${i} { ${c.join("")} }`}):[],a=f=>f?Object.entries(f).flatMap(([i,p])=>Object.entries(p).flatMap(([c,h])=>{const S=n(h,[i]),P=`.${i}-${c}, [data-${i}="${c}"]`,V=S.join("");return`${P} { ${V} }`})):[],b=n(s.variables),l=o(s.responsiveVariables),$=a(s.conditionalVariables),r=E(t),y=u.join(r,"css/variables.css"),g=`:root { ${b.join("")} ${l.join("")} } ${$.join("")}`;m.writeFileSync(y,g);const w=u.join(r,"types/css-tokens.d.ts"),C=`type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;m.writeFileSync(w,C);const F=u.join(r,"css/global.css"),D=k(s.global,"");m.writeFileSync(F,D);const j=u.join(r,"css/templates.css"),d=Z(s.templates);m.writeFileSync(j,d)},Q=async(t,s)=>{const e=M(t),n=u.join(s,"js",e+".js");await _.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:n,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const o=Date.now();return await import(`${n}?t=${o}`)},v=async t=>{const s=E(t),e=u.join(s,"salty-config.js"),{config:n}=await import(e);return n},tt=async t=>{try{const s=[],e=[],n=E(t),o=u.join(n,"index.css");(()=>{m.existsSync(n)&&L.execSync("rm -rf "+n),m.mkdirSync(n),m.mkdirSync(u.join(n,"css")),m.mkdirSync(u.join(n,"types"))})(),await Y(t);const b=await v(t);async function l(g,w){const O=m.statSync(g);if(O.isDirectory()){const C=m.readdirSync(g);await Promise.all(C.map(F=>l(u.join(g,F),u.join(w,F))))}else if(O.isFile()&&U(g)){const F=await Q(g,n),D=[];Object.entries(F).forEach(([i,p])=>{if(p.isKeyframes&&p.css){const V=`${p.animationName}.css`,I=`css/${V}`,W=u.join(n,I);s.push(V),m.writeFileSync(W,p.css);return}if(!p.generator)return;const c=p.generator._withBuildContext({name:i,config:b}),h=`${c.hash}-${c.priority}.css`;e[c.priority]||(e[c.priority]=[]),e[c.priority].push(h),D.push(h);const S=`css/${h}`,P=u.join(n,S);m.writeFileSync(P,c.css)});const j=D.map(i=>`@import url('./${i}');`).join(`
9
- `),d=M(g,6),f=u.join(n,`css/${d}.css`);m.writeFileSync(f,j)}}await l(t,n);const $=s.map(g=>`@import url('./css/${g}');`).join(`
10
- `);let y=`@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
- ${$}`;if(b.importStrategy!=="component"){const g=e.flat().map(w=>`@import url('./css/${w}');`).join(`
15
- `);y+=g}m.writeFileSync(o,y)}catch(s){console.error(s)}},st=(t,s)=>{var e,n,o;(n=(e=t.module)==null?void 0:e.rules)==null||n.push({test:R(),use:[{loader:u.resolve("./loader.js"),options:{dir:s}}]}),(o=t.plugins)==null||o.push({apply:a=>{a.hooks.afterPlugins.tap({name:"generateCss"},async()=>{await tt(s)})}})};exports.saltyPlugin=st;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("path"),u=require("./index-DfOEZJUz.cjs"),r=(e,s,o=!1,n=!1)=>{var a,l,t;(l=(a=e.module)==null?void 0:a.rules)==null||l.push({test:u.saltyFileRegExp(),use:[{loader:p.resolve(__dirname,n?"./loader.cjs":"./loader.js"),options:{dir:s}}]}),o||(t=e.plugins)==null||t.push({apply:i=>{i.hooks.afterPlugins.tap({name:"generateCss"},async()=>{await u.generateCss(s)})}})};exports.default=r;exports.saltyPlugin=r;
package/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import { Configuration } from 'webpack';
2
- export declare const saltyPlugin: (config: Configuration, dir: string) => void;
2
+ export declare const saltyPlugin: (config: Configuration, dir: string, isServer?: boolean, cjs?: boolean) => void;
3
+ export default saltyPlugin;
package/index.js CHANGED
@@ -1,230 +1,24 @@
1
- import { join as m, resolve as L } from "path";
2
- import * as M from "esbuild";
3
- import * as T from "winston";
4
- import { execSync as q } from "child_process";
5
- import { existsSync as z, mkdirSync as E, statSync as B, readdirSync as G, writeFileSync as w } from "fs";
6
- import "fs/promises";
7
- const A = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), J = (t, s) => {
8
- let e = "", n;
9
- for (n = Math.abs(t); n > 52; n = n / 52 | 0) e = A(n % 52) + e;
10
- return e = A(n % 52) + e, e.length < s ? e = e.padStart(s, "a") : e.length > s && (e = e.slice(-s)), e;
11
- }, K = (t, s) => {
12
- let e = s.length;
13
- for (; e; ) t = t * 33 ^ s.charCodeAt(--e);
14
- return t;
15
- }, Z = (t, s = 3) => {
16
- const e = K(5381, JSON.stringify(t)) >>> 0;
17
- return J(e, s);
18
- };
19
- function N(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 U = (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: o, transform: a } = n;
28
- t = t.replace(o, (g) => {
29
- const { value: l, css: h } = a(g);
30
- return h && e.push(h), l;
31
- });
32
- }), { result: t, additionalCss: e };
33
- }, R = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${N(n[1].replaceAll(".", "-"))})`) } : { result: t }, k = (t, s, e, n) => {
34
- const o = [], a = Object.entries(t).reduce((l, [h, r]) => {
35
- const u = h.trim();
36
- if (typeof r == "function" && (r = r()), typeof r == "object") {
37
- if (!r) return l;
38
- if (u === "variants")
39
- return Object.entries(r).forEach(([f, i]) => {
40
- i && Object.entries(i).forEach(([p, c]) => {
41
- if (!c) return;
42
- const $ = `${s}.${f}-${p}`, j = k(c, $);
43
- o.push(j);
44
- });
45
- }), l;
46
- if (u === "defaultVariants")
47
- return l;
48
- if (u === "compoundVariants")
49
- return r.forEach((f) => {
50
- const { css: i, ...p } = f, c = Object.entries(p).reduce((j, [C, O]) => `${j}.${C}-${O}`, s), $ = k(i, c);
51
- o.push($);
52
- }), l;
53
- if (u.startsWith("@")) {
54
- const f = k(r, s), i = `${u} {
55
- ${f.replace(`
56
- `, `
57
- `)}
58
- }`;
59
- return o.push(i), l;
60
- }
61
- const b = h.includes("&") ? u.replace("&", s) : u.startsWith(":") ? `${s}${u}` : `${s} ${u}`, d = k(r, b);
62
- return o.push(d), l;
63
- }
64
- const y = u.startsWith("-") ? u : N(u), S = (b, d = ";") => l = `${l}${b}${d}`, V = (b) => S(`${y}:${b}`);
65
- if (typeof r == "number") return V(r);
66
- if (typeof r != "string")
67
- if ("toString" in r) r = r.toString();
68
- else return l;
69
- const { modifiers: D } = {}, F = function* () {
70
- yield R(r), yield U(r, D);
71
- }();
72
- for (const { result: b, additionalCss: d = [] } of F)
73
- r = b, d.forEach((f) => {
74
- const i = k(f, "");
75
- S(i, "");
76
- });
77
- return V(r);
78
- }, "");
79
- if (!a) return o.join(`
80
- `);
81
- if (!s) return a;
82
- let g = "";
83
- return g = `${s} { ${a} }`, [g, ...o].join(`
84
- `);
85
- }, I = (t, s = []) => {
86
- const e = [], n = {};
87
- if (Object.entries(t).forEach(([o, a]) => {
88
- if (typeof a == "object") {
89
- if (!a) return;
90
- const g = o.trim(), l = I(a, [...s, g]);
91
- e.push(l);
92
- } else
93
- n[o] = a;
94
- }), Object.keys(n).length) {
95
- const o = s.map(N).join("-"), a = k(n, `.${o}`);
96
- e.push(a);
97
- }
98
- return e.join(`
99
- `);
100
- };
101
- T.createLogger({
102
- level: "info",
103
- format: T.format.combine(T.format.colorize(), T.format.cli()),
104
- transports: [new T.transports.Console({})]
105
- });
106
- const x = (t) => m(t, "./saltygen"), X = ["salty", "css", "styles", "styled"], W = (t = []) => new RegExp(`\\.(${[...X, ...t].join("|")})\\.`), Y = (t, s = []) => W(s).test(t), Q = async (t) => {
107
- const s = x(t), e = m(t, "salty-config.ts"), n = m(s, "salty-config.js");
108
- await M.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 o = Date.now(), { config: a } = await import(`${n}?t=${o}`);
118
- return a;
119
- }, v = async (t) => {
120
- const s = await Q(t), e = /* @__PURE__ */ new Set(), n = (f, i = []) => f ? Object.entries(f).flatMap(([p, c]) => {
121
- if (!c) return;
122
- if (typeof c == "object") return n(c, [...i, p]);
123
- const $ = [...i, p].join(".");
124
- e.add(`"${$}"`);
125
- const j = [...i.map(N), N(p)].join("-"), { result: C } = R(c);
126
- return `--${j}: ${C};`;
127
- }) : [], o = (f) => f ? Object.entries(f).flatMap(([i, p]) => {
128
- const c = n(p);
129
- return i === "base" ? c.join("") : `${i} { ${c.join("")} }`;
130
- }) : [], a = (f) => f ? Object.entries(f).flatMap(([i, p]) => Object.entries(p).flatMap(([c, $]) => {
131
- const j = n($, [i]), C = `.${i}-${c}, [data-${i}="${c}"]`, O = j.join("");
132
- return `${C} { ${O} }`;
133
- })) : [], g = n(s.variables), l = o(s.responsiveVariables), h = a(s.conditionalVariables), r = x(t), u = m(r, "css/variables.css"), y = `:root { ${g.join("")} ${l.join("")} } ${h.join("")}`;
134
- w(u, y);
135
- const S = m(r, "types/css-tokens.d.ts"), D = `type VariableTokens = ${[...e].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
136
- w(S, D);
137
- const P = m(r, "css/global.css"), F = k(s.global, "");
138
- w(P, F);
139
- const b = m(r, "css/templates.css"), d = I(s.templates);
140
- w(b, d);
141
- }, tt = async (t, s) => {
142
- const e = Z(t), n = m(s, "js", e + ".js");
143
- await M.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 o = Date.now();
155
- return await import(`${n}?t=${o}`);
156
- }, st = async (t) => {
157
- const s = x(t), e = m(s, "salty-config.js"), { config: n } = await import(e);
158
- return n;
159
- }, et = async (t) => {
160
- try {
161
- const s = [], e = [], n = x(t), o = m(n, "index.css");
162
- (() => {
163
- z(n) && q("rm -rf " + n), E(n), E(m(n, "css")), E(m(n, "types"));
164
- })(), await v(t);
165
- const g = await st(t);
166
- async function l(y, S) {
167
- const V = B(y);
168
- if (V.isDirectory()) {
169
- const D = G(y);
170
- await Promise.all(D.map((P) => l(m(y, P), m(S, P))));
171
- } else if (V.isFile() && Y(y)) {
172
- const P = await tt(y, n), F = [];
173
- Object.entries(P).forEach(([i, p]) => {
174
- if (p.isKeyframes && p.css) {
175
- const O = `${p.animationName}.css`, _ = `css/${O}`, H = m(n, _);
176
- s.push(O), w(H, p.css);
177
- return;
178
- }
179
- if (!p.generator) return;
180
- const c = p.generator._withBuildContext({
181
- name: i,
182
- config: g
183
- }), $ = `${c.hash}-${c.priority}.css`;
184
- e[c.priority] || (e[c.priority] = []), e[c.priority].push($), F.push($);
185
- const j = `css/${$}`, C = m(n, j);
186
- w(C, c.css);
187
- });
188
- const b = F.map((i) => `@import url('./${i}');`).join(`
189
- `), d = Z(y, 6), f = m(n, `css/${d}.css`);
190
- w(f, b);
191
- }
192
- }
193
- await l(t, n);
194
- const h = s.map((y) => `@import url('./css/${y}');`).join(`
195
- `);
196
- let u = `@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
- ${h}`;
201
- if (g.importStrategy !== "component") {
202
- const y = e.flat().map((S) => `@import url('./css/${S}');`).join(`
203
- `);
204
- u += y;
205
- }
206
- w(o, u);
207
- } catch (s) {
208
- console.error(s);
209
- }
210
- }, ct = (t, s) => {
211
- var e, n, o;
212
- (n = (e = t.module) == null ? void 0 : e.rules) == null || n.push({
213
- test: W(),
1
+ import { resolve as n } from "path";
2
+ import { s as u, g as i } from "./index-D6f6VgWV.js";
3
+ const g = (s, e, o = !1, r = !1) => {
4
+ var a, l, t;
5
+ (l = (a = s.module) == null ? void 0 : a.rules) == null || l.push({
6
+ test: u(),
214
7
  use: [
215
8
  {
216
- loader: L("./loader.js"),
217
- options: { dir: s }
9
+ loader: n(__dirname, r ? "./loader.cjs" : "./loader.js"),
10
+ options: { dir: e }
218
11
  }
219
12
  ]
220
- }), (o = t.plugins) == null || o.push({
221
- apply: (a) => {
222
- a.hooks.afterPlugins.tap({ name: "generateCss" }, async () => {
223
- await et(s);
13
+ }), o || (t = s.plugins) == null || t.push({
14
+ apply: (p) => {
15
+ p.hooks.afterPlugins.tap({ name: "generateCss" }, async () => {
16
+ await i(e);
224
17
  });
225
18
  }
226
19
  });
227
20
  };
228
21
  export {
229
- ct as saltyPlugin
22
+ g as default,
23
+ g as saltyPlugin
230
24
  };
package/loader.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";const i=require("./index-DfOEZJUz.cjs");async function n(){const{dir:e}=this.getOptions(),{resourcePath:t}=this;return await i.generateFile(e,t),await i.minimizeFile(e,t)}module.exports=n;
package/loader.js ADDED
@@ -0,0 +1,8 @@
1
+ import { a as e, m as i } from "./index-D6f6VgWV.js";
2
+ async function s() {
3
+ const { dir: t } = this.getOptions(), { resourcePath: a } = this;
4
+ return await e(t, a), await i(t, a);
5
+ }
6
+ export {
7
+ s as default
8
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/webpack",
3
- "version": "0.0.1-alpha.11",
3
+ "version": "0.0.1-alpha.111",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -10,7 +10,12 @@
10
10
  "publishConfig": {
11
11
  "access": "public"
12
12
  },
13
- "homepage": "https://github.com/margarita-form/salty-css",
13
+ "description": "Webpack plugin for Salty CSS",
14
+ "homepage": "https://salty-css.dev/",
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/margarita-form/salty-css.git"
18
+ },
14
19
  "bugs": {
15
20
  "url": "https://github.com/margarita-form/salty-css/issues"
16
21
  },
@@ -27,5 +32,9 @@
27
32
  "import": "./index.js",
28
33
  "require": "./index.cjs"
29
34
  }
35
+ },
36
+ "dependencies": {
37
+ "@salty-css/core": "^0.0.1-alpha.111",
38
+ "webpack": ">=5.x"
30
39
  }
31
40
  }