🙋 Add styleName for React projects using css modules

This is a 🙋 feature request.

It will be really nice to have styleName feature working out-of-the-box or with minimal configuration for React projects like it is done in babel-plugin-react-css-modules which is not working with Parcel.

🤔 Expected Behavior

Code like this should work fine too:

import './App.css'

const App = () => {
    return (
        <div styleName="app">
            Hello World!
        </div>
    )
}

😯 Current Behavior

Only this one is working:

import styles from './App.css'

const App = () => {
    return (
        <div className={styles.app}>
            Hello World!
        </div>
    )
}

It will be a bit nicer: save typing and more React-ish.

💁 Possible Solution

I’m not sure here, but I think it can be done same way as in babel-plugin-react-css-modules

[pselden]

I was able to fix this by setting both .babelrc and .postcssrc to use the same generateScopeName:

{
  "plugins": [
    [
      "react-css-modules",
      {
        "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]",
        "handleMissingStyleName": "warn"
      }
    ]
  ],
  "presets": ["env", "react"]
}

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    },
    "postcss-modules": {
      "generateScopedName": "[path]__[name]__[local]__[hash:base64:5]"
    }
  }
}

[kawamurakazushi]

Can this work using typescript?