@salty-css/core 0.0.1-alpha.10 → 0.0.1-alpha.11
Sign up to get free protection for your applications and to get access to all the features.
- package/compiler/index.cjs +5 -5
- package/compiler/index.d.ts +3 -1
- package/compiler/index.js +39 -37
- package/eslint/index.cjs +1 -0
- package/eslint/index.d.ts +6 -0
- package/eslint/index.js +48 -0
- package/eslint/rules/no-variants-in-base.d.ts +2 -0
- package/package.json +5 -2
package/compiler/index.cjs
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
2
|
-
`),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("esbuild"),J=require("winston"),G=require("child_process"),N=require("../util/index.cjs"),o=require("path"),r=require("fs"),L=require("fs/promises"),_=require("../parse-templates-BY1Xai-_.cjs");function q(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const e=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,e.get?e:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const R=q(K),k=q(J),A=k.createLogger({level:"info",format:k.format.combine(k.format.colorize(),k.format.cli()),transports:[new k.transports.Console({})]}),v=t=>o.join(t,"./saltygen"),M=["salty","css","styles","styled"],z=(t=[])=>new RegExp(`\\.(${[...M,...t].join("|")})\\.`),T=(t,s=[])=>z(s).test(t),U=async t=>{const s=v(t),n=o.join(t,"salty-config.ts"),e=o.join(s,"salty-config.js");await R.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",external:["react"]});const a=Date.now(),{config:h}=await import(`${e}?t=${a}`);return h},H=async t=>{const s=await U(t),n=new Set,e=(f,p=[])=>f?Object.entries(f).flatMap(([y,c])=>{if(!c)return;if(typeof c=="object")return e(c,[...p,y]);const x=[...p,y].join(".");n.add(`"${x}"`);const D=[...p.map(N.dashCase),N.dashCase(y)].join("-"),{result:P}=_.parseValueTokens(c);return`--${D}: ${P};`}):[],a=f=>f?Object.entries(f).flatMap(([p,y])=>{const c=e(y);return p==="base"?c.join(""):`${p} { ${c.join("")} }`}):[],h=f=>f?Object.entries(f).flatMap(([p,y])=>Object.entries(y).flatMap(([c,x])=>{const D=e(x,[p]),P=`.${p}-${c}, [data-${p}="${c}"]`,O=D.join("");return`${P} { ${O} }`})):[],b=e(s.variables),w=a(s.responsiveVariables),l=h(s.conditionalVariables),j=v(t),u=o.join(j,"css/variables.css"),i=`:root { ${b.join("")} ${w.join("")} } ${l.join("")}`;r.writeFileSync(u,i);const g=o.join(j,"types/css-tokens.d.ts"),d=`type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;r.writeFileSync(g,d);const m=o.join(j,"css/global.css"),S=_.parseStyles(s.global,"");r.writeFileSync(m,S);const F=o.join(j,"css/templates.css"),C=_.parseTemplates(s.templates);r.writeFileSync(F,C)},V=async(t,s)=>{const n=N.toHash(t),e=o.join(s,"js",n+".js");await R.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:e,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const a=Date.now();return await import(`${e}?t=${a}`)},E=async t=>{const s=v(t),n=o.join(s,"salty-config.js"),{config:e}=await import(n);return e},W=async t=>{try{const s=[],n=[],e=v(t),a=o.join(e,"index.css");(()=>{r.existsSync(e)&&G.execSync("rm -rf "+e),r.mkdirSync(e),r.mkdirSync(o.join(e,"css")),r.mkdirSync(o.join(e,"types"))})(),await H(t);const b=await E(t);async function w(i,g){const $=r.statSync(i);if($.isDirectory()){const d=r.readdirSync(i);await Promise.all(d.map(m=>w(o.join(i,m),o.join(g,m))))}else if($.isFile()&&T(i)){const m=await V(i,e),S=[];Object.entries(m).forEach(([p,y])=>{if(y.isKeyframes&&y.css){const O=`${y.animationName}.css`,I=`css/${O}`,B=o.join(e,I);s.push(O),r.writeFileSync(B,y.css);return}if(!y.generator)return;const c=y.generator._withBuildContext({name:p,config:b}),x=`${c.hash}-${c.priority}.css`;n[c.priority]||(n[c.priority]=[]),n[c.priority].push(x),S.push(x);const D=`css/${x}`,P=o.join(e,D);r.writeFileSync(P,c.css)});const F=S.map(p=>`@import url('./${p}');`).join(`
|
2
|
+
`),C=N.toHash(i,6),f=o.join(e,`css/${C}.css`);r.writeFileSync(f,F)}}await w(t,e);const l=s.map(i=>`@import url('./css/${i}');`).join(`
|
3
3
|
`);let u=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
|
4
4
|
|
5
5
|
${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
|
6
6
|
`)}
|
7
7
|
${l}`;if(b.importStrategy!=="component"){const i=n.flat().map(g=>`@import url('./css/${g}');`).join(`
|
8
|
-
`);u+=i}r.writeFileSync(a,u)}catch(s){console.error(s)}},
|
8
|
+
`);u+=i}r.writeFileSync(a,u)}catch(s){console.error(s)}},X=async(t,s)=>{try{const n=[],e=o.join(t,"./saltygen"),a=o.join(e,"index.css");if(T(s)){const b=await E(t),w=await V(s,e);Object.entries(w).forEach(([g,$])=>{if(!$.generator)return;const d=$.generator._withBuildContext({name:g,config:b}),m=`${d.hash}-${d.priority}.css`,S=`css/${m}`,F=o.join(e,S);n.push(m),r.writeFileSync(F,d.css)});const l=r.readFileSync(a,"utf8").split(`
|
9
9
|
`),j=n.map(g=>`@import url('../saltygen/css/${g}');`),i=[...new Set([...l,...j])].join(`
|
10
|
-
`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},
|
11
|
-
${l}`),l=l.replace("{ styled }","{ styledClient as styled }"),l=l.replace("@salty-css/react/styled","@salty-css/react/styled-client"),l}}catch(n){console.error(n)}};exports.compileSaltyFile=V;exports.generateCss=
|
10
|
+
`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},Y=async(t,s)=>{try{const n=o.join(t,"./saltygen");if(T(s)){let a=r.readFileSync(s,"utf8");a.replace(/^(?!export\s)const\s.*/gm,u=>`export ${u}`)!==a&&await L.writeFile(s,a);const b=await E(t),w=await V(s,n);let l=a;Object.entries(w).forEach(([u,i])=>{var f;if(i.isKeyframes){console.log("value",i);return}if(!i.generator)return;const g=i.generator._withBuildContext({name:u,config:b}),$=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(a);if(!$)return console.error("Could not find the original declaration");const d=(f=$.at(1))==null?void 0:f.trim(),{element:m,variantKeys:S}=g.props,F=`${u} = styled(${d}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(m)}, ${JSON.stringify(S)});`,C=new RegExp(`${u}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");l=l.replace(C,F)});const j=N.toHash(s,6);return b.importStrategy==="component"&&(l=`import '../../saltygen/css/${j}.css';
|
11
|
+
${l}`),l=l.replace("{ styled }","{ styledClient as styled }"),l=l.replace("@salty-css/react/styled","@salty-css/react/styled-client"),l}}catch(n){console.error(n)}};exports.compileSaltyFile=V;exports.generateCss=W;exports.generateFile=X;exports.generateVariables=H;exports.isSaltyFile=T;exports.logger=A;exports.minimizeFile=Y;exports.saltyFileExtensions=M;exports.saltyFileRegExp=z;
|
package/compiler/index.d.ts
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
import { StyleComponentGenerator } from '../generator/style-generator';
|
2
2
|
import * as winston from 'winston';
|
3
3
|
export declare const logger: winston.Logger;
|
4
|
-
export declare const
|
4
|
+
export declare const saltyFileExtensions: string[];
|
5
|
+
export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
|
6
|
+
export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;
|
5
7
|
export declare const generateVariables: (dirname: string) => Promise<void>;
|
6
8
|
export declare const compileSaltyFile: (sourceFilePath: string, outputDirectory: string) => Promise<{
|
7
9
|
[key: string]: {
|
package/compiler/index.js
CHANGED
@@ -6,11 +6,11 @@ import { join as o } from "path";
|
|
6
6
|
import { writeFileSync as $, existsSync as H, mkdirSync as v, statSync as J, readdirSync as G, readFileSync as _ } from "fs";
|
7
7
|
import { writeFile as L } from "fs/promises";
|
8
8
|
import { p as q, a as A, b as U } from "../parse-templates-BOSK0Tb6.js";
|
9
|
-
const
|
9
|
+
const rt = N.createLogger({
|
10
10
|
level: "info",
|
11
11
|
format: N.format.combine(N.format.colorize(), N.format.cli()),
|
12
12
|
transports: [new N.transports.Console({})]
|
13
|
-
}), k = (s) => o(s, "./saltygen"), W = ["salty", "css", "styles", "styled"],
|
13
|
+
}), k = (s) => o(s, "./saltygen"), W = ["salty", "css", "styles", "styled"], X = (s = []) => new RegExp(`\\.(${[...W, ...s].join("|")})\\.`), O = (s, e = []) => X(e).test(s), Y = async (s) => {
|
14
14
|
const e = k(s), n = o(s, "salty-config.ts"), t = o(e, "salty-config.js");
|
15
15
|
await M.build({
|
16
16
|
entryPoints: [n],
|
@@ -21,30 +21,30 @@ const ot = N.createLogger({
|
|
21
21
|
format: "esm",
|
22
22
|
external: ["react"]
|
23
23
|
});
|
24
|
-
const c = Date.now(), { config:
|
25
|
-
return
|
26
|
-
},
|
27
|
-
const e = await
|
24
|
+
const c = Date.now(), { config: j } = await import(`${t}?t=${c}`);
|
25
|
+
return j;
|
26
|
+
}, Z = async (s) => {
|
27
|
+
const e = await Y(s), n = /* @__PURE__ */ new Set(), t = (m, l = []) => m ? Object.entries(m).flatMap(([p, i]) => {
|
28
28
|
if (!i) return;
|
29
29
|
if (typeof i == "object") return t(i, [...l, p]);
|
30
|
-
const
|
31
|
-
n.add(`"${
|
30
|
+
const x = [...l, p].join(".");
|
31
|
+
n.add(`"${x}"`);
|
32
32
|
const D = [...l.map(I), I(p)].join("-"), { result: P } = U(i);
|
33
33
|
return `--${D}: ${P};`;
|
34
34
|
}) : [], c = (m) => m ? Object.entries(m).flatMap(([l, p]) => {
|
35
35
|
const i = t(p);
|
36
36
|
return l === "base" ? i.join("") : `${l} { ${i.join("")} }`;
|
37
|
-
}) : [],
|
38
|
-
const D = t(
|
37
|
+
}) : [], j = (m) => m ? Object.entries(m).flatMap(([l, p]) => Object.entries(p).flatMap(([i, x]) => {
|
38
|
+
const D = t(x, [l]), P = `.${l}-${i}, [data-${l}="${i}"]`, V = D.join("");
|
39
39
|
return `${P} { ${V} }`;
|
40
|
-
})) : [], d = t(e.variables), w = c(e.responsiveVariables), a =
|
40
|
+
})) : [], d = t(e.variables), w = c(e.responsiveVariables), a = j(e.conditionalVariables), b = k(s), y = o(b, "css/variables.css"), r = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
|
41
41
|
$(y, r);
|
42
42
|
const f = o(b, "types/css-tokens.d.ts"), u = `type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
|
43
43
|
$(f, u);
|
44
|
-
const g = o(b, "css/global.css"),
|
45
|
-
$(g,
|
46
|
-
const
|
47
|
-
$(
|
44
|
+
const g = o(b, "css/global.css"), F = q(e.global, "");
|
45
|
+
$(g, F);
|
46
|
+
const S = o(b, "css/templates.css"), C = A(e.templates);
|
47
|
+
$(S, C);
|
48
48
|
}, E = async (s, e) => {
|
49
49
|
const n = T(s), t = o(e, "js", n + ".js");
|
50
50
|
await M.build({
|
@@ -63,12 +63,12 @@ const ot = N.createLogger({
|
|
63
63
|
}, R = async (s) => {
|
64
64
|
const e = k(s), n = o(e, "salty-config.js"), { config: t } = await import(n);
|
65
65
|
return t;
|
66
|
-
},
|
66
|
+
}, it = async (s) => {
|
67
67
|
try {
|
68
68
|
const e = [], n = [], t = k(s), c = o(t, "index.css");
|
69
69
|
(() => {
|
70
70
|
H(t) && z("rm -rf " + t), v(t), v(o(t, "css")), v(o(t, "types"));
|
71
|
-
})(), await
|
71
|
+
})(), await Z(s);
|
72
72
|
const d = await R(s);
|
73
73
|
async function w(r, f) {
|
74
74
|
const h = J(r);
|
@@ -76,7 +76,7 @@ const ot = N.createLogger({
|
|
76
76
|
const u = G(r);
|
77
77
|
await Promise.all(u.map((g) => w(o(r, g), o(f, g))));
|
78
78
|
} else if (h.isFile() && O(r)) {
|
79
|
-
const g = await E(r, t),
|
79
|
+
const g = await E(r, t), F = [];
|
80
80
|
Object.entries(g).forEach(([l, p]) => {
|
81
81
|
if (p.isKeyframes && p.css) {
|
82
82
|
const V = `${p.animationName}.css`, B = `css/${V}`, K = o(t, B);
|
@@ -87,14 +87,14 @@ const ot = N.createLogger({
|
|
87
87
|
const i = p.generator._withBuildContext({
|
88
88
|
name: l,
|
89
89
|
config: d
|
90
|
-
}),
|
91
|
-
n[i.priority] || (n[i.priority] = []), n[i.priority].push(
|
92
|
-
const D = `css/${
|
90
|
+
}), x = `${i.hash}-${i.priority}.css`;
|
91
|
+
n[i.priority] || (n[i.priority] = []), n[i.priority].push(x), F.push(x);
|
92
|
+
const D = `css/${x}`, P = o(t, D);
|
93
93
|
$(P, i.css);
|
94
94
|
});
|
95
|
-
const
|
96
|
-
`),
|
97
|
-
$(m,
|
95
|
+
const S = F.map((l) => `@import url('./${l}');`).join(`
|
96
|
+
`), C = T(r, 6), m = o(t, `css/${C}.css`);
|
97
|
+
$(m, S);
|
98
98
|
}
|
99
99
|
}
|
100
100
|
await w(s, t);
|
@@ -114,7 +114,7 @@ ${a}`;
|
|
114
114
|
} catch (e) {
|
115
115
|
console.error(e);
|
116
116
|
}
|
117
|
-
},
|
117
|
+
}, ct = async (s, e) => {
|
118
118
|
try {
|
119
119
|
const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
|
120
120
|
if (O(e)) {
|
@@ -124,8 +124,8 @@ ${a}`;
|
|
124
124
|
const u = h.generator._withBuildContext({
|
125
125
|
name: f,
|
126
126
|
config: d
|
127
|
-
}), g = `${u.hash}-${u.priority}.css`,
|
128
|
-
n.push(g), $(
|
127
|
+
}), g = `${u.hash}-${u.priority}.css`, F = `css/${g}`, S = o(t, F);
|
128
|
+
n.push(g), $(S, u.css);
|
129
129
|
});
|
130
130
|
const a = _(c, "utf8").split(`
|
131
131
|
`), b = n.map((f) => `@import url('../saltygen/css/${f}');`), r = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
|
@@ -135,7 +135,7 @@ ${a}`;
|
|
135
135
|
} catch (n) {
|
136
136
|
console.error(n);
|
137
137
|
}
|
138
|
-
},
|
138
|
+
}, at = async (s, e) => {
|
139
139
|
try {
|
140
140
|
const n = o(s, "./saltygen");
|
141
141
|
if (O(e)) {
|
@@ -156,10 +156,10 @@ ${a}`;
|
|
156
156
|
}), h = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
|
157
157
|
if (!h)
|
158
158
|
return console.error("Could not find the original declaration");
|
159
|
-
const u = (m = h.at(1)) == null ? void 0 : m.trim(), { element: g, variantKeys:
|
160
|
-
|
161
|
-
)});`,
|
162
|
-
a = a.replace(
|
159
|
+
const u = (m = h.at(1)) == null ? void 0 : m.trim(), { element: g, variantKeys: F } = f.props, S = `${y} = styled(${u}, "${f.classNames}", "${f._callerName}", ${JSON.stringify(g)}, ${JSON.stringify(
|
160
|
+
F
|
161
|
+
)});`, C = new RegExp(`${y}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
|
162
|
+
a = a.replace(C, S);
|
163
163
|
});
|
164
164
|
const b = T(e, 6);
|
165
165
|
return d.importStrategy === "component" && (a = `import '../../saltygen/css/${b}.css';
|
@@ -171,10 +171,12 @@ ${a}`), a = a.replace("{ styled }", "{ styledClient as styled }"), a = a.replace
|
|
171
171
|
};
|
172
172
|
export {
|
173
173
|
E as compileSaltyFile,
|
174
|
-
|
175
|
-
|
176
|
-
|
174
|
+
it as generateCss,
|
175
|
+
ct as generateFile,
|
176
|
+
Z as generateVariables,
|
177
177
|
O as isSaltyFile,
|
178
|
-
|
179
|
-
|
178
|
+
rt as logger,
|
179
|
+
at as minimizeFile,
|
180
|
+
W as saltyFileExtensions,
|
181
|
+
X as saltyFileRegExp
|
180
182
|
};
|
package/eslint/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";const l=require("../compiler/index.cjs"),c={meta:{type:"problem",docs:{description:"Ensure `variants` are not nested inside `base` in styled calls",category:"Errors",recommended:!0},messages:{nestedVariants:"`variants` should not be nested inside `base`."}},create(r){return l.isSaltyFile(r.filename)?{CallExpression:o=>{try{const{callee:s,arguments:d}=o;if(!(s.type==="Identifier"&&s.name==="styled"))return;const t=d[0];if(!t||!(t.type==="ObjectExpression"))return;const n=t.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="base");if(!n)return;const{value:a}=n;if(!(a.type==="ObjectExpression"))return;const i=a.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="variants");if(!i)return;r.report({node:i,messageId:"nestedVariants"})}catch(s){console.log("ESlint error",s);return}}}:{}}},y={rules:{"no-variants-in-base":c}};module.exports=y;
|
package/eslint/index.js
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
import { isSaltyFile as l } from "../compiler/index.js";
|
2
|
+
const y = {
|
3
|
+
meta: {
|
4
|
+
type: "problem",
|
5
|
+
docs: {
|
6
|
+
description: "Ensure `variants` are not nested inside `base` in styled calls",
|
7
|
+
category: "Errors",
|
8
|
+
recommended: !0
|
9
|
+
},
|
10
|
+
messages: {
|
11
|
+
nestedVariants: "`variants` should not be nested inside `base`."
|
12
|
+
}
|
13
|
+
},
|
14
|
+
create(r) {
|
15
|
+
return l(r.filename) ? {
|
16
|
+
CallExpression: (o) => {
|
17
|
+
try {
|
18
|
+
const { callee: s, arguments: d } = o;
|
19
|
+
if (!(s.type === "Identifier" && s.name === "styled")) return;
|
20
|
+
const t = d[0];
|
21
|
+
if (!t || !(t.type === "ObjectExpression")) return;
|
22
|
+
const n = t.properties.find((e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "base");
|
23
|
+
if (!n) return;
|
24
|
+
const { value: a } = n;
|
25
|
+
if (!(a.type === "ObjectExpression")) return;
|
26
|
+
const i = a.properties.find(
|
27
|
+
(e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "variants"
|
28
|
+
);
|
29
|
+
if (!i) return;
|
30
|
+
r.report({
|
31
|
+
node: i,
|
32
|
+
messageId: "nestedVariants"
|
33
|
+
});
|
34
|
+
} catch (s) {
|
35
|
+
console.log("ESlint error", s);
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
} : {};
|
40
|
+
}
|
41
|
+
}, b = {
|
42
|
+
rules: {
|
43
|
+
"no-variants-in-base": y
|
44
|
+
}
|
45
|
+
};
|
46
|
+
export {
|
47
|
+
b as default
|
48
|
+
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salty-css/core",
|
3
|
-
"version": "0.0.1-alpha.
|
3
|
+
"version": "0.0.1-alpha.11",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"module": "./dist/index.mjs",
|
6
6
|
"typings": "./dist/index.d.ts",
|
@@ -19,10 +19,13 @@
|
|
19
19
|
"!**/*.tsbuildinfo"
|
20
20
|
],
|
21
21
|
"nx": {
|
22
|
+
"sourceRoot": "libs/core/src",
|
22
23
|
"name": "core"
|
23
24
|
},
|
24
25
|
"peerDependencies": {
|
25
|
-
"
|
26
|
+
"esbuild": "0.21.x",
|
27
|
+
"eslint": "^9.x",
|
28
|
+
"react": "^18.x",
|
26
29
|
"winston": ">=3.x"
|
27
30
|
},
|
28
31
|
"exports": {
|