archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
__tests__/responsiveAtRule.test.js
View File

@ -111,32 +111,37 @@ test('it can generate responsive variants when classes have non-standard charact
@responsive {
.hover\\:banana { color: yellow; }
.chocolate-2\\.5 { color: brown; }
.group:hover .group-hover\\:toast { color: black; }
}
@tailwind screens;
`
`
const output = `
@layer utilities {
.hover\\:banana { color: yellow; }
.chocolate-2\\.5 { color: brown; }
.group:hover .group-hover\\:toast { color: black; }
}
@media (min-width: 500px) {
@layer utilities {
.sm\\:hover\\:banana { color: yellow; }
.sm\\:chocolate-2\\.5 { color: brown; }
.group:hover .sm\\:group-hover\\:toast { color: black; }
}
}
@media (min-width: 750px) {
@layer utilities {
.md\\:hover\\:banana { color: yellow; }
.md\\:chocolate-2\\.5 { color: brown; }
.group:hover .md\\:group-hover\\:toast { color: black; }
}
}
@media (min-width: 1000px) {
@layer utilities {
.lg\\:hover\\:banana { color: yellow; }
.lg\\:chocolate-2\\.5 { color: brown; }
.group:hover .lg\\:group-hover\\:toast { color: black; }
}
}
`

12
__tests__/variantsAtRule.test.js
View File

@ -252,7 +252,7 @@ test('it can generate motion-safe and motion-reduce variants', () => {
test('motion-reduce variants stack with basic variants', () => {
const input = `
@variants motion-reduce, hover {
@variants motion-reduce, hover, group-hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -263,11 +263,15 @@ test('motion-reduce variants stack with basic variants', () => {
.chocolate { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.group:hover .group-hover\\:banana { color: yellow; }
.group:hover .group-hover\\:chocolate { color: brown; }
@media (prefers-reduced-motion: reduce) {
.motion-reduce\\:banana { color: yellow; }
.motion-reduce\\:chocolate { color: brown; }
.motion-reduce\\:hover\\:banana:hover { color: yellow; }
.motion-reduce\\:hover\\:chocolate:hover { color: brown; }
.group:hover .motion-reduce\\:group-hover\\:banana { color: yellow; }
.group:hover .motion-reduce\\:group-hover\\:chocolate { color: brown; }
}
`
@ -279,7 +283,7 @@ test('motion-reduce variants stack with basic variants', () => {
test('motion-safe variants stack with basic variants', () => {
const input = `
@variants motion-safe, hover {
@variants motion-safe, hover, group-hover {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -290,11 +294,15 @@ test('motion-safe variants stack with basic variants', () => {
.chocolate { color: brown; }
.hover\\:banana:hover { color: yellow; }
.hover\\:chocolate:hover { color: brown; }
.group:hover .group-hover\\:banana { color: yellow; }
.group:hover .group-hover\\:chocolate { color: brown; }
@media (prefers-reduced-motion: no-preference) {
.motion-safe\\:banana { color: yellow; }
.motion-safe\\:chocolate { color: brown; }
.motion-safe\\:hover\\:banana:hover { color: yellow; }
.motion-safe\\:hover\\:chocolate:hover { color: brown; }
.group:hover .motion-safe\\:group-hover\\:banana { color: yellow; }
.group:hover .motion-safe\\:group-hover\\:chocolate { color: brown; }
}
`

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)