From 9cd4a2e9b8089c265eeafb5c2b1a0e4399bb7291 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 4 Jul 2022 14:11:01 -0400 Subject: [PATCH 1/4] Fix import --- src/lib/defaultExtractor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js index 1d631a48e1a5..af920a77667f 100644 --- a/src/lib/defaultExtractor.js +++ b/src/lib/defaultExtractor.js @@ -1,4 +1,4 @@ -import { flagEnabled } from '../featureFlags.js' +import { flagEnabled } from '../featureFlags' import * as regex from './regex' export function defaultExtractor(context) { From 39dd01522c6724b3cc2dc155c5aa005f6e6d22ac Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 4 Jul 2022 14:11:16 -0400 Subject: [PATCH 2/4] Support arbitrary prefixes --- src/lib/defaultExtractor.js | 6 ++ tests/prefix.test.js | 108 ++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+) diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js index af920a77667f..3aec2e5629dd 100644 --- a/src/lib/defaultExtractor.js +++ b/src/lib/defaultExtractor.js @@ -22,6 +22,10 @@ export function defaultExtractor(context) { function* buildRegExps(context) { let separator = context.tailwindConfig.separator let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping') + let prefix = + context.tailwindConfig.prefix !== '' + ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)])) + : '' let utility = regex.any([ // Arbitrary properties @@ -88,6 +92,8 @@ function* buildRegExps(context) { // Important (optional) /!?/, + prefix, + variantGroupingEnabled ? regex.any([ // Or any of those things but grouped separated by commas diff --git a/tests/prefix.test.js b/tests/prefix.test.js index c4fd48019887..8c16676ca99a 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -400,3 +400,111 @@ it('supports prefixed utilities using arbitrary values', async () => { } `) }) + +it('supports non-word prefixes (1)', async () => { + let config = { + prefix: '@', + content: [ + { + raw: html` +
+
+
+
+
+ + +
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + @layer utilities { + .my-utility { + color: orange; + } + } + .foo { + @apply @text-white; + @apply [background-color:red]; + } + ` + + const result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + .\@bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + .\@underline { + text-decoration-line: underline; + } + .my-utility { + color: orange; + } + .foo { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + background-color: red; + } + `) +}) + +it('supports non-word prefixes (2)', async () => { + let config = { + prefix: '@]$', + content: [ + { + raw: html` +
+
+
+
+
+ + +
+ `, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind utilities; + @layer utilities { + .my-utility { + color: orange; + } + } + .foo { + @apply @]$text-white; + @apply [background-color:red]; + } + ` + + const result = await run(input, config) + + expect(result.css).toMatchFormattedCss(css` + .\@\]\$bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + } + .\@\]\$underline { + text-decoration-line: underline; + } + .my-utility { + color: orange; + } + .foo { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + background-color: red; + } + `) +}) From 34db94ab4c465182b8bba13dcc4aa95446900e06 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 4 Jul 2022 14:23:22 -0400 Subject: [PATCH 3/4] Add test --- tests/prefix.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tests/prefix.test.js b/tests/prefix.test.js index 8c16676ca99a..47d0d672ebd9 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -410,6 +410,7 @@ it('supports non-word prefixes (1)', async () => {
+
@@ -452,6 +453,10 @@ it('supports non-word prefixes (1)', async () => { color: rgb(255 255 255 / var(--tw-text-opacity)); background-color: red; } + .hover\:before\:\@content-\[\'Hovering\'\]:hover::before { + --tw-content: 'Hovering'; + content: var(--tw-content); + } `) }) @@ -464,6 +469,7 @@ it('supports non-word prefixes (2)', async () => {
+
@@ -490,6 +496,9 @@ it('supports non-word prefixes (2)', async () => { const result = await run(input, config) + // TODO: The class `.hover\:before\:\@\]\$content-\[\'Hovering\'\]:hover::before` is not generated + // This happens because of the parenthesis/brace/bracket clipping performed on candidates + expect(result.css).toMatchFormattedCss(css` .\@\]\$bg-black { --tw-bg-opacity: 1; From fd77cb96d4e3089d986ea19aa83cd299aff904cb Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 4 Jul 2022 14:28:23 -0400 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 840d7f7af79f..0390f3674b08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allows fallback values in plugin API helpers ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762)) - Fix usage of postcss.config.js in standalone CLI ([#8769](https://github.com/tailwindlabs/tailwindcss/pull/8769)) +- Fix usage of special-character prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772)) ## [3.1.4] - 2022-06-21