Reject invalid custom and arbitrary variants (#8345)

* WIP

Still need to write error message

* Update error message

first pass at something better

* Detect invalid variant formats returned by functions

* Add proper error message

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

tests/arbitrary-variants.test.js

@@ -77,6 +77,34 @@ test('arbitrary variants with modifiers', () => {
   })
 })
 
+test('variants without & or an at-rule are ignored', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="[div]:underline"></div>
+          <div class="[:hover]:underline"></div>
+          <div class="[wtf-bbq]:underline"></div>
+          <div class="[lol]:hover:underline"></div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+    `)
+  })
+})
+
 test('arbitrary variants are sorted after other variants', () => {
   let config = {
     content: [{ raw: html`<div class="[&>*]:underline underline lg:underline"></div>` }],

tests/variants.test.js

@@ -206,6 +206,44 @@ describe('custom advanced variants', () => {
       `)
     })
   })
+
+  test('variant format string must include at-rule or & (1)', async () => {
+    let config = {
+      content: [
+        {
+          raw: html` <div class="wtf-bbq:text-center"></div> `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('wtf-bbq', 'lol')
+        },
+      ],
+    }
+
+    await expect(run('@tailwind components;@tailwind utilities', config)).rejects.toThrowError(
+      "Your custom variant `wtf-bbq` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder."
+    )
+  })
+
+  test('variant format string must include at-rule or & (2)', async () => {
+    let config = {
+      content: [
+        {
+          raw: html` <div class="wtf-bbq:text-center"></div> `,
+        },
+      ],
+      plugins: [
+        function ({ addVariant }) {
+          addVariant('wtf-bbq', () => 'lol')
+        },
+      ],
+    }
+
+    await expect(run('@tailwind components;@tailwind utilities', config)).rejects.toThrowError(
+      "Your custom variant `wtf-bbq` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder."
+    )
+  })
 })
 
 test('stacked peer variants', async () => {