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

83
src/plugins/animation.js
View file

@ -1,60 +1,41 @@
import _ from 'lodash'
import parseAnimationValue from '../util/parseAnimationValue'
import nameClass from '../util/nameClass'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants, prefix }) {
if (config('mode') === 'jit') {
let keyframes = Object.fromEntries(
Object.entries(theme('keyframes')).map(([key, value]) => {
return [
key,
[
{
[`@keyframes ${key}`]: value,
},
{ respectVariants: false },
],
]
})
)
matchUtilities({
animate: (modifier, { theme }) => {
let value = theme.animation[modifier]
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, prefix }) {
let prefixName = (name) => prefix(`.${name}`).slice(1)
let keyframes = Object.fromEntries(
Object.entries(theme('keyframes')).map(([key, value]) => {
return [
key,
[
{
[`@keyframes ${prefixName(key)}`]: value,
},
{ respectVariants: false },
],
]
})
)
matchUtilities(
{
animate: (value, { includeRules }) => {
let { name: animationName } = parseAnimationValue(value)
return [
keyframes[animationName],
{ [nameClass('animate', modifier)]: { animation: value } },
].filter(Boolean)
if (keyframes[animationName] !== undefined) {
includeRules(keyframes[animationName], { respectImportant: false })
}
if (animationName === undefined || keyframes[animationName] === undefined) {
return { animation: value }
}
return {
animation: value.replace(animationName, prefixName(animationName)),
}
},
})
} else {
const prefixName = (name) => prefix(`.${name}`).slice(1)
const keyframesConfig = theme('keyframes')
const keyframesStyles = _.mapKeys(
keyframesConfig,
(_keyframes, name) => `@keyframes ${prefixName(name)}`
)
addUtilities(keyframesStyles, { respectImportant: false })
const animationConfig = theme('animation')
const utilities = _.mapValues(
_.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)),
(animation) => {
const { name } = parseAnimationValue(animation)
if (name === undefined || keyframesConfig[name] === undefined) return { animation }
return { animation: animation.replace(name, prefixName(name)) }
}
)
addUtilities(utilities, variants('animation'))
}
},
{ values: theme('animation'), variants: variants('animation') }
)
}
}

46
src/plugins/backdropBlur.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-blur': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropBlur)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-blur': (value) => {
return { '--tw-backdrop-blur': `blur(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropBlur'), (value, modifier) => {
return [
nameClass('backdrop-blur', modifier),
{
'--tw-backdrop-blur': Array.isArray(value)
? value.map((v) => `blur(${v})`).join(' ')
: `blur(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdopBlur'))
}
},
{
values: theme('backdropBlur'),
variants: variants('backdropBlur'),
type: 'any',
}
)
}
}

46
src/plugins/backdropBrightness.js
View file

