From 9dcd9ac4b32bb762af6ccf439a34a105dde35d2d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 10 Oct 2023 13:03:25 +0200 Subject: [PATCH] change order in core plugins to reflect hardcoded order This is the order we used to have in `resolvePlugins` --- src/corePlugins.js | 188 ++++++++++++++++++++++----------------------- 1 file changed, 94 insertions(+), 94 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index bfe6ca6fb..109a7ff1c 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -202,6 +202,95 @@ export let variantPlugins = { } }, + hasVariants: ({ matchVariant }) => { + matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} }) + matchVariant( + 'group-has', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &` + : `:merge(.group):has(${normalize(value)}) &`, + { values: {} } + ) + matchVariant( + 'peer-has', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &` + : `:merge(.peer):has(${normalize(value)}) ~ &`, + { values: {} } + ) + }, + + ariaVariants: ({ matchVariant, theme }) => { + matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) + matchVariant( + 'group-aria', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &` + : `:merge(.group)[aria-${normalize(value)}] &`, + { values: theme('aria') ?? {} } + ) + matchVariant( + 'peer-aria', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &` + : `:merge(.peer)[aria-${normalize(value)}] ~ &`, + { values: theme('aria') ?? {} } + ) + }, + + dataVariants: ({ matchVariant, theme }) => { + matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} }) + matchVariant( + 'group-data', + (value, { modifier }) => + modifier + ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &` + : `:merge(.group)[data-${normalize(value)}] &`, + { values: theme('data') ?? {} } + ) + matchVariant( + 'peer-data', + (value, { modifier }) => + modifier + ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &` + : `:merge(.peer)[data-${normalize(value)}] ~ &`, + { values: theme('data') ?? {} } + ) + }, + + supportsVariants: ({ matchVariant, theme }) => { + matchVariant( + 'supports', + (value = '') => { + let check = normalize(value) + let isRaw = /^\w*\s*\(/.test(check) + + // Chrome has a bug where `(condition1)or(condition2)` is not valid + // But `(condition1) or (condition2)` is supported. + check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check + + if (isRaw) { + return `@supports ${check}` + } + + if (!check.includes(':')) { + check = `${check}: var(--tw)` + } + + if (!(check.startsWith('(') && check.endsWith(')'))) { + check = `(${check})` + } + + return `@supports ${check}` + }, + { values: theme('supports') ?? {} } + ) + }, + directionVariants: ({ addVariant }) => { addVariant('ltr', ':is([dir="ltr"] &)') addVariant('rtl', ':is([dir="rtl"] &)') @@ -212,6 +301,11 @@ export let variantPlugins = { addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)') }, + prefersContrastVariants: ({ addVariant }) => { + addVariant('contrast-more', '@media (prefers-contrast: more)') + addVariant('contrast-less', '@media (prefers-contrast: less)') + }, + darkVariants: ({ config, addVariant }) => { let [mode, className = '.dark'] = [].concat(config('darkMode', 'media')) @@ -362,104 +456,10 @@ export let variantPlugins = { }) }, - supportsVariants: ({ matchVariant, theme }) => { - matchVariant( - 'supports', - (value = '') => { - let check = normalize(value) - let isRaw = /^\w*\s*\(/.test(check) - - // Chrome has a bug where `(condition1)or(condition2)` is not valid - // But `(condition1) or (condition2)` is supported. - check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check - - if (isRaw) { - return `@supports ${check}` - } - - if (!check.includes(':')) { - check = `${check}: var(--tw)` - } - - if (!(check.startsWith('(') && check.endsWith(')'))) { - check = `(${check})` - } - - return `@supports ${check}` - }, - { values: theme('supports') ?? {} } - ) - }, - - hasVariants: ({ matchVariant }) => { - matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} }) - matchVariant( - 'group-has', - (value, { modifier }) => - modifier - ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &` - : `:merge(.group):has(${normalize(value)}) &`, - { values: {} } - ) - matchVariant( - 'peer-has', - (value, { modifier }) => - modifier - ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &` - : `:merge(.peer):has(${normalize(value)}) ~ &`, - { values: {} } - ) - }, - - ariaVariants: ({ matchVariant, theme }) => { - matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} }) - matchVariant( - 'group-aria', - (value, { modifier }) => - modifier - ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &` - : `:merge(.group)[aria-${normalize(value)}] &`, - { values: theme('aria') ?? {} } - ) - matchVariant( - 'peer-aria', - (value, { modifier }) => - modifier - ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &` - : `:merge(.peer)[aria-${normalize(value)}] ~ &`, - { values: theme('aria') ?? {} } - ) - }, - - dataVariants: ({ matchVariant, theme }) => { - matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} }) - matchVariant( - 'group-data', - (value, { modifier }) => - modifier - ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &` - : `:merge(.group)[data-${normalize(value)}] &`, - { values: theme('data') ?? {} } - ) - matchVariant( - 'peer-data', - (value, { modifier }) => - modifier - ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &` - : `:merge(.peer)[data-${normalize(value)}] ~ &`, - { values: theme('data') ?? {} } - ) - }, - orientationVariants: ({ addVariant }) => { addVariant('portrait', '@media (orientation: portrait)') addVariant('landscape', '@media (orientation: landscape)') }, - - prefersContrastVariants: ({ addVariant }) => { - addVariant('contrast-more', '@media (prefers-contrast: more)') - addVariant('contrast-less', '@media (prefers-contrast: less)') - }, } let cssTransformValue = [