From b341813d3ff1ec541f1846a50339678a4952da38 Mon Sep 17 00:00:00 2001 From: Robin Malfait 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, // `: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(` +
+ `) + + expect(extractions).toContain(`: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`
` }], + theme: { + screens: { + ' { + return expect(result.css).toMatchFormattedCss(css` + @media (max-width: 399px) { + .\