vite.config.js

import fs from 'fs'
import path from 'path'
import { defineConfig } from 'vite'
import stringHash from 'string-hash'

// This file will be auto-generated
const components = path.resolve(__dirname, 'lib/components.js')

export default defineConfig(async ({ mode }) => {
  // Watch only on dev mode, ignoring auto-generated files
  const watch = mode === 'dev' && {
    exclude: [components]
  }

  return {
    build: {
      watch,
      sourcemap: true,
      lib: {
        entry: {
          components,
          jsx: path.resolve(__dirname, 'lib/jsx/index.js'),
          state: path.resolve(__dirname, 'lib/state/index.js')
        },
        name: '@tooooools/ui'
      }
    },

    plugins: [
      {
        name: 'build-components-index',
        apply: 'build',
        buildStart: () => {
          console.log('\ngenerating components/index.js...\n')
          const dir = path.resolve(__dirname, 'lib/components')

          fs.writeFileSync(
            components,
            [
              '// Auto-generated by the build-components-index plugin',
              ...fs.readdirSync(dir).map(filename =>
                /.*.jsx/.test(filename) &&
                  `export { default as ${path.parse(filename).name} } from './components/${filename}'`
              ).filter(Boolean),
              ''
            ].join('\n'),
            'utf8'
          )
        }
      }
    ],

    css: {
      devSourcemap: true,
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use 'lib/style/_helpers' as *;
            @import 'lib/style/reset';
            @import 'lib/style/variables';
            @import 'lib/style/mixins';
          `
        }
      },
      modules: {
        generateScopedName: function (name, filename, css) {
          // Do not mangle state classnames
          if (/^(is-|has-)/.test(name)) return name

          const i = css.indexOf(`.${name}`)
          const lineNumber = css.substr(0, i).split(/[\r\n]/).length
          const hash = stringHash(css).toString(36).substr(0, 5)
          return `ui-${name}-${hash}${lineNumber}`
        }
      }
    },

    esbuild: {
      jsxInject: "import h from '/lib/jsx/h'",
      jsxFactory: 'h'
    }
  }
})