Using @import causes many network fetches and defeats browser style caching in Chrome

[wildhoney]

Using @import causes many network fetches and defeats browser style caching in Chrome

[Wildhoney]

Thanks for raising these issues, Elliott! 👍 I will look at this one a little later.

[pablinos]

I was wondering about all the server requests even if this caching issue didn't exist.
Maybe a solution to this issue though is to use one style tag and group insert the @import statements as needed?

[Wildhoney]

Polymer addressed this issue with their Vulcanize tool, but I'm not entirely sure how that's going to behave with React components. However it would considerably reduce server requests in production.

Edit: If you add gulp-vulcanize to your Gulp process, then it's not something ReactShadow needs to address directly. If Chrome has caching issues with @import though then I agree ReactShadow needs to utilise an alternative in the meantime, as not everybody is going to be vulcanizing their components.

[esprehn]

Note that you don't really want to use @import in production anyway because the async fetch of the sheet will cause FOUC.

[tjwudi]

It will be fantastic to add support for pure CSS source and drop support for cssDocuments as a function. You can take at look at my fork impl at tjwudi/react-shadow-dom.
This helps a lot because we can then build a grunt or gulp plugin for react-shadow, which automatically read and insert css rules into javascript.
In this case, you don't even need to fetch any css anymore, in production.

[Wildhoney]

@tjwudi How would adding the cssSource property differ from writing the styles inline as part of the React component? Although I think I understand what you're trying to achieve. Do you imagine as part of the build process, transferring all of the CSS styles from the documents defined in cssDocuments into the cssSource property?

[tjwudi]

@Wildhoney Right. Component design is good for development, but we will always want to pack them into a big package in delivery. We sure can use css @import at development stage. Then we inline all css source in the building stage.

[Wildhoney]

Agreed. In that case I'm happy to merge in your cssSource changes from your forked branch, if you want to go ahead and open a PR for it 👍

[tjwudi]

Of course I would :)