Fix cascading shadow/ring bug, ensure default ring color

tailwindlabs · Nov 17, 2020 · e40079a · e40079a
1 parent 5e50367
commit e40079a
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 1,727 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
diff --git a/__tests__/plugins/boxShadow.test.js b/__tests__/plugins/boxShadow.test.js
@@ -31,17 +31,25 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
 
       return getConfigValue(`variants.${path}`, defaultValue)
     },
-    addUtilities(utilities, variants) {
+    addUtilities(utilities, options) {
       addedUtilities.push({
         utilities,
-        variants,
+        options,
       })
     },
   }
 
   plugin()(pluginApi)
 
   expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '*': {
+          '--tw-shadow': '0 0 #0000',
+        },
+      },
+      options: { respectImportant: false },
+    },
     {
       utilities: {
         '.shadow': {
@@ -65,7 +73,7 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
             'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
         },
       },
-      variants: ['responsive'],
+      options: ['responsive'],
     },
   ])
 })
diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
@@ -3,6 +3,15 @@ import nameClass from '../util/nameClass'
 
 export default function () {
   return function ({ addUtilities, theme, variants }) {
+    addUtilities(
+      {
+        '*': {
+          '--tw-shadow': '0 0 #0000',
+        },
+      },
+      { respectImportant: false }
+    )
+
     const utilities = _.fromPairs(
       _.map(theme('boxShadow'), (value, modifier) => {
         return [

diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
@@ -16,15 +16,25 @@ export default function () {
       return `rgba(${r}, ${g}, ${b}, ${theme('ringOpacity.DEFAULT', '0.5')})`
     })(safeCall(() => toRgba(theme('ringColor.DEFAULT')), ['147', '197', '253']))
 
+    addUtilities(
+      {
+        '*': {
+          '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+          '--tw-ring-offset-width': '0px',
+          '--tw-ring-offset-color': '#fff',
+          '--tw-ring-color': ringColorDefault,
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-shadow': '0 0 #0000',
+        },
+      },
+      { respectImportant: false }
+    )
+
     const utilities = _.fromPairs(
       _.map(theme('ringWidth'), (value, modifier) => {
         return [
           nameClass('ring', modifier),
           {
-            '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-            '--tw-ring-offset-width': '0px',
-            '--tw-ring-offset-color': '#fff',
-            '--tw-ring-color': ringColorDefault,
             '--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(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
             'box-shadow': [

diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -535,7 +535,7 @@ module.exports = {
     placeholderColor: (theme) => theme('colors'),
     placeholderOpacity: (theme) => theme('opacity'),
     ringColor: (theme) => ({
-      DEFAULT: theme('colors.blue.500'),
+      DEFAULT: theme('colors.blue.500', '#3b82f6'),
       ...theme('colors'),
     }),
     ringOffsetColor: (theme) => theme('colors'),