@ -1,40 +1,18 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-brightness': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropBrightness)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-brightness': (value) => {
return {
[nameClass('backdrop-brightness', modifier)]: {
'--tw-backdrop-brightness': `brightness(${value})`,
},
'--tw-backdrop-brightness': `brightness(${value})`,
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropBrightness'), (value, modifier) => {
return [
nameClass('backdrop-brightness', modifier),
{
'--tw-backdrop-brightness': Array.isArray(value)
? value.map((v) => `brightness(${v})`).join(' ')
: `brightness(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropBrightness'))
}
},
{
values: theme('backdropBrightness'),
variants: variants('backdropBrightness'),
type: 'any',
}
)
}
}

48
src/plugins/backdropContrast.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-contrast': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropContrast)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-contrast', modifier)]: {
'--tw-backdrop-contrast': `contrast(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-contrast': (value) => {
return { '--tw-backdrop-contrast': `contrast(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropContrast'), (value, modifier) => {
return [
nameClass('backdrop-contrast', modifier),
{
'--tw-backdrop-contrast': Array.isArray(value)
? value.map((v) => `contrast(${v})`).join(' ')
: `contrast(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropContrast'))
}
},
{
values: theme('backdropContrast'),
variants: variants('backdropContrast'),
type: 'any',
}
)
}
}

46
src/plugins/backdropGrayscale.js
View file

@ -1,40 +1,18 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-grayscale': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropGrayscale)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-grayscale': (value) => {
return {
[nameClass('backdrop-grayscale', modifier)]: {
'--tw-backdrop-grayscale': `grayscale(${value})`,
},
'--tw-backdrop-grayscale': `grayscale(${value})`,
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropGrayscale'), (value, modifier) => {
return [
nameClass('backdrop-grayscale', modifier),
{
'--tw-backdrop-grayscale': Array.isArray(value)
? value.map((v) => `grayscale(${v})`).join(' ')
: `grayscale(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropGrayscale'))
}
},
{
values: theme('backdropGrayscale'),
variants: variants('backdropGrayscale'),
type: 'any',
}
)
}
}

48
src/plugins/backdropHueRotate.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-hue-rotate': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropHueRotate)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-hue-rotate', modifier)]: {
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-hue-rotate': (value) => {
return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropHueRotate'), (value, modifier) => {
return [
nameClass('backdrop-hue-rotate', modifier),
{
'--tw-backdrop-hue-rotate': Array.isArray(value)
? value.map((v) => `hue-rotate(${v})`).join(' ')
: `hue-rotate(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropHueRotate'))
}
},
{
values: theme('backdropHueRotate'),
variants: variants('backdropHueRotate'),
type: 'any',
}
)
}
}

48
src/plugins/backdropInvert.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-invert': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropInvert)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-invert', modifier)]: {
'--tw-backdrop-invert': `invert(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-invert': (value) => {
return { '--tw-backdrop-invert': `invert(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropInvert'), (value, modifier) => {
return [
nameClass('backdrop-invert', modifier),
{
'--tw-backdrop-invert': Array.isArray(value)
? value.map((v) => `invert(${v})`).join(' ')
: `invert(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropInvert'))
}
},
{
values: theme('backdropInvert'),
variants: variants('backdropInvert'),
type: 'any',
}
)
}
}

48
src/plugins/backdropOpacity.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-opacity': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropOpacity)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-opacity', modifier)]: {
'--tw-backdrop-opacity': `opacity(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-opacity': (value) => {
return { '--tw-backdrop-opacity': `opacity(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropOpacity'), (value, modifier) => {
return [
nameClass('backdrop-opacity', modifier),
{
'--tw-backdrop-opacity': Array.isArray(value)
? value.map((v) => `opacity(${v})`).join(' ')
: `opacity(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropOpacity'))
}
},
{
values: theme('backdropOpacity'),
variants: variants('backdropOpacity'),
type: 'any',
}
)
}
}

48
src/plugins/backdropSaturate.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-saturate': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropSaturate)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-saturate', modifier)]: {
'--tw-backdrop-saturate': `saturate(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-saturate': (value) => {
return { '--tw-backdrop-saturate': `saturate(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropSaturate'), (value, modifier) => {
return [
nameClass('backdrop-saturate', modifier),
{
'--tw-backdrop-saturate': Array.isArray(value)
? value.map((v) => `saturate(${v})`).join(' ')
: `saturate(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropSaturate'))
}
},
{
values: theme('backdropSaturate'),
variants: variants('backdropSaturate'),
type: 'any',
}
)
}
}

48
src/plugins/backdropSepia.js
View file

@ -1,40 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-sepia': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropSepia)
if (value === undefined) {
return []
}
return {
[nameClass('backdrop-sepia', modifier)]: {
'--tw-backdrop-sepia': `sepia(${value})`,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'backdrop-sepia': (value) => {
return { '--tw-backdrop-sepia': `sepia(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('backdropSepia'), (value, modifier) => {
return [
nameClass('backdrop-sepia', modifier),
{
'--tw-backdrop-sepia': Array.isArray(value)
? value.map((v) => `sepia(${v})`).join(' ')
: `sepia(${value})`,
},
]
})
)
addUtilities(utilities, variants('backdropSepia'))
}
},
{
values: theme('backdropSepia'),
variants: variants('backdropSepia'),
type: 'any',
}
)
}
}

57
src/plugins/backgroundColor.js
View file

@ -1,62 +1,29 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
import toColorValue from '../util/toColorValue'
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('backgroundColor'))
matchUtilities({
bg: (modifier) => {
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, corePlugins }) {
matchUtilities(
{
bg: (value) => {
if (!corePlugins('backgroundOpacity')) {
return {
[nameClass('bg', modifier)]: {
'background-color': value,
},
'background-color': value,
}
}
return {
[nameClass('bg', modifier)]: withAlphaVariable({
color: value,
property: 'background-color',
variable: '--tw-bg-opacity',
}),
}
},
})
} else {
const colors = flattenColorPalette(theme('backgroundColor'))
const getProperties = (value) => {
if (corePlugins('backgroundOpacity')) {
return withAlphaVariable({
color: value,
property: 'background-color',
variable: '--tw-bg-opacity',
})
}
return { 'background-color': toColorValue(value) }
},
},
{
values: flattenColorPalette(theme('backgroundColor')),
variants: variants('backgroundColor'),
type: 'color',
}
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('bg', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('backgroundColor'))
}
)
}
}

44
src/plugins/blur.js
View file

