@tenphi/tasty 0.1.0 → 0.1.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 (141) hide show
  1. package/dist/_virtual/_rolldown/runtime.js +8 -0
  2. package/dist/zero/{babel.d.mts → babel.d.ts} +6 -6
  3. package/dist/zero/{babel.mjs → babel.js} +6 -6
  4. package/dist/zero/babel.js.map +1 -0
  5. package/dist/{css-writer.d.mts → zero/css-writer.d.ts} +1 -1
  6. package/dist/{css-writer.mjs → zero/css-writer.js} +1 -1
  7. package/dist/zero/css-writer.js.map +1 -0
  8. package/dist/{extractor.d.mts → zero/extractor.d.ts} +3 -2
  9. package/dist/{extractor.mjs → zero/extractor.js} +6 -6
  10. package/dist/zero/extractor.js.map +1 -0
  11. package/dist/zero/index.d.ts +3 -0
  12. package/dist/zero/{index.mjs → index.js} +2 -2
  13. package/dist/zero/{next.d.mts → next.d.ts} +1 -1
  14. package/dist/zero/{next.mjs → next.js} +2 -2
  15. package/dist/zero/next.js.map +1 -0
  16. package/package.json +16 -23
  17. package/dist/_virtual/_rolldown/runtime.mjs +0 -7
  18. package/dist/chunks/cacheKey.mjs +0 -70
  19. package/dist/chunks/cacheKey.mjs.map +0 -1
  20. package/dist/chunks/definitions.mjs +0 -260
  21. package/dist/chunks/definitions.mjs.map +0 -1
  22. package/dist/chunks/renderChunk.mjs +0 -61
  23. package/dist/chunks/renderChunk.mjs.map +0 -1
  24. package/dist/config.mjs +0 -231
  25. package/dist/config.mjs.map +0 -1
  26. package/dist/css-writer.mjs.map +0 -1
  27. package/dist/extractor.mjs.map +0 -1
  28. package/dist/injector/injector.mjs +0 -404
  29. package/dist/injector/injector.mjs.map +0 -1
  30. package/dist/injector/sheet-manager.mjs +0 -714
  31. package/dist/injector/sheet-manager.mjs.map +0 -1
  32. package/dist/injector/types.d.mts +0 -18
  33. package/dist/keyframes/index.mjs +0 -156
  34. package/dist/keyframes/index.mjs.map +0 -1
  35. package/dist/parser/classify.mjs +0 -319
  36. package/dist/parser/classify.mjs.map +0 -1
  37. package/dist/parser/const.mjs +0 -33
  38. package/dist/parser/const.mjs.map +0 -1
  39. package/dist/parser/lru.mjs +0 -109
  40. package/dist/parser/lru.mjs.map +0 -1
  41. package/dist/parser/parser.mjs +0 -116
  42. package/dist/parser/parser.mjs.map +0 -1
  43. package/dist/parser/tokenizer.mjs +0 -69
  44. package/dist/parser/tokenizer.mjs.map +0 -1
  45. package/dist/parser/types.d.mts +0 -37
  46. package/dist/parser/types.mjs +0 -46
  47. package/dist/parser/types.mjs.map +0 -1
  48. package/dist/pipeline/conditions.mjs +0 -377
  49. package/dist/pipeline/conditions.mjs.map +0 -1
  50. package/dist/pipeline/exclusive.mjs +0 -231
  51. package/dist/pipeline/exclusive.mjs.map +0 -1
  52. package/dist/pipeline/index.mjs +0 -635
  53. package/dist/pipeline/index.mjs.map +0 -1
  54. package/dist/pipeline/materialize.mjs +0 -821
  55. package/dist/pipeline/materialize.mjs.map +0 -1
  56. package/dist/pipeline/parseStateKey.mjs +0 -418
  57. package/dist/pipeline/parseStateKey.mjs.map +0 -1
  58. package/dist/pipeline/simplify.mjs +0 -557
  59. package/dist/pipeline/simplify.mjs.map +0 -1
  60. package/dist/plugins/okhsl-plugin.mjs +0 -345
  61. package/dist/plugins/okhsl-plugin.mjs.map +0 -1
  62. package/dist/plugins/types.d.mts +0 -49
  63. package/dist/properties/index.mjs +0 -141
  64. package/dist/properties/index.mjs.map +0 -1
  65. package/dist/states/index.mjs +0 -161
  66. package/dist/states/index.mjs.map +0 -1
  67. package/dist/styles/align.mjs +0 -14
  68. package/dist/styles/align.mjs.map +0 -1
  69. package/dist/styles/border.mjs +0 -114
  70. package/dist/styles/border.mjs.map +0 -1
  71. package/dist/styles/color.mjs +0 -23
  72. package/dist/styles/color.mjs.map +0 -1
  73. package/dist/styles/createStyle.mjs +0 -77
  74. package/dist/styles/createStyle.mjs.map +0 -1
  75. package/dist/styles/dimension.mjs +0 -97
  76. package/dist/styles/dimension.mjs.map +0 -1
  77. package/dist/styles/display.mjs +0 -67
  78. package/dist/styles/display.mjs.map +0 -1
  79. package/dist/styles/fade.mjs +0 -58
  80. package/dist/styles/fade.mjs.map +0 -1
  81. package/dist/styles/fill.mjs +0 -51
  82. package/dist/styles/fill.mjs.map +0 -1
  83. package/dist/styles/flow.mjs +0 -12
  84. package/dist/styles/flow.mjs.map +0 -1
  85. package/dist/styles/gap.mjs +0 -37
  86. package/dist/styles/gap.mjs.map +0 -1
  87. package/dist/styles/height.mjs +0 -20
  88. package/dist/styles/height.mjs.map +0 -1
  89. package/dist/styles/index.mjs +0 -9
  90. package/dist/styles/index.mjs.map +0 -1
  91. package/dist/styles/inset.mjs +0 -142
  92. package/dist/styles/inset.mjs.map +0 -1
  93. package/dist/styles/justify.mjs +0 -14
  94. package/dist/styles/justify.mjs.map +0 -1
  95. package/dist/styles/margin.mjs +0 -96
  96. package/dist/styles/margin.mjs.map +0 -1
  97. package/dist/styles/outline.mjs +0 -65
  98. package/dist/styles/outline.mjs.map +0 -1
  99. package/dist/styles/padding.mjs +0 -96
  100. package/dist/styles/padding.mjs.map +0 -1
  101. package/dist/styles/predefined.mjs +0 -232
  102. package/dist/styles/predefined.mjs.map +0 -1
  103. package/dist/styles/preset.mjs +0 -126
  104. package/dist/styles/preset.mjs.map +0 -1
  105. package/dist/styles/radius.mjs +0 -51
  106. package/dist/styles/radius.mjs.map +0 -1
  107. package/dist/styles/scrollbar.mjs +0 -105
  108. package/dist/styles/scrollbar.mjs.map +0 -1
  109. package/dist/styles/shadow.mjs +0 -24
  110. package/dist/styles/shadow.mjs.map +0 -1
  111. package/dist/styles/styledScrollbar.mjs +0 -38
  112. package/dist/styles/styledScrollbar.mjs.map +0 -1
  113. package/dist/styles/transition.mjs +0 -138
  114. package/dist/styles/transition.mjs.map +0 -1
  115. package/dist/styles/types.d.mts +0 -492
  116. package/dist/styles/width.mjs +0 -20
  117. package/dist/styles/width.mjs.map +0 -1
  118. package/dist/utils/cache-wrapper.mjs +0 -26
  119. package/dist/utils/cache-wrapper.mjs.map +0 -1
  120. package/dist/utils/case-converter.mjs +0 -8
  121. package/dist/utils/case-converter.mjs.map +0 -1
  122. package/dist/utils/hsl-to-rgb.mjs +0 -38
  123. package/dist/utils/hsl-to-rgb.mjs.map +0 -1
  124. package/dist/utils/is-dev-env.mjs +0 -19
  125. package/dist/utils/is-dev-env.mjs.map +0 -1
  126. package/dist/utils/merge-styles.mjs +0 -146
  127. package/dist/utils/merge-styles.mjs.map +0 -1
  128. package/dist/utils/okhsl-to-rgb.mjs +0 -296
  129. package/dist/utils/okhsl-to-rgb.mjs.map +0 -1
  130. package/dist/utils/process-tokens.mjs +0 -28
  131. package/dist/utils/process-tokens.mjs.map +0 -1
  132. package/dist/utils/resolve-recipes.mjs +0 -143
  133. package/dist/utils/resolve-recipes.mjs.map +0 -1
  134. package/dist/utils/string.mjs +0 -8
  135. package/dist/utils/string.mjs.map +0 -1
  136. package/dist/utils/styles.d.mts +0 -18
  137. package/dist/utils/styles.mjs +0 -346
  138. package/dist/utils/styles.mjs.map +0 -1
  139. package/dist/zero/babel.mjs.map +0 -1
  140. package/dist/zero/index.d.mts +0 -3
  141. package/dist/zero/next.mjs.map +0 -1
