(
value: PropertyValueDefinition<P>,
parentPriority: number,
currentConditions: Set<string>,
skipConditions: Set<string>,
fn: (
value: P,
priority: number,
conditions: Set<string>,
skipConditions: Set<string>
) => [number, Rule[]]
)
| 533 | } |
| 534 | |
| 535 | function conditionalToRules<P extends CustomValue | any[]>( |
| 536 | value: PropertyValueDefinition<P>, |
| 537 | parentPriority: number, |
| 538 | currentConditions: Set<string>, |
| 539 | skipConditions: Set<string>, |
| 540 | fn: ( |
| 541 | value: P, |
| 542 | priority: number, |
| 543 | conditions: Set<string>, |
| 544 | skipConditions: Set<string> |
| 545 | ) => [number, Rule[]] |
| 546 | ): [number, Rule[]] { |
| 547 | if (value && typeof value === 'object' && !Array.isArray(value)) { |
| 548 | let rules: Rule[] = []; |
| 549 | |
| 550 | // Later conditions in parent rules override conditions in child rules. |
| 551 | let subSkipConditions = new Set([...skipConditions, ...Object.keys(value)]); |
| 552 | |
| 553 | // Skip the default condition if we're already filtering by one of the other possible conditions. |
| 554 | // For example, if someone specifies `dark: 'gray-400'`, only include the dark version of `gray-400` from the theme. |
| 555 | let skipDefault = Object.keys(value).some(k => currentConditions.has(k)); |
| 556 | let wasCSSCondition = false; |
| 557 | let priority = parentPriority; |
| 558 | |
| 559 | for (let condition in value) { |
| 560 | if (skipConditions.has(condition) || (condition === 'default' && skipDefault)) { |
| 561 | continue; |
| 562 | } |
| 563 | subSkipConditions.delete(condition); |
| 564 | |
| 565 | let val = value[condition]; |
| 566 | |
| 567 | // If a theme condition comes after runtime conditions, create a new grouping. |
| 568 | // This makes the CSS class unconditional so it appears outside the `else` block in the JS. |
| 569 | // The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions. |
| 570 | let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition); |
| 571 | if (!wasCSSCondition && isCSSCondition && rules.length) { |
| 572 | rules = [new GroupRule(rules)]; |
| 573 | } |
| 574 | wasCSSCondition = isCSSCondition; |
| 575 | |
| 576 | // Increment the current priority whenever we see a new CSS condition. |
| 577 | if (isCSSCondition) { |
| 578 | priority++; |
| 579 | } |
| 580 | |
| 581 | // If this is a runtime condition, inherit the priority from the parent rule. |
| 582 | // Otherwise, use the current maximum of the parent and current priorities. |
| 583 | let rulePriority = isCSSCondition ? priority : parentPriority; |
| 584 | |
| 585 | if ( |
| 586 | condition === 'default' || |
| 587 | isCSSCondition || |
| 588 | /^is[A-Z]/.test(condition) || |
| 589 | /^allows[A-Z]/.test(condition) |
| 590 | ) { |
| 591 | let subConditions = currentConditions; |
| 592 | if (isCSSCondition) { |
no test coverage detected