While it's probably not fair to call this "daily" any longer, I'm going to stick with it anyway.

You may have heard that enyo has found its way onto the legacy devices via a new Maps application in the App Catalog.  To test things out, I tried to deploy Score Keeper onto my Pre2.  It deploys successfully but there are definitely some bugs to sort out.  One way I intend to clean up the UI is by including a phone-specific stylesheet through a dynamic depends.js file.

[[MORE]]

The normal depends.js file looks something like this:

enyo.depends(
    "controls.js",
    "app.js",
    "app.css"
);

This tells enyo to load up controls.js, app.js, and app.css in the same directory as this depends.js file.  But depends.js is just a regular javascript file so there's nothing preventing you from doing something a little more robust here to select which files you want to include.  Also, since the framework is the one including depends.js in the first place, all the framework functions are available during execution of depends.js.

I elected to use a closure to keep the global namespace clear and base my custom CSS inclusion on the screen width.  If you're aware of a better condition to check, please share in the comments.  Inside the function, I retrieve the device info and build an array of the common files.  Next, I check the device width and push the extra css if appropriate.  Finally, I call enyo.depends (via Function.apply since I'm working with an array) and that's all!

(function() {
    var di = enyo.fetchDeviceInfo();
   
    var paths = ["extras.js",
                 "views.js",
                 "app.css"];
   
    if(di && di.screenWidth < 500) {
        paths.push("app-phone.css");
    }
   
    enyo.depends.apply(enyo, paths);
})();