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

Pass opacityValue to gradient colors for transparency support, do not pass opacityVariable since unused

Browse source
This commit is contained in:
Adam Wathan 2020-08-19 11:38:22 -04:00
parent 28930f4799
commit a7e19ca131
2 changed files with 34 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

37
__tests__/plugins/gradientColorStops.test.js
View file

@ -6,30 +6,49 @@ test('opacity variables are given to colors defined as closures', () => {
tailwind({
theme: {
colors: {
primary: ({ opacityVariable }) => `rgba(31,31,31,var(${opacityVariable},1))`,
primary: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(31,31,31,${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(31,31,31,var(${opacityVariable},1))`
}
return `rgb(31,31,31)`
},
},
opacity: {
'50': '0.5',
},
},
variants: {
textColor: [],
textOpacity: [],
gradientColorStops: [],
},
corePlugins: ['gradientColorStops'],
corePlugins: ['textColor', 'textOpacity', 'gradientColorStops'],
}),
])
.process('@tailwind utilities', { from: undefined })
.then(result => {
const expected = `
.text-primary {
color: rgba(31,31,31,var(--text-opacity,1))
}
.text-opacity-50 {
--text-opacity: 0.5
}
.from-primary {
--gradient-from-color: rgba(31,31,31,var(--gradient-from-opacity,1));
--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
--gradient-from-color: rgb(31,31,31);
--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(31, 31, 31, 0))
}
.via-primary {
--gradient-via-color: rgba(31,31,31,var(--gradient-via-opacity,1));
--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(255, 255, 255, 0))
--gradient-via-color: rgb(31,31,31);
--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(31, 31, 31, 0))
}
.to-primary {
--gradient-to-color: rgba(31,31,31,var(--gradient-to-opacity,1))
--gradient-to-color: rgb(31,31,31)
}
`

10
src/plugins/gradientColorStops.js
View file

@ -12,17 +12,19 @@ export default function() {
const utilities = _(colors)
.map((value, modifier) => {
const getColorValue = (color, type) => {
const getColorValue = color => {
if (_.isFunction(color)) {
return value({
opacityVariable: `--gradient-${type}-opacity`,
})
return value({})
}
return color
}
const transparentTo = (() => {
if (_.isFunction(value)) {
return value({ opacityValue: 0 })
}
try {
const [r, g, b] = toRgba(value)
return `rgba(${r}, ${g}, ${b}, 0)`