@styleframe/core 1.0.0 → 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 (48) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/LICENSE +21 -0
  3. package/dist/styleframe.d.ts +301 -0
  4. package/dist/styleframe.js +528 -0
  5. package/dist/styleframe.umd.cjs +1 -0
  6. package/package.json +13 -3
  7. package/.tsbuildinfo +0 -1
  8. package/src/index.ts +0 -5
  9. package/src/styleframe.ts +0 -64
  10. package/src/tokens/atRule.test.ts +0 -1013
  11. package/src/tokens/atRule.ts +0 -67
  12. package/src/tokens/css.test.ts +0 -404
  13. package/src/tokens/css.ts +0 -23
  14. package/src/tokens/declarations.test.ts +0 -584
  15. package/src/tokens/declarations.ts +0 -71
  16. package/src/tokens/index.ts +0 -11
  17. package/src/tokens/modifier.test.ts +0 -90
  18. package/src/tokens/modifier.ts +0 -86
  19. package/src/tokens/recipe.test.ts +0 -105
  20. package/src/tokens/recipe.ts +0 -32
  21. package/src/tokens/ref.test.ts +0 -430
  22. package/src/tokens/ref.ts +0 -24
  23. package/src/tokens/root.test.ts +0 -70
  24. package/src/tokens/root.ts +0 -14
  25. package/src/tokens/selector.test.ts +0 -440
  26. package/src/tokens/selector.ts +0 -47
  27. package/src/tokens/theme.test.ts +0 -338
  28. package/src/tokens/theme.ts +0 -26
  29. package/src/tokens/utility.test.ts +0 -1456
  30. package/src/tokens/utility.ts +0 -92
  31. package/src/tokens/variable.test.ts +0 -235
  32. package/src/tokens/variable.ts +0 -42
  33. package/src/typeGuards.test.ts +0 -33
  34. package/src/typeGuards.ts +0 -98
  35. package/src/types/declarations.ts +0 -42
  36. package/src/types/index.ts +0 -3
  37. package/src/types/options.ts +0 -22
  38. package/src/types/tokens.ts +0 -149
  39. package/src/utils/capitalizeFirst.ts +0 -9
  40. package/src/utils/deepClone.ts +0 -317
  41. package/src/utils/getters.test.ts +0 -399
  42. package/src/utils/getters.ts +0 -36
  43. package/src/utils/index.ts +0 -4
  44. package/src/utils/merge.test.ts +0 -978
  45. package/src/utils/merge.ts +0 -73
  46. package/src/vite-env.d.ts +0 -1
  47. package/tsconfig.json +0 -7
  48. package/vite.config.ts +0 -5
