Rollup minifier les noms de classe

Question

Existe-t-il des plugins rollup.js qui permettent d'obfusquer / manguer les noms de classes CSS ? Je n'ai rien trouvé, sauf celui-ci pour webpack : https://github.com/sndyuk/mangle-css-class-webpack-plugin

Answer 1

Cela peut être réalisé avec rollup-plugin-postcss . Comme indiqué dans le fichier readme, les options de configuration de l'option modules sont transmises à postcss-modules . Utilisation du generateScopedName vous pouvez définir le format du nom de la classe :

generateScopedName: "[hash:base64:8]",

Il y a plus d'exemples dans le fichier readme de postcss-modules, y compris comment générer le nom dynamiquement. Notez que vous êtes responsable de vous assurer que les noms sont suffisamment uniques pour ne pas entrer en conflit.

La configuration complète du rollup ressemblerait à quelque chose comme :

import postcss from "rollup-plugin-postcss";
... // other imports

export default {
  ... // rest of config
  plugins: [
    ... // other plugins
    postcss({
      ...
      modules: {
        generateScopedName: "[hash:base64:8]",
      },
      autoModules: true,
    }),
    ...
  ],
};

Alors quelque chose comme :

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* styles.module.css */

import STYLES from './styles.module.css';

...

// Use the style however
<div className={STYLES.parent}> 
  ...
</div>

Ça finit par ressembler à ça :

.xSgFDOB2 {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<div class="xSgFDOB2">
  ...
</div>