Eiche fam

In this article, the author hooks a post-install script to run after Bower installs or upgrades. One use case where this is handy is when you have a CSS file that you want to include in your own build process, but you need it renamed to have a .scss extension instead of .css. In working on the latest version of Cover, I had a similar need — but I arrived at the same solution through different means.

I use the Aesop Story Engine plugin with Cover. In fact, I wrote my WordPress theme specifically with ASE’s use in mind. But a couple versions ago, the plugin broke the layout for the Chapter component. I fixed it with the latest point upgrade to Cover, but I determined that I wouldn’t let it happen again. So with the latest version of Cover, I’m changing things up.

Instead of the plugin loading its stylesheet, which Cover then overrides (which has led to specificity problems), I am disabling ASE’s stylesheet. Instead, I wanted to import the core ASE stylesheet into Cover’s own and do the overrides from there. That way, everything would be located within a single stylesheet. (All ASE’s JavaScript functionality remains inside the plugin, so no worries there.)

I don’t keep any third-party assets in Cover’s codebase. I use Bower to maintain a list of dependencies, which include things like Font Awesome, Headroom, and Unslider. Installing a Bower package is normally just a single line in the command prompt:

$ bower install font-awesome --save-dev

But ASE doesn’t have an official Bower entry, so instead I had to add a line inside the “devDependencies” entry in my bower.json:

"aesop-core": "https://github.com/hyunsupul/aesop-core/archive/master.zip"

This points Bower to the archive it should download to get the latest version of ASE. After the config is saved, I rerun the install command:

$ bower install

Now Bower has downloaded the latest version of ASE inside my bower_components directory, and I can use its stylesheet. But not quite.

I don’t want to enqueue yet another file. I want to include ASE’s styles inside my Sass-built stylesheet, but I can’t use the preprocessor version because the ASE developers use Less, and I use Sass. So instead, I take the existing stylesheet (which is also part of the downloaded zip file), and using the copy task, rename it to have a .scss extension.

copy: {
    build: {
        files: [
            {
                cwd: 'bower_components/aesop-core/public/assets/css',
                src: 'ai-core.css',
                dest: 'assets/sass/plugins/aesop',
                expand: true,
                rename: function(dest, src) {
                    return dest + '/_' + src.replace('.css', '.scss');
                }
            }
        ]
    }
}

In addition to renaming the file with a .scss extension, I’m also prepending it with an underscore so I can reference it easily at the top of Cover’s ASE styles:

@import 'aesop/aesop-core';

Now when I build my stylesheet for deployment, I’m getting the latest version of the stylesheet, which I can run against my local suite of component tests to verify that everything looks good.