Vite и обфускация

[korobeynikov]

Подскажите, как сделать обфускацию CSS-кода на Vite, т.е. переименовать наименования классов.

В интернете нашел информацию, что требуется rollup-plugin-postcss, но модифицированный vite.config.js до следующего вида нерабочий:

import postcss from 'rollup-plugin-postcss';

export default {
  build: {
    sourcemap: false,
    rollupOptions : { 
      plugins : [ 
        postcss({
          modules: {
            generateScopedName: "[hash:base64:8]",
          },
          autoModules: true,
        }),
      ] 
    } ,
  }
}

Куда копать, кто подскажет?

[akiraki22lvl]

В Vite не надо тащить rollup-plugin-postcss - у него уже всё встроено. Хэширование классов делается через обычные CSS-модули.
Фокус в том, что глобовые .css файлы он не трогает, а вот если переименовать файл в *.module.css, то в конфиге можно прописать:

export default {
  css: {
    modules: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

и тогда твой .root превратится во что-то типа .a1B2c3D4.
Дальше уже в коде:

import styles from './button.module.css'

<button className={styles.root}>Click</button>

Аналогично и в Vue через <style module>.
Если же хочется «захэшировать всё подряд», включая глобальные стили, то это боль — можно угробить разметку и сторонние либы. Обычно так не делают, только свои компоненты переводят на модули.
Так что копать не в сторону rollup-plugin-postcss, а именно в css.modules в vite.config.js.