@@ -1,161 +0,0 @@
1
- import { isDevEnv } from "../utils/is-dev-env.mjs";
2
- import { hasStylesGenerated } from "../config.mjs";
3
-
4
- //#region src/states/index.ts
5
- /**
6
- * Advanced State Mapping - Predefined States Management
7
- *
8
- * This module handles global and local predefined states for the Tasty styling system.
9
- * See ADVANCED_STATE_MAPPING.md for full specification.
10
- */
11
- const BUILTIN_STATES = new Set([
12
- "@starting",
13
- "@keyframes",
14
- "@properties",
15
- "@supports",
16
- "@inherit"
17
- ]);
18
- let globalPredefinedStates = {};
19
- const emittedWarnings = /* @__PURE__ */ new Set();
20
- const devMode = isDevEnv();
21
- /**
22
- * Emit a warning only once
23
- */
24
- function warnOnce(key, message) {
25
- if (devMode && !emittedWarnings.has(key)) {
26
- emittedWarnings.add(key);
27
- console.warn(message);
28
- }
29
- }
30
- /**
31
- * Configure global predefined states
32
- */
33
- function setGlobalPredefinedStates(states) {
34
- if (hasStylesGenerated()) {
35
- const newStateNames = Object.keys(states).join(", ");
36
- warnOnce(`dynamic-states:${newStateNames}`, `[Tasty] Cannot update predefined states after styles have been generated.\nThe new definition(s) for ${newStateNames} will be ignored.`);
37
- return;
38
- }
39
- for (const [name, value] of Object.entries(states)) {
40
- if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(name)) {
41
- warnOnce(`invalid-state-name:${name}`, `[Tasty] Invalid predefined state name '${name}'. Must start with '@' followed by a letter.`);
42
- continue;
43
- }
44
- if (BUILTIN_STATES.has(name)) {
45
- warnOnce(`reserved-state:${name}`, `[Tasty] Cannot define predefined state '${name}'. This name is reserved for built-in functionality.`);
46
- continue;
47
- }
48
- if (name === "@media" || name === "@root" || name === "@own" || name.startsWith("@(")) {
49
- warnOnce(`reserved-prefix:${name}`, `[Tasty] Cannot define predefined state '${name}'. This prefix is reserved for built-in functionality.`);
50
- continue;
51
- }
52
- const crossRefs = extractPredefinedStateRefs(value);
53
- if (crossRefs.length > 0) {
54
- warnOnce(`cross-ref:${name}`, `[Tasty] Predefined state '${name}' references another predefined state '${crossRefs[0]}'.\nPredefined states cannot reference each other. Use the full definition instead.`);
55
- continue;
56
- }
57
- if (globalPredefinedStates[name] && globalPredefinedStates[name] !== value) warnOnce(`duplicate-state:${name}`, `[Tasty] Duplicate predefined state '${name}' in configure(). The last definition will be used.`);
58
- globalPredefinedStates[name] = value;
59
- }
60
- }
61
- /**
62
- * Get global predefined states
63
- */
64
- function getGlobalPredefinedStates() {
65
- return globalPredefinedStates;
66
- }
67
- /**
68
- * Regex to match predefined state references in a string
69
- * Matches @name that is NOT followed by ( or : and is a complete word
70
- * Uses word boundary and negative lookahead
71
- */
72
- const PREDEFINED_STATE_PATTERN = /@([A-Za-z][A-Za-z0-9-]*)(?![A-Za-z0-9-:(])/g;
73
- /**
74
- * Extract predefined state references from a string
75
- */
76
- function extractPredefinedStateRefs(value) {
77
- const matches = value.matchAll(PREDEFINED_STATE_PATTERN);
78
- const refs = [];
79
- for (const match of matches) {
80
- const stateName = "@" + match[1];
81
- if (!BUILTIN_STATES.has(stateName) && !refs.includes(stateName)) refs.push(stateName);
82
- }
83
- return refs;
84
- }
85
- /**
86
- * Extract local predefined states from a styles object
87
- * Local predefined states are top-level keys starting with @ that have string values
88
- * and are valid predefined state names (not built-in like @media, @root, etc.)
89
- */
90
- function extractLocalPredefinedStates(styles) {
91
- const localStates = {};
92
- if (!styles || typeof styles !== "object") return localStates;
93
- for (const [key, value] of Object.entries(styles)) if (key.startsWith("@") && typeof value === "string") {
94
- if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(key)) continue;
95
- if (BUILTIN_STATES.has(key)) continue;
96
- if (key === "@media" || key === "@root" || key === "@own" || key.startsWith("@(")) continue;
97
- const crossRefs = extractPredefinedStateRefs(value);
98
- if (crossRefs.length > 0) {
99
- warnOnce(`local-cross-ref:${key}`, `[Tasty] Predefined state '${key}' references another predefined state '${crossRefs[0]}'.\nPredefined states cannot reference each other. Use the full definition instead.`);
100
- continue;
101
- }
102
- localStates[key] = value;
103
- }
104
- return localStates;
105
- }
106
- /**
107
- * Create a state parser context from styles
108
- */
109
- function createStateParserContext(styles, isSubElement) {
110
- return {
111
- localPredefinedStates: styles ? extractLocalPredefinedStates(styles) : {},
112
- globalPredefinedStates: getGlobalPredefinedStates(),
113
- isSubElement
114
- };
115
- }
116
- /**
117
- * Resolve a predefined state reference to its value
118
- * Returns the resolved value or null if not found
119
- */
120
- function resolvePredefinedState(stateKey, ctx) {
121
- if (ctx.localPredefinedStates[stateKey]) return ctx.localPredefinedStates[stateKey];
122
- if (ctx.globalPredefinedStates[stateKey]) return ctx.globalPredefinedStates[stateKey];
123
- warnOnce(`undefined-state:${stateKey}`, `[Tasty] Undefined predefined state '${stateKey}'.\nDefine it in configure({ states: { '${stateKey}': '...' } }) or in the component's styles.`);
124
- return null;
125
- }
126
- /**
127
- * Expand dimension shorthands in a condition string
128
- * w -> width, h -> height, is -> inline-size, bs -> block-size
129
- */
130
- function expandDimensionShorthands(condition) {
131
- let result = condition;
132
- result = result.replace(/\bw\b/g, "width");
133
- result = result.replace(/\bh\b/g, "height");
134
- result = result.replace(/\bis\b/g, "inline-size");
135
- result = result.replace(/\bbs\b/g, "block-size");
136
- return result;
137
- }
138
- /**
139
- * Convert tasty units in a string (e.g., 40x -> calc(var(--gap) * 40))
140
- */
141
- function expandTastyUnits(value) {
142
- return value.replace(/(\d+(?:\.\d+)?)\s*x\b/g, (_, num) => {
143
- return `calc(var(--gap) * ${num})`;
144
- });
145
- }
146
- /**
147
- * Find the index of the first comma at parentheses depth 0.
148
- * Returns -1 if no top-level comma is found.
149
- * This prevents splitting on commas inside function calls like scroll-state(a, b).
150
- */
151
- function findTopLevelComma(s) {
152
- let depth = 0;
153
- for (let i = 0; i < s.length; i++) if (s[i] === "(") depth++;
154
- else if (s[i] === ")") depth--;
155
- else if (s[i] === "," && depth === 0) return i;
156
- return -1;
157
- }
158
-
159
- //#endregion
160
- export { createStateParserContext, expandDimensionShorthands, expandTastyUnits, extractLocalPredefinedStates, extractPredefinedStateRefs, findTopLevelComma, resolvePredefinedState, setGlobalPredefinedStates };
161
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/states/index.ts"],"sourcesContent":["/**\n * Advanced State Mapping - Predefined States Management\n *\n * This module handles global and local predefined states for the Tasty styling system.\n * See ADVANCED_STATE_MAPPING.md for full specification.\n */\n\nimport { hasStylesGenerated } from '../config';\nimport type { Styles } from '../styles/types';\nimport { isDevEnv } from '../utils/is-dev-env';\n\n/**\n * Parsed advanced state information\n */\nexport interface ParsedAdvancedState {\n type:\n | 'media'\n | 'container'\n | 'root'\n | 'own'\n | 'starting'\n | 'predefined'\n | 'modifier';\n condition: string; // e.g., 'width <= 920px' or 'hovered'\n containerName?: string; // for container queries\n raw: string; // original state key\n mediaType?: string; // for @media:screen, @media:print, etc.\n}\n\n/**\n * Context for state parsing operations\n */\nexport interface StateParserContext {\n localPredefinedStates: Record<string, string>;\n globalPredefinedStates: Record<string, string>;\n isSubElement?: boolean; // true when processing sub-element styles (for @own() validation)\n}\n\n/**\n * At-rule context for CSS generation\n */\nexport interface AtRuleContext {\n media?: string[]; // @media conditions to wrap rule in (merged with 'and')\n container?: { name?: string; condition: string }[]; // @container conditions (nested)\n startingStyle?: boolean;\n rootStates?: string[]; // :root state selectors (e.g., '[data-theme=\"dark\"]')\n negatedRootStates?: string[]; // Negated :root state selectors for non-overlapping rules (e.g., ':not([data-theme=\"dark\"])')\n}\n\n// Built-in state names that cannot be overridden\nconst BUILTIN_STATES = new Set([\n '@starting',\n '@keyframes',\n '@properties',\n '@supports',\n // @inherit is a value (not a key), but reserved here to prevent\n // users from accidentally defining a state named '@inherit'.\n '@inherit',\n]);\n\n// Reserved prefixes that are built-in\nconst RESERVED_PREFIXES = [\n '@media',\n '@root',\n '@own',\n '@(',\n '@starting',\n '@keyframes',\n '@properties',\n '@supports',\n '@inherit',\n];\n\n// Global predefined states storage\nlet globalPredefinedStates: Record<string, string> = {};\n\n// Warnings tracking to avoid duplicates\nconst emittedWarnings = new Set<string>();\n\nconst devMode = isDevEnv();\n\n/**\n * Emit a warning only once\n */\nfunction warnOnce(key: string, message: string): void {\n if (devMode && !emittedWarnings.has(key)) {\n emittedWarnings.add(key);\n console.warn(message);\n }\n}\n\n/**\n * Configure global predefined states\n */\nexport function setGlobalPredefinedStates(\n states: Record<string, string>,\n): void {\n if (hasStylesGenerated()) {\n const newStateNames = Object.keys(states).join(', ');\n warnOnce(\n `dynamic-states:${newStateNames}`,\n `[Tasty] Cannot update predefined states after styles have been generated.\\n` +\n `The new definition(s) for ${newStateNames} will be ignored.`,\n );\n return;\n }\n\n // Validate state names\n for (const [name, value] of Object.entries(states)) {\n // Check for valid name format\n if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(name)) {\n warnOnce(\n `invalid-state-name:${name}`,\n `[Tasty] Invalid predefined state name '${name}'. Must start with '@' followed by a letter.`,\n );\n continue;\n }\n\n // Check for reserved names\n if (BUILTIN_STATES.has(name)) {\n warnOnce(\n `reserved-state:${name}`,\n `[Tasty] Cannot define predefined state '${name}'. This name is reserved for built-in functionality.`,\n );\n continue;\n }\n\n // Check for reserved prefixes (but only exact matches, not user-defined states like @mobile)\n // Reserved prefixes are: @media, @root, @own, @(\n // A user state like @mobile should NOT be blocked\n const isReservedPrefix =\n name === '@media' ||\n name === '@root' ||\n name === '@own' ||\n name.startsWith('@(');\n\n if (isReservedPrefix) {\n warnOnce(\n `reserved-prefix:${name}`,\n `[Tasty] Cannot define predefined state '${name}'. This prefix is reserved for built-in functionality.`,\n );\n continue;\n }\n\n // Check for cross-references\n const crossRefs = extractPredefinedStateRefs(value);\n if (crossRefs.length > 0) {\n warnOnce(\n `cross-ref:${name}`,\n `[Tasty] Predefined state '${name}' references another predefined state '${crossRefs[0]}'.\\n` +\n `Predefined states cannot reference each other. Use the full definition instead.`,\n );\n continue;\n }\n\n // Check for duplicates\n if (\n globalPredefinedStates[name] &&\n globalPredefinedStates[name] !== value\n ) {\n warnOnce(\n `duplicate-state:${name}`,\n `[Tasty] Duplicate predefined state '${name}' in configure(). The last definition will be used.`,\n );\n }\n\n globalPredefinedStates[name] = value;\n }\n}\n\n/**\n * Get global predefined states\n */\nexport function getGlobalPredefinedStates(): Record<string, string> {\n return globalPredefinedStates;\n}\n\n/**\n * Clear global predefined states (for testing only)\n */\nexport function clearGlobalPredefinedStates(): void {\n globalPredefinedStates = {};\n emittedWarnings.clear();\n}\n\n/**\n * Regex to match predefined state references in a string\n * Matches @name that is NOT followed by ( or : and is a complete word\n * Uses word boundary and negative lookahead\n */\nconst PREDEFINED_STATE_PATTERN = /@([A-Za-z][A-Za-z0-9-]*)(?![A-Za-z0-9-:(])/g;\n\n/**\n * Extract predefined state references from a string\n */\nexport function extractPredefinedStateRefs(value: string): string[] {\n const matches = value.matchAll(PREDEFINED_STATE_PATTERN);\n const refs: string[] = [];\n\n for (const match of matches) {\n const stateName = '@' + match[1];\n // Skip built-in states (@starting) and duplicates\n // Note: @media, @root, @own are always followed by '(' so the regex\n // negative lookahead (?![A-Za-z0-9-:(]) already excludes them\n if (!BUILTIN_STATES.has(stateName) && !refs.includes(stateName)) {\n refs.push(stateName);\n }\n }\n\n return refs;\n}\n\n/**\n * Check if a state key is a predefined state reference\n */\nexport function isPredefinedStateRef(stateKey: string): boolean {\n if (!stateKey.startsWith('@')) return false;\n if (BUILTIN_STATES.has(stateKey)) return false;\n\n // Check if it's NOT a built-in prefix\n for (const prefix of RESERVED_PREFIXES) {\n if (stateKey === prefix || stateKey.startsWith(prefix)) {\n // Check if it's exactly @media, @root, @own, or starts with @( or @media(\n if (\n stateKey === '@media' ||\n stateKey.startsWith('@media(') ||\n stateKey.startsWith('@media:')\n ) {\n return false;\n }\n if (stateKey === '@root' || stateKey.startsWith('@root(')) return false;\n if (stateKey === '@own' || stateKey.startsWith('@own(')) return false;\n if (stateKey.startsWith('@(')) return false;\n }\n }\n\n // Must match the predefined state pattern\n return /^@[A-Za-z][A-Za-z0-9-]*$/.test(stateKey);\n}\n\n/**\n * Extract local predefined states from a styles object\n * Local predefined states are top-level keys starting with @ that have string values\n * and are valid predefined state names (not built-in like @media, @root, etc.)\n */\nexport function extractLocalPredefinedStates(\n styles: Styles,\n): Record<string, string> {\n const localStates: Record<string, string> = {};\n\n if (!styles || typeof styles !== 'object') {\n return localStates;\n }\n\n for (const [key, value] of Object.entries(styles)) {\n // Check if it's a predefined state definition (starts with @, has string value)\n if (key.startsWith('@') && typeof value === 'string') {\n // Validate name format - must be @[letter][letters/numbers/dashes]*\n if (!/^@[A-Za-z][A-Za-z0-9-]*$/.test(key)) {\n continue; // Skip invalid names silently (might be something else)\n }\n\n // Skip built-in states\n if (BUILTIN_STATES.has(key)) {\n continue;\n }\n\n // Skip reserved prefixes\n if (\n key === '@media' ||\n key === '@root' ||\n key === '@own' ||\n key.startsWith('@(')\n ) {\n continue;\n }\n\n // Check for cross-references (predefined states cannot reference each other)\n const crossRefs = extractPredefinedStateRefs(value);\n if (crossRefs.length > 0) {\n warnOnce(\n `local-cross-ref:${key}`,\n `[Tasty] Predefined state '${key}' references another predefined state '${crossRefs[0]}'.\\n` +\n `Predefined states cannot reference each other. Use the full definition instead.`,\n );\n continue;\n }\n\n localStates[key] = value;\n }\n }\n\n return localStates;\n}\n\n/**\n * Create a state parser context from styles\n */\nexport function createStateParserContext(\n styles?: Styles,\n isSubElement?: boolean,\n): StateParserContext {\n const localStates = styles ? extractLocalPredefinedStates(styles) : {};\n\n return {\n localPredefinedStates: localStates,\n globalPredefinedStates: getGlobalPredefinedStates(),\n isSubElement,\n };\n}\n\n/**\n * Resolve a predefined state reference to its value\n * Returns the resolved value or null if not found\n */\nexport function resolvePredefinedState(\n stateKey: string,\n ctx: StateParserContext,\n): string | null {\n // Check local first (higher priority)\n if (ctx.localPredefinedStates[stateKey]) {\n return ctx.localPredefinedStates[stateKey];\n }\n\n // Then check global\n if (ctx.globalPredefinedStates[stateKey]) {\n return ctx.globalPredefinedStates[stateKey];\n }\n\n // Not found - emit warning\n warnOnce(\n `undefined-state:${stateKey}`,\n `[Tasty] Undefined predefined state '${stateKey}'.\\n` +\n `Define it in configure({ states: { '${stateKey}': '...' } }) or in the component's styles.`,\n );\n\n return null;\n}\n\n/**\n * Normalize state key by trimming whitespace and removing trailing/leading operators\n */\nexport function normalizeStateKey(stateKey: string): {\n key: string;\n warnings: string[];\n} {\n const warnings: string[] = [];\n let key = stateKey;\n\n // Check for whitespace-only\n if (key.trim() === '') {\n if (key !== '') {\n warnings.push(\n `[Tasty] Whitespace-only state key normalized to default state ''.`,\n );\n }\n return { key: '', warnings };\n }\n\n // Trim whitespace\n key = key.trim();\n\n // Remove trailing operators\n const trailingOpMatch = key.match(/\\s*[&|^]\\s*$/);\n if (trailingOpMatch) {\n const originalKey = key;\n key = key.slice(0, -trailingOpMatch[0].length).trim();\n warnings.push(\n `[Tasty] State key '${originalKey}' has trailing operator. Normalized to '${key}'.`,\n );\n }\n\n // Remove leading operators (except !)\n const leadingOpMatch = key.match(/^\\s*[&|^]\\s*/);\n if (leadingOpMatch) {\n const originalKey = key;\n key = key.slice(leadingOpMatch[0].length).trim();\n warnings.push(\n `[Tasty] State key '${originalKey}' has leading operator. Normalized to '${key}'.`,\n );\n }\n\n return { key, warnings };\n}\n\n/**\n * Expand dimension shorthands in a condition string\n * w -> width, h -> height, is -> inline-size, bs -> block-size\n */\nexport function expandDimensionShorthands(condition: string): string {\n // Replace dimension shorthands (only when they appear as standalone words)\n let result = condition;\n\n // w -> width (but not part of other words)\n result = result.replace(/\\bw\\b/g, 'width');\n\n // h -> height\n result = result.replace(/\\bh\\b/g, 'height');\n\n // is -> inline-size\n result = result.replace(/\\bis\\b/g, 'inline-size');\n\n // bs -> block-size\n result = result.replace(/\\bbs\\b/g, 'block-size');\n\n return result;\n}\n\n/**\n * Convert tasty units in a string (e.g., 40x -> calc(var(--gap) * 40))\n */\nexport function expandTastyUnits(value: string): string {\n // Match number followed by 'x' unit (tasty gap unit)\n return value.replace(/(\\d+(?:\\.\\d+)?)\\s*x\\b/g, (_, num) => {\n return `calc(var(--gap) * ${num})`;\n });\n}\n\n/**\n * Parse an advanced state key and return its type and components\n */\nexport function parseAdvancedState(\n stateKey: string,\n ctx: StateParserContext,\n): ParsedAdvancedState {\n const raw = stateKey;\n\n // Check for @starting (exact match)\n if (stateKey === '@starting') {\n return {\n type: 'starting',\n condition: '',\n raw,\n };\n }\n\n // Check for @media:type (e.g., @media:print)\n if (stateKey.startsWith('@media:')) {\n const mediaType = stateKey.slice(7); // Remove '@media:'\n if (!['all', 'screen', 'print', 'speech'].includes(mediaType)) {\n warnOnce(\n `unknown-media-type:${mediaType}`,\n `[Tasty] Unknown media type '${mediaType}'. Valid types: all, screen, print, speech.`,\n );\n }\n return {\n type: 'media',\n condition: '',\n mediaType,\n raw,\n };\n }\n\n // Check for @media(...) - media query with condition\n if (stateKey.startsWith('@media(')) {\n const endParen = findMatchingParen(stateKey, 6);\n if (endParen === -1) {\n warnOnce(\n `unclosed-media:${stateKey}`,\n `[Tasty] Unclosed media query '${stateKey}'. Missing closing parenthesis.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n let condition = stateKey.slice(7, endParen);\n\n // Check for empty condition\n if (!condition.trim()) {\n warnOnce(\n `empty-media:${stateKey}`,\n `[Tasty] Empty media query condition '${stateKey}'.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n // Expand shorthands and units\n condition = expandDimensionShorthands(condition);\n condition = expandTastyUnits(condition);\n\n return {\n type: 'media',\n condition,\n raw,\n };\n }\n\n // Check for @root(...) - root state\n if (stateKey.startsWith('@root(')) {\n const endParen = findMatchingParen(stateKey, 5);\n if (endParen === -1) {\n warnOnce(\n `unclosed-root:${stateKey}`,\n `[Tasty] Unclosed root state '${stateKey}'. Missing closing parenthesis.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n const condition = stateKey.slice(6, endParen);\n\n if (!condition.trim()) {\n warnOnce(\n `empty-root:${stateKey}`,\n `[Tasty] Empty root state condition '${stateKey}'.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n return {\n type: 'root',\n condition,\n raw,\n };\n }\n\n // Check for @own(...) - sub-element own state\n if (stateKey.startsWith('@own(')) {\n const endParen = findMatchingParen(stateKey, 4);\n if (endParen === -1) {\n warnOnce(\n `unclosed-own:${stateKey}`,\n `[Tasty] Unclosed own state '${stateKey}'. Missing closing parenthesis.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n const condition = stateKey.slice(5, endParen);\n\n if (!condition.trim()) {\n warnOnce(\n `empty-own:${stateKey}`,\n `[Tasty] Empty own state condition '${stateKey}'.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n // Check if used outside sub-element context\n if (!ctx.isSubElement) {\n warnOnce(\n `own-outside-subelement:${stateKey}`,\n `[Tasty] @own(${condition}) used outside sub-element context.\\n` +\n `@own() is equivalent to '${condition}' at the root level. ` +\n `Did you mean to use it inside a sub-element?`,\n );\n // Treat as regular modifier\n return {\n type: 'modifier',\n condition,\n raw,\n };\n }\n\n return {\n type: 'own',\n condition,\n raw,\n };\n }\n\n // Check for @(...) - container query (unnamed or named)\n if (stateKey.startsWith('@(')) {\n const endParen = findMatchingParen(stateKey, 1);\n if (endParen === -1) {\n warnOnce(\n `unclosed-container:${stateKey}`,\n `[Tasty] Unclosed container query '${stateKey}'. Missing closing parenthesis.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n const content = stateKey.slice(2, endParen);\n\n if (!content.trim()) {\n warnOnce(\n `empty-container:${stateKey}`,\n `[Tasty] Empty container query '${stateKey}'.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n\n // Check if named container (first token is name, followed by comma)\n // Use parentheses-aware comma search so inner commas (e.g., scroll-state(a, b)) are skipped\n const commaIndex = findTopLevelComma(content);\n let containerName: string | undefined;\n let condition: string;\n\n if (commaIndex !== -1) {\n // Named container: @(layout, w < 600px)\n containerName = content.slice(0, commaIndex).trim();\n condition = content.slice(commaIndex + 1).trim();\n } else {\n // Unnamed container: @(w < 600px)\n condition = content.trim();\n }\n\n // Check for style query shorthand (starts with $)\n if (condition.startsWith('$')) {\n // Style query: @(layout, $compact) or @(layout, $variant=compact)\n const styleCondition = parseStyleQuery(condition);\n if (!styleCondition) {\n warnOnce(\n `invalid-style-query:${stateKey}`,\n `[Tasty] Invalid style query '${condition}' in container query.`,\n );\n return { type: 'modifier', condition: stateKey, raw };\n }\n condition = styleCondition;\n } else if (/^[a-zA-Z][\\w-]*\\s*\\(/.test(condition)) {\n // Function-like syntax: scroll-state(...), style(...), etc.\n // Pass through verbatim — no dimension expansion needed\n } else {\n // Dimension query - expand shorthands and units\n condition = expandDimensionShorthands(condition);\n condition = expandTastyUnits(condition);\n }\n\n return {\n type: 'container',\n condition,\n containerName,\n raw,\n };\n }\n\n // Check for predefined state reference\n if (isPredefinedStateRef(stateKey)) {\n const resolved = resolvePredefinedState(stateKey, ctx);\n if (resolved) {\n // Recursively parse the resolved value to extract the actual state type\n // (e.g., @mobile -> @media(w < 768px) should become a media state)\n const parsedResolved = parseAdvancedState(resolved, ctx);\n return {\n ...parsedResolved,\n raw, // Keep original raw for traceability\n };\n }\n // If not resolved, treat as modifier (will likely produce invalid CSS)\n return {\n type: 'modifier',\n condition: stateKey,\n raw,\n };\n }\n\n // Regular modifier (boolean mod, pseudo-class, class, attribute)\n return {\n type: 'modifier',\n condition: stateKey,\n raw,\n };\n}\n\n/**\n * Parse a style query condition (e.g., $compact, $variant=compact, $variant=\"very compact\")\n */\nfunction parseStyleQuery(condition: string): string | null {\n // Remove $ prefix\n const query = condition.slice(1);\n\n // Check for comparison operators (not supported)\n if (/[<>]/.test(query)) {\n warnOnce(\n `style-query-comparison:${condition}`,\n `[Tasty] Style queries only support equality. '${condition}' is invalid. Use '${condition.split(/[<>]/)[0]}=...' instead.`,\n );\n return null;\n }\n\n // Check for equality\n const eqIndex = query.indexOf('=');\n if (eqIndex === -1) {\n // Just existence check: style(--compact)\n return `style(--${query})`;\n }\n\n const propName = query.slice(0, eqIndex).trim();\n let value = query.slice(eqIndex + 1).trim();\n\n // Handle quoted values\n if (\n (value.startsWith('\"') && value.endsWith('\"')) ||\n (value.startsWith(\"'\") && value.endsWith(\"'\"))\n ) {\n // Keep quotes for CSS\n } else {\n // Add quotes if needed\n value = `\"${value}\"`;\n }\n\n // Expand tasty units in value\n value = expandTastyUnits(value);\n\n return `style(--${propName}: ${value})`;\n}\n\n/**\n * Find the index of the first comma at parentheses depth 0.\n * Returns -1 if no top-level comma is found.\n * This prevents splitting on commas inside function calls like scroll-state(a, b).\n */\nexport function findTopLevelComma(s: string): number {\n let depth = 0;\n\n for (let i = 0; i < s.length; i++) {\n if (s[i] === '(') depth++;\n else if (s[i] === ')') depth--;\n else if (s[i] === ',' && depth === 0) return i;\n }\n\n return -1;\n}\n\nfunction findMatchingParen(str: string, startIndex: number): number {\n let depth = 1;\n let i = startIndex + 1;\n\n while (i < str.length && depth > 0) {\n if (str[i] === '(') depth++;\n else if (str[i] === ')') depth--;\n i++;\n }\n\n return depth === 0 ? i - 1 : -1;\n}\n\n/**\n * Check if a state key is an advanced state (starts with @)\n */\nexport function isAdvancedState(stateKey: string): boolean {\n return stateKey.startsWith('@') || stateKey.startsWith('!@');\n}\n\n/**\n * Detect the type of advanced state from a raw state key\n */\nexport function detectAdvancedStateType(\n stateKey: string,\n): ParsedAdvancedState['type'] {\n // Handle negation prefix\n const key = stateKey.startsWith('!') ? stateKey.slice(1) : stateKey;\n\n if (key === '@starting') return 'starting';\n if (key.startsWith('@media')) return 'media';\n if (key.startsWith('@root(')) return 'root';\n if (key.startsWith('@own(')) return 'own';\n if (key.startsWith('@(')) return 'container';\n if (isPredefinedStateRef(key)) return 'predefined';\n return 'modifier';\n}\n"],"mappings":";;;;;;;;;;AAkDA,MAAM,iBAAiB,IAAI,IAAI;CAC7B;CACA;CACA;CACA;CAGA;CACD,CAAC;AAgBF,IAAI,yBAAiD,EAAE;AAGvD,MAAM,kCAAkB,IAAI,KAAa;AAEzC,MAAM,UAAU,UAAU;;;;AAK1B,SAAS,SAAS,KAAa,SAAuB;AACpD,KAAI,WAAW,CAAC,gBAAgB,IAAI,IAAI,EAAE;AACxC,kBAAgB,IAAI,IAAI;AACxB,UAAQ,KAAK,QAAQ;;;;;;AAOzB,SAAgB,0BACd,QACM;AACN,KAAI,oBAAoB,EAAE;EACxB,MAAM,gBAAgB,OAAO,KAAK,OAAO,CAAC,KAAK,KAAK;AACpD,WACE,kBAAkB,iBAClB,wGAC+B,cAAc,mBAC9C;AACD;;AAIF,MAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,OAAO,EAAE;AAElD,MAAI,CAAC,2BAA2B,KAAK,KAAK,EAAE;AAC1C,YACE,sBAAsB,QACtB,0CAA0C,KAAK,8CAChD;AACD;;AAIF,MAAI,eAAe,IAAI,KAAK,EAAE;AAC5B,YACE,kBAAkB,QAClB,2CAA2C,KAAK,sDACjD;AACD;;AAYF,MALE,SAAS,YACT,SAAS,WACT,SAAS,UACT,KAAK,WAAW,KAAK,EAED;AACpB,YACE,mBAAmB,QACnB,2CAA2C,KAAK,wDACjD;AACD;;EAIF,MAAM,YAAY,2BAA2B,MAAM;AACnD,MAAI,UAAU,SAAS,GAAG;AACxB,YACE,aAAa,QACb,6BAA6B,KAAK,yCAAyC,UAAU,GAAG,qFAEzF;AACD;;AAIF,MACE,uBAAuB,SACvB,uBAAuB,UAAU,MAEjC,UACE,mBAAmB,QACnB,uCAAuC,KAAK,qDAC7C;AAGH,yBAAuB,QAAQ;;;;;;AAOnC,SAAgB,4BAAoD;AAClE,QAAO;;;;;;;AAgBT,MAAM,2BAA2B;;;;AAKjC,SAAgB,2BAA2B,OAAyB;CAClE,MAAM,UAAU,MAAM,SAAS,yBAAyB;CACxD,MAAM,OAAiB,EAAE;AAEzB,MAAK,MAAM,SAAS,SAAS;EAC3B,MAAM,YAAY,MAAM,MAAM;AAI9B,MAAI,CAAC,eAAe,IAAI,UAAU,IAAI,CAAC,KAAK,SAAS,UAAU,CAC7D,MAAK,KAAK,UAAU;;AAIxB,QAAO;;;;;;;AAoCT,SAAgB,6BACd,QACwB;CACxB,MAAM,cAAsC,EAAE;AAE9C,KAAI,CAAC,UAAU,OAAO,WAAW,SAC/B,QAAO;AAGT,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAE/C,KAAI,IAAI,WAAW,IAAI,IAAI,OAAO,UAAU,UAAU;AAEpD,MAAI,CAAC,2BAA2B,KAAK,IAAI,CACvC;AAIF,MAAI,eAAe,IAAI,IAAI,CACzB;AAIF,MACE,QAAQ,YACR,QAAQ,WACR,QAAQ,UACR,IAAI,WAAW,KAAK,CAEpB;EAIF,MAAM,YAAY,2BAA2B,MAAM;AACnD,MAAI,UAAU,SAAS,GAAG;AACxB,YACE,mBAAmB,OACnB,6BAA6B,IAAI,yCAAyC,UAAU,GAAG,qFAExF;AACD;;AAGF,cAAY,OAAO;;AAIvB,QAAO;;;;;AAMT,SAAgB,yBACd,QACA,cACoB;AAGpB,QAAO;EACL,uBAHkB,SAAS,6BAA6B,OAAO,GAAG,EAAE;EAIpE,wBAAwB,2BAA2B;EACnD;EACD;;;;;;AAOH,SAAgB,uBACd,UACA,KACe;AAEf,KAAI,IAAI,sBAAsB,UAC5B,QAAO,IAAI,sBAAsB;AAInC,KAAI,IAAI,uBAAuB,UAC7B,QAAO,IAAI,uBAAuB;AAIpC,UACE,mBAAmB,YACnB,uCAAuC,SAAS,0CACP,SAAS,6CACnD;AAED,QAAO;;;;;;AAqDT,SAAgB,0BAA0B,WAA2B;CAEnE,IAAI,SAAS;AAGb,UAAS,OAAO,QAAQ,UAAU,QAAQ;AAG1C,UAAS,OAAO,QAAQ,UAAU,SAAS;AAG3C,UAAS,OAAO,QAAQ,WAAW,cAAc;AAGjD,UAAS,OAAO,QAAQ,WAAW,aAAa;AAEhD,QAAO;;;;;AAMT,SAAgB,iBAAiB,OAAuB;AAEtD,QAAO,MAAM,QAAQ,2BAA2B,GAAG,QAAQ;AACzD,SAAO,qBAAqB,IAAI;GAChC;;;;;;;AA4RJ,SAAgB,kBAAkB,GAAmB;CACnD,IAAI,QAAQ;AAEZ,MAAK,IAAI,IAAI,GAAG,IAAI,EAAE,QAAQ,IAC5B,KAAI,EAAE,OAAO,IAAK;UACT,EAAE,OAAO,IAAK;UACd,EAAE,OAAO,OAAO,UAAU,EAAG,QAAO;AAG/C,QAAO"}
@@ -1,14 +0,0 @@
1
- //#region src/styles/align.ts
2
- function alignStyle({ align }) {
3
- if (typeof align !== "string") return;
4
- if (!align) return;
5
- return {
6
- "align-items": align,
7
- "align-content": align
8
- };
9
- }
10
- alignStyle.__lookupStyles = ["align"];
11
-
12
- //#endregion
13
- export { alignStyle };
14
- //# sourceMappingURL=align.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"align.mjs","names":[],"sources":["../../src/styles/align.ts"],"sourcesContent":["export function alignStyle({ align }) {\n if (typeof align !== 'string') return;\n\n if (!align) return;\n\n return {\n 'align-items': align,\n 'align-content': align,\n };\n}\n\nalignStyle.__lookupStyles = ['align'];\n"],"mappings":";AAAA,SAAgB,WAAW,EAAE,SAAS;AACpC,KAAI,OAAO,UAAU,SAAU;AAE/B,KAAI,CAAC,MAAO;AAEZ,QAAO;EACL,eAAe;EACf,iBAAiB;EAClB;;AAGH,WAAW,iBAAiB,CAAC,QAAQ"}
@@ -1,114 +0,0 @@
1
- import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.mjs";
2
-
3
- //#region src/styles/border.ts
4
- const BORDER_STYLES = [
5
- "none",
6
- "hidden",
7
- "dotted",
8
- "dashed",
9
- "solid",
10
- "double",
11
- "groove",
12
- "ridge",
13
- "inset",
14
- "outset"
15
- ];
16
- /**
17
- * Process a single group and return border values for its directions.
18
- * @returns Object with directions as keys and border values, or null for "all directions"
19
- */
20
- function processGroup(group) {
21
- const { values, mods, colors } = group;
22
- const directions = filterMods(mods, DIRECTIONS);
23
- const typeMods = filterMods(mods, BORDER_STYLES);
24
- return {
25
- directions,
26
- borderValue: {
27
- width: values[0] || "var(--border-width)",
28
- style: typeMods[0] || "solid",
29
- color: colors?.[0] || "var(--border-color)"
30
- }
31
- };
32
- }
33
- /**
34
- * Format a border value to CSS string.
35
- */
36
- function formatBorderValue(value) {
37
- return `${value.width} ${value.style} ${value.color}`;
38
- }
39
- /**
40
- * Border style handler with multi-group support.
41
- *
42
- * Single group (backward compatible):
43
- * - `border="1bw solid #red"` - all sides
44
- * - `border="1bw solid #red top left"` - only top and left
45
- *
46
- * Multi-group (new):
47
- * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
48
- * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
49
- *
50
- * Later groups override earlier groups for conflicting directions.
51
- */
52
- function borderStyle({ border }) {
53
- if (!border && border !== 0) return;
54
- if (border === true) border = "1bw";
55
- const groups = parseStyle(String(border)).groups ?? [];
56
- if (!groups.length) return;
57
- if (groups.length === 1) {
58
- const { directions, borderValue } = processGroup({
59
- values: groups[0].values ?? [],
60
- mods: groups[0].mods ?? [],
61
- colors: groups[0].colors ?? []
62
- });
63
- const styleValue = formatBorderValue(borderValue);
64
- if (!directions.length) return { border: styleValue };
65
- const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;
66
- return DIRECTIONS.reduce((styles, dir) => {
67
- if (directions.includes(dir)) styles[`border-${dir}`] = styleValue;
68
- else styles[`border-${dir}`] = zeroValue;
69
- return styles;
70
- }, {});
71
- }
72
- let hasAnyDirections = false;
73
- const directionMap = {
74
- top: null,
75
- right: null,
76
- bottom: null,
77
- left: null
78
- };
79
- let allDirectionsValue = null;
80
- for (const group of groups) {
81
- const { directions, borderValue } = processGroup({
82
- values: group.values ?? [],
83
- mods: group.mods ?? [],
84
- colors: group.colors ?? []
85
- });
86
- if (directions.length === 0) {
87
- allDirectionsValue = borderValue;
88
- for (const dir of DIRECTIONS) directionMap[dir] = borderValue;
89
- } else {
90
- hasAnyDirections = true;
91
- for (const dir of directions) directionMap[dir] = borderValue;
92
- }
93
- }
94
- if (!hasAnyDirections && allDirectionsValue) return { border: formatBorderValue(allDirectionsValue) };
95
- const result = {};
96
- for (const dir of DIRECTIONS) {
97
- const value = directionMap[dir];
98
- if (value) result[`border-${dir}`] = formatBorderValue(value);
99
- else {
100
- const fallback = allDirectionsValue || {
101
- width: "0",
102
- style: "solid",
103
- color: "var(--border-color)"
104
- };
105
- result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;
106
- }
107
- }
108
- return result;
109
- }
110
- borderStyle.__lookupStyles = ["border"];
111
-
112
- //#endregion
113
- export { borderStyle };
114
- //# sourceMappingURL=border.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"border.mjs","names":[],"sources":["../../src/styles/border.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n 'none',\n 'hidden',\n 'dotted',\n 'dashed',\n 'solid',\n 'double',\n 'groove',\n 'ridge',\n 'inset',\n 'outset',\n] as const;\n\ntype Direction = (typeof DIRECTIONS)[number];\n\ninterface GroupData {\n values: string[];\n mods: string[];\n colors: string[];\n}\n\ninterface BorderValue {\n width: string;\n style: string;\n color: string;\n}\n\n/**\n * Process a single group and return border values for its directions.\n * @returns Object with directions as keys and border values, or null for \"all directions\"\n */\nfunction processGroup(group: GroupData): {\n directions: Direction[];\n borderValue: BorderValue;\n} {\n const { values, mods, colors } = group;\n\n const directions = filterMods(mods, DIRECTIONS) as Direction[];\n const typeMods = filterMods(mods, BORDER_STYLES);\n\n const width = values[0] || 'var(--border-width)';\n const style = typeMods[0] || 'solid';\n const color = colors?.[0] || 'var(--border-color)';\n\n return {\n directions,\n borderValue: { width, style, color },\n };\n}\n\n/**\n * Format a border value to CSS string.\n */\nfunction formatBorderValue(value: BorderValue): string {\n return `${value.width} ${value.style} ${value.color}`;\n}\n\n/**\n * Border style handler with multi-group support.\n *\n * Single group (backward compatible):\n * - `border=\"1bw solid #red\"` - all sides\n * - `border=\"1bw solid #red top left\"` - only top and left\n *\n * Multi-group (new):\n * - `border=\"1bw #red, 2bw #blue top\"` - all sides red 1bw, then top overridden to blue 2bw\n * - `border=\"1bw, dashed top bottom, #purple left right\"` - base 1bw, dashed on top/bottom, purple on left/right\n *\n * Later groups override earlier groups for conflicting directions.\n */\nexport function borderStyle({ border }) {\n if (!border && border !== 0) return;\n\n if (border === true) border = '1bw';\n\n const processed = parseStyle(String(border));\n const groups: GroupData[] = processed.groups ?? [];\n\n if (!groups.length) return;\n\n // Single group - use original logic for backward compatibility\n if (groups.length === 1) {\n const { directions, borderValue } = processGroup({\n values: groups[0].values ?? [],\n mods: groups[0].mods ?? [],\n colors: groups[0].colors ?? [],\n });\n\n const styleValue = formatBorderValue(borderValue);\n\n if (!directions.length) {\n return { border: styleValue };\n }\n\n const zeroValue = `0 ${borderValue.style} ${borderValue.color}`;\n\n return DIRECTIONS.reduce(\n (styles, dir) => {\n if (directions.includes(dir)) {\n styles[`border-${dir}`] = styleValue;\n } else {\n styles[`border-${dir}`] = zeroValue;\n }\n return styles;\n },\n {} as Record<string, string>,\n );\n }\n\n // Multi-group - process groups in order, later groups override earlier\n // Track whether any group specifies directions\n let hasAnyDirections = false;\n\n // Build a map of direction -> border value\n // Start with undefined (no border set)\n const directionMap: Record<Direction, BorderValue | null> = {\n top: null,\n right: null,\n bottom: null,\n left: null,\n };\n\n // Track the last \"all directions\" value for fallback\n let allDirectionsValue: BorderValue | null = null;\n\n // Process groups in order (first to last)\n for (const group of groups) {\n const { directions, borderValue } = processGroup({\n values: group.values ?? [],\n mods: group.mods ?? [],\n colors: group.colors ?? [],\n });\n\n if (directions.length === 0) {\n // No specific directions - applies to all\n allDirectionsValue = borderValue;\n // Set all directions\n for (const dir of DIRECTIONS) {\n directionMap[dir] = borderValue;\n }\n } else {\n // Specific directions - override only those\n hasAnyDirections = true;\n for (const dir of directions) {\n directionMap[dir] = borderValue;\n }\n }\n }\n\n // If no group specified any directions and we have an all-directions value,\n // return the simple `border` shorthand\n if (!hasAnyDirections && allDirectionsValue) {\n return { border: formatBorderValue(allDirectionsValue) };\n }\n\n // Otherwise, output individual border-* properties\n const result: Record<string, string> = {};\n\n for (const dir of DIRECTIONS) {\n const value = directionMap[dir];\n if (value) {\n result[`border-${dir}`] = formatBorderValue(value);\n } else {\n // No border for this direction - set to 0\n // Use the last all-directions value for style/color consistency, or defaults\n const fallback = allDirectionsValue || {\n width: '0',\n style: 'solid',\n color: 'var(--border-color)',\n };\n result[`border-${dir}`] = `0 ${fallback.style} ${fallback.color}`;\n }\n }\n\n return result;\n}\n\nborderStyle.__lookupStyles = ['border'];\n"],"mappings":";;;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;AAoBD,SAAS,aAAa,OAGpB;CACA,MAAM,EAAE,QAAQ,MAAM,WAAW;CAEjC,MAAM,aAAa,WAAW,MAAM,WAAW;CAC/C,MAAM,WAAW,WAAW,MAAM,cAAc;AAMhD,QAAO;EACL;EACA,aAAa;GAAE,OANH,OAAO,MAAM;GAMH,OALV,SAAS,MAAM;GAKE,OAJjB,SAAS,MAAM;GAIS;EACrC;;;;;AAMH,SAAS,kBAAkB,OAA4B;AACrD,QAAO,GAAG,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,MAAM;;;;;;;;;;;;;;;AAgBhD,SAAgB,YAAY,EAAE,UAAU;AACtC,KAAI,CAAC,UAAU,WAAW,EAAG;AAE7B,KAAI,WAAW,KAAM,UAAS;CAG9B,MAAM,SADY,WAAW,OAAO,OAAO,CAAC,CACN,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ;AAGpB,KAAI,OAAO,WAAW,GAAG;EACvB,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC9B,MAAM,OAAO,GAAG,QAAQ,EAAE;GAC1B,QAAQ,OAAO,GAAG,UAAU,EAAE;GAC/B,CAAC;EAEF,MAAM,aAAa,kBAAkB,YAAY;AAEjD,MAAI,CAAC,WAAW,OACd,QAAO,EAAE,QAAQ,YAAY;EAG/B,MAAM,YAAY,KAAK,YAAY,MAAM,GAAG,YAAY;AAExD,SAAO,WAAW,QACf,QAAQ,QAAQ;AACf,OAAI,WAAW,SAAS,IAAI,CAC1B,QAAO,UAAU,SAAS;OAE1B,QAAO,UAAU,SAAS;AAE5B,UAAO;KAET,EAAE,CACH;;CAKH,IAAI,mBAAmB;CAIvB,MAAM,eAAsD;EAC1D,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;CAGD,IAAI,qBAAyC;AAG7C,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,EAAE,YAAY,gBAAgB,aAAa;GAC/C,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,CAAC;AAEF,MAAI,WAAW,WAAW,GAAG;AAE3B,wBAAqB;AAErB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;SAEjB;AAEL,sBAAmB;AACnB,QAAK,MAAM,OAAO,WAChB,cAAa,OAAO;;;AAO1B,KAAI,CAAC,oBAAoB,mBACvB,QAAO,EAAE,QAAQ,kBAAkB,mBAAmB,EAAE;CAI1D,MAAM,SAAiC,EAAE;AAEzC,MAAK,MAAM,OAAO,YAAY;EAC5B,MAAM,QAAQ,aAAa;AAC3B,MAAI,MACF,QAAO,UAAU,SAAS,kBAAkB,MAAM;OAC7C;GAGL,MAAM,WAAW,sBAAsB;IACrC,OAAO;IACP,OAAO;IACP,OAAO;IACR;AACD,UAAO,UAAU,SAAS,KAAK,SAAS,MAAM,GAAG,SAAS;;;AAI9D,QAAO;;AAGT,YAAY,iBAAiB,CAAC,SAAS"}
@@ -1,23 +0,0 @@
1
- import { parseColor } from "../utils/styles.mjs";
2
- import { convertColorChainToRgbChain } from "./createStyle.mjs";
3
-
4
- //#region src/styles/color.ts
5
- function colorStyle({ color }) {
6
- if (!color) return;
7
- if (color === true) color = "currentColor";
8
- if (typeof color === "string" && (color.startsWith("#") || color.startsWith("(#"))) color = parseColor(color).color || color;
9
- const match = color.match(/var\(--(.+?)-color/);
10
- let name = "";
11
- if (match) name = match[1];
12
- const styles = { color };
13
- if (name && name !== "current") Object.assign(styles, {
14
- "--current-color": color,
15
- "--current-color-rgb": convertColorChainToRgbChain(color)
16
- });
17
- return styles;
18
- }
19
- colorStyle.__lookupStyles = ["color"];
20
-
21
- //#endregion
22
- export { colorStyle };
23
- //# sourceMappingURL=color.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"color.mjs","names":[],"sources":["../../src/styles/color.ts"],"sourcesContent":["import { parseColor } from '../utils/styles';\n\nimport { convertColorChainToRgbChain } from './createStyle';\n\nexport function colorStyle({ color }) {\n if (!color) return;\n\n if (color === true) color = 'currentColor';\n\n // Handle color values that need parsing:\n // - Simple color tokens: #placeholder\n // - Color fallback syntax: (#placeholder, #dark-04)\n if (\n typeof color === 'string' &&\n (color.startsWith('#') || color.startsWith('(#'))\n ) {\n color = parseColor(color).color || color;\n }\n\n const match = color.match(/var\\(--(.+?)-color/);\n let name = '';\n\n if (match) {\n name = match[1];\n }\n\n const styles = {\n color: color,\n };\n\n if (name && name !== 'current') {\n Object.assign(styles, {\n '--current-color': color,\n '--current-color-rgb': convertColorChainToRgbChain(color),\n });\n }\n\n return styles;\n}\n\ncolorStyle.__lookupStyles = ['color'];\n"],"mappings":";;;;AAIA,SAAgB,WAAW,EAAE,SAAS;AACpC,KAAI,CAAC,MAAO;AAEZ,KAAI,UAAU,KAAM,SAAQ;AAK5B,KACE,OAAO,UAAU,aAChB,MAAM,WAAW,IAAI,IAAI,MAAM,WAAW,KAAK,EAEhD,SAAQ,WAAW,MAAM,CAAC,SAAS;CAGrC,MAAM,QAAQ,MAAM,MAAM,qBAAqB;CAC/C,IAAI,OAAO;AAEX,KAAI,MACF,QAAO,MAAM;CAGf,MAAM,SAAS,EACN,OACR;AAED,KAAI,QAAQ,SAAS,UACnB,QAAO,OAAO,QAAQ;EACpB,mBAAmB;EACnB,uBAAuB,4BAA4B,MAAM;EAC1D,CAAC;AAGJ,QAAO;;AAGT,WAAW,iBAAiB,CAAC,QAAQ"}
@@ -1,77 +0,0 @@
1
- import { getRgbValuesFromRgbaString, normalizeColorTokenValue, parseColor, parseStyle, strToRgb } from "../utils/styles.mjs";
2
- import { toSnakeCase } from "../utils/string.mjs";
3
-
4
- //#region src/styles/createStyle.ts
5
- const CACHE = {};
6
- /**
7
- * Convert color fallback chain to RGB fallback chain.
8
- * Example: var(--primary-color, var(--secondary-color)) → var(--primary-color-rgb, var(--secondary-color-rgb))
9
- */
10
- function convertColorChainToRgbChain(colorValue) {
11
- const rgbVarMatch = colorValue.match(/^rgba?\(\s*(var\(--[a-z0-9-]+-color-rgb\))\s*\//);
12
- if (rgbVarMatch) return rgbVarMatch[1];
13
- const match = colorValue.match(/var\(--([a-z0-9-]+)-color\s*(?:,\s*(.+))?\)/);
14
- if (!match) {
15
- if (colorValue.startsWith("rgb(") || colorValue.startsWith("rgba(")) return colorValue;
16
- const rgba = strToRgb(colorValue);
17
- if (rgba) return getRgbValuesFromRgbaString(rgba).join(" ");
18
- return colorValue;
19
- }
20
- const [, name, fallback] = match;
21
- if (!fallback) return `var(--${name}-color-rgb)`;
22
- return `var(--${name}-color-rgb, ${convertColorChainToRgbChain(fallback.trim())})`;
23
- }
24
- function createStyle(styleName, cssStyle, converter) {
25
- const key = `${styleName}.${cssStyle ?? ""}`;
26
- if (!CACHE[key]) {
27
- const styleHandler = (styleMap) => {
28
- let styleValue = styleMap[styleName];
29
- if (styleValue == null || styleValue === false) return;
30
- let finalCssStyle;
31
- const isColorToken = !cssStyle && typeof styleName === "string" && styleName.startsWith("#");
32
- if (isColorToken) finalCssStyle = `--${toSnakeCase(styleName.slice(1)).replace(/^-+/, "")}-color`;
33
- else finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\$/, "--");
34
- if (isColorToken) {
35
- const normalized = normalizeColorTokenValue(styleValue);
36
- if (normalized === null) return;
37
- styleValue = normalized;
38
- }
39
- if (converter && typeof styleValue !== "string") {
40
- styleValue = converter(styleValue);
41
- if (!styleValue) return;
42
- }
43
- if (typeof styleValue === "string" && finalCssStyle.startsWith("--") && finalCssStyle.endsWith("-color")) {
44
- styleValue = styleValue.trim();
45
- const rgba = strToRgb(styleValue);
46
- const { color, name } = parseColor(styleValue);
47
- if (name && rgba) return {
48
- [finalCssStyle]: `var(--${name}-color, ${rgba})`,
49
- [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb, ${getRgbValuesFromRgbaString(rgba).join(" ")})`
50
- };
51
- else if (name) {
52
- if (color) return {
53
- [finalCssStyle]: color,
54
- [`${finalCssStyle}-rgb`]: convertColorChainToRgbChain(color)
55
- };
56
- return {
57
- [finalCssStyle]: `var(--${name}-color)`,
58
- [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb)`
59
- };
60
- } else if (rgba) return {
61
- [finalCssStyle]: rgba,
62
- [`${finalCssStyle}-rgb`]: getRgbValuesFromRgbaString(rgba).join(" ")
63
- };
64
- return { [finalCssStyle]: color };
65
- }
66
- const processed = parseStyle(styleValue);
67
- return { [finalCssStyle]: processed.output };
68
- };
69
- styleHandler.__lookupStyles = [styleName];
70
- CACHE[key] = styleHandler;
71
- }
72
- return CACHE[key];
73
- }
74
-
75
- //#endregion
76
- export { convertColorChainToRgbChain, createStyle };
77
- //# sourceMappingURL=createStyle.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createStyle.mjs","names":[],"sources":["../../src/styles/createStyle.ts"],"sourcesContent":["import { toSnakeCase } from '../utils/string';\nimport {\n getRgbValuesFromRgbaString,\n normalizeColorTokenValue,\n parseColor,\n parseStyle,\n strToRgb,\n} from '../utils/styles';\nimport type { StyleValue } from '../utils/styles';\n\nconst CACHE = {};\n\n/**\n * Convert color fallback chain to RGB fallback chain.\n * Example: var(--primary-color, var(--secondary-color)) → var(--primary-color-rgb, var(--secondary-color-rgb))\n */\nexport function convertColorChainToRgbChain(colorValue: string): string {\n // Handle rgb(var(--name-color-rgb) / alpha) pattern.\n // When #name.opacity is parsed, the classifier produces rgb(var(--name-color-rgb) / .opacity).\n // The RGB chain should be just the inner var() reference, without the rgb() wrapper and opacity.\n const rgbVarMatch = colorValue.match(\n /^rgba?\\(\\s*(var\\(--[a-z0-9-]+-color-rgb\\))\\s*\\//,\n );\n if (rgbVarMatch) {\n return rgbVarMatch[1];\n }\n\n // Match var(--name-color, ...) pattern\n const varPattern = /var\\(--([a-z0-9-]+)-color\\s*(?:,\\s*(.+))?\\)/;\n const match = colorValue.match(varPattern);\n\n if (!match) {\n // Not a color variable, check if it's a color function or literal\n if (colorValue.startsWith('rgb(') || colorValue.startsWith('rgba(')) {\n return colorValue;\n }\n // Try to convert to RGB if possible\n const rgba = strToRgb(colorValue);\n if (rgba) {\n const rgbValues = getRgbValuesFromRgbaString(rgba);\n return rgbValues.join(' ');\n }\n return colorValue;\n }\n\n const [, name, fallback] = match;\n\n if (!fallback) {\n // Simple var without fallback\n return `var(--${name}-color-rgb)`;\n }\n\n // Recursively process the fallback\n const processedFallback = convertColorChainToRgbChain(fallback.trim());\n return `var(--${name}-color-rgb, ${processedFallback})`;\n}\n\nexport function createStyle(\n styleName: string,\n cssStyle?: string,\n converter?: (styleValue: string | number | true) => string | undefined,\n) {\n const key = `${styleName}.${cssStyle ?? ''}`;\n\n if (!CACHE[key]) {\n const styleHandler = (styleMap) => {\n let styleValue = styleMap[styleName];\n\n if (styleValue == null || styleValue === false) return;\n\n // Map style name to final CSS property.\n // - \"$foo\" → \"--foo\"\n // - \"#name\" → \"--name-color\" (alternative color definition syntax)\n let finalCssStyle: string;\n const isColorToken =\n !cssStyle && typeof styleName === 'string' && styleName.startsWith('#');\n\n if (isColorToken) {\n const raw = styleName.slice(1);\n // Convert camelCase to kebab and remove possible leading dash from uppercase start\n const name = toSnakeCase(raw).replace(/^-+/, '');\n finalCssStyle = `--${name}-color`;\n } else {\n finalCssStyle = cssStyle || toSnakeCase(styleName).replace(/^\\$/, '--');\n }\n\n // For color tokens, normalize boolean values (true → 'transparent', false → skip)\n if (isColorToken) {\n const normalized = normalizeColorTokenValue(styleValue);\n if (normalized === null) return; // Skip false values\n styleValue = normalized;\n }\n\n // convert non-string values\n if (converter && typeof styleValue !== 'string') {\n styleValue = converter(styleValue);\n\n if (!styleValue) return;\n }\n\n if (\n typeof styleValue === 'string' &&\n finalCssStyle.startsWith('--') &&\n finalCssStyle.endsWith('-color')\n ) {\n styleValue = styleValue.trim();\n\n const rgba = strToRgb(styleValue);\n\n const { color, name } = parseColor(styleValue);\n\n if (name && rgba) {\n return {\n [finalCssStyle]: `var(--${name}-color, ${rgba})`,\n [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb, ${getRgbValuesFromRgbaString(\n rgba,\n ).join(' ')})`,\n };\n } else if (name) {\n if (color) {\n return {\n [finalCssStyle]: color,\n [`${finalCssStyle}-rgb`]: convertColorChainToRgbChain(color),\n };\n }\n\n return {\n [finalCssStyle]: `var(--${name}-color)`,\n [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb)`,\n };\n } else if (rgba) {\n return {\n [finalCssStyle]: rgba,\n [`${finalCssStyle}-rgb`]:\n getRgbValuesFromRgbaString(rgba).join(' '),\n };\n }\n\n return {\n [finalCssStyle]: color,\n };\n }\n\n const processed = parseStyle(styleValue as StyleValue);\n return { [finalCssStyle]: processed.output };\n };\n\n styleHandler.__lookupStyles = [styleName];\n\n CACHE[key] = styleHandler;\n }\n\n return CACHE[key];\n}\n"],"mappings":";;;;AAUA,MAAM,QAAQ,EAAE;;;;;AAMhB,SAAgB,4BAA4B,YAA4B;CAItE,MAAM,cAAc,WAAW,MAC7B,kDACD;AACD,KAAI,YACF,QAAO,YAAY;CAKrB,MAAM,QAAQ,WAAW,MADN,8CACuB;AAE1C,KAAI,CAAC,OAAO;AAEV,MAAI,WAAW,WAAW,OAAO,IAAI,WAAW,WAAW,QAAQ,CACjE,QAAO;EAGT,MAAM,OAAO,SAAS,WAAW;AACjC,MAAI,KAEF,QADkB,2BAA2B,KAAK,CACjC,KAAK,IAAI;AAE5B,SAAO;;CAGT,MAAM,GAAG,MAAM,YAAY;AAE3B,KAAI,CAAC,SAEH,QAAO,SAAS,KAAK;AAKvB,QAAO,SAAS,KAAK,cADK,4BAA4B,SAAS,MAAM,CAAC,CACjB;;AAGvD,SAAgB,YACd,WACA,UACA,WACA;CACA,MAAM,MAAM,GAAG,UAAU,GAAG,YAAY;AAExC,KAAI,CAAC,MAAM,MAAM;EACf,MAAM,gBAAgB,aAAa;GACjC,IAAI,aAAa,SAAS;AAE1B,OAAI,cAAc,QAAQ,eAAe,MAAO;GAKhD,IAAI;GACJ,MAAM,eACJ,CAAC,YAAY,OAAO,cAAc,YAAY,UAAU,WAAW,IAAI;AAEzE,OAAI,aAIF,iBAAgB,KADH,YAFD,UAAU,MAAM,EAAE,CAED,CAAC,QAAQ,OAAO,GAAG,CACtB;OAE1B,iBAAgB,YAAY,YAAY,UAAU,CAAC,QAAQ,OAAO,KAAK;AAIzE,OAAI,cAAc;IAChB,MAAM,aAAa,yBAAyB,WAAW;AACvD,QAAI,eAAe,KAAM;AACzB,iBAAa;;AAIf,OAAI,aAAa,OAAO,eAAe,UAAU;AAC/C,iBAAa,UAAU,WAAW;AAElC,QAAI,CAAC,WAAY;;AAGnB,OACE,OAAO,eAAe,YACtB,cAAc,WAAW,KAAK,IAC9B,cAAc,SAAS,SAAS,EAChC;AACA,iBAAa,WAAW,MAAM;IAE9B,MAAM,OAAO,SAAS,WAAW;IAEjC,MAAM,EAAE,OAAO,SAAS,WAAW,WAAW;AAE9C,QAAI,QAAQ,KACV,QAAO;MACJ,gBAAgB,SAAS,KAAK,UAAU,KAAK;MAC7C,GAAG,cAAc,QAAQ,SAAS,KAAK,cAAc,2BACpD,KACD,CAAC,KAAK,IAAI,CAAC;KACb;aACQ,MAAM;AACf,SAAI,MACF,QAAO;OACJ,gBAAgB;OAChB,GAAG,cAAc,QAAQ,4BAA4B,MAAM;MAC7D;AAGH,YAAO;OACJ,gBAAgB,SAAS,KAAK;OAC9B,GAAG,cAAc,QAAQ,SAAS,KAAK;MACzC;eACQ,KACT,QAAO;MACJ,gBAAgB;MAChB,GAAG,cAAc,QAChB,2BAA2B,KAAK,CAAC,KAAK,IAAI;KAC7C;AAGH,WAAO,GACJ,gBAAgB,OAClB;;GAGH,MAAM,YAAY,WAAW,WAAyB;AACtD,UAAO,GAAG,gBAAgB,UAAU,QAAQ;;AAG9C,eAAa,iBAAiB,CAAC,UAAU;AAEzC,QAAM,OAAO;;AAGf,QAAO,MAAM"}
@@ -1,97 +0,0 @@
1
- import { makeEmptyDetails } from "../parser/types.mjs";
2
- import { parseStyle } from "../utils/styles.mjs";
3
-
4
- //#region src/styles/dimension.ts
5
- const DEFAULT_MIN_SIZE = "var(--gap)";
6
- const DEFAULT_MAX_SIZE = "100%";
7
- /**
8
- * Parse a dimension value (string, number, or boolean) into a CSS value
9
- */
10
- function parseDimensionValue(val) {
11
- if (val == null) return null;
12
- if (typeof val === "number") return `${val}px`;
13
- if (val === true) return "initial";
14
- return parseStyle(String(val)).groups[0]?.values[0] || null;
15
- }
16
- /**
17
- * Creates a dimension style handler for width or height.
18
- *
19
- * Supports:
20
- * - Main dimension prop (width/height) with syntax for min/max
21
- * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
22
- *
23
- * Priority: Individual min/max props override values from main prop syntax
24
- */
25
- function dimensionStyle(name) {
26
- const minStyle = `min-${name}`;
27
- const maxStyle = `max-${name}`;
28
- return ({ value, min, max }) => {
29
- if (value == null && min == null && max == null) return;
30
- if (value === true) {
31
- const styles = {
32
- [name]: "auto",
33
- [minStyle]: "initial",
34
- [maxStyle]: "initial"
35
- };
36
- const minVal = parseDimensionValue(min);
37
- const maxVal = parseDimensionValue(max);
38
- if (minVal) styles[minStyle] = minVal;
39
- if (maxVal) styles[maxStyle] = maxVal;
40
- return styles;
41
- }
42
- const styles = {
43
- [name]: "auto",
44
- [minStyle]: "initial",
45
- [maxStyle]: "initial"
46
- };
47
- if (value != null) {
48
- let val = value;
49
- if (typeof val === "number") val = `${val}px`;
50
- val = String(val);
51
- const { mods, values } = parseStyle(val).groups[0] ?? makeEmptyDetails();
52
- let flag = false;
53
- for (const mod of mods) switch (mod) {
54
- case "min":
55
- styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
56
- flag = true;
57
- break;
58
- case "max":
59
- styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;
60
- flag = true;
61
- break;
62
- case "fixed": {
63
- const fixedValue = values[0] || "max-content";
64
- styles[minStyle] = fixedValue;
65
- styles[name] = fixedValue;
66
- styles[maxStyle] = fixedValue;
67
- flag = true;
68
- break;
69
- }
70
- default: break;
71
- }
72
- if (!flag || !mods.length) if (values.length === 2) {
73
- styles[minStyle] = values[0];
74
- styles[maxStyle] = values[1];
75
- } else if (values.length === 3) {
76
- styles[minStyle] = values[0];
77
- styles[name] = values[1];
78
- styles[maxStyle] = values[2];
79
- } else styles[name] = values[0] || "auto";
80
- if (styles[name] === "stretch") if (name === "width") styles[name] = [
81
- "stretch",
82
- "-webkit-fill-available",
83
- "-moz-available"
84
- ];
85
- else styles[name] = "auto";
86
- }
87
- const minVal = parseDimensionValue(min);
88
- const maxVal = parseDimensionValue(max);
89
- if (minVal) styles[minStyle] = minVal;
90
- if (maxVal) styles[maxStyle] = maxVal;
91
- return styles;
92
- };
93
- }
94
-
95
- //#endregion
96
- export { dimensionStyle };
97
- //# sourceMappingURL=dimension.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"dimension.mjs","names":[],"sources":["../../src/styles/dimension.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nconst DEFAULT_MIN_SIZE = 'var(--gap)';\nconst DEFAULT_MAX_SIZE = '100%';\n\n/**\n * Parse a dimension value (string, number, or boolean) into a CSS value\n */\nfunction parseDimensionValue(\n val: string | number | boolean | undefined,\n): string | null {\n if (val == null) return null;\n if (typeof val === 'number') return `${val}px`;\n if (val === true) return 'initial';\n\n const processed = parseStyle(String(val));\n return processed.groups[0]?.values[0] || null;\n}\n\ninterface DimensionProps {\n value?: string | number | boolean;\n min?: string | number | boolean;\n max?: string | number | boolean;\n}\n\n/**\n * Creates a dimension style handler for width or height.\n *\n * Supports:\n * - Main dimension prop (width/height) with syntax for min/max\n * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)\n *\n * Priority: Individual min/max props override values from main prop syntax\n */\nexport function dimensionStyle(name: 'width' | 'height') {\n const minStyle = `min-${name}`;\n const maxStyle = `max-${name}`;\n\n return ({ value, min, max }: DimensionProps) => {\n // If nothing is defined, return undefined\n if (value == null && min == null && max == null) return;\n\n // Handle boolean true on main value - reset all to initial\n if (value === true) {\n const styles: Record<string, string | string[]> = {\n [name]: 'auto',\n [minStyle]: 'initial',\n [maxStyle]: 'initial',\n };\n\n // Apply individual min/max overrides\n const minVal = parseDimensionValue(min);\n const maxVal = parseDimensionValue(max);\n if (minVal) styles[minStyle] = minVal;\n if (maxVal) styles[maxStyle] = maxVal;\n\n return styles;\n }\n\n const styles: Record<string, string | string[]> = {\n [name]: 'auto',\n [minStyle]: 'initial',\n [maxStyle]: 'initial',\n };\n\n // Process main dimension value\n if (value != null) {\n let val = value;\n if (typeof val === 'number') {\n val = `${val}px`;\n }\n\n val = String(val);\n\n const processed = parseStyle(val);\n const { mods, values } =\n processed.groups[0] ?? makeEmptyDetails();\n\n let flag = false;\n\n for (const mod of mods) {\n switch (mod) {\n case 'min':\n styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;\n flag = true;\n break;\n case 'max':\n styles[maxStyle] = values[0] || DEFAULT_MAX_SIZE;\n flag = true;\n break;\n case 'fixed': {\n // Fixed modifier: set all three dimensions to the same value\n const fixedValue = values[0] || 'max-content';\n styles[minStyle] = fixedValue;\n styles[name] = fixedValue;\n styles[maxStyle] = fixedValue;\n flag = true;\n break;\n }\n default:\n break;\n }\n }\n\n if (!flag || !mods.length) {\n if (values.length === 2) {\n styles[minStyle] = values[0];\n styles[maxStyle] = values[1];\n } else if (values.length === 3) {\n styles[minStyle] = values[0];\n styles[name] = values[1];\n styles[maxStyle] = values[2];\n } else {\n styles[name] = values[0] || 'auto';\n }\n }\n\n if (styles[name] === 'stretch') {\n if (name === 'width') {\n styles[name] = [\n 'stretch',\n '-webkit-fill-available',\n '-moz-available',\n ];\n } else {\n styles[name] = 'auto';\n }\n }\n }\n\n // Apply individual min/max props (higher priority, override main prop syntax)\n const minVal = parseDimensionValue(min);\n const maxVal = parseDimensionValue(max);\n if (minVal) styles[minStyle] = minVal;\n if (maxVal) styles[maxStyle] = maxVal;\n\n return styles;\n };\n}\n"],"mappings":";;;;AAGA,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;;;;AAKzB,SAAS,oBACP,KACe;AACf,KAAI,OAAO,KAAM,QAAO;AACxB,KAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,IAAI;AAC3C,KAAI,QAAQ,KAAM,QAAO;AAGzB,QADkB,WAAW,OAAO,IAAI,CAAC,CACxB,OAAO,IAAI,OAAO,MAAM;;;;;;;;;;;AAkB3C,SAAgB,eAAe,MAA0B;CACvD,MAAM,WAAW,OAAO;CACxB,MAAM,WAAW,OAAO;AAExB,SAAQ,EAAE,OAAO,KAAK,UAA0B;AAE9C,MAAI,SAAS,QAAQ,OAAO,QAAQ,OAAO,KAAM;AAGjD,MAAI,UAAU,MAAM;GAClB,MAAM,SAA4C;KAC/C,OAAO;KACP,WAAW;KACX,WAAW;IACb;GAGD,MAAM,SAAS,oBAAoB,IAAI;GACvC,MAAM,SAAS,oBAAoB,IAAI;AACvC,OAAI,OAAQ,QAAO,YAAY;AAC/B,OAAI,OAAQ,QAAO,YAAY;AAE/B,UAAO;;EAGT,MAAM,SAA4C;IAC/C,OAAO;IACP,WAAW;IACX,WAAW;GACb;AAGD,MAAI,SAAS,MAAM;GACjB,IAAI,MAAM;AACV,OAAI,OAAO,QAAQ,SACjB,OAAM,GAAG,IAAI;AAGf,SAAM,OAAO,IAAI;GAGjB,MAAM,EAAE,MAAM,WADI,WAAW,IAAI,CAErB,OAAO,MAAM,kBAAkB;GAE3C,IAAI,OAAO;AAEX,QAAK,MAAM,OAAO,KAChB,SAAQ,KAAR;IACE,KAAK;AACH,YAAO,YAAY,OAAO,MAAM;AAChC,YAAO;AACP;IACF,KAAK;AACH,YAAO,YAAY,OAAO,MAAM;AAChC,YAAO;AACP;IACF,KAAK,SAAS;KAEZ,MAAM,aAAa,OAAO,MAAM;AAChC,YAAO,YAAY;AACnB,YAAO,QAAQ;AACf,YAAO,YAAY;AACnB,YAAO;AACP;;IAEF,QACE;;AAIN,OAAI,CAAC,QAAQ,CAAC,KAAK,OACjB,KAAI,OAAO,WAAW,GAAG;AACvB,WAAO,YAAY,OAAO;AAC1B,WAAO,YAAY,OAAO;cACjB,OAAO,WAAW,GAAG;AAC9B,WAAO,YAAY,OAAO;AAC1B,WAAO,QAAQ,OAAO;AACtB,WAAO,YAAY,OAAO;SAE1B,QAAO,QAAQ,OAAO,MAAM;AAIhC,OAAI,OAAO,UAAU,UACnB,KAAI,SAAS,QACX,QAAO,QAAQ;IACb;IACA;IACA;IACD;OAED,QAAO,QAAQ;;EAMrB,MAAM,SAAS,oBAAoB,IAAI;EACvC,MAAM,SAAS,oBAAoB,IAAI;AACvC,MAAI,OAAQ,QAAO,YAAY;AAC/B,MAAI,OAAQ,QAAO,YAAY;AAE/B,SAAO"}