Allow default ring color to be a function (#7587)

* Allow default ring color to be a function * Update changelog
tailwindlabs · Feb 22, 2022 · d72b277 · d72b277
1 parent 3b8ca9d
commit d72b277
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Prevent nesting plugin from breaking other plugins ([#7563](https://github.com/tailwindlabs/tailwindcss/pull/7563))
 - Recursively collapse adjacent rules ([#7565](https://github.com/tailwindlabs/tailwindcss/pull/7565))
+- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
 
 ## [3.0.23] - 2022-02-16
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1925,7 +1925,7 @@ export let corePlugins = {
   ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
     let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
     let ringColorDefault = withAlphaValue(
-      theme('ringColor.DEFAULT'),
+      theme('ringColor')?.DEFAULT,
       ringOpacityDefault,
       `rgb(147 197 253 / ${ringOpacityDefault})`
     )

diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
@@ -110,6 +110,103 @@ test('per-plugin colors with the same key can differ when using a custom colors
   })
 })
 
+test('default ring color can be a function', () => {
+  function color(variable) {
+    return function ({ opacityVariable, opacityValue }) {
+      if (opacityValue !== undefined) {
+        return `rgba(${variable}, ${opacityValue})`
+      }
+      if (opacityVariable !== undefined) {
+        return `rgba(${variable}, var(${opacityVariable}, 1))`
+      }
+      return `rgb(${variable})`
+    }
+  }
+
+  let config = {
+    content: [
+      {
+        raw: html` <div class="ring"></div> `,
+      },
+    ],
+
+    theme: {
+      extend: {
+        ringColor: {
+          DEFAULT: color('var(--red)'),
+        },
+      },
+    },
+    plugins: [],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      *,
+      ::before,
+      ::after {
+        --tw-translate-x: 0;
+        --tw-translate-y: 0;
+        --tw-rotate: 0;
+        --tw-skew-x: 0;
+        --tw-skew-y: 0;
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        --tw-pan-x: ;
+        --tw-pan-y: ;
+        --tw-pinch-zoom: ;
+        --tw-scroll-snap-strictness: proximity;
+        --tw-ordinal: ;
+        --tw-slashed-zero: ;
+        --tw-numeric-figure: ;
+        --tw-numeric-spacing: ;
+        --tw-numeric-fraction: ;
+        --tw-ring-inset: ;
+        --tw-ring-offset-width: 0px;
+        --tw-ring-offset-color: #fff;
+        --tw-ring-color: rgba(var(--red), 0.5);
+        --tw-ring-offset-shadow: 0 0 #0000;
+        --tw-ring-shadow: 0 0 #0000;
+        --tw-shadow: 0 0 #0000;
+        --tw-shadow-colored: 0 0 #0000;
+        --tw-blur: ;
+        --tw-brightness: ;
+        --tw-contrast: ;
+        --tw-grayscale: ;
+        --tw-hue-rotate: ;
+        --tw-invert: ;
+        --tw-saturate: ;
+        --tw-sepia: ;
+        --tw-drop-shadow: ;
+        --tw-backdrop-blur: ;
+        --tw-backdrop-brightness: ;
+        --tw-backdrop-contrast: ;
+        --tw-backdrop-grayscale: ;
+        --tw-backdrop-hue-rotate: ;
+        --tw-backdrop-invert: ;
+        --tw-backdrop-opacity: ;
+        --tw-backdrop-saturate: ;
+        --tw-backdrop-sepia: ;
+      }
+
+      .ring {
+        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+          var(--tw-ring-offset-color);
+        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+          var(--tw-ring-color);
+        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      }
+    `)
+  })
+})
+
 it('fasly config values still work', () => {
   let config = {
     content: [{ raw: html`<div class="inset-0"></div>` }],