Only generate variants for non-user layers (#6589)

* only generate variants for non-user layers

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.

* ensure that you can apply user csss (without variants)

* update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
 - Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
+- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
 
 ## [3.0.6] - 2021-12-16
 

src/lib/generateRules.js

@@ -112,6 +112,11 @@ function applyVariant(variant, matches, context) {
     let result = []
 
     for (let [meta, rule] of matches) {
+      // Don't generate variants for user css
+      if (meta.layer === 'user') {
+        continue
+      }
+
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction] of variantFunctionTuples) {

tests/apply.test.js

@@ -654,3 +654,61 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules
     `)
   })
 })
+
+it('should be possible to apply user css', () => {
+  let config = {
+    content: [{ raw: html`<div></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    .foo {
+      color: red;
+    }
+
+    .bar {
+      @apply foo;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .foo {
+        color: red;
+      }
+
+      .bar {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('should not be possible to apply user css with variants', () => {
+  let config = {
+    content: [{ raw: html`<div></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    .foo {
+      color: red;
+    }
+
+    .bar {
+      @apply hover:foo;
+    }
+  `
+
+  return run(input, config).catch((err) => {
+    expect(err.reason).toBe(
+      'The `hover:foo` class does not exist. If `hover:foo` is a custom class, make sure it is defined within a `@layer` directive.'
+    )
+  })
+})

tests/variants.test.js

@@ -421,3 +421,27 @@ test('before and after variants are a bit special, and forced to the end (2)', (
     `)
   })
 })
+
+it('should not generate variants of user css if it is not inside a layer', () => {
+  let config = {
+    content: [{ raw: html`<div class="hover:foo"></div>` }],
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind components;
+    @tailwind utilities;
+
+    .foo {
+      color: red;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .foo {
+        color: red;
+      }
+    `)
+  })
+})