Skip to content

Commit

Permalink
Add future flag to disable color opacity utility plugins (#9088)
Browse files Browse the repository at this point in the history 
* Add future flag to disable opacity utility plugins

This will become the default in Tailwind CSS v4.0

* Update changelog
  • Loading branch information
@thecrypticace
thecrypticace committed Aug 15, 2022
1 parent 22ab71d commit b0018e2
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Expand Up @@ -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

Expand Down
6 changes: 5 additions & 1 deletion src/featureFlags.js
View file
Expand Up @@ -6,7 +6,11 @@ let defaults = {
}

let featureFlags = {
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
future: [
'hoverOnlyWhenSupported',
'respectDefaultRingColorOpacity',
'disableColorOpacityUtilitiesByDefault',
],
experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
}

Expand Down
11 changes: 11 additions & 0 deletions src/util/getAllConfigs.js
View file
Expand Up @@ -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)
Expand Down
202 changes: 202 additions & 0 deletions tests/opacity.test.js
View file
Expand Up @@ -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;
}
`)
})
})

0 comments on commit b0018e2

Please sign in to comment.