@ -1,36 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
blur: (modifier, { theme }) => {
let value = asValue(modifier, theme.blur)
if (value === undefined) {
return []
}
return { [nameClass('blur', modifier)]: { '--tw-blur': `blur(${value})` } }
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
blur: (value) => {
return { '--tw-blur': `blur(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('blur'), (value, modifier) => {
return [
nameClass('blur', modifier),
{
'--tw-blur': Array.isArray(value)
? value.map((v) => `blur(${v})`).join(' ')
: `blur(${value})`,
},
]
})
)
addUtilities(utilities, variants('blur'))
}
},
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
}
}

61
src/plugins/borderColor.js
View file

@ -1,66 +1,29 @@
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('borderColor'))
matchUtilities({
border: (modifier) => {
if (modifier === 'DEFAULT') {
return []
}
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, corePlugins }) {
matchUtilities(
{
border: (value) => {
if (!corePlugins('borderOpacity')) {
return {
[nameClass('border', modifier)]: {
'border-color': value,
},
'border-color': value,
}
}
return {
[nameClass('border', modifier)]: withAlphaVariable({
color: value,
property: 'border-color',
variable: '--tw-border-opacity',
}),
}
},
})
} else {
const colors = flattenColorPalette(theme('borderColor'))
const getProperties = (value) => {
if (corePlugins('borderOpacity')) {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--tw-border-opacity',
})
}
return { 'border-color': toColorValue(value) }
},
},
{
values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
variants: variants('borderColor'),
type: 'color',
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [nameClass('border', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('borderColor'))
}
)
}
}

74
src/plugins/boxShadow.js
View file

@ -1,6 +1,4 @@
import _ from 'lodash'
import transformThemeValue from '../util/transformThemeValue'
import nameClass from '../util/nameClass'
let transformValue = transformThemeValue('boxShadow')
let shadowReset = {
@ -8,60 +6,36 @@ let shadowReset = {
'--tw-shadow': '0 0 #0000',
},
}
let defaultBoxShadow = [
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
`var(--tw-ring-shadow, 0 0 #0000)`,
`var(--tw-shadow)`,
].join(', ')
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
addBase(shadowReset)
matchUtilities({
shadow: (modifier, { theme }) => {
let value = transformValue(theme.boxShadow[modifier])
if (value === undefined) {
return []
}
return [
{
[nameClass('shadow', modifier)]: {
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
'box-shadow': [
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
`var(--tw-ring-shadow, 0 0 #0000)`,
`var(--tw-shadow)`,
].join(', '),
},
},
]
},
})
} else {
addUtilities(
{
'*': {
'--tw-shadow': '0 0 #0000',
},
},
{ respectImportant: false }
)
const utilities = _.fromPairs(
_.map(theme('boxShadow'), (value, modifier) => {
return [
nameClass('shadow', modifier),
{
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
'box-shadow': [
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
`var(--tw-ring-shadow, 0 0 #0000)`,
`var(--tw-shadow)`,
].join(', '),
},
]
})
)
addUtilities(utilities, variants('boxShadow'))
addUtilities(shadowReset, { respectImportant: false })
}
matchUtilities(
{
shadow: (value) => {
value = transformValue(value)
return {
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
'box-shadow': defaultBoxShadow,
}
},
},
{
values: theme('boxShadow'),
variants: variants('boxShadow'),
type: 'lookup',
}
)
}
}

46
src/plugins/brightness.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
brightness: (modifier, { theme }) => {
let value = asValue(modifier, theme.brightness)
if (value === undefined) {
return []
}
return {
[nameClass('brightness', modifier)]: { '--tw-brightness': `brightness(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
brightness: (value) => {
return { '--tw-brightness': `brightness(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('brightness'), (value, modifier) => {
return [
nameClass('brightness', modifier),
{
'--tw-brightness': Array.isArray(value)
? value.map((v) => `brightness(${v})`).join(' ')
: `brightness(${value})`,
},
]
})
)
addUtilities(utilities, variants('brightness'))
}
},
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
}
}

42
src/plugins/contrast.js
View file

@ -1,38 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
contrast: (modifier, { theme }) => {
let value = asValue(modifier, theme.contrast)
if (value === undefined) {
return []
}
return {
[nameClass('contrast', modifier)]: { '--tw-contrast': `contrast(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
contrast: (value) => {
return { '--tw-contrast': `contrast(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('contrast'), (value, modifier) => {
return [
nameClass('contrast', modifier),
{
'--tw-contrast': Array.isArray(value)
? value.map((v) => `contrast(${v})`).join(' ')
: `contrast(${value})`,
},
]
})
)
addUtilities(utilities, variants('contrast'))
}
},
{ values: theme('contrast'), variants: variants('contrast'), type: 'any' }
)
}
}

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'))
}
)
}
}

42
src/plugins/divideOpacity.js
View file

