feat: prefix animation names #2621
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
RobinMalfait
force-pushed
the
animation-parser
branch
from
f35e7c6
to
6b35af3
Compare
RobinMalfait
force-pushed
the
animation-parser
branch
from
e2055c9
to
5e4c591
Compare
adamwathan
reviewed
Oct 21, 2020
src/plugins/animation.js
Outdated
| const keyframesStyles = _.mapKeys(keyframesConfig, (_keyframes, name) => `@keyframes ${name}`) | ||
| const keyframesStyles = _.mapKeys( | ||
| keyframesConfig, | ||
| (_keyframes, name) => `@keyframes ${prefix === undefined ? name : [prefix, name].join('')}` |
There was a problem hiding this comment.
The plugin API provides a prefix function you can probably use here instead of adding it manually (passed in like theme, variants, etc), probably better because prefix can technically be a function for weird advanced use cases. I worry it might be expecting a class though, so you may need to do something gross like prefix(.${name}).slice(1) to sort of trick it into looking like a class.
There was a problem hiding this comment.
I thought this existed as well. Turns out we are using an invokePlugin which is a specific implementation in the tests which doesn't expose all those values. 😬
RobinMalfait
force-pushed
the
animation-parser
branch
from
5e4c591
to
d3af2e5
Compare
26 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds an animation string parser, for example
This:
"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"Can be parsed as:
This is useful so that we can run user defined animations through this function so that we can get the animation name. We then can apply the prefix to the animation name. For example
pingcould becometw-ping. Useful for codebases that require a prefix and don't like the globalpingname.The second commit allows us to do the prefixing of animation
values.A prefix of
tw-will generate:No prefix will result in: