Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve
matchUtilities API and make it work with the AOT engine (#4232
) * 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>
- Loading branch information
1 parent
e8d2619
commit 0c5c540
Showing
70 changed files
with
72,355 additions
and
73,566 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }, | ||
| ], | ||
| ] | ||
| }) | ||
| ) | ||
| 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: (modifier, { theme }) => { | ||
| let value = theme.animation[modifier] | ||
| matchUtilities( | ||
| { | ||
| animate: (value, { includeRules }) => { | ||
| let { name: animationName } = parseAnimationValue(value) | ||
|
|
||
| if (value === undefined) { | ||
| return [] | ||
| if (keyframes[animationName] !== undefined) { | ||
| includeRules(keyframes[animationName], { respectImportant: false }) | ||
| } | ||
|
|
||
| let { name: animationName } = parseAnimationValue(value) | ||
| if (animationName === undefined || keyframes[animationName] === undefined) { | ||
| return { animation: value } | ||
| } | ||
|
|
||
| return [ | ||
| keyframes[animationName], | ||
| { [nameClass('animate', modifier)]: { animation: value } }, | ||
| ].filter(Boolean) | ||
| 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') } | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| } | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| } | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| } | ||
| ) | ||
| } | ||
| } |
Oops, something went wrong.