handleMissingStyleName and Runtime styleName

[pot-code]

Environment: macOS Sierra Webpack version: 4.30 Babel version: 7.8.3

Description:

getClassName.js will throw error Could not resolve the styleName Xxxx if handleMissingStyleName is set true when using both Runtime styleName and className.

Snippet:

"plugins": [
  "react-hot-loader/babel",
  "@babel/plugin-syntax-dynamic-import",
  "@babel/plugin-proposal-class-properties",
  [
    "react-css-modules",
    {
      "context": "./src",
      "generateScopedName": "[name]-[local]__[hash:base64:5]",
      // "handleMissingStyleName": "warn",
      "webpackHotModuleReloading": true,
      "filetypes": {
        ".less": {
          "syntax": "postcss-less"
        }
      }
    }
  ]
]

<div
  styleName={idx === tabIdx ? 'tab tab--active' : 'tab'}
  key={idx}
  onClick={() => {
    setTab(idx)
    x.set(-idx * containerRef.current.offsetWidth)
  }}
>
  {tab.name}
</div>

// somewhere else
<h1 className="red">{this.state.counter}</h1>

If you set handleMissingStyleName to false, the issue will gone.

update:

The use of root rules(BEM rules) in less will cause the issue, eg:

&--active {
 // ...
}