Skip to content
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

Improve circular dependency detection when using @apply #6588

Merged
merged 2 commits into from Dec 17, 2021

Conversation

RobinMalfait
Copy link
Contributor

This PR will improve the detection of circular dependencies.
We incorrectly had a false positive in this case:

HTML:

<div class="bg-gray-500"></div>

CSS:

.focus\:bg-gray-500 {
  @apply bg-gray-500;
}

While you should not do this, this resulted in an incorrect circular dependency error.
Now it will result in the correct css:

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

.focus\:bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}

I also changed the circular dependency message to the same message we used in v2.
Before:

Circular dependency detected when using: `@apply text-red-500`

After:

You cannot `@apply` the `text-red-500` utility here because it creates a circular dependency.

I also changed the message to the same message we used in V2.
@RobinMalfait RobinMalfait force-pushed the improve-circular-dependency-detection branch from 5fd70e5 to ee7684b Compare December 17, 2021 12:36
@RobinMalfait RobinMalfait merged commit 7089a80 into master Dec 17, 2021
@RobinMalfait RobinMalfait deleted the improve-circular-dependency-detection branch December 17, 2021 12:39
@driskull
Copy link

driskull commented Dec 17, 2021

I'm still seeing this issue in 3.0.7.

You cannot `@apply` the `sticky` utility here because it creates a circular dependency.
header {
  &.sticky {
    @apply sticky;
  }
}

@driskull
Copy link

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.

None yet

2 participants