@salty-css/core 0.0.1-alpha.2 → 0.0.1-alpha.200
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/.saltyrc.schema.json +48 -0
- package/README.md +164 -43
- package/bin/bin-util.d.ts +2 -0
- package/bin/index.cjs +2 -0
- package/bin/index.d.ts +2 -0
- package/bin/index.js +3 -0
- package/bin/logger.d.ts +2 -0
- package/bin/main.cjs +11 -0
- package/bin/main.d.ts +1 -0
- package/bin/main.js +260 -0
- package/bin/prettier.d.ts +1 -0
- package/compiler/get-files.d.ts +3 -0
- package/compiler/index.cjs +1 -0
- package/compiler/index.d.ts +21 -0
- package/compiler/index.js +19 -0
- package/config/define-config.d.ts +2 -0
- package/config/index.cjs +1 -0
- package/config/index.d.ts +3 -0
- package/config/index.js +12 -0
- package/css/index.cjs +1 -0
- package/css/index.d.ts +4 -0
- package/css/index.js +11 -0
- package/css/keyframes.cjs +1 -0
- package/css/keyframes.d.ts +22 -0
- package/css/keyframes.js +34 -0
- package/css/media.cjs +1 -0
- package/css/media.d.ts +87 -0
- package/css/media.js +88 -0
- package/css/merge.cjs +1 -0
- package/css/merge.d.ts +6 -0
- package/css/merge.js +4 -0
- package/css/token.cjs +1 -0
- package/css/token.d.ts +1 -0
- package/css/token.js +4 -0
- package/dash-case-BJEkFEGQ.cjs +1 -0
- package/dash-case-DBThphLm.js +19 -0
- package/factories/define-global-styles.d.ts +7 -0
- package/factories/define-media-query.d.ts +8 -0
- package/factories/define-templates.d.ts +10 -0
- package/factories/define-variables.d.ts +12 -0
- package/factories/index.d.ts +4 -0
- package/generators/class-name-generator.d.ts +6 -0
- package/generators/index.cjs +1 -0
- package/generators/index.d.ts +2 -0
- package/generators/index.js +75 -0
- package/generators/styled-generator.d.ts +19 -0
- package/generators/styles-generator.d.ts +18 -0
- package/helpers/color.d.ts +18 -0
- package/helpers/index.cjs +1 -0
- package/helpers/index.d.ts +1 -0
- package/helpers/index.js +1152 -0
- package/index-84Wroia-.cjs +1 -0
- package/index-BM4snbAi.js +486 -0
- package/index-CHz91O9z.cjs +38 -0
- package/index-D_732b92.js +4 -0
- package/package.json +67 -21
- package/parse-styles-Bjxh8lZv.js +107 -0
- package/parse-styles-D_gL6efj.cjs +7 -0
- package/parsers/index.cjs +1 -0
- package/parsers/index.d.ts +5 -0
- package/parsers/index.js +37 -0
- package/parsers/parse-modifiers.d.ts +3 -0
- package/parsers/parse-styles.d.ts +2 -0
- package/parsers/parse-templates.d.ts +4 -0
- package/parsers/parse-tokens.d.ts +2 -0
- package/parsers/parser-types.d.ts +4 -0
- package/parsers/property-name-check.d.ts +1 -0
- package/parsers/unit-check.d.ts +7 -0
- package/pascal-case-BQpR5PdN.js +6 -0
- package/pascal-case-iWoaJWwT.cjs +1 -0
- package/react-styled-file-CGVf5n1B.js +11 -0
- package/react-styled-file-Dkubsz-U.cjs +8 -0
- package/react-vanilla-file-CCXbsjIb.js +18 -0
- package/react-vanilla-file-CG_WJLam.cjs +15 -0
- package/salty.config-BhBY_oOk.js +10 -0
- package/salty.config-Dk6ZcCxI.cjs +7 -0
- package/server/index.cjs +1 -0
- package/server/index.d.ts +1 -0
- package/server/index.js +12 -0
- package/server/should-restart.d.ts +1 -0
- package/templates/salty-reset.d.ts +2 -0
- package/types/cli-types.d.ts +10 -0
- package/types/config-types.d.ts +77 -0
- package/types/index.cjs +1 -0
- package/types/index.d.ts +93 -0
- package/types/index.js +1 -0
- package/types/util-types.d.ts +13 -0
- package/util/camel-case.d.ts +1 -0
- package/util/dash-case.d.ts +1 -0
- package/util/dot-case.d.ts +1 -0
- package/util/index.cjs +1 -0
- package/util/index.d.ts +4 -0
- package/util/index.js +11 -0
- package/util/module-type.d.ts +1 -0
- package/util/pascal-case.d.ts +1 -0
- package/util/to-hash.d.ts +4 -0
@@ -0,0 +1,107 @@
|
|
1
|
+
import { d as y } from "./dash-case-DBThphLm.js";
|
2
|
+
const T = (r, e) => {
|
3
|
+
if (typeof r != "string") return { result: r };
|
4
|
+
if (!e) return { result: r };
|
5
|
+
const s = [];
|
6
|
+
return Object.values(e).forEach((p) => {
|
7
|
+
const { pattern: i, transform: w } = p;
|
8
|
+
r = r.replace(i, (n) => {
|
9
|
+
const { value: a, css: t } = w(n);
|
10
|
+
return t && s.push(t), a;
|
11
|
+
});
|
12
|
+
}), { result: r, additionalCss: s };
|
13
|
+
}, z = (r) => typeof r != "string" ? { result: r } : /\{[^{}]+\}/g.test(r) ? { result: r.replace(/\{([^{}]+)\}/g, (...p) => `var(--${y(p[1].replaceAll(".", "-"))})`) } : { result: r }, U = [
|
14
|
+
"top",
|
15
|
+
"right",
|
16
|
+
"bottom",
|
17
|
+
"left",
|
18
|
+
"min-width",
|
19
|
+
/.*width.*/,
|
20
|
+
/^[^line]*height.*/,
|
21
|
+
// Exclude line-height
|
22
|
+
/padding.*/,
|
23
|
+
/margin.*/,
|
24
|
+
/border.*/,
|
25
|
+
/inset.*/,
|
26
|
+
/.*radius.*/,
|
27
|
+
/.*spacing.*/,
|
28
|
+
/.*gap.*/,
|
29
|
+
/.*indent.*/,
|
30
|
+
/.*offset.*/,
|
31
|
+
/.*size.*/,
|
32
|
+
/.*thickness.*/,
|
33
|
+
/.*font-size.*/
|
34
|
+
], M = (r, e, s) => {
|
35
|
+
if (U.some((i) => typeof i == "string" ? i === r : i.test(r))) {
|
36
|
+
const i = (s == null ? void 0 : s.defaultUnit) || "px";
|
37
|
+
return `${e}${i}`;
|
38
|
+
}
|
39
|
+
return `${e}`;
|
40
|
+
}, N = ["Webkit", "Moz", "ms", "O"], Q = (r) => r.startsWith("-") ? r : N.some((e) => r.startsWith(e)) ? `-${y(r)}` : y(r), c = (r, e, s) => {
|
41
|
+
if (!r) return "";
|
42
|
+
const p = [], i = Object.entries(r).reduce((n, [a, t]) => {
|
43
|
+
var S;
|
44
|
+
const o = a.trim(), O = Q(o), P = (f, h = ";") => n = `${n}${f}${h}`, b = (f) => P(`${O}:${f}`);
|
45
|
+
if (typeof t == "function" && (t = t()), typeof t == "object") {
|
46
|
+
if (!t) return n;
|
47
|
+
if (t.isColor)
|
48
|
+
return b(t.toString()), n;
|
49
|
+
if (o === "variants")
|
50
|
+
return Object.entries(t).forEach(([u, d]) => {
|
51
|
+
d && Object.entries(d).forEach(([$, m]) => {
|
52
|
+
if (!m) return;
|
53
|
+
const l = `${e}.${u}-${$}`, j = c(m, l, s);
|
54
|
+
p.push(j);
|
55
|
+
});
|
56
|
+
}), n;
|
57
|
+
if (o === "defaultVariants")
|
58
|
+
return n;
|
59
|
+
if (o === "compoundVariants")
|
60
|
+
return t.forEach((u) => {
|
61
|
+
const { css: d, ...$ } = u, m = Object.entries($).reduce((j, [W, x]) => `${j}.${W}-${x}`, e), l = c(d, m, s);
|
62
|
+
p.push(l);
|
63
|
+
}), n;
|
64
|
+
if (o.startsWith("@")) {
|
65
|
+
const u = ((S = s == null ? void 0 : s.mediaQueries) == null ? void 0 : S[o]) || o, d = c(t, e, s), $ = `${u} {
|
66
|
+
${d.replace(`
|
67
|
+
`, `
|
68
|
+
`)}
|
69
|
+
}`;
|
70
|
+
return p.push($), n;
|
71
|
+
}
|
72
|
+
const f = a.includes("&") ? o.replace("&", e) : o.startsWith(":") ? `${e}${o}` : `${e} ${o}`, h = c(t, f, s);
|
73
|
+
return p.push(h), n;
|
74
|
+
}
|
75
|
+
if (s != null && s.templates && s.templates[o]) {
|
76
|
+
const h = t.split(".").reduce((u, d) => u[d], s.templates[o]);
|
77
|
+
if (h) {
|
78
|
+
const u = c(h, "");
|
79
|
+
return `${n}${u}`;
|
80
|
+
}
|
81
|
+
return console.warn(`Template "${o}" with path of "${t}" was not found in config!`), n;
|
82
|
+
}
|
83
|
+
if (typeof t == "number") {
|
84
|
+
const f = M(O, t, s);
|
85
|
+
return b(f);
|
86
|
+
}
|
87
|
+
if (typeof t != "string")
|
88
|
+
if ("toString" in t) t = t.toString();
|
89
|
+
else return n;
|
90
|
+
const { modifiers: E } = s || {}, V = function* () {
|
91
|
+
yield z(t), yield T(t, E);
|
92
|
+
}();
|
93
|
+
for (const { result: f, additionalCss: h = [] } of V)
|
94
|
+
t = f, h.forEach((u) => {
|
95
|
+
const d = c(u, "");
|
96
|
+
P(d, "");
|
97
|
+
});
|
98
|
+
return b(t);
|
99
|
+
}, "");
|
100
|
+
return i ? e ? [`${e} { ${i} }`, ...p].join(`
|
101
|
+
`) : i : p.join(`
|
102
|
+
`);
|
103
|
+
};
|
104
|
+
export {
|
105
|
+
z as a,
|
106
|
+
c as p
|
107
|
+
};
|
@@ -0,0 +1,7 @@
|
|
1
|
+
"use strict";const j=require("./dash-case-BJEkFEGQ.cjs"),z=(r,e)=>{if(typeof r!="string")return{result:r};if(!e)return{result:r};const s=[];return Object.values(e).forEach(p=>{const{pattern:i,transform:S}=p;r=r.replace(i,n=>{const{value:$,css:t}=S(n);return t&&s.push(t),$})}),{result:r,additionalCss:s}},V=r=>typeof r!="string"?{result:r}:/\{[^{}]+\}/g.test(r)?{result:r.replace(/\{([^{}]+)\}/g,(...p)=>`var(--${j.dashCase(p[1].replaceAll(".","-"))})`)}:{result:r},U=["top","right","bottom","left","min-width",/.*width.*/,/^[^line]*height.*/,/padding.*/,/margin.*/,/border.*/,/inset.*/,/.*radius.*/,/.*spacing.*/,/.*gap.*/,/.*indent.*/,/.*offset.*/,/.*size.*/,/.*thickness.*/,/.*font-size.*/],k=(r,e,s)=>{if(U.some(i=>typeof i=="string"?i===r:i.test(r))){const i=(s==null?void 0:s.defaultUnit)||"px";return`${e}${i}`}return`${e}`},q=["Webkit","Moz","ms","O"],M=r=>r.startsWith("-")?r:q.some(e=>r.startsWith(e))?`-${j.dashCase(r)}`:j.dashCase(r),a=(r,e,s)=>{if(!r)return"";const p=[],i=Object.entries(r).reduce((n,[$,t])=>{var P;const o=$.trim(),w=M(o),O=(f,h=";")=>n=`${n}${f}${h}`,b=f=>O(`${w}:${f}`);if(typeof t=="function"&&(t=t()),typeof t=="object"){if(!t)return n;if(t.isColor)return b(t.toString()),n;if(o==="variants")return Object.entries(t).forEach(([u,d])=>{d&&Object.entries(d).forEach(([c,m])=>{if(!m)return;const l=`${e}.${u}-${c}`,y=a(m,l,s);p.push(y)})}),n;if(o==="defaultVariants")return n;if(o==="compoundVariants")return t.forEach(u=>{const{css:d,...c}=u,m=Object.entries(c).reduce((y,[W,x])=>`${y}.${W}-${x}`,e),l=a(d,m,s);p.push(l)}),n;if(o.startsWith("@")){const u=((P=s==null?void 0:s.mediaQueries)==null?void 0:P[o])||o,d=a(t,e,s),c=`${u} {
|
2
|
+
${d.replace(`
|
3
|
+
`,`
|
4
|
+
`)}
|
5
|
+
}`;return p.push(c),n}const f=$.includes("&")?o.replace("&",e):o.startsWith(":")?`${e}${o}`:`${e} ${o}`,h=a(t,f,s);return p.push(h),n}if(s!=null&&s.templates&&s.templates[o]){const h=t.split(".").reduce((u,d)=>u[d],s.templates[o]);if(h){const u=a(h,"");return`${n}${u}`}return console.warn(`Template "${o}" with path of "${t}" was not found in config!`),n}if(typeof t=="number"){const f=k(w,t,s);return b(f)}if(typeof t!="string")if("toString"in t)t=t.toString();else return n;const{modifiers:E}=s||{},T=function*(){yield V(t),yield z(t,E)}();for(const{result:f,additionalCss:h=[]}of T)t=f,h.forEach(u=>{const d=a(u,"");O(d,"")});return b(t)},"");return i?e?[`${e} { ${i} }`,...p].join(`
|
6
|
+
`):i:p.join(`
|
7
|
+
`)};exports.parseStyles=a;exports.parseValueTokens=V;
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../css/media.cjs");class r{constructor(t){this._current=t}get isGlobalDefine(){return!0}}const i=e=>new r(e),l=e=>e(n.media);class s{constructor(t){this._current=t}get isDefineVariables(){return!0}}const c=e=>new s(e);class a{constructor(t){this._current=t}get isDefineTemplates(){return!0}}const o=e=>new a(e);exports.GlobalStylesFactory=r;exports.TemplatesFactory=a;exports.VariablesFactory=s;exports.defineGlobalStyles=i;exports.defineMediaQuery=l;exports.defineTemplates=o;exports.defineVariables=c;
|
package/parsers/index.js
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
import { media as t } from "../css/media.js";
|
2
|
+
class n {
|
3
|
+
constructor(r) {
|
4
|
+
this._current = r;
|
5
|
+
}
|
6
|
+
get isGlobalDefine() {
|
7
|
+
return !0;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
const i = (e) => new n(e), o = (e) => e(t);
|
11
|
+
class s {
|
12
|
+
constructor(r) {
|
13
|
+
this._current = r;
|
14
|
+
}
|
15
|
+
get isDefineVariables() {
|
16
|
+
return !0;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
const l = (e) => new s(e);
|
20
|
+
class a {
|
21
|
+
constructor(r) {
|
22
|
+
this._current = r;
|
23
|
+
}
|
24
|
+
get isDefineTemplates() {
|
25
|
+
return !0;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
const u = (e) => new a(e);
|
29
|
+
export {
|
30
|
+
n as GlobalStylesFactory,
|
31
|
+
a as TemplatesFactory,
|
32
|
+
s as VariablesFactory,
|
33
|
+
i as defineGlobalStyles,
|
34
|
+
o as defineMediaQuery,
|
35
|
+
u as defineTemplates,
|
36
|
+
l as defineVariables
|
37
|
+
};
|
@@ -0,0 +1,4 @@
|
|
1
|
+
export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyKey[]) => string;
|
2
|
+
export declare const getTemplateKeys: <T extends object>(templates: T) => string[];
|
3
|
+
export declare const getTemplateTypes: <T extends object>(templates: T) => Record<string, string>;
|
4
|
+
export declare const getTemplateTokens: <T extends object>(templates: T, parent?: string, templateTokens?: Set<string>) => string[];
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const propertyNameCheck: (key: string) => string;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { SaltyConfig } from '../config';
|
2
|
+
/**
|
3
|
+
* Add unit to a number value based on property name
|
4
|
+
* @param key - The property name
|
5
|
+
* @param value - The value to add unit to
|
6
|
+
*/
|
7
|
+
export declare const addUnit: (key: string, value: string | number, config?: SaltyConfig) => string;
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";function r(e){return e?typeof e!="string"?r(String(e)):e.replace(/\s/g,"-").replace(/[-_]([a-z0-9])/g,a=>a[1].toUpperCase()).replace(/^[a-z]/,a=>a.toUpperCase()):""}exports.pascalCase=r;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { styled } from "@salty-css/react/styled";
|
2
|
+
|
3
|
+
export const <%- name %> = styled('<%- tag %>', {
|
4
|
+
<% if(className) { %>className: '<%- className %>',<% } %>
|
5
|
+
base: {
|
6
|
+
// Add your styles here
|
7
|
+
}
|
8
|
+
})`;exports.default=e;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
const n = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
2
|
+
|
3
|
+
interface <%- componentName %>Props {
|
4
|
+
text?: string;
|
5
|
+
}
|
6
|
+
|
7
|
+
export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
|
8
|
+
return (
|
9
|
+
<<%- styledComponentName %>>
|
10
|
+
{text}
|
11
|
+
</<%- styledComponentName %>>
|
12
|
+
);
|
13
|
+
};
|
14
|
+
|
15
|
+
export default <%- componentName %>;`;
|
16
|
+
export {
|
17
|
+
n as default
|
18
|
+
};
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
2
|
+
|
3
|
+
interface <%- componentName %>Props {
|
4
|
+
text?: string;
|
5
|
+
}
|
6
|
+
|
7
|
+
export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName %>Props) => {
|
8
|
+
return (
|
9
|
+
<<%- styledComponentName %>>
|
10
|
+
{text}
|
11
|
+
</<%- styledComponentName %>>
|
12
|
+
);
|
13
|
+
};
|
14
|
+
|
15
|
+
export default <%- componentName %>;`;exports.default=e;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=`import { defineConfig } from '@salty-css/core/config';
|
2
|
+
|
3
|
+
export const config = defineConfig({
|
4
|
+
// Add your custom config here
|
5
|
+
externalModules: ['react', 'react-dom']
|
6
|
+
});
|
7
|
+
`;exports.default=e;
|
package/server/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("fs/promises"),r=require("../index-CHz91O9z.cjs"),i=async t=>{if(!t||t.includes("node_modules")||t.includes("saltygen"))return!1;if(t.includes("salty.config"))return!0;if(!r.isSaltyFile(t))return!1;const e=await s.readFile(t,"utf-8");return!!/.+define[A-Z]\w+/.test(e)};exports.checkShouldRestart=i;
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './should-restart';
|
package/server/index.js
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
import { readFile as r } from "fs/promises";
|
2
|
+
import { i as e } from "../index-BM4snbAi.js";
|
3
|
+
const f = async (t) => {
|
4
|
+
if (!t || t.includes("node_modules") || t.includes("saltygen")) return !1;
|
5
|
+
if (t.includes("salty.config")) return !0;
|
6
|
+
if (!e(t)) return !1;
|
7
|
+
const s = await r(t, "utf-8");
|
8
|
+
return !!/.+define[A-Z]\w+/.test(s);
|
9
|
+
};
|
10
|
+
export {
|
11
|
+
f as checkShouldRestart
|
12
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const checkShouldRestart: (filename: string) => Promise<boolean>;
|
@@ -0,0 +1,77 @@
|
|
1
|
+
import { CssProperties, CssStyles } from '../types';
|
2
|
+
import { OrString } from '../types/util-types';
|
3
|
+
export type GlobalStyles = Record<string, CssProperties>;
|
4
|
+
export type CssVariableTokensObject = Record<string, unknown>;
|
5
|
+
export interface CssResponsiveVariables {
|
6
|
+
[key: string]: CssVariableTokensObject;
|
7
|
+
}
|
8
|
+
export interface CssConditionalVariables {
|
9
|
+
[key: PropertyKey]: {
|
10
|
+
[key: PropertyKey]: CssVariableTokensObject;
|
11
|
+
};
|
12
|
+
}
|
13
|
+
export interface SaltyVariables {
|
14
|
+
responsive?: CssResponsiveVariables;
|
15
|
+
conditional?: CssConditionalVariables;
|
16
|
+
[key: string]: undefined | string | number | CssVariableTokensObject;
|
17
|
+
}
|
18
|
+
type CssTemplate = CssStyles | {
|
19
|
+
[key: PropertyKey]: CssTemplate;
|
20
|
+
};
|
21
|
+
export interface CssTemplates {
|
22
|
+
[key: PropertyKey]: {
|
23
|
+
[key: PropertyKey]: CssTemplate;
|
24
|
+
};
|
25
|
+
}
|
26
|
+
export interface CssModifier {
|
27
|
+
pattern: RegExp;
|
28
|
+
transform: (regexMatch: string) => {
|
29
|
+
css?: CssStyles;
|
30
|
+
value: string;
|
31
|
+
};
|
32
|
+
}
|
33
|
+
export type CssModifiers = Record<string, CssModifier>;
|
34
|
+
export interface SaltyConfig {
|
35
|
+
/**
|
36
|
+
* The import strategy to use when importing css files.
|
37
|
+
* - `root` will import the css file from the root of the project.
|
38
|
+
* - `component` will import the css file from the component's directory.
|
39
|
+
*/
|
40
|
+
importStrategy?: 'root' | 'component';
|
41
|
+
/**
|
42
|
+
* Base level variables that can be used in all styles as they are applied globally to :root.
|
43
|
+
@param responsive Variables that are defined for different media queries.
|
44
|
+
@param conditional Variables that are defined for different parent selectors (classes or data attributes).
|
45
|
+
*/
|
46
|
+
variables?: SaltyVariables;
|
47
|
+
/**
|
48
|
+
* The global styles that are imported in the root of the project.
|
49
|
+
*/
|
50
|
+
reset?: 'default' | 'none' | GlobalStyles;
|
51
|
+
/**
|
52
|
+
* The global styles that are imported in the root of the project.
|
53
|
+
*/
|
54
|
+
global?: GlobalStyles;
|
55
|
+
/**
|
56
|
+
* The templates that can be used in styles to create reusable css.
|
57
|
+
*/
|
58
|
+
templates?: CssTemplates;
|
59
|
+
/**
|
60
|
+
* The modifiers that can transform css values.
|
61
|
+
*/
|
62
|
+
modifiers?: CssModifiers;
|
63
|
+
/**
|
64
|
+
* Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
|
65
|
+
*/
|
66
|
+
externalModules?: ('react' | 'react-dom' | OrString)[];
|
67
|
+
/**
|
68
|
+
* default unit for px based properties when providing a number value. Default is 'px'.
|
69
|
+
*/
|
70
|
+
defaultUnit?: 'px' | 'rem' | 'em' | 'vh' | 'vw' | 'vmin' | 'vmax' | 'cm' | 'mm' | 'in' | 'pt' | 'pc' | 'ch' | 'ex' | 'fr' | 'percent' | OrString;
|
71
|
+
}
|
72
|
+
export interface CachedConfig {
|
73
|
+
templates: CssTemplates;
|
74
|
+
staticVariables: Record<string, any>;
|
75
|
+
mediaQueries: Record<string, string>;
|
76
|
+
}
|
77
|
+
export {};
|
package/types/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";
|
package/types/index.d.ts
ADDED
@@ -0,0 +1,93 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { NeverObj, OrAny, OrString } from './util-types';
|
3
|
+
import { StyledGenerator } from '../generators';
|
4
|
+
import type * as CSS from 'csstype';
|
5
|
+
export type CreateElementProps = {
|
6
|
+
extend?: Tag<any>;
|
7
|
+
children?: ReactNode;
|
8
|
+
className?: string;
|
9
|
+
element?: string;
|
10
|
+
passProps?: boolean | string | string[];
|
11
|
+
style?: CssProperties | {
|
12
|
+
[key: string]: PropertyValueToken | NeverObj;
|
13
|
+
};
|
14
|
+
/** vks = Variant key set */
|
15
|
+
_vks?: Set<string>;
|
16
|
+
};
|
17
|
+
export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
|
18
|
+
type FnComponent<PROPS extends StyledComponentProps> = {
|
19
|
+
(props: OrAny | PROPS): ReactNode;
|
20
|
+
generator?: StyledGenerator;
|
21
|
+
};
|
22
|
+
export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
|
23
|
+
type CSSPropertyValueFunction = (params?: any) => any;
|
24
|
+
export type CssProperties = {
|
25
|
+
[key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
|
26
|
+
};
|
27
|
+
type CssPropertyKeys = keyof CssProperties;
|
28
|
+
export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
|
29
|
+
type InvalidVariantKeys = '' | 'css';
|
30
|
+
type VariantOptions = {
|
31
|
+
[key in InvalidVariantKeys]?: never;
|
32
|
+
};
|
33
|
+
export type CompoundVariant = {
|
34
|
+
[key: PropertyKey]: string | boolean | undefined;
|
35
|
+
} | {
|
36
|
+
css: CSSinJS;
|
37
|
+
};
|
38
|
+
type Variants = {
|
39
|
+
variants?: VariantOptions & {
|
40
|
+
[key: PropertyKey]: {
|
41
|
+
[key: PropertyKey]: CSSinJS;
|
42
|
+
};
|
43
|
+
};
|
44
|
+
defaultVariants?: {
|
45
|
+
[key: PropertyKey]: any;
|
46
|
+
};
|
47
|
+
compoundVariants?: CompoundVariant[];
|
48
|
+
};
|
49
|
+
type BooleanVariantValue = 'true' | 'false' | boolean;
|
50
|
+
type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T extends boolean ? BooleanVariantValue : T | '';
|
51
|
+
type PickType<T, K extends AllKeys<T>> = T extends {
|
52
|
+
[k in K]?: any;
|
53
|
+
} ? T[K] : undefined;
|
54
|
+
type AllKeys<T> = T extends any ? keyof T : never;
|
55
|
+
export type Merge<T> = {
|
56
|
+
[k in AllKeys<T>]?: PickType<T, k>;
|
57
|
+
};
|
58
|
+
export type VariantProps<STYLES extends StyledParams, B = STYLES['variants'] extends undefined ? object : STYLES['variants'], C = STYLES['compoundVariants'] extends CompoundVariant[] ? Merge<STYLES['compoundVariants'][number]> : object> = Merge<{
|
59
|
+
[K in keyof B]?: K extends 'css' ? never : VariantPropValue<keyof B[K]>;
|
60
|
+
} | {
|
61
|
+
[K in keyof C]?: K extends 'css' ? never : VariantPropValue<C[K]>;
|
62
|
+
}>;
|
63
|
+
type CssValuePropKey = `props-${string}`;
|
64
|
+
export type ValueProps = {
|
65
|
+
[key: CssValuePropKey]: string;
|
66
|
+
};
|
67
|
+
export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : object;
|
68
|
+
type StylePropertyValue = Record<never, never> & unknown;
|
69
|
+
export type CSSinJS = CssProperties | StylePropertyValue | TemplateTokens | CssPseudos;
|
70
|
+
export type CssStyles = {
|
71
|
+
[key in OrString]?: CSSinJS | CssStyles;
|
72
|
+
};
|
73
|
+
export type Styles = CssStyles & Variants;
|
74
|
+
export type MediaQueryStyles = {
|
75
|
+
[key in MediaQueryKeys]?: CssProperties | CssStyles | CssPseudos | TemplateTokens | MediaQueryStyles;
|
76
|
+
};
|
77
|
+
export interface GeneratorOptions {
|
78
|
+
className?: string | string[];
|
79
|
+
displayName?: string;
|
80
|
+
element?: string;
|
81
|
+
passProps?: boolean | string | string[];
|
82
|
+
defaultProps?: Record<PropertyKey, unknown>;
|
83
|
+
}
|
84
|
+
interface Base extends CssProperties, CssStyles, CssPseudos, TemplateTokens, MediaQueryStyles {
|
85
|
+
}
|
86
|
+
type Pseudos = CSS.Pseudos | `&${CSS.Pseudos}`;
|
87
|
+
type CssPseudos = {
|
88
|
+
[P in Pseudos]?: CssStyles;
|
89
|
+
};
|
90
|
+
export interface StyledParams extends GeneratorOptions, Variants {
|
91
|
+
base?: Base;
|
92
|
+
}
|
93
|
+
export {};
|
package/types/index.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
|
@@ -0,0 +1,13 @@
|
|
1
|
+
export type CommonRecord<TYPE = unknown> = Record<PropertyKey, TYPE>;
|
2
|
+
export type IsUnion<T, U extends T = T> = T extends unknown ? ([U] extends [T] ? false : true) : false;
|
3
|
+
export type IsSpecifiedString<T> = T extends string ? (string extends T ? false : true) : false;
|
4
|
+
export type NeverObj = Record<never, never>;
|
5
|
+
export type OrAny = any & NeverObj;
|
6
|
+
export type NotFunction = string | number | boolean | object | null | undefined | CommonRecord;
|
7
|
+
export type OrT<T> = T & NeverObj;
|
8
|
+
export type OrString = OrT<string>;
|
9
|
+
export type OrNumber = OrT<number>;
|
10
|
+
export type ReplaceAny<TYPE, WITH = unknown> = TYPE extends any ? WITH : TYPE;
|
11
|
+
export type BothTrue<T, U> = T extends true ? (U extends true ? true : false) : false;
|
12
|
+
export type EitherTrue<T, U> = T extends true ? true : U extends true ? true : false;
|
13
|
+
export type Tail<T extends any[]> = ((...args: T) => any) extends (arg: any, ...rest: infer R) => any ? R : never;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function camelCase(str: PropertyKey): string;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function dashCase(str: PropertyKey): string;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function dotCase(str: PropertyKey): string;
|
package/util/index.cjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../dash-case-BJEkFEGQ.cjs"),t=require("../pascal-case-iWoaJWwT.cjs");function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/-([a-z])/g,r=>r[1].toUpperCase()):""}exports.dashCase=a.dashCase;exports.toHash=a.toHash;exports.pascalCase=t.pascalCase;exports.camelCase=s;
|
package/util/index.d.ts
ADDED
package/util/index.js
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
import { d as o, t as s } from "../dash-case-DBThphLm.js";
|
2
|
+
import { p as f } from "../pascal-case-BQpR5PdN.js";
|
3
|
+
function r(e) {
|
4
|
+
return e ? typeof e != "string" ? r(String(e)) : e.replace(/\s/g, "-").replace(/-([a-z])/g, (a) => a[1].toUpperCase()) : "";
|
5
|
+
}
|
6
|
+
export {
|
7
|
+
r as camelCase,
|
8
|
+
o as dashCase,
|
9
|
+
f as pascalCase,
|
10
|
+
s as toHash
|
11
|
+
};
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare function pascalCase(str: PropertyKey): string;
|