@ -1,38 +1,20 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'divide-opacity': (modifier, { theme }) => {
let value = asValue(modifier, theme.divideOpacity)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'divide-opacity': (value) => {
return {
[`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
[`& > :not([hidden]) ~ :not([hidden])`]: {
'--tw-divide-opacity': value,
},
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('divideOpacity'), (value, modifier) => {
return [
`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`,
{
'--tw-divide-opacity': value,
},
]
})
)
addUtilities(utilities, variants('divideOpacity'))
}
},
{
values: theme('divideOpacity'),
variants: variants('divideOpacity'),
type: 'any',
}
)
}
}

82
src/plugins/divideWidth.js
View file

@ -1,91 +1,47 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'divide-x': (modifier, { theme }) => {
let value = asLength(modifier, theme['divideWidth'])
if (value === undefined) {
return []
}
return function ({ matchUtilities, addUtilities, theme, variants }) {
matchUtilities(
{
'divide-x': (value) => {
value = value === '0' ? '0px' : value
return {
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'& > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-x-reverse': '0',
'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
},
}
},
'divide-y': (modifier, { theme }) => {
let value = asLength(modifier, theme['divideWidth'])
if (value === undefined) {
return []
}
'divide-y': (value) => {
value = value === '0' ? '0px' : value
return {
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'& > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-y-reverse': '0',
'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`,
},
}
},
})
},
{
values: theme('divideWidth'),
variants: variants('divideWidth'),
type: 'length',
}
)
addUtilities({
addUtilities(
{
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-y-reverse': '1',
},
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-x-reverse': '1',
},
})
} else {
const generators = [
(_size, modifier) => {
const size = _size === '0' ? '0px' : _size
return {
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-divide-y-reverse': '0',
'border-top-width': `calc(${size} * calc(1 - var(--tw-divide-y-reverse)))`,
'border-bottom-width': `calc(${size} * var(--tw-divide-y-reverse))`,
},
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-divide-x-reverse': '0',
'border-right-width': `calc(${size} * var(--tw-divide-x-reverse))`,
'border-left-width': `calc(${size} * calc(1 - var(--tw-divide-x-reverse)))`,
},
}
},
]
const utilities = _.flatMap(generators, (generator) => {
return [
..._.flatMap(theme('divideWidth'), (value, modifier) => {
return generator(value, modifier)
}),
{
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-y-reverse': '1',
},
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-divide-x-reverse': '1',
},
},
]
})
addUtilities(utilities, variants('divideWidth'))
}
},
variants('divideWidth')
)
}
}

40
src/plugins/fill.js
View file

@ -1,35 +1,19 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('fill'))
matchUtilities({
fill: (modifier) => {
let value = asValue(modifier, colorPalette)
if (value === undefined) {
return []
}
return { [nameClass('fill', modifier)]: { fill: toColorValue(value) } }
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
fill: (value) => {
return { fill: toColorValue(value) }
},
})
} else {
const colors = flattenColorPalette(theme('fill'))
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('fill', modifier), { fill: toColorValue(value) }]
})
)
addUtilities(utilities, variants('fill'))
}
},
{
values: flattenColorPalette(theme('fill')),
variants: variants('fill'),
type: 'any',
}
)
}
}

84
src/plugins/fontSize.js
View file

@ -1,81 +1,27 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
import isPlainObject from '../util/isPlainObject'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
text: (modifier, { theme }) => {
let value = theme.fontSize[modifier]
if (value === undefined) {
value = asLength(modifier, {})
return value === undefined
? []
: {
[nameClass('text', modifier)]: {
'font-size': value,
},
}
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
text: (value) => {
let [fontSize, options] = Array.isArray(value) ? value : [value]
let { lineHeight, letterSpacing } = isPlainObject(options)
? options
: {
lineHeight: options,
}
: { lineHeight: options }
return {
[nameClass('text', modifier)]: {
'font-size': fontSize,
...(lineHeight === undefined
? {}
: {
'line-height': lineHeight,
}),
...(letterSpacing === undefined
? {}
: {
'letter-spacing': letterSpacing,
}),
},
'font-size': fontSize,
...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('fontSize'), (value, modifier) => {
const [fontSize, options] = Array.isArray(value) ? value : [value]
const { lineHeight, letterSpacing } = _.isPlainObject(options)
? options
: {
lineHeight: options,
}
return [
nameClass('text', modifier),
{
'font-size': fontSize,
...(lineHeight === undefined
? {}
: {
'line-height': lineHeight,
}),
...(letterSpacing === undefined
? {}
: {
'letter-spacing': letterSpacing,
}),
},
]
})
)
addUtilities(utilities, variants('fontSize'))
}
},
{
values: theme('fontSize'),
variants: variants('fontSize'),
type: 'length',
}
)
}
}

140
src/plugins/gradientColorStops.js
View file

