@salty-css/core 0.1.0-alpha.3 → 0.1.0-alpha.30
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 +209 -0
- package/astro-component-5hrNTCJ5.js +4 -0
- package/astro-component-Dj3enX6K.cjs +4 -0
- package/bin/commands/build.d.ts +2 -0
- package/bin/commands/generate.d.ts +2 -0
- package/bin/commands/init.d.ts +2 -0
- package/bin/commands/update.d.ts +2 -0
- package/bin/commands/version.d.ts +2 -0
- package/bin/confirm-install.d.ts +34 -0
- package/bin/context.d.ts +22 -0
- package/bin/detection/css-file.d.ts +5 -0
- package/bin/frameworks/astro.d.ts +4 -0
- package/bin/frameworks/index.d.ts +13 -0
- package/bin/frameworks/react.d.ts +2 -0
- package/bin/frameworks/types.d.ts +27 -0
- package/bin/integrations/astro.d.ts +11 -0
- package/bin/integrations/eslint.d.ts +6 -0
- package/bin/integrations/index.d.ts +21 -0
- package/bin/integrations/next.d.ts +9 -0
- package/bin/integrations/types.d.ts +29 -0
- package/bin/integrations/vite.d.ts +8 -0
- package/bin/main.cjs +653 -336
- package/bin/main.d.ts +8 -0
- package/bin/main.js +653 -336
- package/bin/package-json.d.ts +21 -0
- package/bin/saltyrc.d.ts +31 -0
- package/bin/templates.d.ts +14 -0
- package/{class-name-generator-YeSQe_Ik.js → class-name-generator-B0WkxoIg.js} +17 -2
- package/{class-name-generator-B2Pb2obX.cjs → class-name-generator-BEOEMEKX.cjs} +17 -2
- package/compiler/resolve-import.d.ts +17 -0
- package/compiler/salty-compiler.cjs +131 -30
- package/compiler/salty-compiler.d.ts +8 -1
- package/compiler/salty-compiler.js +133 -31
- package/config/index.cjs +4 -0
- package/config/index.js +5 -1
- package/css/dynamic-styles.cjs +15 -0
- package/css/dynamic-styles.d.ts +10 -0
- package/css/dynamic-styles.js +15 -0
- package/css/index.cjs +3 -0
- package/css/index.d.ts +1 -0
- package/css/index.js +3 -0
- package/css/keyframes.cjs +1 -1
- package/css/keyframes.js +1 -1
- package/factories/define-font.d.ts +28 -0
- package/factories/define-import.d.ts +14 -0
- package/factories/index.cjs +141 -0
- package/factories/index.d.ts +2 -0
- package/factories/index.js +141 -0
- package/generators/index.cjs +1 -1
- package/generators/index.js +2 -2
- package/instances/classname-instance.cjs +1 -1
- package/instances/classname-instance.js +1 -1
- package/package.json +5 -1
- package/parse-styles-BBJ3PWyV.js +514 -0
- package/parse-styles-lOMGe_c5.cjs +513 -0
- package/parsers/index.cjs +93 -3
- package/parsers/index.d.ts +1 -0
- package/parsers/index.js +97 -7
- package/parsers/parse-templates.d.ts +10 -0
- package/parsers/parser-regexes.d.ts +3 -0
- package/parsers/resolve-template-variants.d.ts +21 -0
- package/parsers/strict.d.ts +2 -0
- package/runtime/index.cjs +1 -1
- package/runtime/index.js +1 -1
- package/{salty.config-cqavVm2t.cjs → salty.config-DogY_sSQ.cjs} +1 -1
- package/salty.config-GV37Q-D2.js +4 -0
- package/styled-file-BzmB9_Ez.cjs +12 -0
- package/{react-styled-file-U02jek-B.cjs → styled-file-CPd_rTW2.cjs} +2 -2
- package/{react-styled-file-B99mwk0w.js → styled-file-Cda3EeR6.js} +2 -2
- package/styled-file-DLcgYmGN.js +12 -0
- package/types/config-types.d.ts +42 -2
- package/types/font-types.d.ts +53 -0
- package/{react-vanilla-file-D9px70iK.js → vanilla-file-1kOqbCIM.js} +2 -2
- package/{react-vanilla-file-Bj6XC8GS.cjs → vanilla-file-r0fp2q_m.cjs} +2 -2
- package/parse-styles-BTIoYnBr.js +0 -232
- package/parse-styles-CA3TP5n1.cjs +0 -231
- package/salty.config-DjosWdPw.js +0 -4
package/parsers/index.js
CHANGED
|
@@ -1,10 +1,42 @@
|
|
|
1
|
-
import { p as parseAndJoinStyles } from "../parse-styles-
|
|
2
|
-
import { a,
|
|
1
|
+
import { i as isRichTemplateNode, p as parseAndJoinStyles } from "../parse-styles-BBJ3PWyV.js";
|
|
2
|
+
import { a, d, e, c, r } from "../parse-styles-BBJ3PWyV.js";
|
|
3
3
|
import { d as dashCase } from "../dash-case-DblXvymC.js";
|
|
4
4
|
import { t as toHash } from "../to-hash-DAN2LcHK.js";
|
|
5
|
+
const RICH_META_KEYS = /* @__PURE__ */ new Set(["base", "variants", "defaultVariants", "compoundVariants", "anyOfVariants"]);
|
|
6
|
+
const isChildEntry = (key, value) => {
|
|
7
|
+
if (RICH_META_KEYS.has(key)) return false;
|
|
8
|
+
return !!value && typeof value === "object" && !Array.isArray(value);
|
|
9
|
+
};
|
|
5
10
|
const parseTemplates = async (obj, path = []) => {
|
|
6
11
|
if (!obj) return "";
|
|
7
12
|
const classes = [];
|
|
13
|
+
if (isRichTemplateNode(obj)) {
|
|
14
|
+
const rich = obj;
|
|
15
|
+
const baseClassName = path.map((p) => dashCase(String(p))).join("-");
|
|
16
|
+
if (rich.base) {
|
|
17
|
+
const hashClass = "t_" + toHash(baseClassName, 4);
|
|
18
|
+
const result = await parseAndJoinStyles(rich.base, `.${baseClassName}, .${hashClass}`);
|
|
19
|
+
classes.push(result);
|
|
20
|
+
}
|
|
21
|
+
if (rich.variants) {
|
|
22
|
+
for (const [axis, valueMap] of Object.entries(rich.variants)) {
|
|
23
|
+
if (!valueMap || typeof valueMap !== "object") continue;
|
|
24
|
+
for (const [value, styles] of Object.entries(valueMap)) {
|
|
25
|
+
if (!styles || typeof styles !== "object") continue;
|
|
26
|
+
const variantClassName = `${baseClassName}-${dashCase(axis)}-${dashCase(value)}`;
|
|
27
|
+
const variantHashClass = "tv_" + toHash(variantClassName, 4);
|
|
28
|
+
const result = await parseAndJoinStyles(styles, `.${variantClassName}, .${variantHashClass}`);
|
|
29
|
+
classes.push(result);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
for (const [key, value] of Object.entries(rich)) {
|
|
34
|
+
if (!isChildEntry(key, value)) continue;
|
|
35
|
+
const result = await parseTemplates(value, [...path, key.trim()]);
|
|
36
|
+
classes.push(result);
|
|
37
|
+
}
|
|
38
|
+
return classes.join("\n");
|
|
39
|
+
}
|
|
8
40
|
const levelStyles = {};
|
|
9
41
|
for (const [key, value] of Object.entries(obj)) {
|
|
10
42
|
if (typeof value === "function") ;
|
|
@@ -17,7 +49,7 @@ const parseTemplates = async (obj, path = []) => {
|
|
|
17
49
|
}
|
|
18
50
|
}
|
|
19
51
|
if (Object.keys(levelStyles).length) {
|
|
20
|
-
const className = path.map(dashCase).join("-");
|
|
52
|
+
const className = path.map((p) => dashCase(String(p))).join("-");
|
|
21
53
|
const hashClass = "t_" + toHash(className, 4);
|
|
22
54
|
const result = await parseAndJoinStyles(levelStyles, `.${className}, .${hashClass}`);
|
|
23
55
|
classes.push(result);
|
|
@@ -39,21 +71,79 @@ const getTemplateTypes = (templates) => {
|
|
|
39
71
|
};
|
|
40
72
|
const getTemplateTokens = (templates, parent = "", templateTokens = /* @__PURE__ */ new Set()) => {
|
|
41
73
|
if (!templates) return [];
|
|
74
|
+
if (isRichTemplateNode(templates)) {
|
|
75
|
+
if (parent) templateTokens.add(parent);
|
|
76
|
+
Object.entries(templates).forEach(([key, value]) => {
|
|
77
|
+
if (!isChildEntry(key, value)) return;
|
|
78
|
+
const keyValue = parent ? `${parent}.${key}` : key;
|
|
79
|
+
getTemplateTokens(value, keyValue, templateTokens);
|
|
80
|
+
});
|
|
81
|
+
return [...templateTokens];
|
|
82
|
+
}
|
|
42
83
|
Object.entries(templates).forEach(([key, value]) => {
|
|
43
84
|
const keyValue = parent ? `${parent}.${key}` : key;
|
|
44
|
-
if (typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
|
|
85
|
+
if (value && typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
|
|
45
86
|
return templateTokens.add(parent);
|
|
46
87
|
});
|
|
47
88
|
return [...templateTokens];
|
|
48
89
|
};
|
|
90
|
+
const getTemplateVariantMaps = (templates) => {
|
|
91
|
+
const result = {};
|
|
92
|
+
if (!templates) return result;
|
|
93
|
+
for (const [topKey, topNode] of Object.entries(templates)) {
|
|
94
|
+
if (!topNode || typeof topNode !== "object" || typeof topNode === "function") continue;
|
|
95
|
+
walk(topNode, [], result[topKey] || (result[topKey] = {}), {});
|
|
96
|
+
}
|
|
97
|
+
return result;
|
|
98
|
+
};
|
|
99
|
+
const mergeAxes = (inherited, node) => {
|
|
100
|
+
const next = {};
|
|
101
|
+
for (const [axis, vals] of Object.entries(inherited)) {
|
|
102
|
+
next[axis] = { ...vals };
|
|
103
|
+
}
|
|
104
|
+
if (isRichTemplateNode(node) && node.variants) {
|
|
105
|
+
for (const [axis, valueMap] of Object.entries(node.variants)) {
|
|
106
|
+
next[axis] = next[axis] || {};
|
|
107
|
+
for (const value of Object.keys(valueMap)) next[axis][value] = true;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
return next;
|
|
111
|
+
};
|
|
112
|
+
const walk = (node, path, out, inheritedAxes) => {
|
|
113
|
+
if (!node || typeof node !== "object" || Array.isArray(node)) return;
|
|
114
|
+
const axes = mergeAxes(inheritedAxes, node);
|
|
115
|
+
const dot = path.join(".");
|
|
116
|
+
if (path.length && (isRichTemplateNode(node) || Object.keys(axes).length)) {
|
|
117
|
+
const axisMap = {};
|
|
118
|
+
for (const [axis, valSet] of Object.entries(axes)) {
|
|
119
|
+
const values = Object.keys(valSet);
|
|
120
|
+
const isBooleanOnly = values.length === 1 && values[0] === "true";
|
|
121
|
+
axisMap[axis] = isBooleanOnly ? "boolean" : values.map((v) => `"${v}"`).join(" | ");
|
|
122
|
+
}
|
|
123
|
+
if (Object.keys(axisMap).length) out[dot] = axisMap;
|
|
124
|
+
}
|
|
125
|
+
if (isRichTemplateNode(node)) {
|
|
126
|
+
for (const [key, value] of Object.entries(node)) {
|
|
127
|
+
if (!isChildEntry(key, value)) continue;
|
|
128
|
+
walk(value, [...path, key.trim()], out, axes);
|
|
129
|
+
}
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
for (const [key, value] of Object.entries(node)) {
|
|
133
|
+
if (!value || typeof value !== "object" || Array.isArray(value)) continue;
|
|
134
|
+
walk(value, [...path, key.trim()], out, axes);
|
|
135
|
+
}
|
|
136
|
+
};
|
|
49
137
|
export {
|
|
50
138
|
getTemplateKeys,
|
|
51
139
|
getTemplateTokens,
|
|
52
140
|
getTemplateTypes,
|
|
141
|
+
getTemplateVariantMaps,
|
|
53
142
|
parseAndJoinStyles,
|
|
54
143
|
a as parseStyles,
|
|
55
144
|
parseTemplates,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
145
|
+
d as parseValueModifiers,
|
|
146
|
+
e as parseValueTokens,
|
|
147
|
+
c as parseVariableTokens,
|
|
148
|
+
r as reportParserIssue
|
|
59
149
|
};
|
|
@@ -2,3 +2,13 @@ export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyK
|
|
|
2
2
|
export declare const getTemplateKeys: <T extends object>(templates: T) => string[];
|
|
3
3
|
export declare const getTemplateTypes: <T extends object>(templates: T) => Record<string, string>;
|
|
4
4
|
export declare const getTemplateTokens: <T extends object>(templates: T, parent?: string, templateTokens?: Set<string>) => string[];
|
|
5
|
+
/**
|
|
6
|
+
* Walk every rich-template path in a templates root and emit, for each reachable dot-path, the set of
|
|
7
|
+
* variant axes valid at that path (axis name → union of value names, with `boolean` for axes whose only
|
|
8
|
+
* declared value is `true`).
|
|
9
|
+
*
|
|
10
|
+
* Inheritance: a leaf's axis enum is the union of its own values and every ancestor's values for the
|
|
11
|
+
* same axis. Matches the resolver's bottom-up lookup semantics — anything reachable via fallback is a
|
|
12
|
+
* valid call-site value.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getTemplateVariantMaps: (templates: Record<string, any>) => Record<string, Record<string, Record<string, string>>>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { RichTemplateNode } from '../types/config-types';
|
|
2
|
+
export type TemplateCallSite = {
|
|
3
|
+
path: string[];
|
|
4
|
+
variants: Record<string, string | boolean>;
|
|
5
|
+
};
|
|
6
|
+
export declare const isRichTemplateNode: (node: unknown) => node is RichTemplateNode;
|
|
7
|
+
/**
|
|
8
|
+
* Parse a template call-site value into its dot-path and the axis values requested at the call site.
|
|
9
|
+
*
|
|
10
|
+
* String form: `'heading.large@weight=heavy&emphasis=loud&italic'`
|
|
11
|
+
* Object form: `{ name: 'heading.large', weight: 'heavy', emphasis: 'loud', italic: true }`
|
|
12
|
+
*/
|
|
13
|
+
export declare const parseTemplateCallSite: (value: unknown) => TemplateCallSite | undefined;
|
|
14
|
+
export declare const pathHasRichNode: (root: any, path: string[]) => boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Resolve a rich-template invocation into a flat CSS-in-JS object.
|
|
17
|
+
* Implements docs/template-variants-spec.md §5 (parent-to-leaf inheritance, replace semantics).
|
|
18
|
+
*
|
|
19
|
+
* Returns `undefined` if the path doesn't resolve. Emits console.warn for unknown axes / values.
|
|
20
|
+
*/
|
|
21
|
+
export declare const resolveRichTemplate: (root: any, path: string[], callSiteVariants: Record<string, string | boolean>, templateName: string) => Record<string, any> | undefined;
|
package/runtime/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const parseStyles = require("../parse-styles-
|
|
3
|
+
const parseStyles = require("../parse-styles-lOMGe_c5.cjs");
|
|
4
4
|
const defineRuntime = (config) => {
|
|
5
5
|
const getDynamicStylesCss = async (styles, scope) => {
|
|
6
6
|
const parsed = await parseStyles.parseStyles(styles, scope, config);
|
package/runtime/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as parseStyles } from "../parse-styles-
|
|
1
|
+
import { a as parseStyles } from "../parse-styles-BBJ3PWyV.js";
|
|
2
2
|
const defineRuntime = (config) => {
|
|
3
3
|
const getDynamicStylesCss = async (styles, scope) => {
|
|
4
4
|
const parsed = await parseStyles(styles, scope, config);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n
|
|
3
|
+
const salty_config = "import { defineConfig } from '@salty-css/core/config';\n\nexport const config = defineConfig({\n strict: true,\n externalModules: ['react', 'react-dom']\n});\n";
|
|
4
4
|
exports.default = salty_config;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const styledFile = `import { styled } from "@salty-css/astro/styled";
|
|
4
|
+
|
|
5
|
+
export const <%- name %> = styled('<%- tag %>', {
|
|
6
|
+
<% if(className) { %>className: '<%- className %>',<% } %>
|
|
7
|
+
base: {
|
|
8
|
+
// Add your styles here
|
|
9
|
+
}
|
|
10
|
+
})
|
|
11
|
+
`;
|
|
12
|
+
exports.default = styledFile;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const styledFile = `import { styled } from "@salty-css/react/styled";
|
|
4
4
|
|
|
5
5
|
export const <%- name %> = styled('<%- tag %>', {
|
|
6
6
|
<% if(className) { %>className: '<%- className %>',<% } %>
|
|
@@ -8,4 +8,4 @@ export const <%- name %> = styled('<%- tag %>', {
|
|
|
8
8
|
// Add your styles here
|
|
9
9
|
}
|
|
10
10
|
})`;
|
|
11
|
-
exports.default =
|
|
11
|
+
exports.default = styledFile;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const styledFile = `import { styled } from "@salty-css/react/styled";
|
|
2
2
|
|
|
3
3
|
export const <%- name %> = styled('<%- tag %>', {
|
|
4
4
|
<% if(className) { %>className: '<%- className %>',<% } %>
|
|
@@ -7,5 +7,5 @@ export const <%- name %> = styled('<%- tag %>', {
|
|
|
7
7
|
}
|
|
8
8
|
})`;
|
|
9
9
|
export {
|
|
10
|
-
|
|
10
|
+
styledFile as default
|
|
11
11
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const styledFile = `import { styled } from "@salty-css/astro/styled";
|
|
2
|
+
|
|
3
|
+
export const <%- name %> = styled('<%- tag %>', {
|
|
4
|
+
<% if(className) { %>className: '<%- className %>',<% } %>
|
|
5
|
+
base: {
|
|
6
|
+
// Add your styles here
|
|
7
|
+
}
|
|
8
|
+
})
|
|
9
|
+
`;
|
|
10
|
+
export {
|
|
11
|
+
styledFile as default
|
|
12
|
+
};
|
package/types/config-types.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { BaseStyles, CssStyles, MediaQueryStyles } from '../types';
|
|
2
2
|
import { OrString } from '../types/util-types';
|
|
3
|
+
export * from './font-types';
|
|
3
4
|
export type GlobalStyles = Record<string, BaseStyles>;
|
|
4
5
|
export type CssVariableTokensObject = Record<string, unknown>;
|
|
5
6
|
export interface CssResponsiveVariables {
|
|
@@ -15,7 +16,38 @@ export interface SaltyVariables {
|
|
|
15
16
|
conditional?: CssConditionalVariables;
|
|
16
17
|
[key: string]: undefined | string | number | CssVariableTokensObject;
|
|
17
18
|
}
|
|
18
|
-
|
|
19
|
+
/**
|
|
20
|
+
* A variant axis value bundle: a map from axis name to a map from value name (string keys or `'true'`)
|
|
21
|
+
* to a CSS-in-JS block. `name` is reserved as the call-site object form's path key and cannot be used
|
|
22
|
+
* as an axis name (build-time error).
|
|
23
|
+
*/
|
|
24
|
+
export type CssVariantAxes = {
|
|
25
|
+
[axis: string]: {
|
|
26
|
+
[value: string]: CssStyles;
|
|
27
|
+
};
|
|
28
|
+
} & {
|
|
29
|
+
name?: never;
|
|
30
|
+
};
|
|
31
|
+
export interface CssCompoundVariant {
|
|
32
|
+
css: CssStyles;
|
|
33
|
+
[axis: string]: any;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* A "rich" template node: declares its own base styles, named variant bundles, defaults, and compound rules.
|
|
37
|
+
* May coexist with child template nodes (descendants) as additional sibling keys.
|
|
38
|
+
*/
|
|
39
|
+
export type RichTemplateNode = {
|
|
40
|
+
base?: CssStyles;
|
|
41
|
+
variants?: CssVariantAxes;
|
|
42
|
+
defaultVariants?: {
|
|
43
|
+
[axis: string]: string | boolean;
|
|
44
|
+
};
|
|
45
|
+
compoundVariants?: CssCompoundVariant[];
|
|
46
|
+
anyOfVariants?: CssCompoundVariant[];
|
|
47
|
+
} & {
|
|
48
|
+
[key: PropertyKey]: any;
|
|
49
|
+
};
|
|
50
|
+
type CssTemplate = MediaQueryStyles | CssStyles | RichTemplateNode | {
|
|
19
51
|
[key: PropertyKey]: CssTemplate;
|
|
20
52
|
};
|
|
21
53
|
export interface CssTemplateObject {
|
|
@@ -68,6 +100,14 @@ export interface SaltyConfig {
|
|
|
68
100
|
* 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.
|
|
69
101
|
*/
|
|
70
102
|
externalModules?: ('react' | 'react-dom' | OrString)[];
|
|
103
|
+
/**
|
|
104
|
+
* Controls how the parser reacts to suspicious or malformed input
|
|
105
|
+
* (typos, invalid value types, malformed selectors, etc.).
|
|
106
|
+
* - `true` — throw on issues (recommended for new projects)
|
|
107
|
+
* - `'warn'` — log a warning and continue
|
|
108
|
+
* - `false` / undefined — silent, behave like prior versions
|
|
109
|
+
*/
|
|
110
|
+
strict?: boolean | 'warn';
|
|
71
111
|
/**
|
|
72
112
|
* default unit for px based properties when providing a number value. Default is 'px'.
|
|
73
113
|
*/
|
|
@@ -78,8 +118,8 @@ export interface CachedConfig {
|
|
|
78
118
|
staticVariables: Record<string, any>;
|
|
79
119
|
mediaQueries: Record<string, string>;
|
|
80
120
|
modifiers?: CssModifiers;
|
|
121
|
+
strict?: boolean | 'warn';
|
|
81
122
|
templatePaths: {
|
|
82
123
|
[key: string]: string;
|
|
83
124
|
};
|
|
84
125
|
}
|
|
85
|
-
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
export type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
|
|
2
|
+
export type FontFormat = 'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg' | 'collection';
|
|
3
|
+
export type FontStyle = 'normal' | 'italic' | 'oblique' | (string & {});
|
|
4
|
+
export type FontWeight = number | 'normal' | 'bold' | 'lighter' | 'bolder' | (string & {});
|
|
5
|
+
export interface FontSrc {
|
|
6
|
+
url: string;
|
|
7
|
+
format?: FontFormat;
|
|
8
|
+
/** Optional `tech(...)` descriptor passed straight through to @font-face. */
|
|
9
|
+
tech?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface FontVariant {
|
|
12
|
+
weight?: FontWeight;
|
|
13
|
+
style?: FontStyle;
|
|
14
|
+
stretch?: string;
|
|
15
|
+
display?: FontDisplay;
|
|
16
|
+
unicodeRange?: string;
|
|
17
|
+
ascentOverride?: string;
|
|
18
|
+
descentOverride?: string;
|
|
19
|
+
lineGapOverride?: string;
|
|
20
|
+
sizeAdjust?: string;
|
|
21
|
+
/**
|
|
22
|
+
* One or more font sources. Strings are treated as URLs and the `format()`
|
|
23
|
+
* descriptor is auto-detected from the file extension when possible. Use
|
|
24
|
+
* the `{ url, format }` object form for CDN/extensionless URLs where the
|
|
25
|
+
* format must be set explicitly.
|
|
26
|
+
*/
|
|
27
|
+
src: string | FontSrc | (string | FontSrc)[];
|
|
28
|
+
}
|
|
29
|
+
interface DefineFontBase {
|
|
30
|
+
/** CSS `font-family` value users will see in styles. */
|
|
31
|
+
name: string;
|
|
32
|
+
/**
|
|
33
|
+
* CSS variable name. Accepts `--font-inter` or `font-inter`; we normalize.
|
|
34
|
+
* Optional — when omitted, a deterministic name is derived from the other
|
|
35
|
+
* inputs as `--font-<name>-<hash>`.
|
|
36
|
+
*/
|
|
37
|
+
variable?: string;
|
|
38
|
+
/** Default `font-display` applied to variants that don't set their own. */
|
|
39
|
+
display?: FontDisplay;
|
|
40
|
+
/** Family fallback(s) appended after `name` in the generated `font-family` string. */
|
|
41
|
+
fallback?: string;
|
|
42
|
+
}
|
|
43
|
+
export interface DefineFontVariantsOptions extends DefineFontBase {
|
|
44
|
+
variants: FontVariant[];
|
|
45
|
+
import?: never;
|
|
46
|
+
}
|
|
47
|
+
export interface DefineFontImportOptions extends DefineFontBase {
|
|
48
|
+
/** Remote stylesheet URL (e.g. Google Fonts). Emitted as `@import url(...)`. */
|
|
49
|
+
import: string;
|
|
50
|
+
variants?: never;
|
|
51
|
+
}
|
|
52
|
+
export type DefineFontOptions = DefineFontVariantsOptions | DefineFontImportOptions;
|
|
53
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const
|
|
1
|
+
const vanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
|
2
2
|
|
|
3
3
|
interface <%- componentName %>Props {
|
|
4
4
|
text?: string;
|
|
@@ -14,5 +14,5 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
|
|
|
14
14
|
|
|
15
15
|
export default <%- componentName %>;`;
|
|
16
16
|
export {
|
|
17
|
-
|
|
17
|
+
vanillaFile as default
|
|
18
18
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const
|
|
3
|
+
const vanillaFile = `import { <%- styledComponentName %> } from "./<%- fileName %>.css";
|
|
4
4
|
|
|
5
5
|
interface <%- componentName %>Props {
|
|
6
6
|
text?: string;
|
|
@@ -15,4 +15,4 @@ export const <%- componentName %> = ({ text = 'Lorem ipsum' }: <%- componentName
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export default <%- componentName %>;`;
|
|
18
|
-
exports.default =
|
|
18
|
+
exports.default = vanillaFile;
|
package/parse-styles-BTIoYnBr.js
DELETED
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
import { d as dashCase } from "./dash-case-DblXvymC.js";
|
|
2
|
-
import { d as defineViewportClamp } from "./viewport-clamp-K553uXu3.js";
|
|
3
|
-
const parseValueModifiers = (modifiers) => (value) => {
|
|
4
|
-
if (typeof value !== "string") return void 0;
|
|
5
|
-
if (!modifiers) return void 0;
|
|
6
|
-
let transformed = value;
|
|
7
|
-
const additionalCss = [];
|
|
8
|
-
Object.values(modifiers).forEach((modifier) => {
|
|
9
|
-
const { pattern, transform } = modifier;
|
|
10
|
-
transformed = transformed.replace(pattern, (match) => {
|
|
11
|
-
const { value: _value, css } = transform(match);
|
|
12
|
-
if (css) additionalCss.push(css);
|
|
13
|
-
return _value;
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
return { transformed, additionalCss };
|
|
17
|
-
};
|
|
18
|
-
const parseValueTokens = (tokenNames) => (value) => {
|
|
19
|
-
if (typeof value !== "string") return void 0;
|
|
20
|
-
const hasToken = /\{[^{}]+\}/g.test(value);
|
|
21
|
-
if (!hasToken) return void 0;
|
|
22
|
-
const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
|
|
23
|
-
const variable = dashCase(args[1].replaceAll(".", "-"));
|
|
24
|
-
if (tokenNames && !tokenNames.includes(variable)) console.warn(`Token ${variable} might not exist`);
|
|
25
|
-
if (variable.startsWith("-")) return `-${variable}`;
|
|
26
|
-
return `var(--${variable})`;
|
|
27
|
-
});
|
|
28
|
-
return { transformed };
|
|
29
|
-
};
|
|
30
|
-
const parseVariableTokens = parseValueTokens();
|
|
31
|
-
const pxProperties = [
|
|
32
|
-
"top",
|
|
33
|
-
"right",
|
|
34
|
-
"bottom",
|
|
35
|
-
"left",
|
|
36
|
-
"min-width",
|
|
37
|
-
/.*width.*/,
|
|
38
|
-
/^[^line]*height.*/,
|
|
39
|
-
// Exclude line-height
|
|
40
|
-
/padding.*/,
|
|
41
|
-
/margin.*/,
|
|
42
|
-
/border.*/,
|
|
43
|
-
/inset.*/,
|
|
44
|
-
/.*radius.*/,
|
|
45
|
-
/.*spacing.*/,
|
|
46
|
-
/.*gap.*/,
|
|
47
|
-
/.*indent.*/,
|
|
48
|
-
/.*offset.*/,
|
|
49
|
-
/.*size.*/,
|
|
50
|
-
/.*thickness.*/,
|
|
51
|
-
/.*font-size.*/
|
|
52
|
-
];
|
|
53
|
-
const addUnit = (key, value, config) => {
|
|
54
|
-
const isPxProperty = pxProperties.some((pxProperty) => {
|
|
55
|
-
return typeof pxProperty === "string" ? pxProperty === key : pxProperty.test(key);
|
|
56
|
-
});
|
|
57
|
-
if (isPxProperty) {
|
|
58
|
-
const unit = (config == null ? void 0 : config.defaultUnit) || "px";
|
|
59
|
-
const isClamp = unit.startsWith("viewport-clamp:");
|
|
60
|
-
if (isClamp) {
|
|
61
|
-
try {
|
|
62
|
-
const screenSize = unit.split(":")[1];
|
|
63
|
-
const viewportClamp = defineViewportClamp({
|
|
64
|
-
screenSize: parseInt(screenSize)
|
|
65
|
-
});
|
|
66
|
-
return viewportClamp(Number(value));
|
|
67
|
-
} catch (error) {
|
|
68
|
-
console.error(error);
|
|
69
|
-
throw new Error(`Invalid viewport-clamp value: ${unit}`);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return `${value}${unit}`;
|
|
73
|
-
}
|
|
74
|
-
return `${value}`;
|
|
75
|
-
};
|
|
76
|
-
const vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
|
|
77
|
-
const propertyNameCheck = (key) => {
|
|
78
|
-
if (key.startsWith("-")) return key;
|
|
79
|
-
if (vendorPrefixes.some((prefix) => key.startsWith(prefix))) return `-${dashCase(key)}`;
|
|
80
|
-
return dashCase(key);
|
|
81
|
-
};
|
|
82
|
-
const parseStyles = async (styles, currentScope = "", config, omitTemplates = false) => {
|
|
83
|
-
if (!styles) throw new Error("No styles provided to parseStyles function!");
|
|
84
|
-
const cssStyles = /* @__PURE__ */ new Set();
|
|
85
|
-
const entries = Object.entries(styles);
|
|
86
|
-
const processStyleEntry = async ([key, value]) => {
|
|
87
|
-
var _a, _b;
|
|
88
|
-
const _key = key.trim().replace(/^\?+/g, "");
|
|
89
|
-
const propertyName = propertyNameCheck(_key);
|
|
90
|
-
const toString = (val, eol = ";") => `${propertyName}:${val}${eol}`;
|
|
91
|
-
const context = { scope: currentScope, config };
|
|
92
|
-
if (typeof value === "function") return processStyleEntry([key, value(context)]);
|
|
93
|
-
if (value instanceof Promise) return processStyleEntry([key, await value]);
|
|
94
|
-
if ((config == null ? void 0 : config.templates) && ((_a = config.templatePaths) == null ? void 0 : _a[_key])) {
|
|
95
|
-
try {
|
|
96
|
-
const [name, path] = config.templatePaths[_key].split(";;");
|
|
97
|
-
const functions = await import(
|
|
98
|
-
/* webpackIgnore: true */
|
|
99
|
-
/* @vite-ignore */
|
|
100
|
-
path
|
|
101
|
-
);
|
|
102
|
-
const isSaltyConfig = path.includes("salty.config");
|
|
103
|
-
const values = isSaltyConfig ? functions[name].templates : functions[name];
|
|
104
|
-
const template = isSaltyConfig ? values[_key] : values.params[_key];
|
|
105
|
-
if (values && typeof template === "function") {
|
|
106
|
-
const templateStyles = await template(value);
|
|
107
|
-
const [result] = await parseStyles(templateStyles, "");
|
|
108
|
-
return result;
|
|
109
|
-
}
|
|
110
|
-
} catch (error) {
|
|
111
|
-
console.error(`Error loading template "${_key}" from path "${config.templatePaths[_key]}"`, error);
|
|
112
|
-
return void 0;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
if ((config == null ? void 0 : config.templates) && config.templates[_key]) {
|
|
116
|
-
if (omitTemplates) return void 0;
|
|
117
|
-
const path = value.split(".");
|
|
118
|
-
const templateStyles = path.reduce((acc, key2) => acc[key2], config.templates[_key]);
|
|
119
|
-
if (templateStyles) {
|
|
120
|
-
const [result] = await parseStyles(templateStyles, "");
|
|
121
|
-
return result;
|
|
122
|
-
}
|
|
123
|
-
console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
|
|
124
|
-
return void 0;
|
|
125
|
-
}
|
|
126
|
-
if (typeof value === "object") {
|
|
127
|
-
if (!value) return void 0;
|
|
128
|
-
if (value.isColor) return toString(value.toString());
|
|
129
|
-
if (_key === "defaultVariants") return void 0;
|
|
130
|
-
if (_key === "variants") {
|
|
131
|
-
const variantEntries = Object.entries(value);
|
|
132
|
-
for (const [prop, conditions] of variantEntries) {
|
|
133
|
-
if (!conditions) continue;
|
|
134
|
-
const entries2 = Object.entries(conditions);
|
|
135
|
-
for (const [val, styles2] of entries2) {
|
|
136
|
-
if (!styles2) continue;
|
|
137
|
-
const scope2 = `${currentScope}.${prop}-${val}`;
|
|
138
|
-
const results2 = await parseStyles(styles2, scope2, config);
|
|
139
|
-
results2.forEach((res) => cssStyles.add(res));
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
return void 0;
|
|
143
|
-
}
|
|
144
|
-
if (_key === "compoundVariants") {
|
|
145
|
-
for (const variant of value) {
|
|
146
|
-
const { css: css2, ...rest } = variant;
|
|
147
|
-
const scope2 = Object.entries(rest).reduce((acc, [prop, val]) => {
|
|
148
|
-
return `${acc}.${prop}-${val}`;
|
|
149
|
-
}, currentScope);
|
|
150
|
-
const results2 = await parseStyles(css2, scope2, config);
|
|
151
|
-
results2.forEach((res) => cssStyles.add(res));
|
|
152
|
-
}
|
|
153
|
-
return void 0;
|
|
154
|
-
}
|
|
155
|
-
if (_key === "anyOfVariants") {
|
|
156
|
-
for (const variant of value) {
|
|
157
|
-
const { css: css2, ...rest } = variant;
|
|
158
|
-
const scopes = Object.entries(rest).map(([prop, val]) => {
|
|
159
|
-
return `.${prop}-${val}`;
|
|
160
|
-
});
|
|
161
|
-
const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
|
|
162
|
-
console.log(`Union variant scope: ${scope2}`);
|
|
163
|
-
const results2 = await parseStyles(css2, scope2, config);
|
|
164
|
-
results2.forEach((res) => cssStyles.add(res));
|
|
165
|
-
}
|
|
166
|
-
return void 0;
|
|
167
|
-
}
|
|
168
|
-
if (_key.startsWith("@")) {
|
|
169
|
-
const mediaQuery = ((_b = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _b[_key]) || _key;
|
|
170
|
-
const results2 = await parseAndJoinStyles(value, currentScope, config);
|
|
171
|
-
const query = `${mediaQuery} { ${results2} }`;
|
|
172
|
-
cssStyles.add(query);
|
|
173
|
-
return void 0;
|
|
174
|
-
}
|
|
175
|
-
const scope = key.includes("&") ? _key.replaceAll("&", currentScope) : _key.startsWith(":") ? `${currentScope}${_key}` : `${currentScope} ${_key}`;
|
|
176
|
-
const results = await parseStyles(value, scope, config);
|
|
177
|
-
results.forEach((result) => cssStyles.add(result));
|
|
178
|
-
return void 0;
|
|
179
|
-
}
|
|
180
|
-
if (typeof value === "number") {
|
|
181
|
-
const withUnit = addUnit(propertyName, value, config);
|
|
182
|
-
return toString(withUnit);
|
|
183
|
-
}
|
|
184
|
-
if (typeof value !== "string") {
|
|
185
|
-
if ("toString" in value) value = value.toString();
|
|
186
|
-
else throw new Error(`Invalid value type for property ${propertyName}`);
|
|
187
|
-
}
|
|
188
|
-
return toString(value);
|
|
189
|
-
};
|
|
190
|
-
const promises = entries.map(processStyleEntry);
|
|
191
|
-
const { modifiers } = config || {};
|
|
192
|
-
const afterFunctions = [parseValueTokens(), parseValueModifiers(modifiers)];
|
|
193
|
-
const resolved = await Promise.all(promises).then((styles2) => {
|
|
194
|
-
return Promise.all(
|
|
195
|
-
styles2.map((str) => {
|
|
196
|
-
return afterFunctions.reduce(async (acc, fn) => {
|
|
197
|
-
const current = await acc;
|
|
198
|
-
if (!current) return current;
|
|
199
|
-
const result = await fn(current);
|
|
200
|
-
if (!result) return current;
|
|
201
|
-
const { transformed, additionalCss } = result;
|
|
202
|
-
let before = "";
|
|
203
|
-
if (additionalCss) {
|
|
204
|
-
for (const css2 of additionalCss) {
|
|
205
|
-
before += await parseAndJoinStyles(css2, "");
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
return `${before}${transformed}`;
|
|
209
|
-
}, Promise.resolve(str));
|
|
210
|
-
})
|
|
211
|
-
);
|
|
212
|
-
});
|
|
213
|
-
const mapped = resolved.filter((value) => value !== void 0).join("\n ");
|
|
214
|
-
if (!mapped.trim()) return Array.from(cssStyles);
|
|
215
|
-
const css = currentScope ? `${currentScope} {
|
|
216
|
-
${mapped}
|
|
217
|
-
}` : mapped;
|
|
218
|
-
const alreadyExists = cssStyles.has(css);
|
|
219
|
-
if (alreadyExists) return Array.from(cssStyles);
|
|
220
|
-
return [css, ...cssStyles];
|
|
221
|
-
};
|
|
222
|
-
const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates = false) => {
|
|
223
|
-
const css = await parseStyles(styles, currentClass, config, omitTemplates);
|
|
224
|
-
return css.join("\n");
|
|
225
|
-
};
|
|
226
|
-
export {
|
|
227
|
-
parseStyles as a,
|
|
228
|
-
parseVariableTokens as b,
|
|
229
|
-
parseValueModifiers as c,
|
|
230
|
-
parseValueTokens as d,
|
|
231
|
-
parseAndJoinStyles as p
|
|
232
|
-
};
|