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(', '),
  },