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

[WIP] Unify JIT and AOT code paths (#4188)

Browse source 
* WIP

* WIP

* Finish combining JIT and AOT plugins

Still lots of clean up that can be done in some of the more complex ones, but at least it's one file per plugin now.

* Remove unused import

* Fix AOT generation bugs

* Move corePlugins/index.js to corePlugins.js

* Convert JIT files to ESM

* Move tests

* Reorder core plugins to match JIT order

* Update AOT apply tests

* Unify utils

* Combine plugin lists to one single source of truth

* Finish resolving merge conflicts, fix tests

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait 2021-04-30 16:58:40 +02:00 • committed by GitHub
parent 54aa5be7ce
commit bfc61625d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
340 changed files with 428688 additions and 430807 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/plugins/animation.js
View file

@ -1,27 +1,62 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import parseAnimationValue from '../util/parseAnimationValue'
import nameClass from '../util/nameClass'
export default function () {
return function ({ addUtilities, theme, variants, prefix }) {
const prefixName = (name) => prefix(`.${name}`).slice(1)
const keyframesConfig = theme('keyframes')
const keyframesStyles = _.mapKeys(
keyframesConfig,
(_keyframes, name) => `@keyframes ${prefixName(name)}`
)
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 },
],
]
})
)
addUtilities(keyframesStyles, { respectImportant: false })
matchUtilities({
animate: [
(modifier, { theme }) => {
let value = theme.animation[modifier]
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'))
if (value === undefined) {
return []
}
let { name: animationName } = parseAnimationValue(value)
return [
keyframes[animationName],
{ [nameClass('animate', modifier)]: { animation: value } },
].filter(Boolean)
},
],
})
} 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'))
}
}
}

3
src/plugins/backdropBlur.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropBrightness.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropContrast.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropGrayscale.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropHueRotate.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropInvert.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropOpacity.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropSaturate.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/backdropSepia.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

67
src/plugins/backgroundColor.js
View file

@ -3,29 +3,60 @@ 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 ({ addUtilities, theme, variants, corePlugins }) {
const colors = flattenColorPalette(theme('backgroundColor'))
return function ({ config, matchUtilities, addUtilities, theme, variants, corePlugins }) {
if (config('mode') === 'jit') {
let colorPalette = flattenColorPalette(theme('backgroundColor'))
const getProperties = (value) => {
if (corePlugins('backgroundOpacity')) {
return withAlphaVariable({
color: value,
property: 'background-color',
variable: '--tw-bg-opacity',
})
matchUtilities({
bg: (modifier) => {
let value = asColor(modifier, colorPalette)
if (value === undefined) {
return []
}
if (!corePlugins('backgroundOpacity')) {
return {
[nameClass('bg', modifier)]: {
'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) }
}
return { 'background-color': toColorValue(value) }
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('bg', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('backgroundColor'))
}
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [nameClass('bg', modifier), getProperties(value)]
})
)
addUtilities(utilities, variants('backgroundColor'))
}
}

21
src/plugins/backgroundImage.js
View file

@ -1,19 +1,8 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundImage'), (value, modifier) => {
return [
nameClass('bg', modifier),
{
'background-image': value,
},
]
})
)
addUtilities(utilities, variants('backgroundImage'))
}
return createUtilityPlugin('backgroundImage', [['bg', ['background-image']]], {
resolveArbitraryValue: asLookupValue,
})
}

21
src/plugins/backgroundPosition.js
View file

@ -1,19 +1,8 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundPosition'), (value, modifier) => {
return [
nameClass('bg', modifier),
{
'background-position': value,
},
]
})
)
addUtilities(utilities, variants('backgroundPosition'))
}
return createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
resolveArbitraryValue: asLookupValue,
})
}

21
src/plugins/backgroundSize.js
View file

@ -1,19 +1,8 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundSize'), (value, modifier) => {
return [
nameClass('bg', modifier),
{
'background-size': value,
},
]
})
)
addUtilities(utilities, variants('backgroundSize'))
}
return createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
resolveArbitraryValue: asLookupValue,
})
}

3
src/plugins/blur.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

73
src/plugins/borderColor.js
View file

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

57
src/plugins/borderRadius.js
View file

