Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

csjs.getAllCss : return all CSS by csjs #30

Open
SilentCicero opened this issue Apr 17, 2016 · 4 comments
Open

csjs.getAllCss : return all CSS by csjs #30

SilentCicero opened this issue Apr 17, 2016 · 4 comments

Comments

@SilentCicero
Copy link

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
Copy link
Owner

rtsao commented Apr 17, 2016 •
edited
Loading

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 styletron/styletron#1), and create docs on how to use it, I just haven't gotten around to it yet.

@SilentCicero
Copy link
Author

@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
Copy link
Owner

rtsao commented Apr 22, 2016 •
edited
Loading

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
Copy link
Author

SilentCicero commented Apr 23, 2016 •
edited
Loading

@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

@SilentCicero SilentCicero mentioned this issue May 2, 2016
Open
@rtsao rtsao mentioned this issue Jul 26, 2016
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rtsao @SilentCicero