CODEWITHSUNDEEP
webpacknext.jscss-modulescss-loader
brc-dd
brc-dd

Reputation: 13024

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

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!

Upvotes: 3

Views: 622

Answers (1)

Hummel
Hummel

Reputation: 372

My selected solution was to use CSS modules with :global operator to prevent hashed names. This enabled to use the names inside HTML managed by Lexical RTE.

Imported styles.module becomes the className for a wrapper. Afterwards the CSS class selectors can be referenced in the HTML.

/* Editor styles mapped to the class names in the HTML. */
.module :global .bold {
    font-size: 0.85em;
    font-weight: 600;
}

.module :global .underline {
    text-decoration: underline;
}

.module :global .italic {
    font-style: italic;
}

Upvotes: 0

Related Questions