@ -1,44 +1,19 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const generators = [
(value, modifier) => ({
[nameClass('rounded', modifier)]: { borderRadius: `${value}` },
}),
(value, modifier) => ({
[nameClass('rounded-t', modifier)]: {
borderTopLeftRadius: `${value}`,
borderTopRightRadius: `${value}`,
},
[nameClass('rounded-r', modifier)]: {
borderTopRightRadius: `${value}`,
borderBottomRightRadius: `${value}`,
},
[nameClass('rounded-b', modifier)]: {
borderBottomRightRadius: `${value}`,
borderBottomLeftRadius: `${value}`,
},
[nameClass('rounded-l', modifier)]: {
borderTopLeftRadius: `${value}`,
borderBottomLeftRadius: `${value}`,
},
}),
(value, modifier) => ({
[nameClass('rounded-tl', modifier)]: { borderTopLeftRadius: `${value}` },
[nameClass('rounded-tr', modifier)]: { borderTopRightRadius: `${value}` },
[nameClass('rounded-br', modifier)]: { borderBottomRightRadius: `${value}` },
[nameClass('rounded-bl', modifier)]: { borderBottomLeftRadius: `${value}` },
}),
]
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('borderRadius'), (value, modifier) => {
return generator(value, modifier)
})
})
addUtilities(utilities, variants('borderRadius'))
}
return createUtilityPlugin('borderRadius', [
['rounded', ['border-radius']],
[
['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
],
[
['rounded-tl', ['border-top-left-radius']],
['rounded-tr', ['border-top-right-radius']],
['rounded-br', ['border-bottom-right-radius']],
['rounded-bl', ['border-bottom-left-radius']],
],
])
}

38
src/plugins/borderWidth.js
View file

@ -1,26 +1,18 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const generators = [
(value, modifier) => ({
[nameClass('border', modifier)]: { borderWidth: `${value}` },
}),
(value, modifier) => ({
[nameClass('border-t', modifier)]: { borderTopWidth: `${value}` },
[nameClass('border-r', modifier)]: { borderRightWidth: `${value}` },
[nameClass('border-b', modifier)]: { borderBottomWidth: `${value}` },
[nameClass('border-l', modifier)]: { borderLeftWidth: `${value}` },
}),
]
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('borderWidth'), (value, modifier) => {
return generator(value, modifier)
})
})
addUtilities(utilities, variants('borderWidth'))
}
return createUtilityPlugin(
'borderWidth',
[
['border', ['border-width']],
[
['border-t', ['border-top-width']],
['border-r', ['border-right-width']],
['border-b', ['border-bottom-width']],
['border-l', ['border-left-width']],
],
],
{ resolveArbitraryValue: asLength }
)
}

82
src/plugins/boxShadow.js
View file

@ -1,33 +1,67 @@
import _ from 'lodash'
import transformThemeValue from '../util/transformThemeValue'
import nameClass from '../util/nameClass'
let transformValue = transformThemeValue('boxShadow')
let shadowReset = {
'*': {
'--tw-shadow': '0 0 #0000',
},
}
export default function () {
return function ({ addUtilities, theme, variants }) {
addUtilities(
{
'*': {
'--tw-shadow': '0 0 #0000',
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(', '),
},
},
]
},
},
{ 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(', '),
},
]
})
)
} else {
addUtilities(
{
'*': {
'--tw-shadow': '0 0 #0000',
},
},
{ respectImportant: false }
)
addUtilities(utilities, variants('boxShadow'))
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'))
}
}
}

3
src/plugins/brightness.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

3
src/plugins/contrast.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

18
src/plugins/cursor.js
View file

@ -1,19 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('cursor'), (value, modifier) => {
return [
nameClass('cursor', modifier),
{
cursor: value,
},
]
})
)
addUtilities(utilities, variants('cursor'))
}
return createUtilityPlugin('cursor')
}

82
src/plugins/divideColor.js
View file

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

43
src/plugins/divideOpacity.js
View file

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

113
src/plugins/divideWidth.js
View file

