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

Improve matchUtilities API and make it work with the AOT engine (#4232)

Browse source 
* implement matchUtilities2

* ensure animation names without keyframes are not prefixed

* remove matchBase

* call addUtilities for each group individually

* WIP: Write plugins using matchUtilities2

* MORE

* Fix arbitrary value support for fontSize

* Fixes, update fixtures

* Rebuild fixtures

* Don't generate `divide` class with no modifier

* Fixes, rebuild fixtures

* Rename matchUtilities2 to matchUtilities

* Delete bad tests

* Remove temp files GROSS

* Clean stuff up

* Support no return in matchUtilities

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait 2021-05-05 15:23:32 +02:00 • committed by GitHub
parent d76c55afc6
commit 6628eb00ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
70 changed files with 81467 additions and 82678 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/plugins/divideColor.js
View file

@ -1,72 +1,33 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
import nameClass from '../util/nameClass'
import { asColor } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants, corePlugins }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('divideColor'))
matchUtilities({
divide: (modifier) => {
if (modifier === 'DEFAULT') {
return []
}
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, corePlugins }) {
matchUtilities(
{
divide: (value) => {
if (!corePlugins('divideOpacity')) {
return {
[`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
['& > :not([hidden]) ~ :not([hidden])']: {
'border-color': value,
},
}
}
return {
[`${nameClass(
'divide',
modifier
)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({
color: colorPalette[modifier],
['& > :not([hidden]) ~ :not([hidden])']: withAlphaVariable({
color: value,
property: 'border-color',
variable: '--tw-divide-opacity',
}),
}
},
})
} else {
const colors = flattenColorPalette(theme('divideColor'))
const getProperties = (value) => {
if (corePlugins('divideOpacity')) {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--tw-divide-opacity',
})
}
return { 'border-color': toColorValue(value) }
},
{
values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('divideColor'))),
variants: variants('divideColor'),
type: 'color',
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [
`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`,
getProperties(value),
]
})
)
addUtilities(utilities, variants('divideColor'))
}
)
}
}