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

Rename reduced-motion to motion-reduced, add motion-safe

Browse Source
This commit is contained in:
Adam Wathan 2020-07-27 14:36:10 -04:00
parent 5dcb9f9035
commit 9f39277607
2 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
__tests__/variantsAtRule.test.js
View File

@ -177,9 +177,9 @@ test('it can generate focus-visible variants', () => {
})
})
test('it can generate reduce-motion variants', () => {
test('it can generate motion-reduced variants', () => {
const input = `
@variants reduce-motion {
@variants motion-reduced {
.banana { color: yellow; }
.chocolate { color: brown; }
}
@ -189,8 +189,31 @@ test('it can generate reduce-motion variants', () => {
.banana { color: yellow; }
.chocolate { color: brown; }
@media (prefers-reduced-motion: reduce) {
.reduce-motion\\:banana { color: yellow; }
.reduce-motion\\:chocolate { color: brown; }
.motion-reduced\\:banana { color: yellow; }
.motion-reduced\\:chocolate { color: brown; }
}
`
return run(input).then(result => {
expect(result.css).toMatchCss(output)
expect(result.warnings().length).toBe(0)
})
})
test('it can generate motion-safe variants', () => {
const input = `
@variants motion-safe {
.banana { color: yellow; }
.chocolate { color: brown; }
}
`
const output = `
.banana { color: yellow; }
.chocolate { color: brown; }
@media (prefers-reduced-motion: no-preference) {
.motion-safe\\:banana { color: yellow; }
.motion-safe\\:chocolate { color: brown; }
}
`

19
src/lib/substituteVariantsAtRules.js
View File

@ -23,11 +23,26 @@ function ensureIncludesDefault(variants) {
const defaultVariantGenerators = config => ({
default: generateVariantFunction(() => {}),
'reduce-motion': generateVariantFunction(({ container, separator, modifySelectors }) => {
'motion-safe': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `reduce-motion${separator}${sel.value}`
sel.value = `motion-safe${separator}${sel.value}`
})
}).processSync(selector)
})
const mediaQuery = postcss.atRule({
name: 'media',
params: '(prefers-reduced-motion: no-preference)',
})
mediaQuery.append(modified)
container.append(mediaQuery)
}),
'motion-reduced': generateVariantFunction(({ container, separator, modifySelectors }) => {
const modified = modifySelectors(({ selector }) => {
return selectorParser(selectors => {
selectors.walkClasses(sel => {
sel.value = `motion-reduced${separator}${sel.value}`
})
}).processSync(selector)
})