How to default `:global` in css-modules in next-js?

Viewed 273

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!

0 Answers
Related