Skip to content

Commit

Permalink
Disable filterDefault for ring opacity when using respectDefaultRingC…
Browse files Browse the repository at this point in the history
…olorOpacity
  • Loading branch information
thecrypticace committed May 27, 2022
1 parent cab1fce commit 3f4005e
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 3 deletions.
10 changes: 7 additions & 3 deletions src/corePlugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -2054,9 +2054,13 @@ export let corePlugins = {
)
},

ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
filterDefault: true,
}),
ringOpacity: (helpers) => {
let { config } = helpers

return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
})(helpers)
},
ringOffsetWidth: createUtilityPlugin(
'ringOffsetWidth',
[['ring-offset', ['--tw-ring-offset-width']]],
Expand Down
45 changes: 45 additions & 0 deletions tests/basic-usage.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -664,3 +664,48 @@ it('Customizing the default ring color preserves its opacity when using respectD
`)
})
})

it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => {
let config = {
content: [{ raw: html`<div class="ring-opacity"></div>` }],
corePlugins: { preflight: false },
theme: {
ringOpacity: {
DEFAULT: '0.33',
},
},
}

let input = css`
@tailwind utilities;
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css``)
})
})

it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => {
let config = {
future: { respectDefaultRingColorOpacity: true },
content: [{ raw: html`<div class="ring-opacity"></div>` }],
corePlugins: { preflight: false },
theme: {
ringOpacity: {
DEFAULT: '0.33',
},
},
}

let input = css`
@tailwind utilities;
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.ring-opacity {
--tw-ring-opacity: 0.33;
}
`)
})
})

0 comments on commit 3f4005e

Please sign in to comment.