@ -1,42 +1,91 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
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)))`,
},
}
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'divide-x': (modifier, { theme }) => {
let value = asLength(modifier, theme['divideWidth'])
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',
},
if (value === undefined) {
return []
}
value = value === '0' ? '0px' : value
return {
[`${nameClass('divide-x', modifier)} > :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 []
}
value = value === '0' ? '0px' : value
return {
[`${nameClass('divide-y', modifier)} > :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))`,
},
}
},
})
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)))`,
},
}
},
]
})
addUtilities(utilities, variants('divideWidth'))
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'))
}
}
}

33
src/plugins/fill.js
View file

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

18
src/plugins/flex.js
View file

@ -1,19 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('flex'), (value, modifier) => {
return [
nameClass('flex', modifier),
{
flex: value,
},
]
})
)
addUtilities(utilities, variants('flex'))
}
return createUtilityPlugin('flex')
}

19
src/plugins/flexGrow.js
View file

@ -1,20 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
addUtilities(
_.fromPairs(
_.map(theme('flexGrow'), (value, modifier) => {
return [
nameClass('flex-grow', modifier),
{
'flex-grow': value,
},
]
})
),
variants('flexGrow')
)
}
return createUtilityPlugin('flexGrow', [['flex-grow', ['flex-grow']]])
}

19
src/plugins/flexShrink.js
View file

@ -1,20 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
addUtilities(
_.fromPairs(
_.map(theme('flexShrink'), (value, modifier) => {
return [
nameClass('flex-shrink', modifier),
{
'flex-shrink': value,
},
]
})
),
variants('flexShrink')
)
}
return createUtilityPlugin('flexShrink', [['flex-shrink', ['flex-shrink']]])
}

5
src/plugins/fontFamily.js
View file

@ -1,5 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return createUtilityPlugin('fontFamily', [['font', ['fontFamily']]])
return createUtilityPlugin('fontFamily', [['font', ['fontFamily']]], {
resolveArbitraryValue: asLookupValue,
})
}

97
src/plugins/fontSize.js
View file

@ -1,36 +1,81 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
import isPlainObject from '../util/isPlainObject'
export default function () {
return function ({ addUtilities, theme, variants }) {
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 function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
text: (modifier, { theme }) => {
let value = theme.fontSize[modifier]
return [
nameClass('text', modifier),
{
'font-size': fontSize,
...(lineHeight === undefined
? {}
if (value === undefined) {
value = asLength(modifier, {})
return value === undefined
? []
: {
'line-height': lineHeight,
}),
...(letterSpacing === undefined
? {}
: {
'letter-spacing': letterSpacing,
}),
},
]
[nameClass('text', modifier)]: {
'font-size': value,
},
}
}
let [fontSize, options] = Array.isArray(value) ? value : [value]
let { lineHeight, letterSpacing } = isPlainObject(options)
? options
: {
lineHeight: options,
}
return {
[nameClass('text', modifier)]: {
'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,
}
addUtilities(utilities, variants('fontSize'))
return [
nameClass('text', modifier),
{
'font-size': fontSize,
...(lineHeight === undefined
? {}
: {
'line-height': lineHeight,
}),
...(letterSpacing === undefined
? {}
: {
'letter-spacing': letterSpacing,
}),
},
]
})
)
addUtilities(utilities, variants('fontSize'))
}
}
}

112
src/plugins/fontVariantNumeric.js
View file

@ -1,45 +1,81 @@
let fontVariantBaseStyles = {
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
'font-variant-numeric':
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
},
}
export default function () {
return function ({ addUtilities, variants }) {
addUtilities(
{
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
'font-variant-numeric':
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
return function ({ config, matchUtilities, addUtilities, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'normal-nums': fontVariantBaseStyles,
ordinal: fontVariantBaseStyles,
'slashed-zero': fontVariantBaseStyles,
'lining-nums': fontVariantBaseStyles,
'oldstyle-nums': fontVariantBaseStyles,
'proportional-nums': fontVariantBaseStyles,
'tabular-nums': fontVariantBaseStyles,
'diagonal-fractions': fontVariantBaseStyles,
'stacked-fractions': fontVariantBaseStyles,
})
matchUtilities({
'normal-nums': { '.normal-nums': { 'font-variant-numeric': 'normal' } },
ordinal: { '.ordinal': { '--tw-ordinal': 'ordinal' } },
'slashed-zero': { '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' } },
'lining-nums': { '.lining-nums': { '--tw-numeric-figure': 'lining-nums' } },
'oldstyle-nums': { '.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' } },
'proportional-nums': {
'.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' },
},
'.normal-nums': {
'font-variant-numeric': 'normal',
'tabular-nums': { '.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' } },
'diagonal-fractions': {
'.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' },
},
'.ordinal': {
'--tw-ordinal': 'ordinal',
'stacked-fractions': {
'.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' },
},
'.slashed-zero': {
'--tw-slashed-zero': 'slashed-zero',
})
} else {
addUtilities(
{
...fontVariantBaseStyles,
'.normal-nums': {
'font-variant-numeric': 'normal',
},
'.ordinal': {
'--tw-ordinal': 'ordinal',
},
'.slashed-zero': {
'--tw-slashed-zero': 'slashed-zero',
},
'.lining-nums': {
'--tw-numeric-figure': 'lining-nums',
},
'.oldstyle-nums': {
'--tw-numeric-figure': 'oldstyle-nums',
},
'.proportional-nums': {
'--tw-numeric-spacing': 'proportional-nums',
},
'.tabular-nums': {
'--tw-numeric-spacing': 'tabular-nums',
},
'.diagonal-fractions': {
'--tw-numeric-fraction': 'diagonal-fractions',
},
'.stacked-fractions': {
'--tw-numeric-fraction': 'stacked-fractions',
},
},
'.lining-nums': {
'--tw-numeric-figure': 'lining-nums',
},
'.oldstyle-nums': {
'--tw-numeric-figure': 'oldstyle-nums',
},
'.proportional-nums': {
'--tw-numeric-spacing': 'proportional-nums',
},
'.tabular-nums': {
'--tw-numeric-spacing': 'tabular-nums',
},
'.diagonal-fractions': {
'--tw-numeric-fraction': 'diagonal-fractions',
},
'.stacked-fractions': {
'--tw-numeric-fraction': 'stacked-fractions',
},
},
variants('fontVariantNumeric')
)
variants('fontVariantNumeric')
)
}
}
}

5
src/plugins/fontWeight.js
View file

@ -1,5 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return createUtilityPlugin('fontWeight', [['font', ['fontWeight']]])
return createUtilityPlugin('fontWeight', [['font', ['fontWeight']]], {
resolveArbitraryValue: asLookupValue,
})
}

6
src/plugins/gap.js
View file

@ -3,7 +3,9 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('gap', [
['gap', ['gap']],
['gap-x', ['columnGap']],
['gap-y', ['rowGap']],
[
['gap-x', ['columnGap']],
['gap-y', ['rowGap']],
],
])
}

117
src/plugins/gradientColorStops.js
View file

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

3
src/plugins/grayscale.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

5
src/plugins/gridTemplateColumns.js
View file

@ -1,5 +1,8 @@
import { asList } from '../util/pluginUtils'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])
return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]], {
resolveArbitraryValue: asList,
})
}

5
src/plugins/gridTemplateRows.js
View file

@ -1,5 +1,8 @@
import { asList } from '../util/pluginUtils'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])
return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]], {
resolveArbitraryValue: asList,
})
}

3
src/plugins/hueRotate.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

275
src/plugins/index.js
View file

@ -1,144 +1,163 @@
export { default as preflight } from './preflight'
export { default as container } from './container'
export { default as accessibility } from './accessibility'
export { default as pointerEvents } from './pointerEvents'
export { default as visibility } from './visibility'
export { default as position } from './position'
export { default as inset } from './inset'
export { default as isolation } from './isolation'
export { default as zIndex } from './zIndex'
export { default as order } from './order'
export { default as gridColumn } from './gridColumn'
export { default as gridColumnStart } from './gridColumnStart'
export { default as gridColumnEnd } from './gridColumnEnd'
export { default as gridRow } from './gridRow'
export { default as gridRowStart } from './gridRowStart'
export { default as gridRowEnd } from './gridRowEnd'
export { default as float } from './float'
export { default as clear } from './clear'
export { default as margin } from './margin'
export { default as boxSizing } from './boxSizing'
export { default as display } from './display'
export { default as height } from './height'
export { default as maxHeight } from './maxHeight'
export { default as minHeight } from './minHeight'
export { default as width } from './width'
export { default as minWidth } from './minWidth'
export { default as maxWidth } from './maxWidth'
export { default as flex } from './flex'
export { default as flexShrink } from './flexShrink'
export { default as flexGrow } from './flexGrow'
export { default as tableLayout } from './tableLayout'
export { default as borderCollapse } from './borderCollapse'
export { default as transform } from './transform'
export { default as transformOrigin } from './transformOrigin'
export { default as translate } from './translate'
export { default as rotate } from './rotate'
export { default as skew } from './skew'
export { default as scale } from './scale'
export { default as animation } from './animation'
export { default as cursor } from './cursor'
export { default as userSelect } from './userSelect'
export { default as resize } from './resize'
export { default as listStylePosition } from './listStylePosition'
export { default as listStyleType } from './listStyleType'
export { default as appearance } from './appearance'
export { default as gridAutoColumns } from './gridAutoColumns'
export { default as gridAutoFlow } from './gridAutoFlow'
export { default as gridAutoRows } from './gridAutoRows'
export { default as gridTemplateColumns } from './gridTemplateColumns'
export { default as gridTemplateRows } from './gridTemplateRows'
export { default as flexDirection } from './flexDirection'
export { default as flexWrap } from './flexWrap'
export { default as placeContent } from './placeContent'
export { default as placeItems } from './placeItems'
export { default as alignContent } from './alignContent'
export { default as alignItems } from './alignItems'
export { default as justifyContent } from './justifyContent'
export { default as justifyItems } from './justifyItems'
export { default as gap } from './gap'
export { default as space } from './space'
export { default as divideWidth } from './divideWidth'
export { default as divideStyle } from './divideStyle'
export { default as divideColor } from './divideColor'
export { default as divideOpacity } from './divideOpacity'
export { default as placeSelf } from './placeSelf'
export { default as alignSelf } from './alignSelf'
export { default as animation } from './animation'
export { default as appearance } from './appearance'
export { default as justifySelf } from './justifySelf'
export { default as overflow } from './overflow'
export { default as overscrollBehavior } from './overscrollBehavior'
export { default as textOverflow } from './textOverflow'
export { default as whitespace } from './whitespace'
export { default as wordBreak } from './wordBreak'
export { default as borderRadius } from './borderRadius'
export { default as borderWidth } from './borderWidth'
export { default as borderStyle } from './borderStyle'
export { default as borderColor } from './borderColor'
export { default as borderOpacity } from './borderOpacity'
export { default as backgroundColor } from './backgroundColor'
export { default as backgroundOpacity } from './backgroundOpacity'
export { default as backgroundImage } from './backgroundImage'
export { default as gradientColorStops } from './gradientColorStops'
export { default as boxDecorationBreak } from './boxDecorationBreak'
export { default as backgroundSize } from './backgroundSize'
export { default as backgroundAttachment } from './backgroundAttachment'
export { default as backgroundClip } from './backgroundClip'
export { default as backgroundPosition } from './backgroundPosition'
export { default as backgroundRepeat } from './backgroundRepeat'
export { default as backgroundOrigin } from './backgroundOrigin'
export { default as fill } from './fill'
export { default as stroke } from './stroke'
export { default as strokeWidth } from './strokeWidth'
export { default as objectFit } from './objectFit'
export { default as objectPosition } from './objectPosition'
export { default as padding } from './padding'
export { default as textAlign } from './textAlign'
export { default as verticalAlign } from './verticalAlign'
export { default as fontFamily } from './fontFamily'
export { default as fontSize } from './fontSize'
export { default as fontWeight } from './fontWeight'
export { default as textTransform } from './textTransform'
export { default as fontStyle } from './fontStyle'
export { default as fontVariantNumeric } from './fontVariantNumeric'
export { default as lineHeight } from './lineHeight'
export { default as letterSpacing } from './letterSpacing'
export { default as textColor } from './textColor'
export { default as textOpacity } from './textOpacity'
export { default as textDecoration } from './textDecoration'
export { default as fontSmoothing } from './fontSmoothing'
export { default as placeholderColor } from './placeholderColor'
export { default as placeholderOpacity } from './placeholderOpacity'
export { default as opacity } from './opacity'
export { default as backgroundBlendMode } from './backgroundBlendMode'
export { default as mixBlendMode } from './mixBlendMode'
export { default as boxShadow } from './boxShadow'
export { default as outline } from './outline'
export { default as ringWidth } from './ringWidth'
export { default as ringColor } from './ringColor'
export { default as ringOpacity } from './ringOpacity'
export { default as ringOffsetWidth } from './ringOffsetWidth'
export { default as ringOffsetColor } from './ringOffsetColor'
export { default as filter } from './filter'
export { default as blur } from './blur'
export { default as brightness } from './brightness'
export { default as contrast } from './contrast'
export { default as dropShadow } from './dropShadow'
export { default as grayscale } from './grayscale'
export { default as hueRotate } from './hueRotate'
export { default as invert } from './invert'
export { default as saturate } from './saturate'
export { default as sepia } from './sepia'
export { default as backdropFilter } from './backdropFilter'
export { default as backdropBlur } from './backdropBlur'
export { default as backdropBrightness } from './backdropBrightness'
export { default as backdropContrast } from './backdropContrast'
export { default as backdropFilter } from './backdropFilter'
export { default as backdropGrayscale } from './backdropGrayscale'
export { default as backdropHueRotate } from './backdropHueRotate'
export { default as backdropInvert } from './backdropInvert'
export { default as backdropOpacity } from './backdropOpacity'
export { default as backdropSaturate } from './backdropSaturate'
export { default as backdropSepia } from './backdropSepia'
export { default as backgroundAttachment } from './backgroundAttachment'
export { default as backgroundBlendMode } from './backgroundBlendMode'
export { default as backgroundClip } from './backgroundClip'
export { default as backgroundColor } from './backgroundColor'
export { default as backgroundImage } from './backgroundImage'
export { default as backgroundOpacity } from './backgroundOpacity'
export { default as backgroundPosition } from './backgroundPosition'
export { default as backgroundRepeat } from './backgroundRepeat'
export { default as backgroundSize } from './backgroundSize'
export { default as backgroundOrigin } from './backgroundOrigin'
export { default as blur } from './blur'
export { default as borderCollapse } from './borderCollapse'
export { default as borderColor } from './borderColor'
export { default as borderOpacity } from './borderOpacity'
export { default as borderRadius } from './borderRadius'
export { default as borderStyle } from './borderStyle'
export { default as borderWidth } from './borderWidth'
export { default as boxDecorationBreak } from './boxDecorationBreak'
export { default as boxShadow } from './boxShadow'
export { default as boxSizing } from './boxSizing'
export { default as brightness } from './brightness'
export { default as clear } from './clear'
export { default as container } from './container'
export { default as contrast } from './contrast'
export { default as cursor } from './cursor'
export { default as display } from './display'
export { default as divideColor } from './divideColor'
export { default as divideOpacity } from './divideOpacity'
export { default as divideStyle } from './divideStyle'
export { default as divideWidth } from './divideWidth'
export { default as dropShadow } from './dropShadow'
export { default as fill } from './fill'
export { default as filter } from './filter'
export { default as flex } from './flex'
export { default as flexDirection } from './flexDirection'
export { default as flexGrow } from './flexGrow'
export { default as flexShrink } from './flexShrink'
export { default as flexWrap } from './flexWrap'
export { default as float } from './float'
export { default as fontFamily } from './fontFamily'
export { default as fontSize } from './fontSize'
export { default as fontSmoothing } from './fontSmoothing'
export { default as fontStyle } from './fontStyle'
export { default as fontVariantNumeric } from './fontVariantNumeric'
export { default as fontWeight } from './fontWeight'
export { default as gap } from './gap'
export { default as gradientColorStops } from './gradientColorStops'
export { default as grayscale } from './grayscale'
export { default as gridAutoColumns } from './gridAutoColumns'
export { default as gridAutoFlow } from './gridAutoFlow'
export { default as gridAutoRows } from './gridAutoRows'
export { default as gridColumn } from './gridColumn'
export { default as gridColumnEnd } from './gridColumnEnd'
export { default as gridColumnStart } from './gridColumnStart'
export { default as gridRow } from './gridRow'
export { default as gridRowEnd } from './gridRowEnd'
export { default as gridRowStart } from './gridRowStart'
export { default as gridTemplateColumns } from './gridTemplateColumns'
export { default as gridTemplateRows } from './gridTemplateRows'
export { default as height } from './height'
export { default as hueRotate } from './hueRotate'
export { default as inset } from './inset'
export { default as invert } from './invert'
export { default as isolation } from './isolation'
export { default as justifyContent } from './justifyContent'
export { default as justifyItems } from './justifyItems'
export { default as justifySelf } from './justifySelf'
export { default as letterSpacing } from './letterSpacing'
export { default as lineHeight } from './lineHeight'
export { default as listStylePosition } from './listStylePosition'
export { default as listStyleType } from './listStyleType'
export { default as margin } from './margin'
export { default as maxHeight } from './maxHeight'
export { default as maxWidth } from './maxWidth'
export { default as minHeight } from './minHeight'
export { default as minWidth } from './minWidth'
export { default as mixBlendMode } from './mixBlendMode'
export { default as objectFit } from './objectFit'
export { default as objectPosition } from './objectPosition'
export { default as opacity } from './opacity'
export { default as order } from './order'
export { default as outline } from './outline'
export { default as overflow } from './overflow'
export { default as overscrollBehavior } from './overscrollBehavior'
export { default as padding } from './padding'
export { default as placeContent } from './placeContent'
export { default as placeholderColor } from './placeholderColor'
export { default as placeholderOpacity } from './placeholderOpacity'
export { default as placeItems } from './placeItems'
export { default as placeSelf } from './placeSelf'
export { default as pointerEvents } from './pointerEvents'
export { default as position } from './position'
export { default as preflight } from './preflight'
export { default as resize } from './resize'
export { default as ringColor } from './ringColor'
export { default as ringOffsetColor } from './ringOffsetColor'
export { default as ringOffsetWidth } from './ringOffsetWidth'
export { default as ringOpacity } from './ringOpacity'
export { default as ringWidth } from './ringWidth'
export { default as rotate } from './rotate'
export { default as saturate } from './saturate'
export { default as scale } from './scale'
export { default as sepia } from './sepia'
export { default as skew } from './skew'
export { default as space } from './space'
export { default as stroke } from './stroke'
export { default as strokeWidth } from './strokeWidth'
export { default as tableLayout } from './tableLayout'
export { default as textAlign } from './textAlign'
export { default as textColor } from './textColor'
export { default as textDecoration } from './textDecoration'
export { default as textOpacity } from './textOpacity'
export { default as textOverflow } from './textOverflow'
export { default as textTransform } from './textTransform'
export { default as transform } from './transform'
export { default as transformOrigin } from './transformOrigin'
export { default as transitionProperty } from './transitionProperty'
export { default as transitionDelay } from './transitionDelay'
export { default as transitionDuration } from './transitionDuration'
export { default as transitionProperty } from './transitionProperty'
export { default as transitionTimingFunction } from './transitionTimingFunction'
export { default as translate } from './translate'
export { default as userSelect } from './userSelect'
export { default as verticalAlign } from './verticalAlign'
export { default as visibility } from './visibility'
export { default as whitespace } from './whitespace'
export { default as width } from './width'
export { default as wordBreak } from './wordBreak'
export { default as zIndex } from './zIndex'

146
src/plugins/inset.js
View file

@ -1,39 +1,123 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
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}` },
}),
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
inset: (modifier, { theme }) => {
let value = asValue(modifier, theme['inset'])
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('inset'), generator)
})
if (value === undefined) {
return []
}
addUtilities(utilities, variants('inset'))
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'))
}
}
}

