Add compile-time option for class minification

[gilbox]

address this existing todo:

// TODO(emily): Make a 'production' mode which doesn't prepend
// the class name here, to make the generated CSS smaller.

@lencioni

[khanbot]

Hey @gilbox,

Thanks for the PR! Mind signing our Contributor License Agreement?

When you've done so, go ahead and comment [clabot:check] and I'll check again.

Yours truly,
khanbot

[gilbox]

[clabot:check]

[khanbot]

CLA signature looks good 👍

[xymostech]

Hey @gilbox! Thanks for the PR! I left some questions inline that I'd like answered before landing this, but the code and test looks good :)

[xymostech]

Is there a reason we want to add an additional env variable, instead of just using process.env.NODE_ENV === "production"?

[gilbox]

The reason I added another env variable is because it seems reasonable that someone might not want to minimize class names in production in order to make debugging production-only problems easier.

[lencioni]

I'm a little hesitant to require that folks use a new env variable in order to benefit from this.

[gilbox]

no problem, i'll change it to use NODE_ENV

[xymostech]

Another thing that we were considering doing is making something like css(styles.a, styles.b) generate only a single hash class name, like _abcdef instead of combining two hashes like _abcdef-O_o-_012345. Not sure if you'd like to try tackling that here as well, but leaving a TODO about it would be nice if not. :)

If we do want to tackle it, we should figure out whether we need to make our hash longer. Currently, our hash is 6 base-36 characters, which means we'd expect collisions once there's ~47k styles on the page. Is that enough? On the largest KA pages, we end up seeing ~500 independent styles, but our website isn't very SPA-y, so the stylesheet gets cleared out pretty often. If we add uppercase letters, that bumps us up to ~240k styles on a page before seeing a collision.

[gilbox]

I was hoping to combine hashes in a separate PR. I'll add the TODO for now.

[xymostech]

Okay, great! Doing it separately sounds good :)

[xymostech]

Thanks! Looking forward to your other PR :)

[jlfwong]

One potential issue with using this optimization is that it dramatically increases the probability of hash collision. I believe when we were originally considering doing this, we planned on using a longer hash when omitting the class name.

[lencioni]

Any reason to keep the leading _ here?

[gilbox]

class names can't start w/digits

[xymostech]

@jlfwong In this PR, we're still doing the -O_o- concatenation of class names, so there still isn't a huge chance of collisions because you'd need a very large number of actually unique style objects, instead of just a large number of combinations. It sounds like @gilbox is going to do the further step of hashing the final class names down to a single hash, so we can discuss using a longer hash there?

[luixxiul]

Is it possible to avoid minifying even if the variable process.env.NODE_ENV is set to production?

brave/browser-laptop#10029 (comment)

[gilbox]

@luixxiul when this was discussed we didn't have a specific use-case in mind. Maybe open a PR to add a new environment variable that turns off minification?

[luixxiul]

That would be great. IMHO the info that the option is enabled by default should have been added to CHANGELOG.md.

[gilbox]

Yeah, unfortunately the CHANGELOG.md is a couple of versions out of date.

[luixxiul]

I opened a new issue for that: #261