The styleName of a element which have multiple child elements cannot be transform in production build

[ruxes7]

Its perfectly works in dev but some elements styleNames cannot be transform in production.
vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactInlineCSSModulePlugin from "react-inline-css-module/dist/vite-plugin";
import Inspect from 'vite-plugin-inspect'
const generateScopedName = "[path]___[name]___[local]___[hash:base64:5]";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    Inspect(),
    reactInlineCSSModulePlugin( { reactVariableName: 'React' } ),

  ],
  css: {
    modules: {
      generateScopedName,
    },
  },
})

App.tsx

import { useState, FC } from 'react'
import logo from './logo.svg'
import './style.module.scss'

const App: FC = () => {
  const [count, setCount] = useState(0)

  return (
    <div styleName="App">
      <header styleName="hoge"> 
        <img src={logo} styleName="foo" alt="logo" />
        <header styleName="App-header">
          <img src={logo} styleName="App-logo" alt="logo" />
          <p>Hello Vite + React!</p>
          <p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
              count is: {count}
            </button>
          </p>
          <p>
            Edit <code>App.tsx</code> and save to test HMR updates.
          </p>
          <p>
            <a
              styleName="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
            {' | '}
            <a
              styleName="App-link"
              href="https://vitejs.dev/guide/features.html"
              target="_blank"
              rel="noopener noreferrer"
            >
              Vite Docs
            </a>
          </p>
        </header>
      </header>
    </div>
  )
}

export default App

The dom in production build (vite build && vite preview)

<div class="src-___style-module___App___CnhW9">
    <header stylename="hoge">
        <img src="/assets/logo.ecc203fb.svg" alt="logo" class="src-___style-module___foo___aUHr3">
        <header stylename="App-header">
            <img src="/assets/logo.ecc203fb.svg" alt="logo" class="src-___style-module___App-logo___dCJLA">
            <p>Hello Vite + React!</p><p><button type="button">count is: 0</button></p>
            <p>Edit <code>App.tsx</code> and save to test HMR updates.</p>
            <p>
                <a href="https://reactjs.org" target="_blank" rel="noopener noreferrer" class="src-___style-module___App-link___6Yqd4">Learn React</a> | 
                <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener noreferrer" class="src-___style-module___App-link___6Yqd4">Vite Docs</a>
            </p>
        </header>
    </header>
</div>

See the problems at header's styleName
How to resolve this?

[anjianshi]

The class name eg. 'hoge' 'App-header' must appears in 'style.module.scss', otherwise it cannot be translate.
Or can you provide a complete demo?