3
src/plugins/invert.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

45
src/plugins/margin.js
View file

@ -1,34 +1,17 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const generators = [
(size, modifier) => ({
[nameClass('m', modifier)]: { margin: `${size}` },
}),
(size, modifier) => ({
[nameClass('my', modifier)]: {
'margin-top': `${size}`,
'margin-bottom': `${size}`,
},
[nameClass('mx', modifier)]: {
'margin-left': `${size}`,
'margin-right': `${size}`,
},
}),
(size, modifier) => ({
[nameClass('mt', modifier)]: { 'margin-top': `${size}` },
[nameClass('mr', modifier)]: { 'margin-right': `${size}` },
[nameClass('mb', modifier)]: { 'margin-bottom': `${size}` },
[nameClass('ml', modifier)]: { 'margin-left': `${size}` },
}),
]
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('margin'), generator)
})
addUtilities(utilities, variants('margin'))
}
return createUtilityPlugin('margin', [
['m', ['margin']],
[
['mx', ['margin-left', 'margin-right']],
['my', ['margin-top', 'margin-bottom']],
],
[
['mt', ['margin-top']],
['mr', ['margin-right']],
['mb', ['margin-bottom']],
['ml', ['margin-left']],
],
])
}

5
src/plugins/objectPosition.js
View file

