Skip to content

Commit e6fd316

Browse files
adamwathanadamwathan
committed
Don't generate color opacity code in color plugins if not necessary
1 parent 52aab17 commit e6fd316

File tree

8 files changed

+57132
-22
lines changed

8 files changed

+57132
-22
lines changed

‎__tests__/fixtures/tailwind-output-no-color-opacity.css

Lines changed: 57055 additions & 0 deletions
Large diffs are not rendered by default.

‎__tests__/sanity.test.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,34 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
5252
})
5353
})
5454

55+
// TODO: Move to per plugin unit tests for this sort of thing
56+
it('generates the right CSS when color opacity plugins are disabled', () => {
57+
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
58+
const input = fs.readFileSync(inputPath, 'utf8')
59+
60+
return postcss([
61+
tailwind({
62+
...config,
63+
corePlugins: {
64+
textOpacity: false,
65+
backgroundOpacity: false,
66+
borderOpacity: false,
67+
placeholderOpacity: false,
68+
divideOpacity: false,
69+
},
70+
}),
71+
])
72+
.process(input, { from: inputPath })
73+
.then(result => {
74+
const expected = fs.readFileSync(
75+
path.resolve(`${__dirname}/fixtures/tailwind-output-no-color-opacity.css`),
76+
'utf8'
77+
)
78+
79+
expect(result.css).toBe(expected)
80+
})
81+
})
82+
5583
it('does not add any CSS if no Tailwind features are used', () => {
5684
return postcss([tailwind()])
5785
.process('.foo { color: blue; }', { from: undefined })

‎scripts/rebuildFixtures.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,19 @@ Promise.all([
4444
to: '__tests__/fixtures/tailwind-output-ie11.css',
4545
config: { target: 'ie11' },
4646
}),
47+
build({
48+
from: '__tests__/fixtures/tailwind-input.css',
49+
to: '__tests__/fixtures/tailwind-output-no-color-opacity.css',
50+
config: {
51+
corePlugins: {
52+
textOpacity: false,
53+
backgroundOpacity: false,
54+
borderOpacity: false,
55+
placeholderOpacity: false,
56+
divideOpacity: false,
57+
},
58+
},
59+
}),
4760
]).then(() => {
4861
console.log('\nFinished rebuilding fixtures.')
4962
console.log(

‎src/plugins/backgroundColor.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
33
import withAlphaVariable from '../util/withAlphaVariable'
44

55
export default function() {
6-
return function({ addUtilities, e, theme, variants, target }) {
6+
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
77
if (target('backgroundColor') === 'ie11') {
88
const utilities = _.fromPairs(
99
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
@@ -20,11 +20,13 @@ export default function() {
2020
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
2121
return [
2222
`.${e(`bg-${modifier}`)}`,
23-
withAlphaVariable({
24-
color: value,
25-
property: 'background-color',
26-
variable: '--bg-opacity',
27-
}),
23+
corePlugins('backgroundOpacity')
24+
? withAlphaVariable({
25+
color: value,
26+
property: 'background-color',
27+
variable: '--bg-opacity',
28+
})
29+
: { 'background-color': value },
2830
]
2931
})
3032
)

‎src/plugins/borderColor.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
33
import withAlphaVariable from '../util/withAlphaVariable'
44

55
export default function() {
6-
return function({ addUtilities, e, theme, variants, target }) {
6+
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
77
if (target('borderColor') === 'ie11') {
88
const colors = flattenColorPalette(theme('borderColor'))
99

@@ -24,11 +24,13 @@ export default function() {
2424
_.map(_.omit(colors, 'default'), (value, modifier) => {
2525
return [
2626
`.${e(`border-${modifier}`)}`,
27-
withAlphaVariable({
28-
color: value,
29-
property: 'border-color',
30-
variable: '--border-opacity',
31-
}),
27+
corePlugins('borderOpacity')
28+
? withAlphaVariable({
29+
color: value,
30+
property: 'border-color',
31+
variable: '--border-opacity',
32+
})
33+
: { 'border-color': value },
3234
]
3335
})
3436
)

‎src/plugins/divideColor.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
33
import withAlphaVariable from '../util/withAlphaVariable'
44

55
export default function() {
6-
return function({ addUtilities, e, theme, variants, target }) {
6+
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
77
const colors = flattenColorPalette(theme('divideColor'))
88

99
if (target('divideColor') === 'ie11') {
@@ -25,11 +25,13 @@ export default function() {
2525
_.map(_.omit(colors, 'default'), (value, modifier) => {
2626
return [
2727
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
28-
withAlphaVariable({
29-
color: value,
30-
property: 'border-color',
31-
variable: '--divide-opacity',
32-
}),
28+
corePlugins('divideOpacity')
29+
? withAlphaVariable({
30+
color: value,
31+
property: 'border-color',
32+
variable: '--divide-opacity',
33+
})
34+
: { 'border-color': value },
3335
]
3436
})
3537
)

‎src/plugins/placeholderColor.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
33
import withAlphaVariable from '../util/withAlphaVariable'
44

55
export default function() {
6-
return function({ addUtilities, e, theme, variants, target }) {
6+
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
77
if (target('placeholderColor') === 'ie11') {
88
const utilities = _.fromPairs(
99
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
@@ -20,7 +20,13 @@ export default function() {
2020
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
2121
return [
2222
`.${e(`placeholder-${modifier}`)}::placeholder`,
23-
withAlphaVariable({ color: value, property: 'color', variable: '--placeholder-opacity' }),
23+
corePlugins('placeholderOpacity')
24+
? withAlphaVariable({
25+
color: value,
26+
property: 'color',
27+
variable: '--placeholder-opacity',
28+
})
29+
: { color: value },
2430
]
2531
})
2632
)

‎src/plugins/textColor.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
33
import withAlphaVariable from '../util/withAlphaVariable'
44

55
export default function() {
6-
return function({ addUtilities, e, theme, variants, target }) {
6+
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
77
if (target('textColor') === 'ie11') {
88
const utilities = _.fromPairs(
99
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
@@ -20,7 +20,9 @@ export default function() {
2020
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
2121
return [
2222
`.${e(`text-${modifier}`)}`,
23-
withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }),
23+
corePlugins('textOpacity')
24+
? withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' })
25+
: { color: value },
2426
]
2527
})
2628
)

0 commit comments

Comments
 (0)