CSS Support

[tdreyno]

Is caching and loading CSS out of scope for this project? Looks like something that would be pretty easy to add, happy to submit a Pull Request if it'll get in.

[peol]

I wouldn't mind the support for it, but there's issues around knowing when CSS has been loaded/applied to the document cross-browser, that's why projects like require.js only have support for them with semi-official plugins that are not guaranteed to work without FOUC.

However, we could support it but not guarantee the CSS to be loaded before continuing queued stuff. See more here: http://requirejs.org/docs/faq-advanced.html#css

Any thoughts, @addyosmani @sindresorhus ?

[addyosmani]

I've seen a few new efforts to provide support for this in other projects. Let's see what the implementation size is like and we can make a call on whether to include in core or have it as a supported plugin. I'm up for exploring :) On Dec 21, 2012 8:36 PM, "Andrée Hansson" [email protected] wrote:

I wouldn't mind the support for it, but there's issues around knowing when CSS has been loaded/applied to the document cross-browser, that's why projects like require.js only have support for them with semi-official plugins that are not guaranteed to work without FOUC.

However, we could support it but not guarantee the CSS to be loaded before continuing queued stuff. See more here: http://requirejs.org/docs/faq-advanced.html#css

Any thoughts, @addyosmani https://github.com/addyosmani @sindresorhushttps://github.com/sindresorhus?

— Reply to this email directly or view it on GitHubhttps://github.com/addyosmani/basket.js/issues/60#issuecomment-11626234.

[sindresorhus]

I'm wary of this:

Since knowing when the file has loaded is not reliable, it does not make sense to explicitly support CSS files in RequireJS loading, since it will lead to bug reports due to browser behavior.

However, I'm all in if we can do it in a reliable matter on modern browsers without too much code, but I would not want us to support it if we can't know when the CSS has loaded. Probably needs some research first.

[jonathan-fielding]

I think this would be a great thing to implement, I would even look at getting involved in seeing how this could be done however I would expect that the script would need to always be in the

for this to work well.

[addyosmani]

Would someone like to try taking this on? We could implement a POC with CSS support as a branch and test how reliably it might work.

@amrnt you initially tried implementing this in https://github.com/addyosmani/basket.js/pull/28 a year ago. Would you be interested in taking another stab at this?

[amrnt]

@addyosmani Great seeing you want to implement it as POC.

Take look at the previous implementation, tell me, is it good enough? https://github.com/amrnt/basket.js/commit/0f4219ad3e5be474576fd197c51d3517a6b6d573

If so, I will do the same and add some tests.

[andrewwakeling]

Perusing over #76, #77, #84 and this issue, I appears that there isn't any intention for basket.js to handle anything beyond JS. i.e. I can load anything with the execute: false flag, but it is up to me to explicitly handle the response.

I support this decision for "core" basket.js, however it might be great to see something like the addHandler approach suggested in #76.

Please keep in mind that dynamically adding CSS isn't as trivial as the approach suggested in #76. Here are some reasons why.

I put together basket-css-example using create-stylesheet to show an example of basket.js loading CSS. I have identified some issues but I am certain there are more.

If people still would like to see CSS work better with basket.js, I am happy to help out.

[addyosmani]

I fully support CSS support being better explored as an official addition to basket. Any pull requests that help improve our handlers for this would be welcome. On 26 Dec 2013 02:33, "Andrew Wakeling" [email protected] wrote:

Perusing over #76 https://github.com/addyosmani/basket.js/pull/76, #77https://github.com/addyosmani/basket.js/issues/77, #84 https://github.com/addyosmani/basket.js/pull/84 and this issue, I appears that there isn't any intention for basket.js to handle anything beyond JS. i.e. I can load anything with the execute: false flag, but it is up to me to explicitly handle the response.

I support this decision for "core" basket.js, however it might be great to see something like the addHandler approach suggested in #76https://github.com/addyosmani/basket.js/pull/76 .

Please keep in mind that dynamically adding CSS isn't as trivial as the approach suggested in #76https://github.com/addyosmani/basket.js/pull/76. Here are some reasons https://github.com/andrewwakeling/ie-css-bugs why.

I put together basket-css-examplehttps://github.com/andrewwakeling/basket-css-exampleusing create-stylesheet https://github.com/andrewwakeling/create-stylesheetto show an example of basket.js loading CSS. I have identified some issues but I certain there are more.

If people still would like to see CSS work better with basket.js, I am happy to help out.

— Reply to this email directly or view it on GitHubhttps://github.com/addyosmani/basket.js/issues/60#issuecomment-31209320 .

[mahakala]

ping