Make boxShadow respect ring shadows

This is to prevent box-shadows from overriding rings that are added manually by plugins like the custom forms plugin.
tailwindlabs · Nov 10, 2020 · c3dd3b6 · c3dd3b6
1 parent 229af3b
commit c3dd3b6
Show file tree

Hide file tree

Showing 7 changed files with 1,649 additions and 1,641 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
@@ -46,19 +46,23 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
       utilities: {
         '.shadow': {
           '--box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-          'box-shadow': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
         '.shadow-md': {
           '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-          'box-shadow': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
         '.-shadow': {
           '--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-          'box-shadow': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
         '.-shadow-md': {
           '--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-          'box-shadow': 'var(--box-shadow)',
+          'box-shadow':
+            'var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--box-shadow)',
         },
       },
       variants: ['responsive'],

diff --git a/src/plugins/boxShadow.js b/src/plugins/boxShadow.js
@@ -9,7 +9,11 @@ export default function () {
           nameClass('shadow', modifier),
           {
             '--box-shadow': value === 'none' ? '0 0 #0000' : value,
-            'box-shadow': 'var(--box-shadow)',
+            'box-shadow': [
+              `var(--ring-offset-shadow, 0 0 #0000)`,
+              `var(--ring-shadow, 0 0 #0000)`,
+              `var(--box-shadow)`,
+            ].join(', '),
           },
         ]
       })

diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js
@@ -21,11 +21,11 @@ export default function () {
         return [
           nameClass('ring', modifier),
           {
-            '--ring-width': value,
-            '--ring-color-default': ringColorDefault,
+            '--ring-offset-shadow': `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
+            '--ring-shadow': `0 0 0 calc(${value} + var(--ring-offset-width, 0px)) var(--ring-color, ${ringColorDefault})`,
             'box-shadow': [
-              `0 0 0 var(--ring-offset-width, 0) var(--ring-offset-color, #fff)`,
-              `0 0 0 calc(var(--ring-width) + var(--ring-offset-width, 0px)) var(--ring-color, var(--ring-color-default))`,
+              `var(--ring-offset-shadow)`,
+              `var(--ring-shadow)`,
               `var(--box-shadow, 0 0 #0000)`,
             ].join(', '),
           },