Rollup minify classnames

This can be achieved with rollup-plugin-postcss. As per the readme, configuration options for the modules property are passed through to postcss-modules. Using the generateScopedName property you're able to set the format of the class name:

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

There are more examples in the postcss-modules readme including how to generate the name dynamically. Note that you are responsible for ensuring that the names are unique enough to not clash.

The full rollup config would look something like:

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

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

Then something like:

.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>

Ends up looking like:

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

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