Ensure \ is a valid arbitrary variant token

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576))
 
 ## [3.1.1] - 2022-06-09
 

src/lib/defaultExtractor.js

@@ -69,7 +69,7 @@ function* buildRegExps(context) {
     '((?=((',
     regex.any(
       [
-        regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`\\]+\]/, separator]),
+        regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
         regex.pattern([/[^\s"'`\[\\]+/, separator]),
       ],
       true

tests/arbitrary-variants.test.js

@@ -405,3 +405,91 @@ test('with @apply', () => {
     `)
   })
 })
+
+test('keeps escaped underscores', () => {
+  let config = {
+    content: [
+      {
+        raw: '<div class="[&_.foo\\_\\_bar]:underline"></div>',
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+
+      .\[\&_\.foo\\_\\_bar\]\:underline .foo__bar {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
+test('keeps escaped underscores with multiple arbitrary variants', () => {
+  let config = {
+    content: [
+      {
+        raw: '<div class="[&_.foo\\_\\_bar]:[&_.bar\\_\\_baz]:underline"></div>',
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+
+      .\[\&_\.foo\\_\\_bar\]\:\[\&_\.bar\\_\\_baz\]\:underline .bar__baz .foo__bar {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})
+
+test('keeps escaped underscores in arbitrary variants mixed with normal variants', () => {
+  let config = {
+    content: [
+      {
+        raw: `
+          <div class="[&_.foo\\_\\_bar]:hover:underline"></div>
+          <div class="hover:[&_.foo\\_\\_bar]:underline"></div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      ${defaults}
+
+      .\[\&_\.foo\\_\\_bar\]\:hover\:underline:hover .foo__bar {
+        text-decoration-line: underline;
+      }
+
+      .hover\:\[\&_\.foo\\_\\_bar\]\:underline .foo__bar:hover {
+        text-decoration-line: underline;
+      }
+    `)
+  })
+})