Specify custom classname generation?

[kevinSuttle]

trafficstars

I assume this is using https://github.com/webpack/loader-utils#interpolatename or https://github.com/garycourt/murmurhash-js ? Is there a config object to specify this?

[jlfwong]

Hi @kevinSuttle,

There's no way to specify this at the moment, and there aren't plans to add configuration for this.

What's your use case?

[kevinSuttle]

In Webpack, you can do this with CSS Loader,

css-loader?localIdentName=[path][name]---[local]---

which eliminates the need for random hashes.

[xymostech]

@kevinSuttle The hashes are used explicitly so that when we rehydrate after server-side rendering we don't generate duplicate styles. They aren't just added for uniqueness.

Is there some problem with the classnames that we generate? Is there a reason you'd like to change how they're generated?

[kevinSuttle]

It's the same issue with the default CSS Module setup: makes it hard to debug. http://kevinsuttle.com/posts/css-modules-a-review#local-by-default-is-a-double-edged-sword

[ghost]

@kevinSuttle It would be great if you added comment support to your site so we can continue the discussion on your linked post.

[kevinSuttle]

Feel free https://github.com/kevinsuttle/kevinsuttle.github.io/issues/new

[kevinSuttle]

Side note: not sure if this would be useful or even possible, but I thought I'd bring it up to those with the bigger brains here.

[jlfwong]

@kevinSuttle The class names we generate already are a lot friendly than the mangled ones there (i.e. we preserve the key name instead of entirely mangling it is like it is in 1jrfA.

I do think it would be really nice to have the ability to include the file name where the StyleSheet.create call happened, and supporting that wouldn't be too hard.

I am against having an arbitrary classname generation API, since the ways in which classes are generated is integral to making Aphrodite work correctly, but I can imagine something like this:

const styles = StyleSheet.create({
    red: { color: 'red'; }
    blue: { color: 'blue'; }
}, 'my-file-name.jsx');

Then the generated class would do something intelligent where it automatically uses that prefix on the classnames. so Instead of getting css(styles.red) -> "red_219ah1", you get css(styles.red) -> "my-file-name__red_219ah1.

Writing the filename manually everywhere would be crummy, but you can do an AST transform that only happens at dev time to automatically insert file names into any StyleSheet.create call as the last argument.

But stepping back a second, I might suggest that colocating your styles with your components via Aphrodite offers a different approach to debugging entirely. If you have react devtools installed, then you can find the innermost React component containing the class-name, and work from there to pretty quickly find the style definition (it's likely in the same file, barring shared styles).

[liveresume]

Would it be any easier to prepend the React classname where the style is in use? That would help debugging when traversing the DOM.

[jlfwong]

@liveresume Aphrodite explicitly does not depend on React, so that's not really an option.