@ -1,5 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLookupValue } from '../util/pluginUtils'
export default function () {
return createUtilityPlugin('objectPosition', [['object', ['objectPosition']]])
return createUtilityPlugin('objectPosition', [['object', ['object-position']]], {
resolveArbitraryValue: asLookupValue,
})
}

2
src/plugins/order.js
View file

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('order', [['order', ['order']]])
return createUtilityPlugin('order')
}

48
src/plugins/outline.js
View file

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

39
src/plugins/padding.js
View file

@ -1,28 +1,17 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const generators = [
(size, modifier) => ({
[nameClass('p', modifier)]: { padding: `${size}` },
}),
(size, modifier) => ({
[nameClass('py', modifier)]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
[nameClass('px', modifier)]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
}),
(size, modifier) => ({
[nameClass('pt', modifier)]: { 'padding-top': `${size}` },
[nameClass('pr', modifier)]: { 'padding-right': `${size}` },
[nameClass('pb', modifier)]: { 'padding-bottom': `${size}` },
[nameClass('pl', modifier)]: { 'padding-left': `${size}` },
}),
]
const utilities = _.flatMap(generators, (generator) => {
return _.flatMap(theme('padding'), generator)
})
addUtilities(utilities, variants('padding'))
}
return createUtilityPlugin('padding', [
['p', ['padding']],
[
['px', ['padding-left', 'padding-right']],
['py', ['padding-top', 'padding-bottom']],
],
[
['pt', ['padding-top']],
['pr', ['padding-right']],
['pb', ['padding-bottom']],
['pl', ['padding-left']],
],
])
}

