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-3.png

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

  • Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can....

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!