Build-in CSS/SASS Module should work like Styled JSX

[mrgoonie]

Feature request

A build-in CSS (SASS) Module behavior should be the same with Styled JSX

Is your feature request related to a problem? Please describe.

Naming a class should be the same as a default behavior (in the quote) instead of referring every class name to an object key.

Let's say we have a module css and a module js file as below, this is the current setup:

// button.module.scss
.btn {
  padding: 20px;
  .label {
    font-size: 16px;
  }
}

// button.js
import css from "./button.module.scss"

export default function Button(){
  return (
    <div className={css.btn}> // <-- has to refer a class name to a css object for each element
      <span class={css.label}>BUTTON</span> // <-- has to refer a class name to a css object for each element
    </div>
  )
}

Describe the solution you'd like

A clear and concise description of what you want to happen:

import css from "button.module.scss"

export default function Button(){
  return (
    <div class={css.btn}>
      <span class="label">BUTTON</span> // <--- this class should be automatically added a random string when building for scoped styles
    </div>
  )
}

When I worked with styled jsx, this is the current behavior:

export default function Button(){
  return (
    <div class="btn"> // <--- this class will be automatically added a random string after building for scoped styles
      <style jsx>{`
        .btn {
          padding: 20px;
          .label {
            font-size: 16px;
          }
        }
      `}</style>
      <span class="label">BUTTON</span> // <--- this class will be automatically added a random string after building for scoped styles
    </div>
  )
}

So I'm expecting the import css-module should be the same, shouldn't it?

Describe alternatives you've considered

An alternative approach is:

import css from "button.module.scss" // <-- this should return "css" as a string

export default function Button(){
  return (
    <div class="btn"> // this class should be automatically added a random string when building for scoped styles
      <style jsx>{css}</style> // <--- this should work
      <span class="label">BUTTON</span> // <--- then this class should be automatically added a random string as well
    </div>
  )
}

Thanks,

[jamesmosier]

This would fall outside what Next.js would handle internally, as the CSS module support is not built by Next and instead is just integrated into the Next framework.

I think you'd want to request this feature from the css-loader project.