69
src/plugins/placeholderColor.js
View file

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

43
src/plugins/placeholderOpacity.js
View file

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

59
src/plugins/ringColor.js
View file

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

47
src/plugins/ringOffsetColor.js
View file

@ -1,21 +1,42 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import nameClass from '../util/nameClass'
import { asColor } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
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),
},
]
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 {
[nameClass('ring-offset', modifier)]: {
'--tw-ring-offset-color': toColorValue(value),
},
}
},
})
)
addUtilities(utilities, variants('ringOffsetColor'))
} 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'))
}
}
}

20
src/plugins/ringOffsetWidth.js
View file

@ -1,18 +1,8 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLength } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(_.omit(theme('ringOffsetWidth'), 'DEFAULT'), (value, modifier) => {
return [
nameClass('ring-offset', modifier),
{
'--tw-ring-offset-width': value,
},
]
})
)
addUtilities(utilities, variants('ringOffsetWidth'))
}
return createUtilityPlugin('ringOffsetWidth', [['ring-offset', ['--tw-ring-offset-width']]], {
resolveArbitraryValue: asLength,
})
}

19
src/plugins/ringOpacity.js
View file

@ -1,18 +1,7 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(_.omit(theme('ringOpacity'), 'DEFAULT'), (value, modifier) => {
return [
nameClass('ring-opacity', modifier),
{
'--tw-ring-opacity': value,
},
]
})
)
addUtilities(utilities, variants('ringOpacity'))
}
return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
filterDefault: true,
})
}

