I get the advantage of using either Sass or less or postcss with webpack and I get all the features as expected from this workflow.
The only thing I don't have is that unused class feature with my workflow, but I can probably find a postcss plugin which handles that.
I don't see any advantage of this library for me?
You're unlikely to find a postcss plugin that can eliminate dead code. Unless it can analyse your CSS in the context of your markup, it has no way of knowing what's safe to remove. For that, you need statically analyzable single file components.
// styles.css
.root { background: grey; }
.button { border: 1px solid blue; }
.error { color: red }
.alert { background: red }
// Component.css
import styles from './styles.css'
return (
<div className={styles.root}>
<button className={styles.button}>Submit</button>
{false && <div className={styles.error}>Error!</div>}
</div>
)
Of course, I'm not aware of any solution for nothing this currently, but all the bits and pieces are there for it to be feasible.
It's easy to just say "don't do that then" but with a large enough codebase, and devs of many different skill levels, it's easier just to move to a model that prevents CSS cross-talk altogether.
In our codebase (using import './styles.css' w/CSS Modules) every single component has a className called .root at the very top. Never conflicted once.