@salty-css/core 0.0.1-alpha.30 → 0.0.1-alpha.301
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 +469 -26
- package/bin/index.cjs +3 -1
- package/bin/index.js +2 -2
- package/bin/main.cjs +445 -8
- package/bin/main.js +424 -121
- package/cache/resolve-dynamic-config-cache.cjs +13 -0
- package/cache/resolve-dynamic-config-cache.d.ts +1 -0
- package/cache/resolve-dynamic-config-cache.js +13 -0
- package/compiler/get-files.d.ts +3 -0
- package/compiler/get-function-range.d.ts +1 -0
- package/compiler/helpers.d.ts +2 -0
- package/compiler/index.cjs +774 -11
- package/compiler/index.d.ts +22 -11
- package/compiler/index.js +735 -153
- package/config/define-config.d.ts +1 -1
- package/config/index.cjs +16 -1
- package/config/index.d.ts +2 -1
- package/config/index.js +14 -2
- package/css/index.cjs +12 -1
- package/css/index.d.ts +4 -1
- package/css/index.js +10 -2
- package/css/keyframes.cjs +49 -0
- package/css/keyframes.d.ts +22 -0
- package/css/keyframes.js +49 -0
- package/css/media.cjs +93 -0
- package/css/media.d.ts +87 -0
- package/css/media.js +93 -0
- package/css/merge.cjs +15 -0
- package/css/merge.d.ts +7 -0
- package/css/merge.js +15 -0
- package/css/token.cjs +4 -0
- package/css/token.d.ts +1 -0
- package/css/token.js +4 -0
- package/dash-case-Cz8wwE9a.cjs +32 -0
- package/dash-case-NMk0mXyT.js +33 -0
- package/define-templates-CVhhgPnd.js +60 -0
- package/define-templates-Deq1aCbN.cjs +59 -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 +27 -0
- package/factories/define-variables.d.ts +12 -0
- package/factories/index.cjs +37 -0
- package/factories/index.d.ts +4 -0
- package/factories/index.js +37 -0
- package/generators/class-name-generator.d.ts +6 -0
- package/generators/index.cjs +121 -0
- package/generators/index.d.ts +2 -0
- package/generators/index.js +121 -0
- package/generators/styled-generator.d.ts +20 -0
- package/generators/styles-generator.d.ts +22 -0
- package/helpers/color.d.ts +18 -0
- package/helpers/index.cjs +53 -0
- package/helpers/index.d.ts +2 -0
- package/helpers/index.js +53 -0
- package/helpers/viewport-clamp.d.ts +9 -0
- package/helpers-DM2fbDDz.js +18 -0
- package/helpers-wv74jTRI.cjs +18 -0
- package/index-ByR0nfaf.cjs +4 -0
- package/index-DKz1QXqs.js +4 -0
- package/package.json +54 -6
- package/parse-styles-CqBQc3eQ.js +232 -0
- package/parse-styles-D-p_guRO.cjs +231 -0
- package/parsers/index.cjs +57 -0
- package/parsers/index.d.ts +5 -0
- package/parsers/index.js +58 -0
- package/parsers/parse-modifiers.d.ts +3 -0
- package/parsers/parse-styles.d.ts +13 -0
- package/parsers/parse-templates.d.ts +4 -0
- package/parsers/parse-tokens.d.ts +3 -0
- package/parsers/parser-types.d.ts +8 -0
- package/parsers/property-name-check.d.ts +1 -0
- package/parsers/unit-check.d.ts +7 -0
- package/pascal-case-By_l58S-.cjs +7 -0
- package/pascal-case-F3Usi5Wf.js +8 -0
- package/{react-styled-file-CGVf5n1B.js → react-styled-file-B99mwk0w.js} +2 -2
- package/react-styled-file-U02jek-B.cjs +11 -0
- package/react-vanilla-file-Bj6XC8GS.cjs +18 -0
- package/react-vanilla-file-D9px70iK.js +18 -0
- package/salty.config-DjosWdPw.js +4 -0
- package/salty.config-cqavVm2t.cjs +4 -0
- package/server/index.cjs +4 -0
- package/server/index.d.ts +1 -0
- package/server/index.js +4 -0
- package/server/should-restart.d.ts +1 -0
- package/should-restart-5jI-bzz0.js +18 -0
- package/should-restart-DoaGoD5T.cjs +17 -0
- package/templates/salty-reset.d.ts +2 -0
- package/types/cli-types.d.ts +10 -0
- package/types/config-types.d.ts +85 -0
- package/types/index.d.ts +57 -23
- package/util/dot-case.d.ts +1 -0
- package/util/index.cjs +13 -1
- package/util/index.js +10 -8
- package/util/module-type.d.ts +1 -0
- package/viewport-clamp-CEmzmcSj.cjs +10 -0
- package/viewport-clamp-K553uXu3.js +11 -0
- package/config/config-types.d.ts +0 -59
- package/dash-case-DKzpenwY.cjs +0 -1
- package/dash-case-DMQMcCO6.js +0 -19
- package/generator/index.cjs +0 -1
- package/generator/index.d.ts +0 -1
- package/generator/index.js +0 -61
- package/generator/parse-modifiers.d.ts +0 -3
- package/generator/parse-styles.d.ts +0 -2
- package/generator/parse-templates.d.ts +0 -2
- package/generator/parse-tokens.d.ts +0 -2
- package/generator/parser-types.d.ts +0 -4
- package/generator/style-generator.d.ts +0 -28
- package/index-84Wroia-.cjs +0 -1
- package/index-D_732b92.js +0 -4
- package/parse-templates-D4p3pgQR.js +0 -92
- package/parse-templates-W0YfTmOT.cjs +0 -8
- package/pascal-case-BQpR5PdN.js +0 -6
- package/pascal-case-iWoaJWwT.cjs +0 -1
- package/react-styled-file-Dkubsz-U.cjs +0 -8
- package/salty.config-BupieCfE.cjs +0 -6
- package/salty.config-D9ANEDiH.js +0 -9
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
const path = require("path");
|
3
|
+
var _documentCurrentScript = typeof document !== "undefined" ? document.currentScript : null;
|
4
|
+
const getCorePackageRoot = () => {
|
5
|
+
let { pathname } = new URL(typeof document === "undefined" ? require("url").pathToFileURL(__filename).href : _documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === "SCRIPT" && _documentCurrentScript.src || new URL("helpers-wv74jTRI.cjs", document.baseURI).href);
|
6
|
+
while (/core\/?(src\/)?$/.test(pathname) === false) {
|
7
|
+
pathname = path.join(pathname, "../");
|
8
|
+
}
|
9
|
+
return pathname;
|
10
|
+
};
|
11
|
+
const resolveExportValue = async (value, maxLevel = 10, _level = 0) => {
|
12
|
+
if (_level >= maxLevel) return value;
|
13
|
+
if (value instanceof Promise) return await resolveExportValue(await value, _level + 1, maxLevel);
|
14
|
+
if (typeof value === "function" && "_shouldResolve" in value) return await resolveExportValue(await value(), _level + 1, maxLevel);
|
15
|
+
return value;
|
16
|
+
};
|
17
|
+
exports.getCorePackageRoot = getCorePackageRoot;
|
18
|
+
exports.resolveExportValue = resolveExportValue;
|
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.301",
|
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
|
-
"
|
13
|
+
"description": "Core library for Salty CSS. Will be used by other Salty CSS libraries and plugins.",
|
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
|
},
|
@@ -23,14 +28,21 @@
|
|
23
28
|
"name": "core"
|
24
29
|
},
|
25
30
|
"peerDependencies": {
|
31
|
+
"color": ">=5.x",
|
26
32
|
"commander": ">=12.x",
|
33
|
+
"csstype": "^3.1.x",
|
27
34
|
"ejs": ">=3.x",
|
28
|
-
"esbuild": ">=0.
|
35
|
+
"esbuild": ">=0.25.x",
|
29
36
|
"ora": ">=8.x",
|
30
37
|
"react": ">=18.x || >=19.x",
|
38
|
+
"typescript": ">=5.x",
|
31
39
|
"winston": ">=3.x"
|
32
40
|
},
|
33
41
|
"exports": {
|
42
|
+
"./bin": {
|
43
|
+
"import": "./bin/index.js",
|
44
|
+
"require": "./bin/index.cjs"
|
45
|
+
},
|
34
46
|
"./bin/main": {
|
35
47
|
"import": "./bin/main.js",
|
36
48
|
"require": "./bin/main.cjs"
|
@@ -39,13 +51,41 @@
|
|
39
51
|
"import": "./compiler/index.js",
|
40
52
|
"require": "./compiler/index.cjs"
|
41
53
|
},
|
54
|
+
"./factories": {
|
55
|
+
"import": "./factories/index.js",
|
56
|
+
"require": "./factories/index.cjs"
|
57
|
+
},
|
42
58
|
"./css": {
|
43
59
|
"import": "./css/index.js",
|
44
60
|
"require": "./css/index.cjs"
|
45
61
|
},
|
46
|
-
"./
|
47
|
-
"import": "./
|
48
|
-
"require": "./
|
62
|
+
"./css/keyframes": {
|
63
|
+
"import": "./css/keyframes.js",
|
64
|
+
"require": "./css/keyframes.cjs"
|
65
|
+
},
|
66
|
+
"./css/media": {
|
67
|
+
"import": "./css/media.js",
|
68
|
+
"require": "./css/media.cjs"
|
69
|
+
},
|
70
|
+
"./css/token": {
|
71
|
+
"import": "./css/token.js",
|
72
|
+
"require": "./css/token.cjs"
|
73
|
+
},
|
74
|
+
"./css/merge": {
|
75
|
+
"import": "./css/merge.js",
|
76
|
+
"require": "./css/merge.cjs"
|
77
|
+
},
|
78
|
+
"./helpers": {
|
79
|
+
"import": "./helpers/index.js",
|
80
|
+
"require": "./helpers/index.cjs"
|
81
|
+
},
|
82
|
+
"./generators": {
|
83
|
+
"import": "./generators/index.js",
|
84
|
+
"require": "./generators/index.cjs"
|
85
|
+
},
|
86
|
+
"./parsers": {
|
87
|
+
"import": "./parsers/index.js",
|
88
|
+
"require": "./parsers/index.cjs"
|
49
89
|
},
|
50
90
|
"./config": {
|
51
91
|
"import": "./config/index.js",
|
@@ -58,6 +98,14 @@
|
|
58
98
|
"./util": {
|
59
99
|
"import": "./util/index.js",
|
60
100
|
"require": "./util/index.cjs"
|
101
|
+
},
|
102
|
+
"./server": {
|
103
|
+
"import": "./server/index.js",
|
104
|
+
"require": "./server/index.cjs"
|
105
|
+
},
|
106
|
+
"./cache/resolve-dynamic-config-cache": {
|
107
|
+
"import": "./cache/resolve-dynamic-config-cache.js",
|
108
|
+
"require": "./cache/resolve-dynamic-config-cache.cjs"
|
61
109
|
}
|
62
110
|
},
|
63
111
|
"bin": {
|
@@ -0,0 +1,232 @@
|
|
1
|
+
import { d as dashCase } from "./dash-case-NMk0mXyT.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;
|
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) && config.templatePaths[_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 = ((_a = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _a[_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
|
+
parseVariableTokens as a,
|
228
|
+
parseValueModifiers as b,
|
229
|
+
parseStyles as c,
|
230
|
+
parseValueTokens as d,
|
231
|
+
parseAndJoinStyles as p
|
232
|
+
};
|
@@ -0,0 +1,231 @@
|
|
1
|
+
"use strict";
|
2
|
+
const dashCase = require("./dash-case-Cz8wwE9a.cjs");
|
3
|
+
const viewportClamp = require("./viewport-clamp-CEmzmcSj.cjs");
|
4
|
+
const parseValueModifiers = (modifiers) => (value) => {
|
5
|
+
if (typeof value !== "string") return void 0;
|
6
|
+
if (!modifiers) return void 0;
|
7
|
+
let transformed = value;
|
8
|
+
const additionalCss = [];
|
9
|
+
Object.values(modifiers).forEach((modifier) => {
|
10
|
+
const { pattern, transform } = modifier;
|
11
|
+
transformed = transformed.replace(pattern, (match) => {
|
12
|
+
const { value: _value, css } = transform(match);
|
13
|
+
if (css) additionalCss.push(css);
|
14
|
+
return _value;
|
15
|
+
});
|
16
|
+
});
|
17
|
+
return { transformed, additionalCss };
|
18
|
+
};
|
19
|
+
const parseValueTokens = (tokenNames) => (value) => {
|
20
|
+
if (typeof value !== "string") return void 0;
|
21
|
+
const hasToken = /\{[^{}]+\}/g.test(value);
|
22
|
+
if (!hasToken) return void 0;
|
23
|
+
const transformed = value.replace(/\{([^{}]+)\}/g, (...args) => {
|
24
|
+
const variable = dashCase.dashCase(args[1].replaceAll(".", "-"));
|
25
|
+
if (tokenNames && !tokenNames.includes(variable)) console.warn(`Token ${variable} might not exist`);
|
26
|
+
if (variable.startsWith("-")) return `-${variable}`;
|
27
|
+
return `var(--${variable})`;
|
28
|
+
});
|
29
|
+
return { transformed };
|
30
|
+
};
|
31
|
+
const parseVariableTokens = parseValueTokens();
|
32
|
+
const pxProperties = [
|
33
|
+
"top",
|
34
|
+
"right",
|
35
|
+
"bottom",
|
36
|
+
"left",
|
37
|
+
"min-width",
|
38
|
+
/.*width.*/,
|
39
|
+
/^[^line]*height.*/,
|
40
|
+
// Exclude line-height
|
41
|
+
/padding.*/,
|
42
|
+
/margin.*/,
|
43
|
+
/border.*/,
|
44
|
+
/inset.*/,
|
45
|
+
/.*radius.*/,
|
46
|
+
/.*spacing.*/,
|
47
|
+
/.*gap.*/,
|
48
|
+
/.*indent.*/,
|
49
|
+
/.*offset.*/,
|
50
|
+
/.*size.*/,
|
51
|
+
/.*thickness.*/,
|
52
|
+
/.*font-size.*/
|
53
|
+
];
|
54
|
+
const addUnit = (key, value, config) => {
|
55
|
+
const isPxProperty = pxProperties.some((pxProperty) => {
|
56
|
+
return typeof pxProperty === "string" ? pxProperty === key : pxProperty.test(key);
|
57
|
+
});
|
58
|
+
if (isPxProperty) {
|
59
|
+
const unit = (config == null ? void 0 : config.defaultUnit) || "px";
|
60
|
+
const isClamp = unit.startsWith("viewport-clamp:");
|
61
|
+
if (isClamp) {
|
62
|
+
try {
|
63
|
+
const screenSize = unit.split(":")[1];
|
64
|
+
const viewportClamp$1 = viewportClamp.defineViewportClamp({
|
65
|
+
screenSize: parseInt(screenSize)
|
66
|
+
});
|
67
|
+
return viewportClamp$1(Number(value));
|
68
|
+
} catch (error) {
|
69
|
+
console.error(error);
|
70
|
+
throw new Error(`Invalid viewport-clamp value: ${unit}`);
|
71
|
+
}
|
72
|
+
}
|
73
|
+
return `${value}${unit}`;
|
74
|
+
}
|
75
|
+
return `${value}`;
|
76
|
+
};
|
77
|
+
const vendorPrefixes = ["Webkit", "Moz", "ms", "O"];
|
78
|
+
const propertyNameCheck = (key) => {
|
79
|
+
if (key.startsWith("-")) return key;
|
80
|
+
if (vendorPrefixes.some((prefix) => key.startsWith(prefix))) return `-${dashCase.dashCase(key)}`;
|
81
|
+
return dashCase.dashCase(key);
|
82
|
+
};
|
83
|
+
const parseStyles = async (styles, currentScope = "", config, omitTemplates = false) => {
|
84
|
+
if (!styles) throw new Error("No styles provided to parseStyles function!");
|
85
|
+
const cssStyles = /* @__PURE__ */ new Set();
|
86
|
+
const entries = Object.entries(styles);
|
87
|
+
const processStyleEntry = async ([key, value]) => {
|
88
|
+
var _a;
|
89
|
+
const _key = key.trim().replace(/^\?+/g, "");
|
90
|
+
const propertyName = propertyNameCheck(_key);
|
91
|
+
const toString = (val, eol = ";") => `${propertyName}:${val}${eol}`;
|
92
|
+
const context = { scope: currentScope, config };
|
93
|
+
if (typeof value === "function") return processStyleEntry([key, value(context)]);
|
94
|
+
if (value instanceof Promise) return processStyleEntry([key, await value]);
|
95
|
+
if ((config == null ? void 0 : config.templates) && config.templatePaths[_key]) {
|
96
|
+
try {
|
97
|
+
const [name, path] = config.templatePaths[_key].split(";;");
|
98
|
+
const functions = await import(
|
99
|
+
/* webpackIgnore: true */
|
100
|
+
/* @vite-ignore */
|
101
|
+
path
|
102
|
+
);
|
103
|
+
const isSaltyConfig = path.includes("salty.config");
|
104
|
+
const values = isSaltyConfig ? functions[name].templates : functions[name];
|
105
|
+
const template = isSaltyConfig ? values[_key] : values.params[_key];
|
106
|
+
if (values && typeof template === "function") {
|
107
|
+
const templateStyles = await template(value);
|
108
|
+
const [result] = await parseStyles(templateStyles, "");
|
109
|
+
return result;
|
110
|
+
}
|
111
|
+
} catch (error) {
|
112
|
+
console.error(`Error loading template "${_key}" from path "${config.templatePaths[_key]}"`, error);
|
113
|
+
return void 0;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
if ((config == null ? void 0 : config.templates) && config.templates[_key]) {
|
117
|
+
if (omitTemplates) return void 0;
|
118
|
+
const path = value.split(".");
|
119
|
+
const templateStyles = path.reduce((acc, key2) => acc[key2], config.templates[_key]);
|
120
|
+
if (templateStyles) {
|
121
|
+
const [result] = await parseStyles(templateStyles, "");
|
122
|
+
return result;
|
123
|
+
}
|
124
|
+
console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
|
125
|
+
return void 0;
|
126
|
+
}
|
127
|
+
if (typeof value === "object") {
|
128
|
+
if (!value) return void 0;
|
129
|
+
if (value.isColor) return toString(value.toString());
|
130
|
+
if (_key === "defaultVariants") return void 0;
|
131
|
+
if (_key === "variants") {
|
132
|
+
const variantEntries = Object.entries(value);
|
133
|
+
for (const [prop, conditions] of variantEntries) {
|
134
|
+
if (!conditions) continue;
|
135
|
+
const entries2 = Object.entries(conditions);
|
136
|
+
for (const [val, styles2] of entries2) {
|
137
|
+
if (!styles2) continue;
|
138
|
+
const scope2 = `${currentScope}.${prop}-${val}`;
|
139
|
+
const results2 = await parseStyles(styles2, scope2, config);
|
140
|
+
results2.forEach((res) => cssStyles.add(res));
|
141
|
+
}
|
142
|
+
}
|
143
|
+
return void 0;
|
144
|
+
}
|
145
|
+
if (_key === "compoundVariants") {
|
146
|
+
for (const variant of value) {
|
147
|
+
const { css: css2, ...rest } = variant;
|
148
|
+
const scope2 = Object.entries(rest).reduce((acc, [prop, val]) => {
|
149
|
+
return `${acc}.${prop}-${val}`;
|
150
|
+
}, currentScope);
|
151
|
+
const results2 = await parseStyles(css2, scope2, config);
|
152
|
+
results2.forEach((res) => cssStyles.add(res));
|
153
|
+
}
|
154
|
+
return void 0;
|
155
|
+
}
|
156
|
+
if (_key === "anyOfVariants") {
|
157
|
+
for (const variant of value) {
|
158
|
+
const { css: css2, ...rest } = variant;
|
159
|
+
const scopes = Object.entries(rest).map(([prop, val]) => {
|
160
|
+
return `.${prop}-${val}`;
|
161
|
+
});
|
162
|
+
const scope2 = `${currentScope}:where(${scopes.join(", ")})`;
|
163
|
+
console.log(`Union variant scope: ${scope2}`);
|
164
|
+
const results2 = await parseStyles(css2, scope2, config);
|
165
|
+
results2.forEach((res) => cssStyles.add(res));
|
166
|
+
}
|
167
|
+
return void 0;
|
168
|
+
}
|
169
|
+
if (_key.startsWith("@")) {
|
170
|
+
const mediaQuery = ((_a = config == null ? void 0 : config.mediaQueries) == null ? void 0 : _a[_key]) || _key;
|
171
|
+
const results2 = await parseAndJoinStyles(value, currentScope, config);
|
172
|
+
const query = `${mediaQuery} { ${results2} }`;
|
173
|
+
cssStyles.add(query);
|
174
|
+
return void 0;
|
175
|
+
}
|
176
|
+
const scope = key.includes("&") ? _key.replaceAll("&", currentScope) : _key.startsWith(":") ? `${currentScope}${_key}` : `${currentScope} ${_key}`;
|
177
|
+
const results = await parseStyles(value, scope, config);
|
178
|
+
results.forEach((result) => cssStyles.add(result));
|
179
|
+
return void 0;
|
180
|
+
}
|
181
|
+
if (typeof value === "number") {
|
182
|
+
const withUnit = addUnit(propertyName, value, config);
|
183
|
+
return toString(withUnit);
|
184
|
+
}
|
185
|
+
if (typeof value !== "string") {
|
186
|
+
if ("toString" in value) value = value.toString();
|
187
|
+
else throw new Error(`Invalid value type for property ${propertyName}`);
|
188
|
+
}
|
189
|
+
return toString(value);
|
190
|
+
};
|
191
|
+
const promises = entries.map(processStyleEntry);
|
192
|
+
const { modifiers } = config || {};
|
193
|
+
const afterFunctions = [parseValueTokens(), parseValueModifiers(modifiers)];
|
194
|
+
const resolved = await Promise.all(promises).then((styles2) => {
|
195
|
+
return Promise.all(
|
196
|
+
styles2.map((str) => {
|
197
|
+
return afterFunctions.reduce(async (acc, fn) => {
|
198
|
+
const current = await acc;
|
199
|
+
if (!current) return current;
|
200
|
+
const result = await fn(current);
|
201
|
+
if (!result) return current;
|
202
|
+
const { transformed, additionalCss } = result;
|
203
|
+
let before = "";
|
204
|
+
if (additionalCss) {
|
205
|
+
for (const css2 of additionalCss) {
|
206
|
+
before += await parseAndJoinStyles(css2, "");
|
207
|
+
}
|
208
|
+
}
|
209
|
+
return `${before}${transformed}`;
|
210
|
+
}, Promise.resolve(str));
|
211
|
+
})
|
212
|
+
);
|
213
|
+
});
|
214
|
+
const mapped = resolved.filter((value) => value !== void 0).join("\n ");
|
215
|
+
if (!mapped.trim()) return Array.from(cssStyles);
|
216
|
+
const css = currentScope ? `${currentScope} {
|
217
|
+
${mapped}
|
218
|
+
}` : mapped;
|
219
|
+
const alreadyExists = cssStyles.has(css);
|
220
|
+
if (alreadyExists) return Array.from(cssStyles);
|
221
|
+
return [css, ...cssStyles];
|
222
|
+
};
|
223
|
+
const parseAndJoinStyles = async (styles, currentClass, config, omitTemplates = false) => {
|
224
|
+
const css = await parseStyles(styles, currentClass, config, omitTemplates);
|
225
|
+
return css.join("\n");
|
226
|
+
};
|
227
|
+
exports.parseAndJoinStyles = parseAndJoinStyles;
|
228
|
+
exports.parseStyles = parseStyles;
|
229
|
+
exports.parseValueModifiers = parseValueModifiers;
|
230
|
+
exports.parseValueTokens = parseValueTokens;
|
231
|
+
exports.parseVariableTokens = parseVariableTokens;
|
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
3
|
+
const parseStyles = require("../parse-styles-D-p_guRO.cjs");
|
4
|
+
const dashCase = require("../dash-case-Cz8wwE9a.cjs");
|
5
|
+
const parseTemplates = async (obj, path = []) => {
|
6
|
+
if (!obj) return "";
|
7
|
+
const classes = [];
|
8
|
+
const levelStyles = {};
|
9
|
+
for (const [key, value] of Object.entries(obj)) {
|
10
|
+
if (typeof value === "function") ;
|
11
|
+
else if (value && typeof value === "object") {
|
12
|
+
const _key = key.trim();
|
13
|
+
const result = await parseTemplates(value, [...path, _key]);
|
14
|
+
classes.push(result);
|
15
|
+
} else {
|
16
|
+
levelStyles[key] = value;
|
17
|
+
}
|
18
|
+
}
|
19
|
+
if (Object.keys(levelStyles).length) {
|
20
|
+
const className = path.map(dashCase.dashCase).join("-");
|
21
|
+
const hashClass = "t_" + dashCase.toHash(className, 4);
|
22
|
+
const result = await parseStyles.parseAndJoinStyles(levelStyles, `.${className}, .${hashClass}`);
|
23
|
+
classes.push(result);
|
24
|
+
}
|
25
|
+
return classes.join("\n");
|
26
|
+
};
|
27
|
+
const getTemplateKeys = (templates) => {
|
28
|
+
return Object.keys(templates);
|
29
|
+
};
|
30
|
+
const getTemplateTypes = (templates) => {
|
31
|
+
if (!templates) return {};
|
32
|
+
return Object.entries(templates).reduce((acc, [key, value]) => {
|
33
|
+
if (typeof value === "function") {
|
34
|
+
acc[key] = "any";
|
35
|
+
} else if (typeof value === "object")
|
36
|
+
acc[key] = getTemplateTokens(value).map((val) => `"${val}"`).join(" | ");
|
37
|
+
return acc;
|
38
|
+
}, {});
|
39
|
+
};
|
40
|
+
const getTemplateTokens = (templates, parent = "", templateTokens = /* @__PURE__ */ new Set()) => {
|
41
|
+
if (!templates) return [];
|
42
|
+
Object.entries(templates).forEach(([key, value]) => {
|
43
|
+
const keyValue = parent ? `${parent}.${key}` : key;
|
44
|
+
if (typeof value === "object") return getTemplateTokens(value, keyValue, templateTokens);
|
45
|
+
return templateTokens.add(parent);
|
46
|
+
});
|
47
|
+
return [...templateTokens];
|
48
|
+
};
|
49
|
+
exports.parseAndJoinStyles = parseStyles.parseAndJoinStyles;
|
50
|
+
exports.parseStyles = parseStyles.parseStyles;
|
51
|
+
exports.parseValueModifiers = parseStyles.parseValueModifiers;
|
52
|
+
exports.parseValueTokens = parseStyles.parseValueTokens;
|
53
|
+
exports.parseVariableTokens = parseStyles.parseVariableTokens;
|
54
|
+
exports.getTemplateKeys = getTemplateKeys;
|
55
|
+
exports.getTemplateTokens = getTemplateTokens;
|
56
|
+
exports.getTemplateTypes = getTemplateTypes;
|
57
|
+
exports.parseTemplates = parseTemplates;
|