import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// import JsxAutoClassnames from 'babel-plugin-jsx-auto-classnames'

export default defineConfig({
  plugins: [react({
    babel: {
      // plugins: [JsxAutoClassnames],
      plugins: [
        ['jsx-auto-classnames', {
          extensions: ['.jsx', '.tsx'],
          excludes: ['src/excludes']
        }]
      ]
    }
  })]
})

<div
  className={{
    selected: true
  }}>
</div>

import _classNames from 'classnames'
<div
  className={_classNames({
    selected: true
  })}>
</div>

import xxx from 'classnames'
function App () {
  return (
    <>
      <div
        className={xxx({
          disabled: true
        })}>
      </div>
      <div
        className={{
          selected: true
        }}>
      </div>
    </>
  )
}

import xxx from 'classnames'
function App () {
  return (
    <>
      <div
        className={xxx({
          disabled: true
        })}>
      </div>
      <div
        className={xxx({
          selected: true
        })}>
      </div>
    </>
  )
}

declare namespace React {
  interface HTMLAttributes<any> extends AriaAttributes, DOMAttributes<any>  {
    className?: Record<string, boolean> | (string | Record<string, boolean>)[]
  }
}