* Register a functional utility class that represents a color. * Such utilities gain automatic support for color opacity modifiers.
(classRoot: string, desc: ColorUtilityDescription)
| 491 | * Such utilities gain automatic support for color opacity modifiers. |
| 492 | */ |
| 493 | function colorUtility(classRoot: string, desc: ColorUtilityDescription) { |
| 494 | utilities.functional(classRoot, (candidate) => { |
| 495 | // Color utilities have to have a value, like the `red-500` in |
| 496 | // `bg-red-500`, otherwise they would be static utilities. |
| 497 | if (!candidate.value) return |
| 498 | |
| 499 | // Find the actual CSS value that the candidate value maps to. |
| 500 | let value: string | null = null |
| 501 | |
| 502 | if (candidate.value.kind === 'arbitrary') { |
| 503 | value = candidate.value.value |
| 504 | |
| 505 | // Apply an opacity modifier to the value if appropriate. |
| 506 | value = asColor(value, candidate.modifier, theme) |
| 507 | } else { |
| 508 | value = resolveThemeColor(candidate, theme, desc.themeKeys) |
| 509 | } |
| 510 | |
| 511 | // If the candidate value (like the `red-500` in `bg-red-500`) doesn't |
| 512 | // resolve to an actual value, don't generate any rules. |
| 513 | if (value === null) return |
| 514 | |
| 515 | return desc.handle(value) |
| 516 | }) |
| 517 | |
| 518 | suggest(classRoot, () => [ |
| 519 | { |
| 520 | values: ['current', 'inherit', 'transparent'], |
| 521 | valueThemeKeys: desc.themeKeys, |
| 522 | modifierThemeKeys: ['--opacity'], |
| 523 | modifiers: Array.from({ length: 21 }, (_, index) => `${index * 5}`), |
| 524 | }, |
| 525 | ]) |
| 526 | } |
| 527 | |
| 528 | function spacingUtility( |
| 529 | name: string, |
no test coverage detected