From b341813d3ff1ec541f1846a50339678a4952da38 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 3 Jan 2022 11:17:58 +0100
Subject: [PATCH] Ensure we can use `<` and `>` characters in modifiers (#6851)

* ensure we can use "special" characters in modifiers

Fixes: #6778

* update changelog
---
 CHANGELOG.md                    |  1 +
 src/lib/defaultExtractor.js     |  1 +
 tests/default-extractor.test.js |  9 +++++++++
 tests/variants.test.js          | 22 ++++++++++++++++++++++
 4 files changed, 33 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28be7d5c7b13..dc32ca8001f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
+- Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
 
 ## [3.0.8] - 2021-12-28
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 49004e18d98d..88a2f43b470e 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -13,6 +13,7 @@ const PATTERNS = [
   /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
+  /([^"'`\s]*[^<>"'`\s:\\])/.source, //  `<sm:underline`, `md>:font-bold`
   /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
 
   // Arbitrary properties
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index e507f8de46e6..151c4addfb9d 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -323,3 +323,12 @@ test('arbitrary values with angle brackets in double quotes', async () => {
   expect(extractions).toContain(`hover:content-["<"]`)
   expect(extractions).toContain(`hover:focus:content-[">"]`)
 })
+
+test('special characters', async () => {
+  const extractions = defaultExtractor(`
+    <div class="<sm:underline md>:font-bold"></div>
+  `)
+
+  expect(extractions).toContain(`<sm:underline`)
+  expect(extractions).toContain(`md>:font-bold`)
+})
diff --git a/tests/variants.test.js b/tests/variants.test.js
index a3bd43e44d68..058dd5522b08 100644
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -445,3 +445,25 @@ it('should not generate variants of user css if it is not inside a layer', () =>
     `)
   })
 })
+
+it('should be possible to use responsive modifiers that are defined with special characters', () => {
+  let config = {
+    content: [{ raw: html`<div class="<sm:underline"></div>` }],
+    theme: {
+      screens: {
+        '<sm': { max: '399px' },
+      },
+    },
+    plugins: [],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      @media (max-width: 399px) {
+        .\<sm\:underline {
+          text-decoration-line: underline;
+        }
+      }
+    `)
+  })
+})