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

Add gradient color stop position utilities (#10886)

Browse source 
* add gradient color stop positions

* update tests to include gradient position color stop reset values

* add dedicated color stop position tests

* use `%` sign in the name of the uility

* update changelog

* ensure `length` values and css variables work
This commit is contained in:
Robin Malfait 2023-03-28 15:38:30 +02:00
parent 0bfee99ed3
commit 51157717da
No known key found for this signature in database
GPG key ID: 92F53D68B9041AFE
14 changed files with 359 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/corePlugins.js
View file

@ -1756,40 +1756,92 @@ export let corePlugins = {
type: ['color', 'any'],
}
let positionOptions = {
values: theme('gradientColorStopPositions'),
type: ['length', 'percentage'],
}
matchUtilities(
{
from: (value) => {
let transparentToValue = transparentTo(value)
return {
'--tw-gradient-from': toColorValue(value, 'from'),
'--tw-gradient-to': transparentToValue,
'--tw-gradient-from': `${toColorValue(
value,
'from'
)} var(--tw-gradient-from-position)`,
'--tw-gradient-from-position': ' ',
'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-from-position)`,
'--tw-gradient-to-position': ' ',
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
}
},
},
options
)
matchUtilities(
{
from: (value) => {
return {
'--tw-gradient-from-position': value,
}
},
},
positionOptions
)
matchUtilities(
{
via: (value) => {
let transparentToValue = transparentTo(value)
return {
'--tw-gradient-to': transparentToValue,
'--tw-gradient-via-position': ' ',
'--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
'--tw-gradient-to-position': ' ',
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
value,
'via'
)}, var(--tw-gradient-to)`,
)} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
}
},
},
options
)
matchUtilities(
{ to: (value) => ({ '--tw-gradient-to': toColorValue(value, 'to') }) },
{
via: (value) => {
return {
'--tw-gradient-via-position': value,
}
},
},
positionOptions
)
matchUtilities(
{
to: (value) => ({
'--tw-gradient-to': `${toColorValue(value, 'to')} var(--tw-gradient-to-position)`,
'--tw-gradient-to-position': ' ',
}),
},
options
)
matchUtilities(
{
to: (value) => {
return {
'--tw-gradient-to-position': value,
}
},
},
positionOptions
)
}
})(),