@@ -1,430 +0,0 @@
1
- import { beforeEach, describe, expect, it } from "vitest";
2
- import type { Root, Selector } from "../types";
3
- import { createKeyframesFunction } from "./atRule";
4
- import { createRefFunction } from "./ref";
5
- import { createRoot } from "./root";
6
- import { createVariableFunction } from "./variable";
7
-
8
- describe("createRefFunction", () => {
9
- let root: Root;
10
- let selector: Selector;
11
- let ref: ReturnType<typeof createRefFunction>;
12
- let variable: ReturnType<typeof createVariableFunction>;
13
- let keyframes: ReturnType<typeof createKeyframesFunction>;
14
-
15
- beforeEach(() => {
16
- root = createRoot();
17
- selector = {
18
- type: "selector",
19
- query: ".test",
20
- variables: [],
21
- declarations: {},
22
- children: [],
23
- };
24
- ref = createRefFunction(selector, root);
25
- variable = createVariableFunction(selector, root);
26
- keyframes = createKeyframesFunction(selector, root);
27
- });
28
-
29
- describe("basic reference creation", () => {
30
- it("should create a reference from a variable instance", () => {
31
- const colorPrimary = variable("color--primary", "#006cff");
32
-
33
- const result = ref(colorPrimary);
34
-
35
- expect(result).toEqual({
36
- type: "reference",
37
- name: "color--primary",
38
- fallback: undefined,
39
- });
40
- });
41
-
42
- it("should create a reference from a variable name string", () => {
43
- const result = ref("spacing--md");
44
-
45
- expect(result).toEqual({
46
- type: "reference",
47
- name: "spacing--md",
48
- fallback: undefined,
49
- });
50
- });
51
-
52
- it("should preserve the correct type", () => {
53
- const result = ref("my-custom-var");
54
-
55
- expect(result.type).toBe("reference");
56
- });
57
-
58
- it("should preserve generic type information", () => {
59
- const colorVar = variable("color-primary", "#blue");
60
- const result = ref(colorVar);
61
-
62
- // Type should be preserved
63
- expect(result.name).toBe("color-primary");
64
- });
65
- });
66
-
67
- describe("fallback values", () => {
68
- it("should create a reference with fallback from variable instance", () => {
69
- const colorSecondary = variable("color--secondary", "#ff5733");
70
-
71
- const result = ref(colorSecondary, "#cccccc");
72
-
73
- expect(result).toEqual({
74
- type: "reference",
75
- name: "color--secondary",
76
- fallback: "#cccccc",
77
- });
78
- });
79
-
80
- it("should create a reference with fallback from variable name", () => {
81
- const result = ref("color--purple", "#ff5733");
82
-
83
- expect(result).toEqual({
84
- type: "reference",
85
- name: "color--purple",
86
- fallback: "#ff5733",
87
- });
88
- });
89
-
90
- it("should handle complex fallback values", () => {
91
- const result = ref("spacing--xl", "calc(2rem + 10px)");
92
-
93
- expect(result).toEqual({
94
- type: "reference",
95
- name: "spacing--xl",
96
- fallback: "calc(2rem + 10px)",
97
- });
98
- });
99
-
100
- it("should handle empty string fallback", () => {
101
- const result = ref("test-var", "");
102
-
103
- expect(result).toEqual({
104
- type: "reference",
105
- name: "test-var",
106
- fallback: "",
107
- });
108
- });
109
-
110
- it("should handle undefined fallback explicitly", () => {
111
- const result = ref("test-var", undefined);
112
-
113
- expect(result).toEqual({
114
- type: "reference",
115
- name: "test-var",
116
- fallback: undefined,
117
- });
118
- });
119
- });
120
-
121
- describe("context parameter handling", () => {
122
- it("should work with root context", () => {
123
- const refWithRootContext = createRefFunction(root, root);
124
- const colorVar = variable("root-color", "#000");
125
-
126
- const result = refWithRootContext(colorVar);
127
-
128
- expect(result).toEqual({
129
- type: "reference",
130
- name: "root-color",
131
- fallback: undefined,
132
- });
133
- });
134
-
135
- it("should work with selector context", () => {
136
- const refWithSelectorContext = createRefFunction(selector, root);
137
- const spacingVar = variable("selector-spacing", "1rem");
138
-
139
- const result = refWithSelectorContext(spacingVar);
140
-
141
- expect(result).toEqual({
142
- type: "reference",
143
- name: "selector-spacing",
144
- fallback: undefined,
145
- });
146
- });
147
-
148
- it("should work with nested selector context", () => {
149
- const nestedSelector: Selector = {
150
- type: "selector",
151
- query: "&:hover",
152
- variables: [],
153
- declarations: {},
154
- children: [],
155
- };
156
-
157
- const refWithNestedContext = createRefFunction(nestedSelector, root);
158
- const hoverVar = variable("hover-color", "#333");
159
-
160
- const result = refWithNestedContext(hoverVar);
161
-
162
- expect(result).toEqual({
163
- type: "reference",
164
- name: "hover-color",
165
- fallback: undefined,
166
- });
167
- });
168
- });
169
-
170
- describe("variable instance handling", () => {
171
- it("should correctly identify variable instances using isVariable", () => {
172
- const colorVar = variable("color-test", "#123456");
173
-
174
- const result = ref(colorVar);
175
-
176
- expect(result.name).toBe("color-test");
177
- expect(result.type).toBe("reference");
178
- });
179
-
180
- it("should handle variables with different value types", () => {
181
- const stringVar = variable("string-var", "value");
182
- const numberVar = variable("number-var", "42px");
183
- const complexVar = variable("complex-var", "calc(100% - 2rem)");
184
-
185
- const stringRef = ref(stringVar);
186
- const numberRef = ref(numberVar);
187
- const complexRef = ref(complexVar);
188
-
189
- expect(stringRef.name).toBe("string-var");
190
- expect(numberRef.name).toBe("number-var");
191
- expect(complexRef.name).toBe("complex-var");
192
- });
193
-
194
- it("should work with variables that have special characters in names", () => {
195
- const specialVar = variable("color--primary-500", "#006cff");
196
-
197
- const result = ref(specialVar);
198
-
199
- expect(result.name).toBe("color--primary-500");
200
- });
201
- });
202
-
203
- describe("string name handling", () => {
204
- it("should handle various string patterns", () => {
205
- const kebabCase = ref("font-family-sans");
206
- const camelCase = ref("fontSize");
207
- const snakeCase = ref("font_size");
208
- const withNumbers = ref("size-12");
209
- const withDashes = ref("color--primary--500");
210
-
211
- expect(kebabCase.name).toBe("font-family-sans");
212
- expect(camelCase.name).toBe("fontSize");
213
- expect(snakeCase.name).toBe("font_size");
214
- expect(withNumbers.name).toBe("size-12");
215
- expect(withDashes.name).toBe("color--primary--500");
216
- });
217
-
218
- it("should handle empty string names", () => {
219
- const result = ref("");
220
-
221
- expect(result).toEqual({
222
- type: "reference",
223
- name: "",
224
- fallback: undefined,
225
- });
226
- });
227
-
228
- it("should handle single character names", () => {
229
- const result = ref("a");
230
-
231
- expect(result).toEqual({
232
- type: "reference",
233
- name: "a",
234
- fallback: undefined,
235
- });
236
- });
237
- });
238
-
239
- describe("reference chaining", () => {
240
- it("should work with variables that reference other variables", () => {
241
- const baseColor = variable("base-color", "#0066ff");
242
- const primaryColor = variable("primary-color", ref(baseColor));
243
-
244
- // Verify the primary variable contains a reference
245
- expect(primaryColor.value).toEqual({
246
- type: "reference",
247
- name: "base-color",
248
- fallback: undefined,
249
- });
250
- });
251
-
252
- it("should support multiple levels of references", () => {
253
- const baseColor = variable("base-color", "#0066ff");
254
- const primaryColor = variable("primary-color", ref(baseColor));
255
- const buttonColor = variable("button-color", ref(primaryColor));
256
-
257
- expect(buttonColor.value).toEqual({
258
- type: "reference",
259
- name: "primary-color",
260
- fallback: undefined,
261
- });
262
- });
263
-
264
- it("should support references with fallbacks in chains", () => {
265
- const baseColor = variable("base-color", "#0066ff");
266
- const primaryColor = variable("primary-color", ref(baseColor, "#ff0000"));
267
-
268
- expect(primaryColor.value).toEqual({
269
- type: "reference",
270
- name: "base-color",
271
- fallback: "#ff0000",
272
- });
273
- });
274
- });
275
-
276
- describe("type safety and generic preservation", () => {
277
- it("should preserve string literal types", () => {
278
- const specificVar = variable("very-specific-name" as const, "value");
279
- const result = ref(specificVar);
280
-
281
- // This should maintain the literal type
282
- expect(result.name).toBe("very-specific-name");
283
- });
284
-
285
- it("should work with union types", () => {
286
- type ColorName = "primary" | "secondary" | "tertiary";
287
-
288
- const colorRef1 = ref("primary" as ColorName);
289
- const colorRef2 = ref("secondary" as ColorName);
290
-
291
- expect(colorRef1.name).toBe("primary");
292
- expect(colorRef2.name).toBe("secondary");
293
- });
294
-
295
- it("should maintain type information through function calls", () => {
296
- const createColorRef = (name: string) => ref(name);
297
-
298
- const result = createColorRef("dynamic-color");
299
- expect(result.name).toBe("dynamic-color");
300
- });
301
- });
302
-
303
- describe("edge cases", () => {
304
- it("should handle variables with undefined names gracefully", () => {
305
- // This would be a malformed variable, but we should handle it
306
- const malformedVar = {
307
- type: "variable" as const,
308
- name: undefined as any,
309
- value: "test",
310
- };
311
-
312
- const result = ref(malformedVar as any);
313
-
314
- expect(result.name).toBeUndefined();
315
- expect(result.type).toBe("reference");
316
- });
317
-
318
- it("should handle null fallback values", () => {
319
- const result = ref("test-var", null as any);
320
-
321
- expect(result.fallback).toBeNull();
322
- });
323
-
324
- it("should maintain object identity for repeated calls", () => {
325
- const colorVar = variable("repeat-test", "#fff");
326
-
327
- const ref1 = ref(colorVar);
328
- const ref2 = ref(colorVar);
329
-
330
- // Should create new objects each time
331
- expect(ref1).not.toBe(ref2);
332
- // But should be equal in content
333
- expect(ref1).toEqual(ref2);
334
- });
335
- });
336
-
337
- describe("real-world usage patterns", () => {
338
- it("should support design token patterns", () => {
339
- // Base tokens
340
- const blue500 = variable("blue-500", "#3b82f6");
341
- const blue600 = variable("blue-600", "#2563eb");
342
-
343
- // Semantic tokens
344
- const colorPrimary = variable("color-primary", ref(blue500));
345
- const colorPrimaryHover = variable("color-primary-hover", ref(blue600));
346
-
347
- expect(colorPrimary.value).toEqual({
348
- type: "reference",
349
- name: "blue-500",
350
- fallback: undefined,
351
- });
352
-
353
- expect(colorPrimaryHover.value).toEqual({
354
- type: "reference",
355
- name: "blue-600",
356
- fallback: undefined,
357
- });
358
- });
359
-
360
- it("should work in selector declarations", () => {
361
- const colorPrimary = variable("color-primary", "#006cff");
362
- const spacingMd = variable("spacing-md", "1rem");
363
-
364
- // Simulate selector usage
365
- const declarations = {
366
- backgroundColor: ref(colorPrimary),
367
- padding: ref(spacingMd),
368
- color: ref("text-color", "#000"),
369
- };
370
-
371
- expect(declarations.backgroundColor).toEqual({
372
- type: "reference",
373
- name: "color-primary",
374
- fallback: undefined,
375
- });
376
-
377
- expect(declarations.padding).toEqual({
378
- type: "reference",
379
- name: "spacing-md",
380
- fallback: undefined,
381
- });
382
-
383
- expect(declarations.color).toEqual({
384
- type: "reference",
385
- name: "text-color",
386
- fallback: "#000",
387
- });
388
- });
389
-
390
- it("should support conditional references", () => {
391
- const isDark = false;
392
- const lightColor = variable("light-bg", "#ffffff");
393
- const darkColor = variable("dark-bg", "#000000");
394
-
395
- const bgColor = isDark ? ref(darkColor) : ref(lightColor);
396
-
397
- expect(bgColor).toEqual({
398
- type: "reference",
399
- name: "light-bg",
400
- fallback: undefined,
401
- });
402
- });
403
- });
404
-
405
- describe("function context independence", () => {
406
- it("should create independent functions for different contexts", () => {
407
- const context1 = createRoot();
408
- const context2 = {
409
- type: "selector" as const,
410
- query: ".test",
411
- variables: [],
412
- declarations: {},
413
- children: [],
414
- };
415
-
416
- const ref1 = createRefFunction(context1, root);
417
- const ref2 = createRefFunction(context2, root);
418
-
419
- // Both should work independently
420
- const result1 = ref1("test-var-1");
421
- const result2 = ref2("test-var-2");
422
-
423
- expect(result1.name).toBe("test-var-1");
424
- expect(result2.name).toBe("test-var-2");
425
-
426
- // And should be separate functions
427
- expect(ref1).not.toBe(ref2);
428
- });
429
- });
430
- });
package/src/tokens/ref.ts DELETED
@@ -1,24 +0,0 @@
1
- import { isVariable } from "../typeGuards";
2
- import type { Container, Reference, Root, Variable } from "../types";
3
-
4
- export function createRefFunction(_parent: Container, _root: Root) {
5
- return function ref<Name extends string>(
6
- variable: Variable<Name> | Name,
7
- fallback?: string,
8
- ): Reference<Name> {
9
- if (isVariable(variable)) {
10
- return {
11
- type: "reference",
12
- name: variable.name,
13
- fallback,
14
- };
15
- }
16
-
17
- // If a string name is passed, use it directly
18
- return {
19
- type: "reference",
20
- name: variable,
21
- fallback,
22
- };
23
- };
24
- }
@@ -1,70 +0,0 @@
1
- import { describe, expect, it } from "vitest";
2
- import type { Root } from "../types";
3
- import { createRoot } from "./root";
4
-
5
- describe("createRoot", () => {
6
- describe("basic functionality", () => {
7
- it("should create a root object with correct type", () => {
8
- const root = createRoot();
9
-
10
- expect(root.type).toBe("root");
11
- });
12
-
13
- it("should create a root object with empty children array", () => {
14
- const root = createRoot();
15
-
16
- expect(root.children).toEqual([]);
17
- expect(Array.isArray(root.children)).toBe(true);
18
- expect(root.children).toHaveLength(0);
19
- });
20
-
21
- it("should create a root object with correct structure", () => {
22
- const root = createRoot();
23
-
24
- expect(root).toEqual({
25
- type: "root",
26
- declarations: {},
27
- utilities: [],
28
- modifiers: [],
29
- recipes: [],
30
- variables: [],
31
- children: [],
32
- themes: [],
33
- });
34
- });
35
-
36
- it("should return a Root type", () => {
37
- const root = createRoot();
38
-
39
- // Type assertion to verify it matches Root interface
40
- const typedRoot: Root = root;
41
- expect(typedRoot).toBeDefined();
42
- });
43
- });
44
-
45
- describe("multiple instances", () => {
46
- it("should create independent root instances", () => {
47
- const root1 = createRoot();
48
- const root2 = createRoot();
49
-
50
- expect(root1).not.toBe(root2);
51
- expect(root1.children).not.toBe(root2.children);
52
- });
53
-
54
- it("should create fresh empty arrays for each instance", () => {
55
- const root1 = createRoot();
56
- const root2 = createRoot();
57
-
58
- // Modify one instance
59
- root1.variables.push({
60
- type: "variable",
61
- name: "test",
62
- value: "test-value",
63
- } as any);
64
-
65
- // Other instance should remain unaffected
66
- expect(root1.variables).toHaveLength(1);
67
- expect(root2.variables).toHaveLength(0);
68
- });
69
- });
70
- });
@@ -1,14 +0,0 @@
1
- import type { Root } from "../types";
2
-
3
- export function createRoot(): Root {
4
- return {
5
- type: "root",
6
- declarations: {},
7
- utilities: [],
8
- modifiers: [],
9
- recipes: [],
10
- variables: [],
11
- children: [],
12
- themes: [],
13
- };
14
- }