Skip to content

Conversation

@RobinMalfait
Copy link
Member

@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.

3 participants