Integrating with webpack

[mauriciosoares]

I may be overthinking about this, but it's nice to already have some thoughts about building tools (and as webpack is probably one of the most famous nowadays..)

Let's say I wan't to use this approach with webpack's css/style plugins... we could do something like this:

.container {
  width: 100%;
  padding: 3rem;
}

.full-width {
  width: 100%;
}

import styles from './index.scss';

styles.container; // this would output `container _15QFk`
styles['full-width']; // this would output `_15QFk`

In case of container, it returns both classes... and in full-width as it becomes empty, it only returns the generated class by atomify.

This is particularly useful in react.js projects, as we use the classes as variables.

[rafaelrinaldi]

@mauriciosoares Hey, thanks for your suggestion!

Yeah, JavaScript inline styles is definitely a scenario we could cover. I think we can solve this by allowing the user to pick what algorithm to use for generating class names in a way that they generate more predictable names (we can even use the same names from Basscss).

Your idea is also good, it can be a Webpack loader/plugin that knows how to translate class names.

Thanks for raising this! Let me know if you have any other ideas.