Load CSS Files via AMD with XStyle
AMD loaders are letting us load just about anything: AMD modules, basic JavaScript files (from any origin), text-based files (HTML templates, for example), and more. Unfortunately most loaders don't have CSS loading capabilities, most likely because "onLoad"-style events aren't provided by all browsers for stylesheets. Luckily my SitePen colleague Kris Zyp has created XStyle, an AMD package available to AMD loaders for reliable stylesheet loading. Let's take a brief look at XStyle!
In fairness to XStyle, it's more than just an AMD plugin for loading stylesheets. XStyle provides the capability to:
- Shim and extend CSS
- Load stylesheets and execute callbacks
- Nested @import loading
Shimming and extending CSS is great but doesn't seem to be something I would need often; loading CSS with JavaScript modules is nice because:
- Loading modules and templates together but needing to add LINK tags manually sucks
- One define() to define a complete widget from JS, to template, and CSS, is ideal; especially for third party components
So consider a great JavaScript loader like curl.js. With curl.js, all you need to do to load a CSS file is:
curl(["css!path/to/file.css"], function() {
// defineCSS loaded, do stuff!
});
Sweet, right? With a different loader, you can load your CSS files with other modules by coding:
define(["xstyle!./path/to/file.css"], function(){
// module starts after css is loaded
});
Outstanding! With XStyle we can define a complete component, stylesheet and all!
XStyle is capable of much more than what I've presented above, but just the ability to load stylesheets with every other piece of a given module is priceless. Improves organization and speed of coding; well done Kris!
Thanks for this great article! I wanted to point out that i didn’t get your example code to work until I poked into the dgrid API and found that the path to load is “xstyle/css!./some/path/to/file.css”. Maybe that was a change after your wrote this article?
I have a question as to how to control the load order of css files loaded in this way. I have added a css file using xstyle/css! and on that same page (in the same module .js file) I instantiate a dgrid as an OnDemandGrid. It triggers the load of the dgrid.css file but the problem is, it always loads AFTER my xstyle-loaded css file, which contains definitions that override the default dgrid.css definitions. Placement of the xstyle/css! path before or after the load of the dgrid module, both in the define statement made no difference.