Treehouse

Load CSS Files via AMD with XStyle

By on  

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:

  1. Loading modules and templates together but needing to add LINK tags manually sucks
  2. 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!

 

ydkjs-4.png

Recent Features

  • Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

Discussion

  1. Bruce

    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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!