Skip to content

Don't swallow @utility declarations when @apply is used in nested rules #16940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Conversation

philipp-spiess
Copy link
Member

Fixes #16935

This PR fixes an issue where the order of how @apply was resolved was incorrect for nested rules. Consider this example:

.rule {
  @apply underline;
  .nested-rule {
    @apply custom-utility;
  }
}

@utility custom-utility {
  @apply flex;
}

The way we topologically sort these, we end up with a list that looks roughly like this:

.rule {
  @apply underline;
  .nested-rule {
    @apply custom-utility;
  }
}

@utility custom-utility {
  @apply flex;
}

.nested-rule {
  @apply custom-utility;
}

As you can see here the nested rule is now part of the top-level list. This is correct because we first have to substitute the @apply inside the @utility custom-utility before we can apply the custom-utility inside .nested-rule. However, because we were using a regular AST walk and because the initial .rule also contains the .nested-rule as child, we would first substitute the @apply inside the .nested-rule, causing the design-system to force resolve (and cache) the wrong value for custom-utility.

Because the list is already flattened, we do not need to recursively look into child declarations when we traverse the sorted list. This PR changes it to use a regular for loop instead of the walk.

Test plan

  • Added a regression test
  • Rest of tests still green

@philipp-spiess philipp-spiess requested a review from a team as a code owner March 4, 2025 11:02
@philipp-spiess philipp-spiess force-pushed the fix/dont-swallow-utilities-when-apply-used-in-nested-lists branch from 6b2050e to 3291383 Compare March 4, 2025 11:03
@philipp-spiess philipp-spiess merged commit db40530 into main Mar 4, 2025
5 checks passed
@philipp-spiess philipp-spiess deleted the fix/dont-swallow-utilities-when-apply-used-in-nested-lists branch March 4, 2025 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Nested CSS utilities and @apply rules fails
2 participants