Skip to content

Commit 3f4005e

Browse files
committed
Disable filterDefault for ring opacity when using respectDefaultRingColorOpacity
1 parent cab1fce commit 3f4005e

File tree

2 files changed

+52
-3
lines changed

2 files changed

+52
-3
lines changed

src/corePlugins.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -2054,9 +2054,13 @@ export let corePlugins = {
20542054
)
20552055
},
20562056

2057-
ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
2058-
filterDefault: true,
2059-
}),
2057+
ringOpacity: (helpers) => {
2058+
let { config } = helpers
2059+
2060+
return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
2061+
filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
2062+
})(helpers)
2063+
},
20602064
ringOffsetWidth: createUtilityPlugin(
20612065
'ringOffsetWidth',
20622066
[['ring-offset', ['--tw-ring-offset-width']]],

tests/basic-usage.test.js

+45
Original file line numberDiff line numberDiff line change
@@ -664,3 +664,48 @@ it('Customizing the default ring color preserves its opacity when using respectD
664664
`)
665665
})
666666
})
667+
668+
it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => {
669+
let config = {
670+
content: [{ raw: html`<div class="ring-opacity"></div>` }],
671+
corePlugins: { preflight: false },
672+
theme: {
673+
ringOpacity: {
674+
DEFAULT: '0.33',
675+
},
676+
},
677+
}
678+
679+
let input = css`
680+
@tailwind utilities;
681+
`
682+
683+
return run(input, config).then((result) => {
684+
expect(result.css).toMatchFormattedCss(css``)
685+
})
686+
})
687+
688+
it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => {
689+
let config = {
690+
future: { respectDefaultRingColorOpacity: true },
691+
content: [{ raw: html`<div class="ring-opacity"></div>` }],
692+
corePlugins: { preflight: false },
693+
theme: {
694+
ringOpacity: {
695+
DEFAULT: '0.33',
696+
},
697+
},
698+
}
699+
700+
let input = css`
701+
@tailwind utilities;
702+
`
703+
704+
return run(input, config).then((result) => {
705+
expect(result.css).toMatchFormattedCss(css`
706+
.ring-opacity {
707+
--tw-ring-opacity: 0.33;
708+
}
709+
`)
710+
})
711+
})

0 commit comments

Comments
 (0)