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

Fix issue where motion variants incorrectly stack with group-hover variants

Browse source
This commit is contained in:
Adam Wathan 2020-08-18 09:03:32 -04:00
parent 053ab65cee
commit fdf468998f
3 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/lib/substituteVariantsAtRules.js
View file

@ -3,6 +3,7 @@ import postcss from 'postcss'
import selectorParser from 'postcss-selector-parser'
import generateVariantFunction from '../util/generateVariantFunction'
import prefixSelector from '../util/prefixSelector'
import buildSelectorVariant from '../util/buildSelectorVariant'
function generatePseudoClassVariant(pseudoClass, selectorPrefix = pseudoClass) {
return generateVariantFunction(({ modifySelectors, separator }) => {
@ -25,11 +26,9 @@ const defaultVariantGenerators = config => ({
default: generateVariantFunction(() => {}),
'motion-safe': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-safe${separator}${sel.value}`
})
}).processSync(selector)
return buildSelectorVariant(selector, 'motion-safe', separator, message => {
throw container.error(message)
})
})
const mediaQuery = postcss.atRule({
name: 'media',
@ -40,11 +39,9 @@ const defaultVariantGenerators = config => ({
}),
'motion-reduce': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-reduce${separator}${sel.value}`
})
}).processSync(selector)
return buildSelectorVariant(selector, 'motion-reduce', separator, message => {
throw container.error(message)
})
})
const mediaQuery = postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
mediaQuery.append(modified)