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

only prefix animation names that are defined (#2641)

Browse Source
This commit is contained in:
Robin Malfait 2020-10-21 23:07:13 +02:00 committed by GitHub
parent bbacd590e8
commit 68dbc5f981
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
__tests__/plugins/animation.test.js
View File

@ -80,13 +80,52 @@ test('defining animation and keyframes with prefix', () => {
}
}
}
@layer utilities {
@variants {
.tw-animate-none { animation: none; }
.tw-animate-spin { animation: tw-spin 1s linear infinite; }
.tw-animate-ping { animation: tw-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
}
}
`)
})
test('defining animation and keyframes with prefix (skip undefined animations)', () => {
const config = {
prefix: 'tw-',
theme: {
animation: {
none: 'none',
spin: 'spin 1s linear infinite',
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
},
keyframes: {
spin: { to: { transform: 'rotate(360deg)' } },
},
},
variants: {
animation: [],
},
}
const { utilities } = processPlugins([plugin()], config)
expect(css(utilities)).toMatchCss(`
@layer utilities {
@variants {
@keyframes tw-spin {
to { transform: rotate(360deg); }
}
}
}
@layer utilities {
@variants {
.tw-animate-none { animation: none; }
.tw-animate-spin { animation: tw-spin 1s linear infinite; }
.tw-animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
}
}
`)
})

2
src/plugins/animation.js
View File

@ -18,7 +18,7 @@ export default function () {
_.mapKeys(animationConfig, (_animation, suffix) => nameClass('animate', suffix)),
(animation) => {
const { name } = parseAnimationValue(animation)
if (name === undefined) return { animation }
if (name === undefined || keyframesConfig[name] === undefined) return { animation }
return { animation: animation.replace(name, prefixName(name)) }
}
)