Rollup and Post CSS - Auto-prefixing React className attributes

Question

I'm using Rollup + React + Post CSS to build a component library. I'm looking for a way to autoprefix class names so that they will not conflict with styles in the project using the library.

I have already added this plugin to automate adding the 'prefix-' to every class name in the CSS:

Post CSS Prefixer

However, this does not modify the JavaScript (JSX), so the React components are still using the unnamed classes as className attributes.

Is there a way to use Rollup to automatically modify className attributes to include the same prefix specified in the CSS?

Note that I'm not looking for a fully modular solution such as CSS Modules, as I want the same 'prefix-' across every component inside the library.

Answer 1

You can't use static classNames to use this feature. To use it you need import style as object and assign it as object also.

import React from "react";
import style from "style.css";

class DivMyStyle extends React.Component {
  render() {
    return <div className={style.myStyle} />
  }
}