Styles extraction into css file

[vladshcherbin]

Is it possible to extract all styles into .css file and leave only class names in .js file?

[sgtpep]

I think so. For instance:

const styles = [];
const css = csstag.bind(styles);
const classes = css`
  .root {
    color: red;
  }
`;

styles will contain a list of compiled styles that could be stored in files. classes will contain a hash with classnames.

[vladshcherbin]

@sgtpep thanks for an idea. Trying to find a package which extracts classes to a .css file, leaves object with classes in .js file and can be used with rollup out-of-the-box. Probably not a scope for this package I guess?

[vladshcherbin]

The flow I search is this:

const styles = css`
  .root {
    color: red;
  }
`
const b = styles.root

Which replaces code above in js file into smth like:

const styles = {
  root: 'hashed-class'
}
const b = styles.root

or ideally just to:

const b = 'hashed-class'

And compiles a css file with:

.hashed-class {
  color: red;
}

Can't find any which does all of this 🤔

[conartist6]

I'm thinking sort of along these lines too. I've been working on a build system (called macrome) designed specifically to manage build steps best done in the working tree. Once I'm finished with it I think it could easily handle something like this. The one thing is that I think it makes sense to output a single .css file after traversing the whole import tree (and applying tree-shaking techniques to it). This suggests that building the final .css file be a responsibility of the bundler, which seems correct to me. The benefit is that if you set up that one bundling step you'll know that any styles used in your code (or code written in this style at least) will definitely be included, and if tree shaking unused styles will even be excluded.