Ensure we can use < and > characters in modifiers

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
 

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

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`)
+})

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;
+        }
+      }
+    `)
+  })
+})