Remove variants related code (#5465)
* drop `variants` related resolveConfig functionality
More AOT code that we could get rid of!
* drop more files!
I keep finding these unused files 😅
* Update setupContextUtils.js
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait
GitHub
parent
30badadd21
commit
50b766dd47
7 changed files with 6 additions and 741 deletions
|
|
@ -194,12 +194,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
|
|||
|
||||
return getConfigValue(['corePlugins', path], true)
|
||||
},
|
||||
variants: (path, defaultValue) => {
|
||||
if (Array.isArray(tailwindConfig.variants)) {
|
||||
return tailwindConfig.variants
|
||||
}
|
||||
|
||||
return getConfigValue(['variants', path], defaultValue)
|
||||
variants: () => {
|
||||
// Preserved for backwards compatibility but not used in v3.0+
|
||||
return []
|
||||
},
|
||||
addUserCss(userCss) {
|
||||
for (let [identifier, rule] of withIdentifiers(userCss)) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function createUtilityPlugin(
|
|||
{ filterDefault = false, resolveArbitraryValue = asValue } = {}
|
||||
) {
|
||||
let transformValue = transformThemeValue(themeKey)
|
||||
return function ({ matchUtilities, variants, theme }) {
|
||||
return function ({ matchUtilities, theme }) {
|
||||
for (let utilityVariation of utilityVariations) {
|
||||
let group = Array.isArray(utilityVariation[0]) ? utilityVariation : [utilityVariation]
|
||||
|
||||
|
|
@ -38,7 +38,6 @@ export default function createUtilityPlugin(
|
|||
Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
|
||||
)
|
||||
: theme(themeKey),
|
||||
variants: variants(themeKey),
|
||||
type: asMap.get(resolveArbitraryValue) ?? 'any',
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,16 +6,11 @@ import colors from '../../colors'
|
|||
import log from './log'
|
||||
import { defaults } from './defaults'
|
||||
import { toPath } from './toPath'
|
||||
import dlv from 'dlv'
|
||||
|
||||
function isFunction(input) {
|
||||
return typeof input === 'function'
|
||||
}
|
||||
|
||||
function uniq(input) {
|
||||
return Array.from(new Set(input))
|
||||
}
|
||||
|
||||
function isObject(input) {
|
||||
return typeof input === 'object' && input !== null
|
||||
}
|
||||
|
|
@ -186,90 +181,6 @@ function extractPluginConfigs(configs) {
|
|||
return allConfigs
|
||||
}
|
||||
|
||||
function mergeVariants(variants) {
|
||||
const mergedVariants = variants.reduce((resolved, variants) => {
|
||||
Object.entries(variants || {}).forEach(([plugin, pluginVariants]) => {
|
||||
if (isFunction(pluginVariants)) {
|
||||
resolved[plugin] = pluginVariants({
|
||||
variants(path) {
|
||||
return dlv(resolved, path, [])
|
||||
},
|
||||
before(toInsert, variant, existingPluginVariants = resolved?.[plugin] ?? []) {
|
||||
if (variant === undefined) {
|
||||
return [...toInsert, ...existingPluginVariants]
|
||||
}
|
||||
|
||||
const index = existingPluginVariants.indexOf(variant)
|
||||
|
||||
if (index === -1) {
|
||||
return [...existingPluginVariants, ...toInsert]
|
||||
}
|
||||
|
||||
return [
|
||||
...existingPluginVariants.slice(0, index),
|
||||
...toInsert,
|
||||
...existingPluginVariants.slice(index),
|
||||
]
|
||||
},
|
||||
after(toInsert, variant, existingPluginVariants = resolved?.[plugin] ?? []) {
|
||||
if (variant === undefined) {
|
||||
return [...existingPluginVariants, ...toInsert]
|
||||
}
|
||||
|
||||
const index = existingPluginVariants.indexOf(variant)
|
||||
|
||||
if (index === -1) {
|
||||
return [...toInsert, ...existingPluginVariants]
|
||||
}
|
||||
|
||||
return [
|
||||
...existingPluginVariants.slice(0, index + 1),
|
||||
...toInsert,
|
||||
...existingPluginVariants.slice(index + 1),
|
||||
]
|
||||
},
|
||||
without(toRemove, existingPluginVariants = resolved?.[plugin] ?? []) {
|
||||
return existingPluginVariants.filter((v) => !toRemove.includes(v))
|
||||
},
|
||||
})
|
||||
} else {
|
||||
resolved[plugin] = pluginVariants
|
||||
}
|
||||
})
|
||||
|
||||
return resolved
|
||||
}, {})
|
||||
|
||||
return {
|
||||
...mergedVariants,
|
||||
extend: collectExtends(variants),
|
||||
}
|
||||
}
|
||||
|
||||
function mergeVariantExtensions({ extend, ...variants }, variantOrder) {
|
||||
return mergeWith(variants, extend, (variantsValue, extensions) => {
|
||||
const merged = uniq([...(variantsValue || []), ...extensions].flat())
|
||||
|
||||
if (extensions.flat().length === 0) {
|
||||
return merged
|
||||
}
|
||||
|
||||
return merged.sort((a, z) => variantOrder.indexOf(a) - variantOrder.indexOf(z))
|
||||
})
|
||||
}
|
||||
|
||||
function resolveVariants([firstConfig, ...variantConfigs], variantOrder) {
|
||||
// Global variants configuration like `variants: ['hover', 'focus']`
|
||||
if (Array.isArray(firstConfig)) {
|
||||
return firstConfig
|
||||
}
|
||||
|
||||
return mergeVariantExtensions(
|
||||
mergeVariants([firstConfig, ...variantConfigs].reverse()),
|
||||
variantOrder
|
||||
)
|
||||
}
|
||||
|
||||
function resolveCorePlugins(corePluginConfigs) {
|
||||
const result = [...corePluginConfigs].reduceRight((resolved, corePluginConfig) => {
|
||||
if (isFunction(corePluginConfig)) {
|
||||
|
|
@ -299,7 +210,6 @@ export default function resolveConfig(configs) {
|
|||
variantOrder: defaultConfig.variantOrder,
|
||||
},
|
||||
]
|
||||
let { variantOrder } = allConfigs.find((c) => c.variantOrder)
|
||||
|
||||
return normalizeConfig(
|
||||
defaults(
|
||||
|
|
@ -307,10 +217,6 @@ export default function resolveConfig(configs) {
|
|||
theme: resolveFunctionKeys(
|
||||
mergeExtensions(mergeThemes(allConfigs.map((t) => t?.theme ?? {})))
|
||||
),
|
||||
variants: resolveVariants(
|
||||
allConfigs.map((c) => c?.variants ?? {}),
|
||||
variantOrder
|
||||
),
|
||||
corePlugins: resolveCorePlugins(allConfigs.map((c) => c.corePlugins)),
|
||||
plugins: resolvePluginLists(configs.map((c) => c?.plugins ?? [])),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1217,15 +1217,14 @@ test('plugins can be created using the `createPlugin` function', () => {
|
|||
},
|
||||
plugins: [
|
||||
createPlugin(
|
||||
function ({ addUtilities, theme, variants }) {
|
||||
function ({ addUtilities, theme }) {
|
||||
addUtilities(
|
||||
Object.fromEntries(
|
||||
Object.entries(theme('testPlugin')).map(([k, v]) => [
|
||||
`.test-${k}`,
|
||||
{ testProperty: v },
|
||||
])
|
||||
),
|
||||
variants('testPlugin')
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
|
|
@ -1404,9 +1403,6 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked
|
|||
lg: '3rem',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
testPlugin: ['responsive', 'hover'],
|
||||
},
|
||||
}
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -15,11 +15,6 @@ test('prefix key overrides default prefix', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -33,11 +28,6 @@ test('prefix key overrides default prefix', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -55,11 +45,6 @@ test('important key overrides default important', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -73,11 +58,6 @@ test('important key overrides default important', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -95,11 +75,6 @@ test('important (selector) key overrides default important', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -113,11 +88,6 @@ test('important (selector) key overrides default important', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -135,11 +105,6 @@ test('separator key overrides default separator', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -153,11 +118,6 @@ test('separator key overrides default separator', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -192,11 +152,6 @@ test('theme key is merged instead of replaced', () => {
|
|||
lg: '1000px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -221,11 +176,6 @@ test('theme key is merged instead of replaced', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -278,143 +228,6 @@ test('theme key is deeply merged instead of replaced', () => {
|
|||
})
|
||||
})
|
||||
|
||||
test('variants key is merged instead of replaced', () => {
|
||||
const userConfig = {
|
||||
variants: {
|
||||
backgroundAttachment: [],
|
||||
borderColors: ['responsive', 'hover', 'focus', 'active'],
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '-',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {
|
||||
colors: {
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
},
|
||||
fonts: {
|
||||
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
||||
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
||||
},
|
||||
screens: {
|
||||
sm: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
borderRadius: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
prefix: '-',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {
|
||||
colors: {
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
},
|
||||
fonts: {
|
||||
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
||||
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
||||
},
|
||||
screens: {
|
||||
sm: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: [],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus', 'active'],
|
||||
borderRadius: ['responsive'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('a global variants list replaces the default', () => {
|
||||
const userConfig = {
|
||||
variants: ['responsive', 'hover', 'focus', 'active'],
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '-',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {
|
||||
colors: {
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
},
|
||||
fonts: {
|
||||
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
||||
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
||||
},
|
||||
screens: {
|
||||
sm: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
backgroundAttachment: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
borderRadius: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
prefix: '-',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {
|
||||
colors: {
|
||||
'grey-darker': '#606f7b',
|
||||
'grey-dark': '#8795a1',
|
||||
grey: '#b8c2cc',
|
||||
'grey-light': '#dae1e7',
|
||||
'grey-lighter': '#f1f5f8',
|
||||
},
|
||||
fonts: {
|
||||
sans: ['system-ui', 'BlinkMacSystemFont', '-apple-system', 'Roboto', 'sans-serif'],
|
||||
serif: ['Constantia', 'Lucida Bright', 'Georgia', 'serif'],
|
||||
},
|
||||
screens: {
|
||||
sm: '500px',
|
||||
md: '750px',
|
||||
lg: '1000px',
|
||||
},
|
||||
},
|
||||
variants: ['responsive', 'hover', 'focus', 'active'],
|
||||
})
|
||||
})
|
||||
|
||||
test('missing top level keys are pulled from the default config', () => {
|
||||
const userConfig = {}
|
||||
|
||||
|
|
@ -428,11 +241,6 @@ test('missing top level keys are pulled from the default config', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -447,11 +255,6 @@ test('missing top level keys are pulled from the default config', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -479,10 +282,6 @@ test('functions in the default theme section are lazily evaluated', () => {
|
|||
backgroundColors: (theme) => theme('colors'),
|
||||
textColors: (theme) => theme('colors'),
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
textColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -508,10 +307,6 @@ test('functions in the default theme section are lazily evaluated', () => {
|
|||
blue: 'blue',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
textColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -547,10 +342,6 @@ test('functions in the user theme section are lazily evaluated', () => {
|
|||
backgroundColors: ({ colors }) => colors,
|
||||
textColors: ({ colors }) => colors,
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
textColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -578,10 +369,6 @@ test('functions in the user theme section are lazily evaluated', () => {
|
|||
customText: '#facade',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
textColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -617,10 +404,6 @@ test('theme values in the extend section extend the existing theme', () => {
|
|||
},
|
||||
backgroundColors: (theme) => theme('colors'),
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
opacity: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -649,10 +432,6 @@ test('theme values in the extend section extend the existing theme', () => {
|
|||
customBackground: '#bada55',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
opacity: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -700,11 +479,6 @@ test('theme values in the extend section extend the user theme', () => {
|
|||
4: '1rem',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
opacity: ['responsive', 'hover', 'focus'],
|
||||
height: ['responsive'],
|
||||
width: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -738,11 +512,6 @@ test('theme values in the extend section extend the user theme', () => {
|
|||
4: '1rem',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
opacity: ['responsive', 'hover', 'focus'],
|
||||
height: ['responsive'],
|
||||
width: ['responsive'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -774,9 +543,6 @@ test('theme values in the extend section can extend values that are depended on
|
|||
},
|
||||
backgroundColors: (theme) => theme('colors'),
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -804,9 +570,6 @@ test('theme values in the extend section can extend values that are depended on
|
|||
customBackground: '#bada55',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -832,9 +595,6 @@ test('theme values in the extend section are not deeply merged when they are sim
|
|||
mono: ['Menlo', 'Courier New', 'monospace'],
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
fonts: ['responsive'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -850,9 +610,6 @@ test('theme values in the extend section are not deeply merged when they are sim
|
|||
mono: ['Menlo', 'Courier New', 'monospace'],
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
fonts: ['responsive'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -892,7 +649,6 @@ test('theme values in the extend section are deeply merged, when they are arrays
|
|||
},
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -922,7 +678,6 @@ test('theme values in the extend section are deeply merged, when they are arrays
|
|||
},
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -952,9 +707,6 @@ test('the theme function can use a default value if the key is missing', () => {
|
|||
...theme('colors'),
|
||||
}),
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -976,9 +728,6 @@ test('the theme function can use a default value if the key is missing', () => {
|
|||
blue: 'blue',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1008,10 +757,6 @@ test('the theme function can resolve function values', () => {
|
|||
blue: 'blue',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1047,10 +792,6 @@ test('the theme function can resolve function values', () => {
|
|||
blue: 'blue',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1076,10 +817,6 @@ test('the theme function can resolve deep function values', () => {
|
|||
'1/3': '33.33333%',
|
||||
}),
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1100,10 +837,6 @@ test('the theme function can resolve deep function values', () => {
|
|||
'1/3': '33.33333%',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1142,9 +875,6 @@ test('theme values in the extend section are lazily evaluated', () => {
|
|||
...theme('colors'),
|
||||
}),
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1170,9 +900,6 @@ test('theme values in the extend section are lazily evaluated', () => {
|
|||
blue: 'blue',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1209,7 +936,6 @@ test('lazily evaluated values have access to the config utils', () => {
|
|||
...negative(theme('spacing')),
|
||||
}),
|
||||
},
|
||||
variants: {},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1266,7 +992,6 @@ test('lazily evaluated values have access to the config utils', () => {
|
|||
4: '4px',
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1279,9 +1004,6 @@ test('the original theme is not mutated', () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover'],
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
|
|
@ -1295,9 +1017,6 @@ test('the original theme is not mutated', () => {
|
|||
yellow: 'yellow',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1310,9 +1029,6 @@ test('the original theme is not mutated', () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
borderColor: ['responsive', 'hover'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1343,7 +1059,6 @@ test('custom properties are multiplied by -1 for negative values', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1460,9 +1175,6 @@ test('more than two config objects can be resolved', () => {
|
|||
},
|
||||
backgroundColor: (theme) => theme('colors'),
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([firstConfig, secondConfig, thirdConfig, defaultConfig])
|
||||
|
|
@ -1503,9 +1215,6 @@ test('more than two config objects can be resolved', () => {
|
|||
lime: 'lime',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -1529,11 +1238,6 @@ test('plugin config modifications are applied', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1547,11 +1251,6 @@ test('plugin config modifications are applied', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
|
@ -1577,11 +1276,6 @@ test('user config takes precedence over plugin config modifications', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1595,11 +1289,6 @@ test('user config takes precedence over plugin config modifications', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
|
@ -1637,11 +1326,6 @@ test('plugin config can register plugins that also have config', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1655,11 +1339,6 @@ test('plugin config can register plugins that also have config', () => {
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
|
@ -1692,11 +1371,6 @@ test('plugin configs take precedence over plugin configs registered by that plug
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1710,11 +1384,6 @@ test('plugin configs take precedence over plugin configs registered by that plug
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
|
@ -1757,11 +1426,6 @@ test('plugin theme extensions are added even if user overrides top-level theme c
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1780,11 +1444,6 @@ test('plugin theme extensions are added even if user overrides top-level theme c
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
|
@ -1828,11 +1487,6 @@ test('user theme extensions take precedence over plugin theme extensions with th
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -1852,56 +1506,10 @@ test('user theme extensions take precedence over plugin theme extensions with th
|
|||
mobile: '400px',
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
appearance: ['responsive'],
|
||||
borderCollapse: [],
|
||||
borderColors: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
plugins: userConfig.plugins,
|
||||
})
|
||||
})
|
||||
|
||||
test('variants can be extended', () => {
|
||||
const userConfig = {
|
||||
variants: {
|
||||
borderColor: ({ after }) => after(['group-focus'], 'hover'),
|
||||
extend: {
|
||||
backgroundColor: ['active', 'disabled', 'group-hover'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const otherConfig = {
|
||||
variants: {
|
||||
extend: {
|
||||
textColor: ['hover', 'focus-within'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {
|
||||
borderColor: ['hover', 'focus'],
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
textColor: ['responsive', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, otherConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
variants: {
|
||||
borderColor: ['hover', 'group-focus', 'focus'],
|
||||
backgroundColor: ['responsive', 'group-hover', 'hover', 'focus', 'active', 'disabled'],
|
||||
textColor: ['responsive', 'focus-within', 'hover', 'focus'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('extensions are applied in the right order', () => {
|
||||
const userConfig = {
|
||||
theme: {
|
||||
|
|
@ -1966,153 +1574,6 @@ test('extensions are applied in the right order', () => {
|
|||
})
|
||||
})
|
||||
|
||||
test('variant sort order can be customized', () => {
|
||||
const userConfig = {
|
||||
variantOrder: [
|
||||
'disabled',
|
||||
'focus',
|
||||
'group-hover',
|
||||
'focus-within',
|
||||
'active',
|
||||
'hover',
|
||||
'responsive',
|
||||
],
|
||||
variants: {
|
||||
borderColor: ({ after }) => after(['group-focus'], 'hover'),
|
||||
extend: {
|
||||
backgroundColor: ['active', 'disabled', 'group-hover'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const otherConfig = {
|
||||
variants: {
|
||||
extend: {
|
||||
textColor: ['hover', 'focus-within'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {
|
||||
borderColor: ['hover', 'focus'],
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
textColor: ['responsive', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, otherConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
variants: {
|
||||
borderColor: ['hover', 'group-focus', 'focus'],
|
||||
backgroundColor: ['disabled', 'focus', 'group-hover', 'active', 'hover', 'responsive'],
|
||||
textColor: ['focus', 'focus-within', 'hover', 'responsive'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('custom variants go to the beginning by default when sort is applied', () => {
|
||||
const userConfig = {
|
||||
variants: {
|
||||
extend: {
|
||||
backgroundColor: ['active', 'custom-variant-1', 'group-hover', 'custom-variant-2'],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
variants: {
|
||||
backgroundColor: [
|
||||
'responsive',
|
||||
'custom-variant-1',
|
||||
'custom-variant-2',
|
||||
'group-hover',
|
||||
'hover',
|
||||
'focus',
|
||||
'active',
|
||||
],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('variants can be defined as a function', () => {
|
||||
const userConfig = {
|
||||
variants: {
|
||||
backgroundColor: ({ variants }) => [...variants('backgroundColor'), 'disabled'],
|
||||
padding: ({ before }) => before(['active']),
|
||||
float: ({ before }) => before(['disabled'], 'focus'),
|
||||
margin: ({ before }) => before(['hover'], 'focus'),
|
||||
borderWidth: ({ after }) => after(['active']),
|
||||
backgroundImage: ({ after }) => after(['disabled'], 'hover'),
|
||||
opacity: ({ after }) => after(['hover'], 'focus'),
|
||||
rotate: ({ without }) => without(['hover']),
|
||||
cursor: ({ before, after, without }) =>
|
||||
without(['responsive'], before(['checked'], 'hover', after(['hover'], 'focus'))),
|
||||
},
|
||||
}
|
||||
|
||||
const otherConfig = {
|
||||
variants: {
|
||||
backgroundColor: ({ variants }) => [...variants('backgroundColor'), 'active'],
|
||||
},
|
||||
}
|
||||
|
||||
const defaultConfig = {
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus'],
|
||||
padding: ['responsive', 'focus'],
|
||||
float: ['responsive', 'hover', 'focus'],
|
||||
margin: ['responsive'],
|
||||
borderWidth: ['responsive', 'focus'],
|
||||
backgroundImage: ['responsive', 'hover', 'focus'],
|
||||
opacity: ['responsive'],
|
||||
rotate: ['responsive', 'hover', 'focus'],
|
||||
cursor: ['responsive', 'focus'],
|
||||
},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, otherConfig, defaultConfig])
|
||||
|
||||
expect(result).toMatchObject({
|
||||
prefix: '',
|
||||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {
|
||||
backgroundColor: ['responsive', 'hover', 'focus', 'active', 'disabled'],
|
||||
padding: ['active', 'responsive', 'focus'],
|
||||
float: ['responsive', 'hover', 'disabled', 'focus'],
|
||||
margin: ['responsive', 'hover'],
|
||||
borderWidth: ['responsive', 'focus', 'active'],
|
||||
backgroundImage: ['responsive', 'hover', 'disabled', 'focus'],
|
||||
opacity: ['hover', 'responsive'],
|
||||
rotate: ['responsive', 'focus'],
|
||||
cursor: ['focus', 'checked', 'hover'],
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
test('core plugin configuration builds on the default list when starting with an empty object', () => {
|
||||
const userConfig = {
|
||||
corePlugins: { display: false },
|
||||
|
|
@ -2123,7 +1584,6 @@ test('core plugin configuration builds on the default list when starting with an
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
corePlugins: {},
|
||||
}
|
||||
|
||||
|
|
@ -2134,7 +1594,6 @@ test('core plugin configuration builds on the default list when starting with an
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
corePlugins: corePluginList.filter((c) => c !== 'display'),
|
||||
})
|
||||
})
|
||||
|
|
@ -2150,7 +1609,6 @@ test('core plugins that are disabled by default can be enabled', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
corePlugins: { display: false },
|
||||
}
|
||||
|
||||
|
|
@ -2174,7 +1632,6 @@ test('core plugin configurations stack', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
corePlugins: ['float', 'display', 'padding'],
|
||||
}
|
||||
|
||||
|
|
@ -2185,7 +1642,6 @@ test('core plugin configurations stack', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
corePlugins: ['float', 'padding', 'margin'],
|
||||
})
|
||||
})
|
||||
|
|
@ -2205,7 +1661,6 @@ test('plugins are merged', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, otherConfig, defaultConfig])
|
||||
|
|
@ -2215,7 +1670,6 @@ test('plugins are merged', () => {
|
|||
important: false,
|
||||
separator: ':',
|
||||
theme: {},
|
||||
variants: {},
|
||||
plugins: ['1', '2', '3'],
|
||||
})
|
||||
})
|
||||
|
|
@ -2253,7 +1707,6 @@ test('all helpers can be destructured from the first function argument', () => {
|
|||
4: '4px',
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
}
|
||||
|
||||
const result = resolveConfig([userConfig, defaultConfig])
|
||||
|
|
@ -2275,6 +1728,5 @@ test('all helpers can be destructured from the first function argument', () => {
|
|||
'screen-md': '768px',
|
||||
},
|
||||
},
|
||||
variants: {},
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import dlv from 'dlv'
|
||||
import escapeClassName from '../src/util/escapeClassName'
|
||||
|
||||
export default function (plugin, config) {
|
||||
const addedUtilities = []
|
||||
|
||||
const getConfigValue = (path, defaultValue) => dlv(config, path, defaultValue)
|
||||
const pluginApi = {
|
||||
config: getConfigValue,
|
||||
e: escapeClassName,
|
||||
theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
|
||||
variants: (path, defaultValue) => {
|
||||
if (Array.isArray(config.variants)) {
|
||||
return config.variants
|
||||
}
|
||||
|
||||
return getConfigValue(`variants.${path}`, defaultValue)
|
||||
},
|
||||
addUtilities(utilities, variants) {
|
||||
addedUtilities.push([utilities, variants])
|
||||
},
|
||||
corePlugins(corePlugin) {
|
||||
if (config.corePlugins === undefined) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (Array.isArray(config.corePlugins)) {
|
||||
return config.corePlugins.includes(corePlugin)
|
||||
}
|
||||
|
||||
return config.corePlugins[corePlugin] !== false
|
||||
},
|
||||
}
|
||||
|
||||
plugin(pluginApi)
|
||||
|
||||
return {
|
||||
utilities: addedUtilities.map(([utilities, variants]) => [
|
||||
Object.assign({}, ...(Array.isArray(utilities) ? utilities : [utilities])),
|
||||
variants,
|
||||
]),
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
// Full credit goes to: https://github.com/purplestone/exhaust
|
||||
// However, it is modified so that it is a bit more modern
|
||||
export function produce(blueprint) {
|
||||
let groups = []
|
||||
|
||||
// Call the blueprint once so that we can collect all the possible values we
|
||||
// spit out in the callback function.
|
||||
blueprint((...args) => {
|
||||
if (args.length <= 0) throw new Error('Blueprint callback must have at least a single value')
|
||||
groups.push(args)
|
||||
})
|
||||
|
||||
// Calculate how many combinations there are
|
||||
let iterations = groups.reduce((total, current) => total * current.length, 1)
|
||||
|
||||
// Calculate all the combinations possible
|
||||
let zippedGroups = []
|
||||
let currentIteration = iterations
|
||||
groups.forEach((a) => {
|
||||
let n = a.length
|
||||
currentIteration = currentIteration / n
|
||||
let iS = -1
|
||||
let aS = []
|
||||
|
||||
for (let i = 0; i < iterations; i++) {
|
||||
if (!(i % currentIteration)) iS++
|
||||
aS.push(a[iS % n])
|
||||
}
|
||||
zippedGroups.push(aS)
|
||||
})
|
||||
|
||||
// Transpose the matrix, so that we can get the correct rows/columns structure
|
||||
// again.
|
||||
zippedGroups = zippedGroups[0].map((_, i) => zippedGroups.map((o) => o[i]))
|
||||
|
||||
// Call the blueprint again, but now give the inner function a single value
|
||||
// every time so that we can build up the final result with single values.
|
||||
return zippedGroups.map((group) => {
|
||||
let i = 0
|
||||
return blueprint(() => group[i++])
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue