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

Only generate variants for non-user layers #6589

Merged
merged 3 commits into from Dec 17, 2021

Conversation

RobinMalfait
Copy link
Contributor

@RobinMalfait RobinMalfait commented Dec 17, 2021

This PR fixes a bug that generated variants for custom user css which is something we don't want. We only want this for css that's defined in a layer.

E.g.:

CSS:

@tailwind utilities;

.foo {
  color: red;
}

HTML:

<div class="hover:foo"></div>

This should not generate (but it did):

.hover\:foo:hover {
  color: red;
}

This PR will disallow that. If you do want this behaviour, then you would have to put the .foo class inside a layer. E.g.:
CSS:

@tailwind utilities;

@layer utilities {
  .foo {
    color: red;
  }
}

HTML:

<div class="hover:foo"></div>

This should generate:

.hover\:foo:hover {
  color: red;
}

If you have the following css:

```css
@tailwind utilities;
.foo {
  color: red;
}
```

And you HTML looks like this:
```html
<div class="hover:foo"></div>
```

Then the output should _not_ generate a `.hover\:foo {}` class.
@RobinMalfait RobinMalfait merged commit 2fdbe10 into master Dec 17, 2021
@RobinMalfait RobinMalfait deleted the only-generate-variants-for-non-user-layer branch December 17, 2021 13:49
@mnaderian
Copy link

@RobinMalfait, shouldn't it generate this? 🤔

.hover\:foo:hover {
  color: red;
}

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