106
src/plugins/ringWidth.js
View file

@ -1,9 +1,10 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { withAlphaValue } from '../util/withAlphaVariable'
import nameClass from '../util/nameClass'
import { asLength } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
const ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
const ringColorDefault = withAlphaValue(
theme('ringColor.DEFAULT'),
@ -11,8 +12,8 @@ export default function () {
`rgba(147, 197, 253, ${ringOpacityDefault})`
)
addUtilities(
{
if (config('mode') === 'jit') {
let ringReset = {
'*': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
@ -21,36 +22,81 @@ export default function () {
'--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(', '),
},
]
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(
[
utilities,
addUtilities({
'.ring-inset': {
'--tw-ring-inset': 'inset',
},
})
} else {
addUtilities(
{
'.ring-inset': {
'--tw-ring-inset': 'inset',
'*': {
'--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',
},
},
],
variants('ringWidth')
)
{ 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')
)
}
}
}

3
src/plugins/saturate.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

6
src/plugins/scale.js
View file

@ -3,7 +3,9 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
[
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
],
])
}

3
src/plugins/sepia.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
const { asValue, nameClass } = require('../../jit/pluginUtils')
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {

6
src/plugins/skew.js
View file

@ -2,7 +2,9 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('skew', [
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
[
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
],
])
}

