How to add vendor prefix to @keyframes

[oreshinya]

Can't it add vender prefix to @keyframes （like a @-webkit-keyframes） ?

[blakeembrey]

There's currently no feature for that. It'd be very easy to expose https://github.com/blakeembrey/free-style/blob/f6ca5630ff73f22cf6bb5f12fccd7b33209b710e/src/free-style.ts#L502 to allow you to register with whatever prefix you'd like (e.g. vendor prefixed).

[blakeembrey]

This is available using hash rules directly now: https://github.com/blakeembrey/free-style#hash-rule. Thanks for your interest!

[craigkovatch]

@blakeembrey I'm using typestyle which uses free-style internally and don't really have this option. How would you feel about automatically registering both unprefixed and -webkit-prefixed keyframe definitions in registerKeyframes in particular?

[blakeembrey]

It did that in the early days before removal. I don’t particularly want to add it back. It should be easy to write a little function that does both. The adverse effect of adding this is output size, prefix mismatch and greater code maintenance. I’m not sure it’s worth it for this particular change.

[craigkovatch]

Fair. I actually was able to find a not-insane workaround just a moment ago. For posterity if anyone else runs into while using TypeStyle:

const svgSpinnerAnimation: TypeStyle.types.KeyFrames = {
  '100%': { transform: 'rotate(360deg)' }
};
const svgSpinnerAnimationName = TypeStyle.keyframes(svgSpinnerAnimation);
TypeStyle.cssRule(`@-webkit-keyframes ${svgSpinnerAnimationName}`, svgSpinnerAnimation);

[zhaoyao91]

Yes, me too expect the classname prefix feature. by looking the code, currently the classname generation is hard code here and can't allow any customization. Could we provde a way to add prefix to classnames( style ids )?

[blakeembrey]

@zhaoyao91 I think you wanted to comment on a different issue, this is about vendor prefixes for key frames.

That said, if you look two lines below your link or in the README you’ll see the example of how to set the display name which is the answer to your question.

[zhaoyao91]

@blakeembrey thanks. I see the display name, but they are not working for production build

[blakeembrey]

You want display names in production? It’s based on the environment flag on purpose, because it’s able to tree shake a few KB in production that way. I prioritize a smaller build where possible.