Add future flag to disable color opacity utility plugins (#9088)
* Add future flag to disable opacity utility plugins This will become the default in Tailwind CSS v4.0 * Update changelog
This commit is contained in:
Jordan Pittman
GitHub
parent
22ab71da5e
commit
b0018e20bf
4 changed files with 219 additions and 1 deletions
|
|
@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||
|
||||
- Add support fo configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
|
||||
- Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
|
||||
- Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
|
||||
|
||||
### Fixed
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@ let defaults = {
|
|||
}
|
||||
|
||||
let featureFlags = {
|
||||
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
|
||||
future: [
|
||||
'hoverOnlyWhenSupported',
|
||||
'respectDefaultRingColorOpacity',
|
||||
'disableColorOpacityUtilitiesByDefault',
|
||||
],
|
||||
experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,17 @@ export default function getAllConfigs(config) {
|
|||
}),
|
||||
},
|
||||
},
|
||||
|
||||
disableColorOpacityUtilitiesByDefault: {
|
||||
corePlugins: {
|
||||
backgroundOpacity: false,
|
||||
borderOpacity: false,
|
||||
divideOpacity: false,
|
||||
placeholderOpacity: false,
|
||||
ringOpacity: false,
|
||||
textOpacity: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const experimentals = Object.keys(features)
|
||||
|
|
|
|||
|
|
@ -828,3 +828,205 @@ it('works with opacity values defined as a placeholder or a function in when col
|
|||
`)
|
||||
})
|
||||
})
|
||||
|
||||
it('The disableColorOpacityUtilitiesByDefault flag disables the color opacity plugins and removes their variables', () => {
|
||||
let config = {
|
||||
future: {
|
||||
disableColorOpacityUtilitiesByDefault: true,
|
||||
},
|
||||
content: [
|
||||
{
|
||||
raw: html`
|
||||
<div
|
||||
class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
|
||||
></div>
|
||||
<div
|
||||
class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
|
||||
></div>
|
||||
<div
|
||||
class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
|
||||
></div>
|
||||
<div
|
||||
class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
|
||||
></div>
|
||||
`,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.border-blue-300 {
|
||||
border-color: #93c5fd;
|
||||
}
|
||||
.border-blue-300\/50 {
|
||||
border-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.border-blue-300\/\[var\(--my-opacity\)\] {
|
||||
border-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.bg-blue-300 {
|
||||
background-color: #93c5fd;
|
||||
}
|
||||
.bg-blue-300\/50 {
|
||||
background-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.bg-blue-300\/\[var\(--my-opacity\)\] {
|
||||
background-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.text-blue-300 {
|
||||
color: #93c5fd;
|
||||
}
|
||||
.text-blue-300\/50 {
|
||||
color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.text-blue-300\/\[var\(--my-opacity\)\] {
|
||||
color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.placeholder-blue-300::placeholder {
|
||||
color: #93c5fd;
|
||||
}
|
||||
.placeholder-blue-300\/50::placeholder {
|
||||
color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
|
||||
color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.ring-blue-300 {
|
||||
--tw-ring-color: #93c5fd;
|
||||
}
|
||||
.ring-blue-300\/50 {
|
||||
--tw-ring-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.ring-blue-300\/\[var\(--my-opacity\)\] {
|
||||
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesByDefault is enabled', () => {
|
||||
let config = {
|
||||
future: {
|
||||
disableColorOpacityUtilitiesByDefault: true,
|
||||
},
|
||||
corePlugins: {
|
||||
backgroundOpacity: true,
|
||||
borderOpacity: true,
|
||||
divideOpacity: true,
|
||||
placeholderOpacity: true,
|
||||
ringOpacity: true,
|
||||
textOpacity: true,
|
||||
},
|
||||
content: [
|
||||
{
|
||||
raw: html`
|
||||
<div
|
||||
class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
|
||||
></div>
|
||||
<div
|
||||
class="divide-blue-300/50 border-blue-300/50 bg-blue-300/50 text-blue-300/50 placeholder-blue-300/50 ring-blue-300/50"
|
||||
></div>
|
||||
<div
|
||||
class="divide-blue-300/[var(--my-opacity)] border-blue-300/[var(--my-opacity)] bg-blue-300/[var(--my-opacity)] text-blue-300/[var(--my-opacity)] placeholder-blue-300/[var(--my-opacity)] ring-blue-300/[var(--my-opacity)]"
|
||||
></div>
|
||||
<div
|
||||
class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
|
||||
></div>
|
||||
`,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return run('@tailwind utilities', config).then((result) => {
|
||||
expect(result.css).toMatchCss(css`
|
||||
.divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(147 197 253 / var(--tw-divide-opacity));
|
||||
}
|
||||
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 0.5;
|
||||
}
|
||||
.border-blue-300 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(147 197 253 / var(--tw-border-opacity));
|
||||
}
|
||||
.border-blue-300\/50 {
|
||||
border-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.border-blue-300\/\[var\(--my-opacity\)\] {
|
||||
border-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.border-opacity-50 {
|
||||
--tw-border-opacity: 0.5;
|
||||
}
|
||||
.bg-blue-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
|
||||
}
|
||||
.bg-blue-300\/50 {
|
||||
background-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.bg-blue-300\/\[var\(--my-opacity\)\] {
|
||||
background-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
.text-blue-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(147 197 253 / var(--tw-text-opacity));
|
||||
}
|
||||
.text-blue-300\/50 {
|
||||
color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.text-blue-300\/\[var\(--my-opacity\)\] {
|
||||
color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.text-opacity-50 {
|
||||
--tw-text-opacity: 0.5;
|
||||
}
|
||||
.placeholder-blue-300::placeholder {
|
||||
--tw-placeholder-opacity: 1;
|
||||
color: rgb(147 197 253 / var(--tw-placeholder-opacity));
|
||||
}
|
||||
.placeholder-blue-300\/50::placeholder {
|
||||
color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
|
||||
color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.placeholder-opacity-50::placeholder {
|
||||
--tw-placeholder-opacity: 0.5;
|
||||
}
|
||||
.ring-blue-300 {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
|
||||
}
|
||||
.ring-blue-300\/50 {
|
||||
--tw-ring-color: rgb(147 197 253 / 0.5);
|
||||
}
|
||||
.ring-blue-300\/\[var\(--my-opacity\)\] {
|
||||
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
|
||||
}
|
||||
.ring-opacity-50 {
|
||||
--tw-ring-opacity: 0.5;
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue