Codesandbox-client: Support CSS modules in imported npm packages

[bjankord]

🌈 Feature

What is this feature?

I'd like to be able to run SCSS files / CSS files through CSS modules when included in an imported npm package if the file ends in .module.scss or .module.css similar to a feature @ro-savage added to create-react-app v2 branch.

Opt-in only

The feature would be entirely optional and a user would have to explicitly opt in by using the naming convention and importing the css file into a JS file.

Gotchas

If someone named a stylesheet [something].modules.css without it actually being a CSS Module and imported it, it would be imported as a CSS Module.

How things work currently

I've created a react button component that imports a SCSS file that should be run through CSS modules. However, when the component is imported into a codesandbox, the styles are not run through CSS modules.

I've also created some sandboxes with various templates that use this button component:
Parcel Template - Styles from SCSS file load but are not run through CSS modules
Preact Template - Styles from SCSS file load but are not run through CSS modules
Create React App / Webpack Template - Styles don't load, this is expected since codesandbox currently follows create-react-app v1 template which doesn't support SCSS.

// current output
<button class="button neutral" type="button" aria-disabled="false">
  <span class="text-only">
    <span class="">hello</span>
  </span>
</button>

// desired output
<button class="_button_2jjfa_1 _neutral_1ffga_2" type="button" aria-disabled="false">
  <span class="_text-only_1jafa_1">
    <span class="">hello</span>
  </span>
</button>

I'm not too concerned about the excat module hasing syntax, here is what create-react-app-next used originally, however they updated it recently.

Ideally, I'm looking for this feature to be added to the parcel template. I just made demos with all 3 templates to see how the component / styles worked in each.

Other projects that support this feature

In the create-react-app v2 branch, they've added support for this feature where .module.css and .module.scss are automatically run through CSS modules via regex check on file names.

create-react-app-parcel also supports this feature.

webpacker, a rails gem, also supports this convention.

poi also includes support for this feature.

How the feature should work?

Style files that end in .module.scss or .module.css should be run through CSS modules automatically. This should work both for files in the local file directory and files imported from npm like the sample react button component

You have examples or an idea how it can be implemented?

I've looked through a few files in codesandbox to see if I could understand how to implement this feature, but I wasn't really able to wrap my head around how to introduce this feature into the codebase.

[CompuIves]

I think this one shouldn't be too hard to add 😄. We can add a check for .module.css and automatically export css modules, this would also work on node_modules.

I think it would make sense to add this to the create-react-app template as soon as CRA v2 is officially released, to prevent confusion. So let's keep this one open until then!

[bjankord]

Sounds good, can you also add a check for .module.scss similar to CRA v2 when it rolls out.

[JasonKleban]

Is there a way to use create-react-app v2 (especially the typescript one) in codesandbox currently? I'm trying to use css-modules and in the current version I guess I can't?

[bjankord]

@JasonKleban I don't think there is a way to use react-scripts v2 yet, @CompuIves correct me if I'm wrong. create-react-app v2 is in final beta stage so it won't be much longer before react-scripts v2.0.0 stable is available. Hopefully, then, codesandbox will updated to support it.

[CompuIves]

Yep, that's right @bjankord. I will focus on putting Server Side Evaluation out first and then focus on CRA v2 right after 😄.

[bjankord]

@CompuIves I believe this can be closed out now 😄

[lbogdan]

Fixed in #1124 , closing.