From 554a2c1e7ab8103c787558a73579e346e132ab54 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 30 Nov 2020 15:29:36 +0100 Subject: [PATCH 1/3] add ring defaults Fixes #2911 --- src/plugins/ringOffsetColor.js | 2 +- src/plugins/ringOffsetWidth.js | 2 +- src/plugins/ringWidth.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/ringOffsetColor.js b/src/plugins/ringOffsetColor.js index 59c98c4691e7..00953bc488c7 100644 --- a/src/plugins/ringOffsetColor.js +++ b/src/plugins/ringOffsetColor.js @@ -7,7 +7,7 @@ export default function () { return function ({ addUtilities, theme, variants }) { const colors = flattenColorPalette(theme('ringOffsetColor')) const utilities = _.fromPairs( - _.map(colors, (value, modifier) => { + _.map(_.omit(colors, 'DEFAULT'), (value, modifier) => { return [ nameClass('ring-offset', modifier), { diff --git a/src/plugins/ringOffsetWidth.js b/src/plugins/ringOffsetWidth.js index 7a78a99e30e1..2d927efe59ff 100644 --- a/src/plugins/ringOffsetWidth.js +++ b/src/plugins/ringOffsetWidth.js @@ -4,7 +4,7 @@ import nameClass from '../util/nameClass' export default function () { return function ({ addUtilities, theme, variants }) { const utilities = _.fromPairs( - _.map(theme('ringOffsetWidth'), (value, modifier) => { + _.map(_.omit(theme('ringOffsetWidth'), 'DEFAULT'), (value, modifier) => { return [ nameClass('ring-offset', modifier), { diff --git a/src/plugins/ringWidth.js b/src/plugins/ringWidth.js index 60bd5ecdad09..d2300620f0a8 100644 --- a/src/plugins/ringWidth.js +++ b/src/plugins/ringWidth.js @@ -20,8 +20,8 @@ export default function () { { '*': { '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-ring-offset-width': '0px', - '--tw-ring-offset-color': '#fff', + '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'), + '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), '--tw-ring-color': ringColorDefault, '--tw-ring-offset-shadow': '0 0 #0000', '--tw-ring-shadow': '0 0 #0000', From 89737b61315dc0bc4fce7c20a77dc536727847d0 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 30 Nov 2020 15:41:29 +0100 Subject: [PATCH 2/3] add tests for the ringWidth utility + defaults --- __tests__/plugins/ringWidth.test.js | 104 ++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 __tests__/plugins/ringWidth.test.js diff --git a/__tests__/plugins/ringWidth.test.js b/__tests__/plugins/ringWidth.test.js new file mode 100644 index 000000000000..6f929229fbfb --- /dev/null +++ b/__tests__/plugins/ringWidth.test.js @@ -0,0 +1,104 @@ +import invokePlugin from '../util/invokePlugin' +import plugin from '../../src/plugins/ringWidth' + +test('ring widths', () => { + const config = { + theme: { + ringWidth: { + 4: '4px', + }, + ringOffsetWidth: { + 4: '4px', + }, + ringColor: { + black: '#000', + }, + ringOffsetColor: { + white: '#fff', + }, + ringOpacity: { + 50: '.5', + }, + }, + variants: { + ringColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + expect(utilities).toEqual([ + [ + { + '*': { + '--tw-ring-color': 'rgba(147, 197, 253, 0.5)', + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-color': '#fff', + '--tw-ring-offset-shadow': '0 0 #0000', + '--tw-ring-offset-width': '0px', + '--tw-ring-shadow': '0 0 #0000', + }, + }, + { + respectImportant: false, + }, + ], + [ + { + '.ring-4': { + '--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(4px + 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)', + }, + '.ring-inset': { + '--tw-ring-inset': 'inset', + }, + }, + undefined, + ], + ]) +}) + +test('ring widths with defaults', () => { + const config = { + theme: { + ringWidth: {}, + ringOffsetWidth: { + DEFAULT: '2px', + }, + ringOffsetColor: { + DEFAULT: 'pink', + }, + }, + variants: { + ringColor: [], + }, + } + + const { utilities } = invokePlugin(plugin(), config) + expect(utilities).toEqual([ + [ + { + '*': { + '--tw-ring-color': 'rgba(147, 197, 253, 0.5)', + '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-offset-color': 'pink', + '--tw-ring-offset-shadow': '0 0 #0000', + '--tw-ring-offset-width': '2px', + '--tw-ring-shadow': '0 0 #0000', + }, + }, + { respectImportant: false }, + ], + [ + { + '.ring-inset': { + '--tw-ring-inset': 'inset', + }, + }, + undefined, + ], + ]) +}) From 1e930070e0e17230f389a6bb7381fa50b52370a5 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 30 Nov 2020 15:43:05 +0100 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c82c1e918017..684a2775e1f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix issue with `@apply` not working as expected with `!important` inside an atrule ([#2824](https://github.com/tailwindlabs/tailwindcss/pull/2824)) - Fix issue with `@apply` not working as expected with defined classes ([#2832](https://github.com/tailwindlabs/tailwindcss/pull/2832)) +### Added + +- Add default values for the `ring` utility ([#2951](https://github.com/tailwindlabs/tailwindcss/pull/2951)) + ## [2.0.1] - 2020-11-18 - Nothing, just the only thing I could do when I found out npm won't let me publish the same version under two tags.