From 39577684b0206899642367d5c2d20e40f10a294d Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Sun, 8 May 2022 00:52:38 +0200
Subject: [PATCH] add tests for arbitrary variants

This still requires some work to the `defaultExtractor` to make sure it
all works with existing code.
---
 src/lib/defaultExtractor.js      |   2 +-
 tests/arbitrary-variants.test.js | 134 +++++++++++++++++++++++++++++++
 2 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 tests/arbitrary-variants.test.js

diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 523d9bab3dad..c64c8bfd57e0 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -19,7 +19,7 @@ export function defaultExtractor(content) {
 function* buildRegExps() {
   yield regex.pattern([
     // Variants
-    /((?=([^\s"'\\\[]+:))\2)?/,
+    /((?=([^\s"'\\]+:))\2)?/,
 
     // Important (optional)
     /!?/,
diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js
new file mode 100644
index 000000000000..1d75cfe86b8f
--- /dev/null
+++ b/tests/arbitrary-variants.test.js
@@ -0,0 +1,134 @@
+import { run, html, css, defaults } from './util/run'
+
+test('basic arbitrary variants', () => {
+  let config = {
+    content: [{ raw: html`<div class="[&>*]: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}
+
+      .\[\&\>\*\]\:underline > * {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
+test('spaces in selector (using _)', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="[.a.b_&]: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}
+
+      .a.b .\[\.a\.b_\&\]\:underline {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
+test('arbitrary variants with modifiers', () => {
+  let config = {
+    content: [{ raw: html`<div class="dark:lg: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}
+
+      @media (prefers-color-scheme: dark) {
+        @media (min-width: 1024px) {
+          .dark\:lg\:hover\:\[\&\>\*\]\:underline > *:hover {
+            text-decoration-line: underline;
+          }
+        }
+      }
+    `)
+  })
+})
+
+test('arbitrary variants are sorted after other variants', () => {
+  let config = {
+    content: [{ raw: html`<div class="[&>*]:underline underline lg: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}
+
+      .underline {
+        text-decoration-line: underline;
+      }
+
+      @media (min-width: 1024px) {
+        .lg\:underline {
+          text-decoration-line: underline;
+        }
+      }
+
+      .\[\&\>\*\]\:underline > * {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
+test('using the important modifier', () => {
+  let config = {
+    content: [{ raw: html`<div class="[&>*]:!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}
+
+      .\[\&\>\*\]\:\!underline > * {
+        text-decoration-line: underline !important;
+      }
+    `)
+  })
+})