Is there a way to pipe a css <link> include into index.html?

[timwis]

Budo lets you use --css styles.css to pipe in a stylesheet for those not bought into the CSS-in-JS idea. Is there a way to do this with bankai?

[yoshuawuyts]

currently there's not, but we could totally add one - hyperstream accepts streams as read sources so if we pass in an fs stream of CSS into the internals this could totally work ✨ 🚀

[timwis]

From IRC just now:

@timwis: as a means of feedback, it was a little confusing that i had to register the css, then register the js, before i could output/exec either, though i understand it's because of sheetify. seems like the entire premise of having to have state in bankai is because of sheetify.
@yoshuawuyts: that would be correct yeah
ideas on how to improve?
@timwis: well, IMO the audience for something like this is wider than those who've joined the CSS-in-JS club - personally, I just started using it. so i would have expected --css to work more like budo's (pulling in something from the file system) by default. and the sheetify bit would be opt-in
@yoshuawuyts: that's a fair observation. Are you using css in js now tho?
@timwis: any consumers of the sheetify-support feature probably already associate its usage with browserify/js, so perhaps it wouldn't feel too unnatural to them to have the sheetify options as part of the js/browserify options
i am for that enviar (sms) project. i'd be hesitant to use it in a proper work project though (one i expect someone to jump into a year from now and maintain without me) just because it's not mainstream and feels quite unfamiliar at first
for the same reason i don't use a ton of ES6 or other cutting edge features
even with css-in-js though, i often use budo's --css feature to pull in https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
pretty handy for quick development. otherwise i'd have to install sheetify, install bootstrap, and include it in the js
(well, if i'm already using css-in-js, i'd have sheetify installed)
@yoshuawuyts: ah yeah; so the reason why I'm asking is because I def don't - generally try and not add features that I won't use unless someone has a clear use case for them
@timwis: yeah i'm thinking about the choo workshop i was at, introducing people to commonjs, using budo as a shortcut. having to explain how css-in-js works as well is a lot to take in - would be better to learn that on a separate occasion
but certainly worth asking other users/collaborators before making a call like that
@yoshuawuyts: yeah good point. Though on the other hand, having css('bootstrap') is a nice win
"hey, how do we use CSS?" - well, you can import a package from npm like so: (...)
not sure if that would be pushing it though; but maybe it really shifts people into the next gear
reallly not sure. I think you've got a good point haha

Thoughts, other users of bankai? /cc @marionebl

[marionebl]

I'd vote for keeping bankai opinionated and favor a css-in-js approach. budo for development and plain browserify for building will always be a better fit if one needs full flexibility.

[fczuardi]

The main usecase is really to use normalize or bootstrap global _.css_ files without having to choose a css-in-js approach at all, just load those files from a cacheable cdn and not embed them in the js bundle.

I have a project that mix rollup (for my modules) with browserify (for 3rd party modules) and sheetify don't get along well with rollup :) <-- this particular case I've workarounded with rollup-plugin-browserify-transform

[yoshuawuyts]

@fczuardi you can do:

const css = require('sheetify')
css('bootstrap')

and you should be good. bankai can then extract it to a separate file for deployment if you like. Cheers!

[yoshuawuyts]

if someone wants to use an external stylesheet they can do:

const css = require('sheetify')
css('./my-local-stylesheet.css')

And it'll just work. Marking as resolved and closing