Animations scoped to a package?

[rudeayelo]

Hi, I'm developing a component library using workspaces in a monorepo structure, the tree looks pretty standard

apps/
├─ app-using-preset-and-component/
packages/
├─ component/
├─ panda-preset/
├─ ...

The problem I'm finding is that keyframes are supposed to be specified in the panda.config.ts file, but I want to keep some animations scoped to a singular package. If I put the keyframes definition in the component's panda.config.ts, the generated keyframes.css doesn't make it to the app-using-preset-and-component.

To make it work, I have to add the keyframes definition in the app that's consuming the components using the animation, which definitely breaks separation of concerns.

Is there anything I can do to define the keyframes from the scoped package?

[anubra266]

@rudeayelo I'm not sure I understand what you mean.
This are examples of presets, with keyframes.
https://www.ecopanda.dev/feed/animated-pandacss
https://www.ecopanda.dev/feed/panda-transitions-css

[rudeayelo]

I would like to have the possibility to export keyframes definitions from the components that are using them.

What you're doing in those examples is exporting presets of general use, but in my specific scenario, I have a component (from a component library/design system) that uses a very specific animation, not intended to be shared with other components.

A workaround would be to export a preset along with the component which I'd then import and apply in the app's config, but that feels a bit clunky.

[anubra266]

@rudeayelo How do you suggest that should work; A code sample would help. And as far as I know, keyframes in css are global, they're not scoped to a classname or rule

[rudeayelo]

So the question would be: is there a way in Panda to add global css from a package in a monorepo, other than with the preset workaround I mentioned in my previous comment?

Some context: I'm migrating these components from Stitches and I this particular component has a css animation for some SVG properties, so it's coupled to this component, in terms of output @keyframes for sure are going to end up in the global css, but in terms of development, I want to keep them collocated with the rest of the component code.

[rudeayelo]

Here's an idea: would it be possible to include the information in theme.extend from the package in the build file that panda ship outputs so the final app can include them as global css in the build?

[philipyun]

i'd like this included as a feature as well -- even though keyframes are global CSS, it makes a lot of sense to have these styles colocated with the component it's exclusive to, especially since both stitches and styled components had APIs for this.

I would imagine this looks like the ability to define an animation outside of the config file, or to be able to define it as part of a CVA or SVA