Any chance of using css modules while keeping it simple?

[Newbie012]

I come from Angular. I have started developing in react just months ago. I like both Angular and React. Each has its own pros and cons. But I'm not here to make a discussion of that. My point is, in Angular, style encapsulation is by default. Meaning, I don't have to import the style to the component and pass styles.Sidebar in className. Instead, I write the name of the class as a string (the vanilla way), and Angular knows to match it with the given style.

Now, I know Angular uses lots of magic behind the scene to make such a thing work, and I know that in css modules doesn't work that way, but I find it tedious to pass a variable for each element I want to cast a style. So I'm having hard time with two issues:

1. I can't write plain css without making it global (if I try to import .css file which is not a module I get an error).
2. I have to pass a className for each element that I want do style. Meaning, I can't write .Sidebar > ul.

I know that NextJS didn't invent CSS modules, but at the same time, they don't allow me to create a plain CSS files that gets minified to many files (just like they do with CSS modules). Any suggestions?

[wereHamster]

https://nextjs.org/docs/basic-features/built-in-css-support describes both how to use global CSS, and component-level CSS. Using component-level CSS (ie. CSS modules which you import in the respective components where you need the styles) should cover both your issues. The CSS is not global, and you can use any CSS (including child selectors) in the .module.css file.

[Newbie012]

Thanks for the comment. I've already read the documentation, but I'm not sure how it solves my issue of passing className={styles.X} for each element. I've heard of a plug-in that allows me to write styleName but I haven't see any mention of integrating it with Next.

Link - https://github.com/gajus/babel-plugin-react-css-modules