Minify/Mangle CSS Classnames in JSX and CSS output from Webpack (or other programmatic means)

by

I’d like to minify my classnames (for very minimal source protection purposes) in both my output CSS files and in the rendered JSX from my React components similarly to this Webpack plugin: https://github.com/vreshch/optimize-css-classnames-plugin

Is there any existing option I can use to achieve this, either Webpack or otherwise? Thanks very much.

From:

<div className="long-class-name"></div>

.long-class-name {
 }

To:

<div class="a"></div>
.a {
}

88 thoughts on “Minify/Mangle CSS Classnames in JSX and CSS output from Webpack (or other programmatic means)”

  7. Greetings from California! I’m bored to death at work so I decided to browse your blog on my iphone during lunch break.
    I love the info you provide here and can’t wait to take a look when I get home.
    I’m amazed at how fast your blog loaded on my mobile ..

    I’m not even using WIFI, just 3G .. Anyhow, superb blog! http://cleckleyfloors.com/

    Reply

Leave a Comment