wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Don't generate color opacity code in color plugins if not necessary

Browse source
This commit is contained in:
Adam Wathan 2020-05-01 15:04:40 -04:00
parent 52aab172db
commit e6fd316347
8 changed files with 57132 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/plugins/backgroundColor.js
View file

@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('backgroundColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
@ -20,11 +20,13 @@ export default function() {
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
}),
corePlugins('backgroundOpacity')
? withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
})
: { 'background-color': value },
]
})
)

14
src/plugins/borderColor.js
View file

@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('borderColor') === 'ie11') {
const colors = flattenColorPalette(theme('borderColor'))
@ -24,11 +24,13 @@ export default function() {
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
}),
corePlugins('borderOpacity')
? withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
})
: { 'border-color': value },
]
})
)

14
src/plugins/divideColor.js
View file

@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
const colors = flattenColorPalette(theme('divideColor'))
if (target('divideColor') === 'ie11') {
@ -25,11 +25,13 @@ export default function() {
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
}),
corePlugins('divideOpacity')
? withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
})
: { 'border-color': value },
]
})
)

10
src/plugins/placeholderColor.js
View file

@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('placeholderColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
@ -20,7 +20,13 @@ export default function() {
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [
`.${e(`placeholder-${modifier}`)}::placeholder`,
withAlphaVariable({ color: value, property: 'color', variable: '--placeholder-opacity' }),
corePlugins('placeholderOpacity')
? withAlphaVariable({
color: value,
property: 'color',
variable: '--placeholder-opacity',
})
: { color: value },
]
})
)

6
src/plugins/textColor.js
View file

@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants, target }) {
return function({ addUtilities, e, theme, variants, target, corePlugins }) {
if (target('textColor') === 'ie11') {
const utilities = _.fromPairs(
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
@ -20,7 +20,9 @@ export default function() {
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }),
corePlugins('textOpacity')
? withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' })
: { color: value },
]
})
)