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!

 

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

  • By
    prefers-color-scheme: CSS Media Query

    One device and app feature I've come to appreciate is the ability to change between light and dark modes. If you've ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result.

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!