Disable filterDefault for ring opacity when using respectDefaultRingC…

…olorOpacity
tailwindlabs · May 27, 2022 · 3f4005e · 3f4005e
1 parent cab1fce
commit 3f4005e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -2054,9 +2054,13 @@ export let corePlugins = {
     )
   },
 
-  ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
-    filterDefault: true,
-  }),
+  ringOpacity: (helpers) => {
+    let { config } = helpers
+
+    return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
+      filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
+    })(helpers)
+  },
   ringOffsetWidth: createUtilityPlugin(
     'ringOffsetWidth',
     [['ring-offset', ['--tw-ring-offset-width']]],

diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
@@ -664,3 +664,48 @@ it('Customizing the default ring color preserves its opacity when using respectD
     `)
   })
 })
+
+it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => {
+  let config = {
+    content: [{ raw: html`<div class="ring-opacity"></div>` }],
+    corePlugins: { preflight: false },
+    theme: {
+      ringOpacity: {
+        DEFAULT: '0.33',
+      },
+    },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css``)
+  })
+})
+
+it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => {
+  let config = {
+    future: { respectDefaultRingColorOpacity: true },
+    content: [{ raw: html`<div class="ring-opacity"></div>` }],
+    corePlugins: { preflight: false },
+    theme: {
+      ringOpacity: {
+        DEFAULT: '0.33',
+      },
+    },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .ring-opacity {
+        --tw-ring-opacity: 0.33;
+      }
+    `)
+  })
+})