search

rtsao / csjs

:sparkles: Modular, scoped CSS with ES6
MIT License
575 stars 32 forks source link

csjs.getAllCss : return all CSS by csjs #30

Open SilentCicero opened 8 years ago

SilentCicero commented 8 years ago

So It would be really great if I could just export all the CSS for the entire app.

Not sure if this is the right approach, but a getAllCss would be awesome.

rtsao commented 8 years ago

To do that, csjs would need to be some sort of stateful singleton. I've actually started working on a similar idea as part of a comprehensive, better server-rendering and CSS extraction solution that doesn't have any hard tooling requirements (e.g. a browserify transform or webpack loader).

https://github.com/rtsao/styletron https://github.com/rtsao/styletron-server

Essentially, all that needs to be done is to create a csjs-styletron wrapper, then use that in place of normal csjs. Then when rendering on the server, you will be able to simply pull out all CSS that was generated for the app for that render. This means you can send down just the CSS that is needed for the initial render along with the HTML. Any additional styles rendered later on by the client will simply be automatically injected into <head> along with the styles already sent down in the initial pageload. And writes to the styletron <style> tag in the <head> is cached, buffered, and deduped.

The cool thing about this is the styles need not be known at build-time. Instead they are extracted at render time.

I'm not sure if this would fit your needs, but I think this is the best way to do server-rendering with CSS-in-JS tools. styletron is generic so it's usable by anything that generates CSS.

I need to create a little csjs-styletron wrapper (I have an issue here for this https://github.com/rtsao/styletron/issues/1), and create docs on how to use it, I just haven't gotten around to it yet.

SilentCicero commented 8 years ago

@rtsao this is similar to what I was looking for. But my main concern was actually browser side.

If I have all my csjs requiring through to a single app component. I'd love to be able to go csjs.getAllCss, and return the cumulative css of all used csjs in the single bundle.js browser based app.

Just not sure how feasible this is, especially if I include modules that use their own csjs modules that I can't override.

Secretly I want to create csjs-bootstrap =D so If you have any thoughts, please let me know.

rtsao commented 8 years ago

csjs-bootstrap would be totally awesome! So a rendering-library agnostic collection of csjs styles? Or did you have in mind an actual consumable CSS library (implemented with CSJS). I think this might be where the unscoped option would come in?

Is it important for you to be able to extract static CSS at build-time? If not, styletron is also designed to work fully client-side. So all the cumulative css is automatically inserted into the page by the client. The ability to extract CSS when doing server rendering is just sugar on top ;)

SilentCicero commented 8 years ago

@rtsao yep, I'm building it with yoyo right now: https://github.com/SilentCicero/yoyo-bootstrap

The css I hope to ship with csjs. Right now it's just css includes.

I really need to figure out the exporting of csjs modules. That's my main concern right now. The webpack situation is a little dire and hard to figure out.

We should work on a solution there.

Just working out the specifics with yoyo/dom manipulation. A lot to learn about the dom... =D