From d863de7abfbbc86b879ad5b9951c222c796f4893 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 11 Mar 2024 14:09:50 -0400
Subject: [PATCH] Prevent `content-none` from being overridden when
 conditionally styling `::before`/`::after` (#13187)

* Prevent content-none from being overridden when conditionally styling before/after

* Update changelog

* Fix changelog entry

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                          |  1 +
 packages/tailwindcss/src/utilities.ts |  5 ++++-
 packages/tailwindcss/tests/ui.spec.ts | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a59060fd..dd4f36eec 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
 
 - 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
index e50f80c2b..d0c1e32ff 100644
--- 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
index 42911ca98..7a7f357b0 100644
--- 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')