@stokelp/styled-system 1.0.1 → 1.0.2

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.
Files changed (2) hide show
  1. package/helpers.mjs +326 -0
  2. package/package.json +2 -1
package/helpers.mjs ADDED
@@ -0,0 +1,326 @@
1
+ // src/assert.ts
2
+ function isObject(value) {
3
+ return typeof value === "object" && value != null && !Array.isArray(value);
4
+ }
5
+
6
+ // src/compact.ts
7
+ function compact(value) {
8
+ return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
9
+ }
10
+
11
+ // src/condition.ts
12
+ var isBaseCondition = (v) => v === "base";
13
+ function filterBaseConditions(c) {
14
+ return c.slice().filter((v) => !isBaseCondition(v));
15
+ }
16
+
17
+ // src/hash.ts
18
+ function toChar(code) {
19
+ return String.fromCharCode(code + (code > 25 ? 39 : 97));
20
+ }
21
+ function toName(code) {
22
+ let name = "";
23
+ let x;
24
+ for (x = Math.abs(code); x > 52; x = x / 52 | 0)
25
+ name = toChar(x % 52) + name;
26
+ return toChar(x % 52) + name;
27
+ }
28
+ function toPhash(h, x) {
29
+ let i = x.length;
30
+ while (i)
31
+ h = h * 33 ^ x.charCodeAt(--i);
32
+ return h;
33
+ }
34
+ function toHash(value) {
35
+ return toName(toPhash(5381, value) >>> 0);
36
+ }
37
+
38
+ // src/important.ts
39
+ var importantRegex = /\s*!(important)?/i;
40
+ function isImportant(value) {
41
+ return typeof value === "string" ? importantRegex.test(value) : false;
42
+ }
43
+ function withoutImportant(value) {
44
+ return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
45
+ }
46
+ function withoutSpace(str) {
47
+ return typeof str === "string" ? str.replaceAll(" ", "_") : str;
48
+ }
49
+
50
+ // src/memo.ts
51
+ var memo = (fn) => {
52
+ const cache = /* @__PURE__ */ new Map();
53
+ const get = (...args) => {
54
+ const key = JSON.stringify(args);
55
+ if (cache.has(key)) {
56
+ return cache.get(key);
57
+ }
58
+ const result = fn(...args);
59
+ cache.set(key, result);
60
+ return result;
61
+ };
62
+ return get;
63
+ };
64
+
65
+ // src/merge-props.ts
66
+ function mergeProps(...sources) {
67
+ const objects = sources.filter(Boolean);
68
+ return objects.reduce((prev, obj) => {
69
+ Object.keys(obj).forEach((key) => {
70
+ const prevValue = prev[key];
71
+ const value = obj[key];
72
+ if (isObject(prevValue) && isObject(value)) {
73
+ prev[key] = mergeProps(prevValue, value);
74
+ } else {
75
+ prev[key] = value;
76
+ }
77
+ });
78
+ return prev;
79
+ }, {});
80
+ }
81
+
82
+ // src/walk-object.ts
83
+ var isNotNullish = (element) => element != null;
84
+ function walkObject(target, predicate, options = {}) {
85
+ const { stop, getKey } = options;
86
+ function inner(value, path = []) {
87
+ if (isObject(value) || Array.isArray(value)) {
88
+ const result = {};
89
+ for (const [prop, child] of Object.entries(value)) {
90
+ const key = getKey?.(prop, child) ?? prop;
91
+ const childPath = [...path, key];
92
+ if (stop?.(value, childPath)) {
93
+ return predicate(value, path);
94
+ }
95
+ const next = inner(child, childPath);
96
+ if (isNotNullish(next)) {
97
+ result[key] = next;
98
+ }
99
+ }
100
+ return result;
101
+ }
102
+ return predicate(value, path);
103
+ }
104
+ return inner(target);
105
+ }
106
+ function mapObject(obj, fn) {
107
+ if (Array.isArray(obj))
108
+ return obj.map((value) => fn(value));
109
+ if (!isObject(obj))
110
+ return fn(obj);
111
+ return walkObject(obj, (value) => fn(value));
112
+ }
113
+
114
+ // src/normalize-style-object.ts
115
+ function toResponsiveObject(values, breakpoints) {
116
+ return values.reduce(
117
+ (acc, current, index) => {
118
+ const key = breakpoints[index];
119
+ if (current != null) {
120
+ acc[key] = current;
121
+ }
122
+ return acc;
123
+ },
124
+ {}
125
+ );
126
+ }
127
+ function normalizeStyleObject(styles, context, shorthand = true) {
128
+ const { utility, conditions } = context;
129
+ const { hasShorthand, resolveShorthand } = utility;
130
+ return walkObject(
131
+ styles,
132
+ (value) => {
133
+ return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
134
+ },
135
+ {
136
+ stop: (value) => Array.isArray(value),
137
+ getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0
138
+ }
139
+ );
140
+ }
141
+
142
+ // src/classname.ts
143
+ var fallbackCondition = {
144
+ shift: (v) => v,
145
+ finalize: (v) => v,
146
+ breakpoints: { keys: [] }
147
+ };
148
+ var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
149
+ function createCss(context) {
150
+ const { utility, hash, conditions: conds = fallbackCondition } = context;
151
+ const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
152
+ const hashFn = (conditions, className) => {
153
+ let result;
154
+ if (hash) {
155
+ const baseArray = [...conds.finalize(conditions), className];
156
+ result = formatClassName(utility.toHash(baseArray, toHash));
157
+ } else {
158
+ const baseArray = [...conds.finalize(conditions), formatClassName(className)];
159
+ result = baseArray.join(":");
160
+ }
161
+ return result;
162
+ };
163
+ return memo(({ base, ...styles } = {}) => {
164
+ const styleObject = Object.assign(styles, base);
165
+ const normalizedObject = normalizeStyleObject(styleObject, context);
166
+ const classNames = /* @__PURE__ */ new Set();
167
+ walkObject(normalizedObject, (value, paths) => {
168
+ const important = isImportant(value);
169
+ if (value == null)
170
+ return;
171
+ const [prop, ...allConditions] = conds.shift(paths);
172
+ const conditions = filterBaseConditions(allConditions);
173
+ const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
174
+ let className = hashFn(conditions, transformed.className);
175
+ if (important)
176
+ className = `${className}!`;
177
+ classNames.add(className);
178
+ });
179
+ return Array.from(classNames).join(" ");
180
+ });
181
+ }
182
+ function compactStyles(...styles) {
183
+ return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
184
+ }
185
+ function createMergeCss(context) {
186
+ function resolve(styles) {
187
+ const allStyles = compactStyles(...styles);
188
+ if (allStyles.length === 1)
189
+ return allStyles;
190
+ return allStyles.map((style) => normalizeStyleObject(style, context));
191
+ }
192
+ function mergeCss(...styles) {
193
+ return mergeProps(...resolve(styles));
194
+ }
195
+ function assignCss(...styles) {
196
+ return Object.assign({}, ...resolve(styles));
197
+ }
198
+ return { mergeCss: memo(mergeCss), assignCss };
199
+ }
200
+
201
+ // src/hypenate-property.ts
202
+ var wordRegex = /([A-Z])/g;
203
+ var msRegex = /^ms-/;
204
+ var hypenateProperty = memo((property) => {
205
+ if (property.startsWith("--"))
206
+ return property;
207
+ return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
208
+ });
209
+
210
+ // src/is-css-function.ts
211
+ var fns = ["min", "max", "clamp", "calc"];
212
+ var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`);
213
+ var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);
214
+
215
+ // src/is-css-unit.ts
216
+ var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
217
+ var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;
218
+ var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);
219
+ var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);
220
+
221
+ // src/is-css-var.ts
222
+ var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v);
223
+
224
+ // src/pattern-fns.ts
225
+ var patternFns = {
226
+ map: mapObject,
227
+ isCssFunction,
228
+ isCssVar,
229
+ isCssUnit
230
+ };
231
+ var getPatternStyles = (pattern, styles) => {
232
+ if (!pattern?.defaultValues)
233
+ return styles;
234
+ const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
235
+ return Object.assign({}, defaults, compact(styles));
236
+ };
237
+
238
+ // src/slot.ts
239
+ var getSlotRecipes = (recipe = {}) => {
240
+ const init = (slot) => ({
241
+ className: [recipe.className, slot].filter(Boolean).join("__"),
242
+ base: recipe.base?.[slot] ?? {},
243
+ variants: {},
244
+ defaultVariants: recipe.defaultVariants ?? {},
245
+ compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
246
+ });
247
+ const slots = recipe.slots ?? [];
248
+ const recipeParts = slots.map((slot) => [slot, init(slot)]);
249
+ for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
250
+ for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
251
+ recipeParts.forEach(([slot, slotRecipe]) => {
252
+ slotRecipe.variants[variantsKey] ??= {};
253
+ slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
254
+ });
255
+ }
256
+ }
257
+ return Object.fromEntries(recipeParts);
258
+ };
259
+ var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
260
+
261
+ // src/split-props.ts
262
+ function splitProps(props, ...keys) {
263
+ const descriptors = Object.getOwnPropertyDescriptors(props);
264
+ const dKeys = Object.keys(descriptors);
265
+ const split = (k) => {
266
+ const clone = {};
267
+ for (let i = 0; i < k.length; i++) {
268
+ const key = k[i];
269
+ if (descriptors[key]) {
270
+ Object.defineProperty(clone, key, descriptors[key]);
271
+ delete descriptors[key];
272
+ }
273
+ }
274
+ return clone;
275
+ };
276
+ const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
277
+ return keys.map(fn).concat(split(dKeys));
278
+ }
279
+
280
+ // src/uniq.ts
281
+ var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []);
282
+ export {
283
+ compact,
284
+ createCss,
285
+ createMergeCss,
286
+ filterBaseConditions,
287
+ getPatternStyles,
288
+ getSlotCompoundVariant,
289
+ getSlotRecipes,
290
+ hypenateProperty,
291
+ isBaseCondition,
292
+ isObject,
293
+ mapObject,
294
+ memo,
295
+ mergeProps,
296
+ patternFns,
297
+ splitProps,
298
+ toHash,
299
+ uniq,
300
+ walkObject,
301
+ withoutSpace
302
+ };
303
+
304
+
305
+
306
+ // src/normalize-html.ts
307
+ var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
308
+ function convert(key) {
309
+ return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
310
+ }
311
+ function normalizeHTMLProps(props) {
312
+ return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
313
+ }
314
+ normalizeHTMLProps.keys = htmlProps;
315
+ export {
316
+ normalizeHTMLProps
317
+ };
318
+
319
+
320
+ export function __spreadValues(a, b) {
321
+ return { ...a, ...b }
322
+ }
323
+
324
+ export function __objRest(source, exclude) {
325
+ return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
326
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokelp/styled-system",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Stokelp UI styled-system",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -14,6 +14,7 @@
14
14
  "tokens",
15
15
  "types",
16
16
  "styles.css",
17
+ "helpers.mjs",
17
18
  "panda.buildinfo.json"
18
19
  ],
19
20
  "exports": {