109
src/plugins/space.js
View file

@ -1,40 +1,89 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { asValue } from '../util/pluginUtils'
export default function () {
return function ({ addUtilities, theme, variants }) {
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)))`,
},
}
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'space-x': (modifier, { theme }) => {
let value = asValue(modifier, theme['space'])
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',
},
if (value === undefined) {
return []
}
value = value === '0' ? '0px' : value
return {
[`${nameClass('space-x', modifier)} > :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 []
}
value = value === '0' ? '0px' : value
return {
[`${nameClass('space-y', modifier)} > :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))`,
},
}
},
})
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)))`,
},
}
},
]
})
addUtilities(utilities, variants('space'))
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'))
}
}
}

33
src/plugins/stroke.js
View file

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

5
src/plugins/strokeWidth.js
View file

@ -1,5 +1,8 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { asLength } from '../util/pluginUtils'
export default function () {
return createUtilityPlugin('strokeWidth', [['stroke', ['strokeWidth']]])
return createUtilityPlugin('strokeWidth', [['stroke', ['stroke-width']]], {
resolveArbitraryValue: asLength,
})
}

69
src/plugins/textColor.js
View file

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

6
src/plugins/textOverflow.js
View file

@ -7,6 +7,12 @@ export default function () {
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
},
},
variants('textOverflow')
)
addUtilities(
{
'.overflow-ellipsis': { 'text-overflow': 'ellipsis' },
'.overflow-clip': { 'text-overflow': 'clip' },
},

60
src/plugins/transitionProperty.js
View file

@ -2,27 +2,51 @@ import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function () {
return function ({ addUtilities, theme, variants }) {
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
const defaultTimingFunction = theme('transitionTimingFunction.DEFAULT')
const defaultDuration = theme('transitionDuration.DEFAULT')
const utilities = _.fromPairs(
_.map(theme('transitionProperty'), (value, modifier) => {
return [
nameClass('transition', modifier),
{
'transition-property': value,
...(value === 'none'
? {}
: {
'transition-timing-function': defaultTimingFunction,
'transition-duration': defaultDuration,
}),
},
]
})
)
if (config('mode') === 'jit') {
matchUtilities({
transition: (modifier, { theme }) => {
let value = theme.transitionProperty[modifier]
addUtilities(utilities, variants('transitionProperty'))
if (value === undefined) {
return []
}
return {
[nameClass('transition', modifier)]: {
'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'))
}
}
}

6
src/plugins/translate.js
View file

@ -2,7 +2,9 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('translate', [
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
[
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
],
])
}