How to handle 'supporting' bower dependencies with asset-builder?

Hello,
I’ve used @austin 's asset-builder to add a bower dependency to my project:

"lightbox2.js": {
  "bower": ["lightbox2"]
}

then I enqueued it in assets.php:

wp_enqueue_script('lightbox2', asset_path('scripts/lightbox2.js'), ['jquery'], null, true);

However, lightbox2.php should have lightbox.css styles loaded in order to load correctly.

lightbox.css is described as one of the "main" files in lightbox2's local bower.js.

My question is how I should include lightbox.css in my project to to adhere to the best practices?

Should I defined a separate dependency in my manifest.json that would look something like:

"lightbox.css": {
  "vendor": ["<path to lightbox.css in bower_components>"]
}

I’m also not sure I should use vendor as this is part of the bower dependency. On the other hand lighbox.css is not a bower dependency in its own tight so bower does not seem right.

How should I best go about includinf lighbox.css in my project?

Thanks!

You can see under the first Example:

{
  "dependencies": {
    "app.js": {
      "files": [
        "scripts/**/*",
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.less"
      ],
      "main": true
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  }
}

Specifically:

"modernizr.js": {
  "bower": ["modernizr"]
}

You should set bower if you don’t want the CSS included in the main CSS file.

Just curious though, since the css file is included in the main declaration of lightbox2, is it an issue if the CSS file is included in the main CSS file?

Hi @kalenjohnson,

By all means, I want lightbox.css to be included along with lightbox2.js.

You should set bower if you don’t want the CSS included in the main CSS file.

Does choosing "bower" as a dependency type make the lighbox.css NOT included?

My aim is to have lightbox2.js included together with its dependencies.

I’ve achieved this by specifying these in my manifest.json file:

"lightbox2.js": {
  "bower": ["lightbox2"]
},
"lightbox.css": {
  "files": ["../bower_components/lightbox2/dist/css/lightbox.css"]
}

The think is, however, that there seems to be some redundancy as I first specified "bower": ["lightbox2"], and then an individual file (lightbox.css) from the same package.

Is it possible to avoid this redundancy?

If you’re using this with a Sage theme… what I mean is, lightbox.css will be included in main.css, isn’t that ok?

If not… you can probably just do this is what I mean:

"lightbox.css": {
  "bower": ["lightbox2"]
}

Is it redundant? I suppose, but the general idea with asset-builder is that everything is compiled into a least amount of files as possible to save on HTTP requests. So one main.css and one main.js file.

@kalenjohnson, yes, I’m using it with Sage.

So then am I correct to think that:

"lightbox2.js": {
  "bower": ["lightbox2"]
},

would also automatically include all css files defined in lightbox2's local bower.json file in main.css?

If you’re using this with a Sage theme… what I mean is, lightbox.css will be included in main.css, isn’t that ok?

If that’s the case, then I’d be more than happy. I just didn’t expect that behavour ‘by default’ with Sage.