(variant: string, designSystem: DesignSystem)
| 660 | } |
| 661 | |
| 662 | export function parseVariant(variant: string, designSystem: DesignSystem): Variant | null { |
| 663 | class="cm">// Arbitrary variants |
| 664 | if (variant[0] === class="st">'[' && variant[variant.length - 1] === class="st">']') { |
| 665 | /** |
| 666 | * TODO: Breaking change |
| 667 | * |
| 668 | * @deprecated Arbitrary variants containing at-rules with other selectors |
| 669 | * are deprecated. Use stacked variants instead. |
| 670 | * |
| 671 | * Before: |
| 672 | * - `[@media(width>=123px){&:hover}]:` |
| 673 | * |
| 674 | * After: |
| 675 | * - `[@media(width>=123px)]:[&:hover]:` |
| 676 | * - `[@media(width>=123px)]:hover:` |
| 677 | */ |
| 678 | if (variant[1] === class="st">'@' && variant.includes(class="st">'&')) return null |
| 679 | |
| 680 | let selector = decodeArbitraryValue(variant.slice(1, -1)) |
| 681 | |
| 682 | class="cm">// Values can't contain `;` or `}` characters at the top-level. |
| 683 | if (!isValidArbitrary(selector)) return null |
| 684 | |
| 685 | class="cm">// Empty arbitrary values are invalid. E.g.: `[]:` |
| 686 | class="cm">// ^^ |
| 687 | if (selector.length === 0 || selector.trim().length === 0) return null |
| 688 | |
| 689 | let relative = selector[0] === class="st">'>' || selector[0] === class="st">'+' || selector[0] === class="st">'~' |
| 690 | |
| 691 | class="cm">// Ensure `&` is always present by wrapping the selector in `&:is(…)`, |
| 692 | class="cm">// unless it's a relative selector like `> img`. |
| 693 | class="cm">// |
| 694 | class="cm">// E.g.: |
| 695 | class="cm">// |
| 696 | class="cm">// - `[p]:flex` |
| 697 | if (!relative && selector[0] !== class="st">'@' && !selector.includes(class="st">'&')) { |
| 698 | selector = `&:is(${selector})` |
| 699 | } |
| 700 | |
| 701 | return { |
| 702 | kind: class="st">'arbitrary', |
| 703 | selector, |
| 704 | relative, |
| 705 | } |
| 706 | } |
| 707 | |
| 708 | class="cm">// Static, functional and compound variants |
| 709 | { |
| 710 | class="cm">// group-hover/group-name |
| 711 | class="cm">// ^^^^^^^^^^^ -> Variant without modifier |
| 712 | class="cm">// ^^^^^^^^^^ -> Modifier |
| 713 | let [variantWithoutModifier, modifier = null, additionalModifier] = segment(variant, class="st">'/') |
| 714 | |
| 715 | class="cm">// If there's more than one modifier, the variant is invalid. |
| 716 | class="cm">// |
| 717 | class="cm">// E.g.: |
| 718 | class="cm">// |
| 719 | class="cm">// - `group-hover/foo/bar` |
no test coverage detected