Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: prefix animation names #2621

Merged
merged 2 commits into from
Oct 21, 2020
Merged

feat: prefix animation names #2621

merged 2 commits into from
Oct 21, 2020

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Oct 19, 2020

This PR adds an animation string parser, for example

This:

"ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"

Can be parsed as:

{
  name: 'ping',
  duration: '1s',
  timingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
  iterationCount: 'infinite',
}

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 ping could become tw-ping. Useful for codebases that require a prefix and don't like the global ping name.


The second commit allows us to do the prefixing of animation values.

A prefix of tw- will generate:

.tw-animate-spin {
  animation: tw-spin 1s linear infinite;
}

@keyframes tw-spin {
  to {
    transform: rotate(360deg);
  }
}

No prefix will result in:

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

Note: omitted autoprefixer results

@RobinMalfait RobinMalfait changed the title add animation value parser feat: prefix animation names Oct 20, 2020
Copy link
Member

@adamwathan adamwathan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple small things but looks great!

const keyframesStyles = _.mapKeys(keyframesConfig, (_keyframes, name) => `@keyframes ${name}`)
const keyframesStyles = _.mapKeys(
keyframesConfig,
(_keyframes, name) => `@keyframes ${prefix === undefined ? name : [prefix, name].join('')}`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 😬

src/plugins/animation.js Outdated Show resolved Hide resolved
src/util/animationParser.js Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants