Minify classnames as an option

[Soreine]

It would be great to have a way to tell aphrodite not to minify classnames.
We currently have our classnames minified in production, because we set process.env.NODE_ENV = 'production'.
The said option would prevail on process.env.NODE_ENV value.

---

This option would prove useful for us to debug errors in production. We are using a tool that notifies about errors in our app. The tool adds an history of interaction with the different HTML elements as context. But we learn nothing from User clicked on div._x23hsa

Thank you for the great tool, by the way. It feels good to forget about the "cascading" part of CSS.

[xymostech]

(I'm in the hospital, sorry for responding slowly and sorry if I continue to respond slowly)

Hey @Soreine! I'm glad the tool is working out for you! Yeah, that's an interesting consequence of the class name minification that we added. Those errors don't look terribly helpful! :(

@gilbox was the one who originally added the minification step. Maybe they have thoughts about what to do about this? Maybe we could add some sort of global function somewhere like StyleSheet.disableClassNameMinification() to turn off this behavior.

(side note: we should stop sticking utilities on StyleSheet, they should probably get stuck on a new AphroditeUtils or just get top-level exported)

[gilbox]

👍 to the global function to disable it.

[Soreine]

A global function is a good quick fix. Be careful though, the current design of aphrodite revolves around using side-effects on import. This is not flexible. Having an aphrodite/no-important export is symptomatic of this.

Maybe you have good reasons to have it work that way. But something like this would be great:

import aphrodite from 'aphrodite'

// Nothing happening yet.

const options = {
  noImportant: true,
  noMinify: true
}

// Start injecting styles
aphrodite.start(options)

// App top-level
ReactDOM.render(<App />, root)

[damienleroux]

+ 1

I have Selenium tests that uses classnames for targetting DOM elements. When launching the test on a "prod" build, all tests failed because classnames were removed.

[gilbox]

imo data attributes are a better way to target DOM elements in your selenium tests since they don't rely on implementation detail

[Kerumen]

I'm sad we chose this library in our company project. It's broken since 1.2.2, no fix are under development. Instead, they decided to update the tagline.
If I knew that, I would have chose another CSS-in-JS library (well-maintained and not buggy).

Is it possible to run minify(false) only once? I have 300+ StyleSheet.create and adding minify(false) before all of them doesn't look like a good idea.

minify is a good option. But it should be configurable globally.

[Soreine]

@Eugene-Sviridov you only need to call minify(false) once. After that, all your calls of StyleSheet.create will not be minified. It's a global toggle.