Animations not working when importing from NPM

[Logan Walls]

Thanks for the great library!

I think I'm encountering a similar issue to #102 in my Vite (SolidJS) project. I have installed open-props via npm and if I import like this:

@import "open-props/style";
/* and / or */
@import "open-props/animations";

animations do not work (elements with e.g. animation: var(--animation-shake-y); don't animate at all).

But if I pull them from a CDN:

@import "https://unpkg.com/open-props/animations.min.css";

they work as expected.

I can work around this for now, but just want to let you know.

Thanks again!

[Arby]

give this setup a quick look? I just put it together to make sure the animation is working smoothly.
https://stackblitz.com/edit/solidjs-templates-srwf4t?file=src%2FApp.jsx

[Adam Argyle]

looks like a typo in the import: @import "open-props/styles"; should be @import "open-props/style";, which means the easings aren't importing and that'll cause the animations to fail because they have an invalid/blank value for easing.

[Logan Walls]

looks like a typo in the import: @import "open-props/styles"; should be @import "open-props/style";, which means the easings aren't importing and that'll cause the animations to fail because they have an invalid/blank value for easing.

Thank you for pointing this out! Unfortunately this was just a typo in the GH issue (my apologies for that). In my actual project I have @import "open-props/style"; and still have the issue.

[Logan Walls]

give this setup a quick look? I just put it together to make sure the animation is working smoothly. https://stackblitz.com/edit/solidjs-templates-srwf4t?file=src%2FApp.jsx

Thank you! My project is not using post-css (I'm not familiar with it). It looks like your example is though. I replicated the issue using a similar setup to mine on stackblitz:

https://stackblitz.com/edit/solidjs-templates-bvinbp?file=src%2FApp.tsx

You can see that the animation doesn't work by default, but if you uncomment the link tag to include the animations stylesheet then it does work.

[Arby]

Just import Open Props in your index.css file, rather than App.module.css. You won't need any other imports; this will make them globally available in your project.

// index.css
@import"open-props/style";
@import"open-props/normalize";

[Adam Argyle]

that's strange tho, when importing the props in App.module, the keyframes are removed (for no reason afaict). sounds like the build system trying to be helpful, but instead it's over doin it.

i'm going to close for now, since it's a specific issue with that build process and not the files on npm/cdn. do share if you find the cause tho!

[Logan Walls]

Ah, I see. That's odd.
Thank you both! I'll just avoid importing from css modules for now.