@ -1,110 +1,54 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import { withAlphaValue } from '../util/withAlphaVariable'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
function transparentTo(value) {
return withAlphaValue(value, 0, 'rgba(255, 255, 255, 0)')
}
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
let colorPalette = flattenColorPalette(theme('gradientColorStops'))
if (config('mode') === 'jit') {
matchUtilities({
from: (modifier) => {
let value = asValue(modifier, colorPalette)
if (value === undefined) {
return []
}
let transparentToValue = transparentTo(value)
return {
[nameClass('from', modifier)]: {
'--tw-gradient-from': toColorValue(value, 'from'),
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
},
}
},
})
matchUtilities({
via: (modifier) => {
let value = asValue(modifier, colorPalette)
if (value === undefined) {
return []
}
let transparentToValue = transparentTo(value)
return {
[nameClass('via', modifier)]: {
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
value,
'via'
)}, var(--tw-gradient-to, ${transparentToValue})`,
},
}
},
})
matchUtilities({
to: (modifier) => {
let value = asValue(modifier, colorPalette)
if (value === undefined) {
return []
}
return {
[nameClass('to', modifier)]: {
'--tw-gradient-to': toColorValue(value, 'to'),
},
}
},
})
} else {
const colors = colorPalette
const utilities = _(colors)
.map((value, modifier) => {
const transparentToValue = transparentTo(value)
return [
[
nameClass('from', modifier),
{
'--tw-gradient-from': toColorValue(value, 'from'),
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
},
],
[
nameClass('via', modifier),
{
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
value,
'via'
)}, var(--tw-gradient-to, ${transparentToValue})`,
},
],
[
nameClass('to', modifier),
{
'--tw-gradient-to': toColorValue(value, 'to'),
},
],
]
})
.unzip()
.flatten()
.fromPairs()
.value()
addUtilities(utilities, variants('gradientColorStops'))
return function ({ matchUtilities, theme, variants }) {
let options = {
values: flattenColorPalette(theme('gradientColorStops')),
variants: variants('gradientColorStops'),
type: 'any',
}
matchUtilities(
{
from: (value) => {
let transparentToValue = transparentTo(value)
return {
'--tw-gradient-from': toColorValue(value, 'from'),
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
}
},
},
options
)
matchUtilities(
{
via: (value) => {
let transparentToValue = transparentTo(value)
return {
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
value,
'via'
)}, var(--tw-gradient-to, ${transparentToValue})`,
}
},
},
options
)
matchUtilities(
{
to: (value) => {
return { '--tw-gradient-to': toColorValue(value, 'to') }
},
},
options
)
}
}

46
src/plugins/grayscale.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
grayscale: (modifier, { theme }) => {
let value = asValue(modifier, theme.grayscale)
if (value === undefined) {
return []
}
return {
[nameClass('grayscale', modifier)]: { '--tw-grayscale': `grayscale(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
grayscale: (value) => {
return { '--tw-grayscale': `grayscale(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('grayscale'), (value, modifier) => {
return [
nameClass('grayscale', modifier),
{
'--tw-grayscale': Array.isArray(value)
? value.map((v) => `grayscale(${v})`).join(' ')
: `grayscale(${value})`,
},
]
})
)
addUtilities(utilities, variants('grayscale'))
}
},
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
}
}

46
src/plugins/hueRotate.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'hue-rotate': (modifier, { theme }) => {
let value = asValue(modifier, theme.hueRotate)
if (value === undefined) {
return []
}
return {
[nameClass('hue-rotate', modifier)]: { '--tw-hue-rotate': `hue-rotate(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'hue-rotate': (value) => {
return { '--tw-hue-rotate': `hue-rotate(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('hueRotate'), (value, modifier) => {
return [
nameClass('hue-rotate', modifier),
{
'--tw-hue-rotate': Array.isArray(value)
? value.map((v) => `hue-rotate(${v})`).join(' ')
: `hue-rotate(${value})`,
},
]
})
)
addUtilities(utilities, variants('hueRotate'))
}
},
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
}
}

163
src/plugins/inset.js
View file

@ -1,123 +1,48 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
inset: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return {
[nameClass('inset', modifier)]: {
top: value,
right: value,
bottom: value,
left: value,
},
}
},
})
matchUtilities({
'inset-x': (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return {
[nameClass('inset-x', modifier)]: { left: value, right: value },
}
},
'inset-y': (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return {
[nameClass('inset-y', modifier)]: { top: value, bottom: value },
}
},
})
matchUtilities({
top: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return { [nameClass('top', modifier)]: { top: value } }
},
right: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return { [nameClass('right', modifier)]: { right: value } }
},
bottom: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return { [nameClass('bottom', modifier)]: { bottom: value } }
},
left: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
if (value === undefined) {
return []
}
return { [nameClass('left', modifier)]: { left: value } }
},
})
} else {
const generators = [
(size, modifier) => ({
[nameClass('inset', modifier)]: {
top: `${size}`,
right: `${size}`,
bottom: `${size}`,
left: `${size}`,
},
}),
(size, modifier) => ({
[nameClass('inset-y', modifier)]: {
top: `${size}`,
bottom: `${size}`,
},
[nameClass('inset-x', modifier)]: {
right: `${size}`,
left: `${size}`,
},
}),
(size, modifier) => ({
[nameClass('top', modifier)]: { top: `${size}` },
[nameClass('right', modifier)]: { right: `${size}` },
[nameClass('bottom', modifier)]: { bottom: `${size}` },
[nameClass('left', modifier)]: { left: `${size}` },
}),
]
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('inset'), generator)
})
addUtilities(utilities, variants('inset'))
return function ({ matchUtilities, theme, variants }) {
let options = {
values: theme('inset'),
variants: variants('inset'),
type: 'any',
}
matchUtilities(
{
inset: (value) => {
return { top: value, right: value, bottom: value, left: value }
},
},
options
)
matchUtilities(
{
'inset-x': (value) => {
return { left: value, right: value }
},
'inset-y': (value) => {
return { top: value, bottom: value }
},
},
options
)
matchUtilities(
{
top: (value) => {
return { top: value }
},
right: (value) => {
return { right: value }
},
bottom: (value) => {
return { bottom: value }
},
left: (value) => {
return { left: value }
},
},
options
)
}
}

46
src/plugins/invert.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
invert: (modifier, { theme }) => {
let value = asValue(modifier, theme.invert)
if (value === undefined) {
return []
}
return {
[nameClass('invert', modifier)]: { '--tw-invert': `invert(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
invert: (value) => {
return { '--tw-invert': `invert(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('invert'), (value, modifier) => {
return [
nameClass('invert', modifier),
{
'--tw-invert': Array.isArray(value)
? value.map((v) => `invert(${v})`).join(' ')
: `invert(${value})`,
},
]
})
)
addUtilities(utilities, variants('invert'))
}
},
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
}
}

46
src/plugins/outline.js
View file

@ -1,44 +1,14 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
outline: (modifier, { theme }) => {
let value = asValue(modifier, theme.outline)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
outline: (value) => {
let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
return {
[nameClass('outline', modifier)]: {
outline,
'outline-offset': outlineOffset,
},
}
return { outline, 'outline-offset': outlineOffset }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('outline'), (value, modifier) => {
const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
return [
nameClass('outline', modifier),
{
outline,
outlineOffset,
},
]
})
)
addUtilities(utilities, variants('outline'))
}
},
{ values: theme('outline'), variants: variants('outline'), type: 'any' }
)
}
}

53
src/plugins/placeholderColor.js
View file

@ -1,62 +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 { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants, corePlugins }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('placeholderColor'))
matchUtilities({
placeholder: (modifier) => {
let value = asValue(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, corePlugins }) {
matchUtilities(
{
placeholder: (value) => {
if (!corePlugins('placeholderOpacity')) {
return {
[`${nameClass('placeholder', modifier)}::placeholder`]: {
'&::placeholder': {
color: value,
},
}
}
return {
[`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({
'&::placeholder': withAlphaVariable({
color: value,
property: 'color',
variable: '--tw-placeholder-opacity',
}),
}
},
})
} else {
const colors = flattenColorPalette(theme('placeholderColor'))
const getProperties = (value) => {
if (corePlugins('placeholderOpacity')) {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--tw-placeholder-opacity',
})
}
return { color: toColorValue(value) }
},
{
values: flattenColorPalette(theme('placeholderColor')),
variants: variants('placeholderColor'),
type: 'any',
}
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`${nameClass('placeholder', modifier)}::placeholder`, getProperties(value)]
})
)
addUtilities(utilities, variants('placeholderColor'))
}
)
}
}

