fix(sr-only): make caption inherit clip-path to support variants and test preflight (#20510, #20521)

CHANGELOG.md

@@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Ensure table captions inside `.sr-only` elements are properly clipped in Firefox ([#20510](https://github.com/tailwindlabs/tailwindcss/issues/20510))
+- Ensure table captions inside `.sr-only` elements are properly clipped in Firefox ([#20510](https://github.com/tailwindlabs/tailwindcss/issues/20510), [#20521](https://github.com/tailwindlabs/tailwindcss/pull/20521))
 - Ensure watch mode detects changes to symlinked `@source` files whose real paths aren't otherwise scanned ([#20356](https://github.com/tailwindlabs/tailwindcss/pull/20356))
 - Ensure custom variants using `@scope` wrap the generated utilities instead of nesting inside them ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))
 - Fix flattening of `@scope` at-rules ([#20369](https://github.com/tailwindlabs/tailwindcss/pull/20369))

packages/tailwindcss/preflight.css

@@ -172,13 +172,12 @@ table {
 }
 
 /*
-  Ensure table captions inside visually hidden tables are properly clipped in Firefox.
-  (https://github.com/tailwindlabs/tailwindcss/issues/20510)
+  Ensure table captions inside visually hidden tables (including variants like `md:sr-only`)
+  are properly clipped in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/20510)
 */
 
-:where(table.sr-only, .sr-only > table) > caption {
+caption {
   clip-path: inherit;
-  overflow: hidden;
 }
 
 /*

packages/tailwindcss/src/index.test.ts

@@ -144,6 +144,11 @@ describe('compiling CSS', () => {
     ).toMatchSnapshot()
   })
 
+  test('preflight ensures table captions inherit clip-path for Firefox (#20510)', () => {
+    let preflight = fs.readFileSync(path.resolve(__dirname, '../preflight.css'), 'utf-8')
+    expect(preflight).toContain('caption {\n  clip-path: inherit;\n}')
+  })
+
   test('unescapes underscores to spaces inside arbitrary values except for `url()` and first argument of `var()` and `theme()`', async () => {
     expect(
       await run(