I am using CSS modules in a Next.js project. Suppose I have some code like this:
// foo.module.(s)css
.foo :global {
animation-name: bounce;
// ...
}
Can I modify Webpack config in Next.js so that I don't need to specify :global at each selector, so that the value of animation-name is not hashed? In this case, I want foo to be hashed, but not bounce.
All my keyframes are defined in global stylesheet file. I don't want to scope keyframes cause I am using them multiple times, and scoping in that case is generating duplicate keyframes (just having different names).
Any help or suggestion for a better approach is appreciated!