46
src/plugins/placeholderOpacity.js
View file

@ -1,38 +1,16 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'placeholder-opacity': (modifier, { theme }) => {
let value = asValue(modifier, theme.placeholderOpacity)
if (value === undefined) {
return []
}
return {
[`${nameClass('placeholder-opacity', modifier)}::placeholder`]: {
'--tw-placeholder-opacity': value,
},
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'placeholder-opacity': (value) => {
return { ['&::placeholder']: { '--tw-placeholder-opacity': value } }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('placeholderOpacity'), (value, modifier) => {
return [
`${nameClass('placeholder-opacity', modifier)}::placeholder`,
{
'--tw-placeholder-opacity': value,
},
]
})
)
addUtilities(utilities, variants('placeholderOpacity'))
}
},
{
values: theme('placeholderOpacity'),
variants: variants('placeholderOpacity'),
type: 'any',
}
)
}
}

64
src/plugins/ringColor.js
View file

@ -1,53 +1,27 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
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 }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('ringColor'))
matchUtilities({
ring: (modifier) => {
if (modifier === 'DEFAULT') {
return []
}
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return {
[nameClass('ring', modifier)]: withAlphaVariable({
color: value,
property: '--tw-ring-color',
variable: '--tw-ring-opacity',
}),
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
ring: (value) => {
return withAlphaVariable({
color: value,
property: '--tw-ring-color',
variable: '--tw-ring-opacity',
})
},
})
} else {
const colors = flattenColorPalette(theme('ringColor'))
const getProperties = (value) => {
return withAlphaVariable({
color: value,
property: '--tw-ring-color',
variable: '--tw-ring-opacity',
})
},
{
values: Object.fromEntries(
Object.entries(flattenColorPalette(theme('ringColor'))).filter(
([modifier]) => modifier !== 'DEFAULT'
)
),
variants: variants('ringColor'),
type: 'color',
}
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [nameClass('ring', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('ringColor'))
}
)
}
}

45
src/plugins/ringOffsetColor.js
View file

