CSS with period in file name not included

[alfredctchoi]

A package has been used in one of our projects that has very limited bower support. https://github.com/OwlFonk/OwlCarousel.git. The package contains no main property so I had to set the overrides either on the project's bower.json file or the options in wiredep as such:

{
  "name": "",
  "version": "0.0.0",
  "dependencies": {
       // dependencies go here
  },
  "devDependencies": {
       // dev dependencies here
  },
  "overrides": {
    "OwlCarousel": {
      "main": [
        "owl-carousel/owl.carousel.css",
        "owl-carousel/owl.theme.css",
        "owl-carousel/owl.carousel.min.js"
      ]
    }
  }
}

The JS file gets included into index.html, but the css files do not get included. If if manually remove the dot in the file name of the CSS files within the package (owl.carousel.css to owlcarousel.css and owl.theme.css to owltheme.css) as well as update the overrides section of the wiredep options to the following:

      overrides: {
        "OwlCarousel": {
          "main": ["owl-carousel/owlcarousel.css",
            "owl-carousel/owltheme.css",
            "owl-carousel/owl.carousel.js"
          ]
        }
      }

The CSS files are added to the index.html file correctly. Hope this is enough information for to reproduce the issue and thank you.

[CWSpear]

You redacted the dependencies, but which of the 4 available Owl Carousel's did you use when installing it via bower?

$ bower search OwlCarousel | grep "OwlFonk/OwlCarousel.git"
    owlcarousel git://github.com/OwlFonk/OwlCarousel.git
    OwlCarousel git://github.com/OwlFonk/OwlCarousel.git
    owl-carousel git://github.com/OwlFonk/OwlCarousel.git
    owlcar git://github.com/OwlFonk/OwlCarousel.git

[alfredctchoi]

I am using OwlCarousel git://github.com/OwlFonk/OwlCarousel.git (2nd one)

[CWSpear]

This appears to be working for me. Reduced test case:

bower.json

{
  "name": "test",
  "version": "0.0.0",
  "dependencies": {
    "OwlCarousel": "~1.3.2"
  },
  "devDependencies": {},
  "overrides": {
    "OwlCarousel": {
      "main": [
        "owl-carousel/owl.carousel.css",
        "owl-carousel/owl.theme.css",
        "owl-carousel/owl.carousel.min.js"
      ]
    }
  }
}

index.js

var wiredep = require('wiredep');

console.log(wiredep());

Output

 ~/Downloads/test ❯❯❯ node index.js
{ packages: 
   { OwlCarousel: 
      { main: [Object],
        type: [Object],
        name: 'OwlCarousel',
        dependencies: {} } },
  js: [ '/Users/cameron/Downloads/test/bower_components/OwlCarousel/owl-carousel/owl.carousel.min.js' ],
  css: 
   [ '/Users/cameron/Downloads/test/bower_components/OwlCarousel/owl-carousel/owl.carousel.css',
     '/Users/cameron/Downloads/test/bower_components/OwlCarousel/owl-carousel/owl.theme.css' ] }

[alfredctchoi]

Will do more testing and reopen if necessary. Thanks.

[alfredctchoi]

How would I go about getting the same output that wiredep() outputs using wiredep stream?

[CWSpear]

I'm not a stream expert, but try this:

index.js

var wiredep = require('wiredep').stream;
var gulp    = require('gulp');

gulp.src('index.html')
  .pipe(wiredep({
    onPathInjected: function (f) {
      console.log(f.path);
    }
  }));

index.html

<!-- bower:css -->
<!-- endbower -->

<!-- bower:js -->
<!-- endbower -->

Output

 ~/Downloads/test ❯❯❯ node index
bower_components/OwlCarousel/owl-carousel/owl.carousel.css
bower_components/OwlCarousel/owl-carousel/owl.theme.css
bower_components/OwlCarousel/owl-carousel/owl.carousel.min.js