Skip to content

Commit b0018e2

Browse files
thecrypticacethecrypticace
authored
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
1 parent 22ab71d commit b0018e2

File tree

4 files changed

+219
-1
lines changed

4 files changed

+219
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Add support fo configuring default `font-feature-settings` for a font family ([#9039](https://github.com/tailwindlabs/tailwindcss/pull/9039))
1313
- Add a standalone CLI build for 32-bit Linux on ARM (`node16-linux-armv7`) ([#9084](https://github.com/tailwindlabs/tailwindcss/pull/9084))
14+
- Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
1415

1516
### Fixed
1617

‎src/featureFlags.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ let defaults = {
66
}
77

88
let featureFlags = {
9-
future: ['hoverOnlyWhenSupported', 'respectDefaultRingColorOpacity'],
9+
future: [
10+
'hoverOnlyWhenSupported',
11+
'respectDefaultRingColorOpacity',
12+
'disableColorOpacityUtilitiesByDefault',
13+
],
1014
experimental: ['optimizeUniversalDefaults', 'matchVariant' /* , 'variantGrouping' */],
1115
}
1216

‎src/util/getAllConfigs.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,17 @@ export default function getAllConfigs(config) {
1717
}),
1818
},
1919
},
20+
21+
disableColorOpacityUtilitiesByDefault: {
22+
corePlugins: {
23+
backgroundOpacity: false,
24+
borderOpacity: false,
25+
divideOpacity: false,
26+
placeholderOpacity: false,
27+
ringOpacity: false,
28+
textOpacity: false,
29+
},
30+
},
2031
}
2132

2233
const experimentals = Object.keys(features)