@ -1,42 +1,21 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import nameClass from '../util/nameClass'
import { asColor } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('ringOffsetColor'))
matchUtilities({
'ring-offset': (modifier) => {
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
'ring-offset': (value) => {
return {
[nameClass('ring-offset', modifier)]: {
'--tw-ring-offset-color': toColorValue(value),
},
'--tw-ring-offset-color': toColorValue(value),
}
},
})
} else {
const colors = flattenColorPalette(theme('ringOffsetColor'))
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [
nameClass('ring-offset', modifier),
{
'--tw-ring-offset-color': toColorValue(value),
},
]
})
)
addUtilities(utilities, variants('ringOffsetColor'))
}
},
{
values: flattenColorPalette(theme('ringOffsetColor')),
variants: variants('ringOffsetColor'),
type: 'color',
}
)
}
}

130
src/plugins/ringWidth.js
View file

@ -1,102 +1,52 @@
import _ from 'lodash'
import { withAlphaValue } from '../util/withAlphaVariable'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
const ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
const ringColorDefault = withAlphaValue(
let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
let ringColorDefault = withAlphaValue(
theme('ringColor.DEFAULT'),
ringOpacityDefault,
`rgba(147, 197, 253, ${ringOpacityDefault})`
)
if (config('mode') === 'jit') {
let ringReset = {
'*': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
},
}
addBase(ringReset)
matchUtilities({
ring: (modifier, { theme }) => {
let value = asLength(modifier, theme['ringWidth'])
if (value === undefined) {
return []
}
return [
{
[nameClass('ring', modifier)]: {
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': [
`var(--tw-ring-offset-shadow)`,
`var(--tw-ring-shadow)`,
`var(--tw-shadow, 0 0 #0000)`,
].join(', '),
},
},
]
},
})
addUtilities({
'.ring-inset': {
'--tw-ring-inset': 'inset',
},
})
} else {
addUtilities(
{
'*': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
},
},
{ respectImportant: false }
)
const utilities = _.fromPairs(
_.map(theme('ringWidth'), (value, modifier) => {
return [
nameClass('ring', modifier),
{
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': [
`var(--tw-ring-offset-shadow)`,
`var(--tw-ring-shadow)`,
`var(--tw-shadow, 0 0 #0000)`,
].join(', '),
},
]
})
)
addUtilities(
[
utilities,
{
'.ring-inset': {
'--tw-ring-inset': 'inset',
},
},
],
variants('ringWidth')
)
let ringReset = {
'*': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': '0 0 #0000',
'--tw-ring-shadow': '0 0 #0000',
},
}
if (config('mode') === 'jit') {
addBase(ringReset)
} else {
addUtilities(ringReset, { respectImportant: false })
}
matchUtilities(
{
ring: (value) => {
return {
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': [
`var(--tw-ring-offset-shadow)`,
`var(--tw-ring-shadow)`,
`var(--tw-shadow, 0 0 #0000)`,
].join(', '),
}
},
},
{
values: theme('ringWidth'),
variants: variants('ringWidth'),
type: 'length',
}
)
addUtilities({ '.ring-inset': { '--tw-ring-inset': 'inset' } }, variants('ringWidth'))
}
}

44
src/plugins/saturate.js
View file

@ -1,38 +1,18 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
saturate: (modifier, { theme }) => {
let value = asValue(modifier, theme.saturate)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
saturate: (value) => {
return {
[nameClass('saturate', modifier)]: { '--tw-saturate': `saturate(${value})` },
'--tw-saturate': `saturate(${value})`,
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('saturate'), (value, modifier) => {
return [
nameClass('saturate', modifier),
{
'--tw-saturate': Array.isArray(value)
? value.map((v) => `saturate(${v})`).join(' ')
: `saturate(${value})`,
},
]
})
)
addUtilities(utilities, variants('saturate'))
}
},
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
}
}

42
src/plugins/sepia.js
View file

@ -1,38 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
sepia: (modifier, { theme }) => {
let value = asValue(modifier, theme.sepia)
if (value === undefined) {
return []
}
return {
[nameClass('sepia', modifier)]: { '--tw-sepia': `sepia(${value})` },
}
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
sepia: (value) => {
return { '--tw-sepia': `sepia(${value})` }
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('sepia'), (value, modifier) => {
return [
nameClass('sepia', modifier),
{
'--tw-sepia': Array.isArray(value)
? value.map((v) => `sepia(${v})`).join(' ')
: `sepia(${value})`,
},
]
})
)
addUtilities(utilities, variants('sepia'))
}
},
{ values: theme('sepia'), variants: variants('sepia'), type: 'any' }
)
}
}

80
src/plugins/space.js
View file

