(node: AtRule)
| 6077 | ] |
| 6078 | |
| 6079 | export function createCssUtility(node: AtRule) { |
| 6080 | class="cm">// Allow escaped characters in the name for compatibility with formatters and |
| 6081 | class="cm">// other parsers, to ensure valid CSS syntax. E.g.: `@utility foo-1\/2`. |
| 6082 | class="cm">// |
| 6083 | class="cm">// Note: the actual utility will be `foo-1/2` |
| 6084 | let name = unescape(node.params) |
| 6085 | |
| 6086 | class="cm">// Functional utilities. E.g.: `tab-size-*` |
| 6087 | if (isValidFunctionalUtilityName(name)) { |
| 6088 | class="cm">// API: |
| 6089 | class="cm">// |
| 6090 | class="cm">// - `--value(class="st">'literal')` resolves a literal named value |
| 6091 | class="cm">// - `--value(number)` resolves a bare value of type number |
| 6092 | class="cm">// - `--value([number])` resolves an arbitrary value of type number |
| 6093 | class="cm">// - `--value(--color)` resolves a theme value in the `color` namespace |
| 6094 | class="cm">// - `--value(--default(4))` resolves to a default value when only the |
| 6095 | class="cm">// root of the functional utility was used. |
| 6096 | class="cm">// - `--value(number, [number])` resolves a bare value of type number or an |
| 6097 | class="cm">// arbitrary value of type number in order. |
| 6098 | class="cm">// |
| 6099 | class="cm">// Rules: |
| 6100 | class="cm">// |
| 6101 | class="cm">// - If `--value(…)` does not resolve to a valid value, the declaration is |
| 6102 | class="cm">// removed. |
| 6103 | class="cm">// - If a `--value(ratio)` resolves, the `--modifier(…)` cannot be used. |
| 6104 | class="cm">// - If a candidate looks like `foo-2/3`, then the `--value(ratio)` should |
| 6105 | class="cm">// be used OR the `--value(…)` and `--modifier(…)` must be used. But not |
| 6106 | class="cm">// both. |
| 6107 | class="cm">// - All parts of the candidate must resolve, otherwise it's not a valid |
| 6108 | class="cm">// utility. E.g.:` |
| 6109 | class="cm">// ``` |
| 6110 | class="cm">// @utility foo-* { |
| 6111 | class="cm">// test: --value(number) |
| 6112 | class="cm">// } |
| 6113 | class="cm">// ``` |
| 6114 | class="cm">// If you then use `foo-1/2`, this is invalid, because the modifier is not used. |
| 6115 | |
| 6116 | return (designSystem: DesignSystem) => { |
| 6117 | let storage = { |
| 6118 | class="st">'--value': { |
| 6119 | usedSpacingInteger: false, |
| 6120 | usedSpacingNumber: false, |
| 6121 | themeKeys: new Set<`--${string}`>(), |
| 6122 | literals: new Set<string>(), |
| 6123 | }, |
| 6124 | class="st">'--modifier': { |
| 6125 | usedSpacingInteger: false, |
| 6126 | usedSpacingNumber: false, |
| 6127 | themeKeys: new Set<`--${string}`>(), |
| 6128 | literals: new Set<string>(), |
| 6129 | }, |
| 6130 | } |
| 6131 | |
| 6132 | class="cm">// Pre-process the AST to make it easier to work with. |
| 6133 | class="cm">// |
| 6134 | class="cm">// - Normalize theme values used in `--value(…)` and `--modifier(…)` |
| 6135 | class="cm">// functions. |
| 6136 | class="cm">// - Track information for suggestions |
no test coverage detected