‎tests/opacity.test.js‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -828,3 +828,205 @@ it('works with opacity values defined as a placeholder or a function in when col
828828
`)
829829
})
830830
})
831+
832+
it('The disableColorOpacityUtilitiesByDefault flag disables the color opacity plugins and removes their variables', () => {
833+
let config = {
834+
future: {
835+
disableColorOpacityUtilitiesByDefault: true,
836+
},
837+
content: [
838+
{
839+
raw: html`
840+
<div
841+
class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
842+
></div>
843+
<div
844+
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"
845+
></div>
846+
<div
847+
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)]"
848+
></div>
849+
<div
850+
class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
851+
></div>
852+
`,
853+
},
854+
],
855+
}
856+
857+
return run('@tailwind utilities', config).then((result) => {
858+
expect(result.css).toMatchCss(css`
859+
.divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
860+
border-color: #93c5fd;
861+
}
862+
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
863+
border-color: rgb(147 197 253 / 0.5);
864+
}
865+
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
866+
border-color: rgb(147 197 253 / var(--my-opacity));
867+
}
868+
.border-blue-300 {
869+
border-color: #93c5fd;
870+
}
871+
.border-blue-300\/50 {
872+
border-color: rgb(147 197 253 / 0.5);
873+
}
874+
.border-blue-300\/\[var\(--my-opacity\)\] {
875+
border-color: rgb(147 197 253 / var(--my-opacity));
876+
}
877+
.bg-blue-300 {
878+
background-color: #93c5fd;
879+
}
880+
.bg-blue-300\/50 {
881+
background-color: rgb(147 197 253 / 0.5);
882+
}
883+
.bg-blue-300\/\[var\(--my-opacity\)\] {
884+
background-color: rgb(147 197 253 / var(--my-opacity));
885+
}
886+
.text-blue-300 {
887+
color: #93c5fd;
888+
}
889+
.text-blue-300\/50 {
890+
color: rgb(147 197 253 / 0.5);
891+
}
892+
.text-blue-300\/\[var\(--my-opacity\)\] {
893+
color: rgb(147 197 253 / var(--my-opacity));
894+
}
895+
.placeholder-blue-300::placeholder {
896+
color: #93c5fd;
897+
}
898+
.placeholder-blue-300\/50::placeholder {
899+
color: rgb(147 197 253 / 0.5);
900+
}
901+
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
902+
color: rgb(147 197 253 / var(--my-opacity));
903+
}
904+
.ring-blue-300 {
905+
--tw-ring-color: #93c5fd;
906+
}
907+
.ring-blue-300\/50 {
908+
--tw-ring-color: rgb(147 197 253 / 0.5);
909+
}
910+
.ring-blue-300\/\[var\(--my-opacity\)\] {
911+
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
912+
}
913+
`)
914+
})
915+
})
916+
917+
it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesByDefault is enabled', () => {
918+
let config = {
919+
future: {
920+
disableColorOpacityUtilitiesByDefault: true,
921+
},
922+
corePlugins: {
923+
backgroundOpacity: true,
924+
borderOpacity: true,
925+
divideOpacity: true,
926+
placeholderOpacity: true,
927+
ringOpacity: true,
928+
textOpacity: true,
929+
},
930+
content: [
931+
{
932+
raw: html`
933+
<div
934+
class="divide-blue-300 border-blue-300 bg-blue-300 text-blue-300 placeholder-blue-300 ring-blue-300"
935+
></div>
936+
<div
937+
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"
938+
></div>
939+
<div
940+
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)]"
941+
></div>
942+
<div
943+
class="divide-opacity-50 border-opacity-50 bg-opacity-50 text-opacity-50 placeholder-opacity-50 ring-opacity-50"
944+
></div>
945+
`,
946+
},
947+
],
948+
}
949+
950+
return run('@tailwind utilities', config).then((result) => {
951+
expect(result.css).toMatchCss(css`
952+
.divide-blue-300 > :not([hidden]) ~ :not([hidden]) {
953+
--tw-divide-opacity: 1;
954+
border-color: rgb(147 197 253 / var(--tw-divide-opacity));
955+
}
956+
.divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) {
957+
border-color: rgb(147 197 253 / 0.5);
958+
}
959+
.divide-blue-300\/\[var\(--my-opacity\)\] > :not([hidden]) ~ :not([hidden]) {
960+
border-color: rgb(147 197 253 / var(--my-opacity));
961+
}
962+
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
963+
--tw-divide-opacity: 0.5;
964+
}
965+
.border-blue-300 {
966+
--tw-border-opacity: 1;
967+
border-color: rgb(147 197 253 / var(--tw-border-opacity));
968+
}
969+
.border-blue-300\/50 {
970+
border-color: rgb(147 197 253 / 0.5);
971+
}
972+
.border-blue-300\/\[var\(--my-opacity\)\] {
973+
border-color: rgb(147 197 253 / var(--my-opacity));
974+
}
975+
.border-opacity-50 {
976+
--tw-border-opacity: 0.5;
977+
}
978+
.bg-blue-300 {
979+
--tw-bg-opacity: 1;
980+
background-color: rgb(147 197 253 / var(--tw-bg-opacity));
981+
}
982+
.bg-blue-300\/50 {
983+
background-color: rgb(147 197 253 / 0.5);
984+
}
985+
.bg-blue-300\/\[var\(--my-opacity\)\] {
986+
background-color: rgb(147 197 253 / var(--my-opacity));
987+
}
988+
.bg-opacity-50 {
989+
--tw-bg-opacity: 0.5;
990+
}
991+
.text-blue-300 {
992+
--tw-text-opacity: 1;
993+
color: rgb(147 197 253 / var(--tw-text-opacity));
994+
}
995+
.text-blue-300\/50 {
996+
color: rgb(147 197 253 / 0.5);
997+
}
998+
.text-blue-300\/\[var\(--my-opacity\)\] {
999+
color: rgb(147 197 253 / var(--my-opacity));
1000+
}
1001+
.text-opacity-50 {
1002+
--tw-text-opacity: 0.5;
1003+
}
1004+
.placeholder-blue-300::placeholder {
1005+
--tw-placeholder-opacity: 1;
1006+
color: rgb(147 197 253 / var(--tw-placeholder-opacity));
1007+
}
1008+
.placeholder-blue-300\/50::placeholder {
1009+
color: rgb(147 197 253 / 0.5);
1010+
}
1011+
.placeholder-blue-300\/\[var\(--my-opacity\)\]::placeholder {
1012+
color: rgb(147 197 253 / var(--my-opacity));
1013+
}
1014+
.placeholder-opacity-50::placeholder {
1015+
--tw-placeholder-opacity: 0.5;
1016+
}
1017+
.ring-blue-300 {
1018+
--tw-ring-opacity: 1;
1019+
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
1020+
}
1021+
.ring-blue-300\/50 {
1022+
--tw-ring-color: rgb(147 197 253 / 0.5);
1023+
}
1024+
.ring-blue-300\/\[var\(--my-opacity\)\] {
1025+
--tw-ring-color: rgb(147 197 253 / var(--my-opacity));
1026+
}
1027+
.ring-opacity-50 {
1028+
--tw-ring-opacity: 0.5;
1029+
}
1030+
`)
1031+
})
1032+
})

0 commit comments

Comments
 (0)