Prevent content-none from being overridden when conditionally styli…

…ng `::before`/`::after` (#13187) * Prevent content-none from being overridden when conditionally styling before/after * Update changelog * Fix changelog entry --------- Co-authored-by: Adam Wathan <[email protected]>
tailwindlabs · Mar 11, 2024 · d863de7 · d863de7
1 parent 8309b47
commit d863de7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 1 deletion.
diff --git 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
 
 - Ensure `scale-*` utilities support percentage values ([#13182](https://github.com/tailwindlabs/tailwindcss/pull/13182))
+- Prevent `content-none` from being overridden when conditionally styling `::before`/`::after` ([#13187](https://github.com/tailwindlabs/tailwindcss/pull/13187))
 
 ### Changed
 

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -3430,7 +3430,10 @@ export function createUtilities(theme: Theme) {
     handle: (value) => [decl('will-change', value)],
   })
 
-  staticUtility('content-none', [['content', 'none']])
+  staticUtility('content-none', [
+    ['--tw-content', 'none'],
+    ['content', 'none'],
+  ])
   functionalUtility('content', {
     themeKeys: [],
     handle: (value) => [

diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
@@ -233,6 +233,20 @@ test('scale can be a number or percentage', async ({ page }) => {
   expect(await getPropertyValue('#x', 'scale')).toEqual('1.5')
 })
 
+// https://github.com/tailwindlabs/tailwindcss/issues/13185
+test('content-none persists when conditionally styling a pseudo-element', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`<div id="x" class="after:content-none after:hover:underline">Hello world</div>`,
+  )
+
+  expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
+})
+
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')