@ -1,89 +1,47 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'space-x': (modifier, { theme }) => {
let value = asValue(modifier, theme['space'])
if (value === undefined) {
return []
}
return function ({ matchUtilities, addUtilities, theme, variants }) {
matchUtilities(
{
'space-x': (value) => {
value = value === '0' ? '0px' : value
return {
[`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'& > :not([hidden]) ~ :not([hidden])': {
'--tw-space-x-reverse': '0',
'margin-right': `calc(${value} * var(--tw-space-x-reverse))`,
'margin-left': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
},
}
},
'space-y': (modifier, { theme }) => {
let value = asValue(modifier, theme['space'])
if (value === undefined) {
return []
}
'space-y': (value) => {
value = value === '0' ? '0px' : value
return {
[`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'& > :not([hidden]) ~ :not([hidden])': {
'--tw-space-y-reverse': '0',
'margin-top': `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`,
'margin-bottom': `calc(${value} * var(--tw-space-y-reverse))`,
},
}
},
})
},
{
values: theme('space'),
variants: variants('space'),
type: 'any',
}
)
addUtilities({
addUtilities(
{
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-space-y-reverse': '1',
},
'.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-space-x-reverse': '1',
},
})
} else {
const generators = [
(_size, modifier) => {
const size = _size === '0' ? '0px' : _size
return {
[`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-space-y-reverse': '0',
'margin-top': `calc(${size} * calc(1 - var(--tw-space-y-reverse)))`,
'margin-bottom': `calc(${size} * var(--tw-space-y-reverse))`,
},
[`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--tw-space-x-reverse': '0',
'margin-right': `calc(${size} * var(--tw-space-x-reverse))`,
'margin-left': `calc(${size} * calc(1 - var(--tw-space-x-reverse)))`,
},
}
},
]
const utilities = _.flatMap(generators, (generator) => {
return [
..._.flatMap(theme('space'), generator),
{
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-space-y-reverse': '1',
},
'.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--tw-space-x-reverse': '1',
},
},
]
})
addUtilities(utilities, variants('space'))
}
},
variants('space')
)
}
}

40
src/plugins/stroke.js
View file

@ -1,35 +1,21 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import nameClass from '../util/nameClass'
import { asColor } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('stroke'))
matchUtilities({
stroke: (modifier) => {
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
return function ({ matchUtilities, theme, variants }) {
matchUtilities(
{
stroke: (value) => {
return {
stroke: toColorValue(value),
}
return { [nameClass('stroke', modifier)]: { stroke: toColorValue(value) } }
},
})
} else {
const colors = flattenColorPalette(theme('stroke'))
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('stroke', modifier), { stroke: toColorValue(value) }]
})
)
addUtilities(utilities, variants('stroke'))
}
},
{
values: flattenColorPalette(theme('stroke')),
variants: variants('stroke'),
type: 'color',
}
)
}
}

59
src/plugins/textColor.js
View file

@ -1,62 +1,27 @@
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('textColor'))
matchUtilities({
text: (modifier) => {
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants, corePlugins }) {
matchUtilities(
{
text: (value) => {
if (!corePlugins('textOpacity')) {
return {
[nameClass('text', modifier)]: {
color: value,
},
}
return { color: value }
}
return {
[nameClass('text', modifier)]: withAlphaVariable({
color: value,
property: 'color',
variable: '--tw-text-opacity',
}),
}
},
})
} else {
const colors = flattenColorPalette(theme('textColor'))
const getProperties = (value) => {
if (corePlugins('textOpacity')) {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--tw-text-opacity',
})
}
return { color: toColorValue(value) }
},
},
{
values: flattenColorPalette(theme('textColor')),
variants: variants('textColor'),
type: 'color',
}
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('text', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('textColor'))
}
)
}
}

65
src/plugins/transitionProperty.js
View file

@ -1,52 +1,27 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
const defaultTimingFunction = theme('transitionTimingFunction.DEFAULT')
const defaultDuration = theme('transitionDuration.DEFAULT')
if (config('mode') === 'jit') {
matchUtilities({
transition: (modifier, { theme }) => {
let value = theme.transitionProperty[modifier]
if (value === undefined) {
return []
}
return function ({ matchUtilities, theme, variants }) {
let defaultTimingFunction = theme('transitionTimingFunction.DEFAULT')
let defaultDuration = theme('transitionDuration.DEFAULT')
matchUtilities(
{
transition: (value) => {
return {
[nameClass('transition', modifier)]: {
'transition-property': value,
...(value === 'none'
? {}
: {
'transition-timing-function': defaultTimingFunction,
'transition-duration': defaultDuration,
}),
},
'transition-property': value,
...(value === 'none'
? {}
: {
'transition-timing-function': defaultTimingFunction,
'transition-duration': defaultDuration,
}),
}
},
})
} else {
const utilities = _.fromPairs(
_.map(theme('transitionProperty'), (value, modifier) => {
return [
nameClass('transition', modifier),
{
'transition-property': value,
...(value === 'none'
? {}
: {
'transition-timing-function': defaultTimingFunction,
'transition-duration': defaultDuration,
}),
},
]
})
)
addUtilities(utilities, variants('transitionProperty'))
}
},
{
values: theme('transitionProperty'),
variants: variants('transitionProperty'),
type: 'lookup',
}
)
}
}