gulp - Vulcanize: inlineCss not working on Polymer 1.0 project -

i have polymer 1.0 project, want vulcanize production. use gulp gulp-vulcanize in order so.

my gulpfile.js file:

var gulp = require('gulp'); var vulcanize = require('gulp-vulcanize');  gulp.task('vulcanize', function () {     return gulp.src('./src/app.html')         .pipe(vulcanize({             inlinecss: true         }))         .pipe(gulp.dest('./dist')); }); 

the content of src/app.html following:

<!-- polymer elements --> <link rel="import" href="../bower_components/google-map/google-map.html" /> <link rel="import" href="../bower_components/iron-icons/iron-icons.html" /> <link rel="import" href="../bower_components/paper-button/paper-button.html" /> <link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" /> <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" /> <link rel="import" href="../bower_components/paper-item/paper-item.html" /> <link rel="import" href="../bower_components/paper-material/paper-material.html" /> <link rel="import" href="../bower_components/paper-menu/paper-menu.html" /> <link rel="import" href="../bower_components/paper-progress/paper-progress.html" /> <link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html" /> <link rel="import" href="../bower_components/paper-toast/paper-toast.html" /> <link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" /> 

the problem: process doesn't finish nor produces error.

the cmd output when running gulp vulcanize:

c:\stuff\myapp>gulp vulcanize [15:45:06] using gulpfile c:\stuff\myapp\gulpfile.js [15:45:06] starting 'vulcanize'...  c:\stuff\myapp> 

however, process does run when set inlinecss false. cmd output in case is:

c:\stuff\myapp>gulp vulcanize [15:44:55] using gulpfile c:\stuff\myapp\gulpfile.js [15:44:55] starting 'vulcanize'... [15:44:55] finished 'vulcanize' after 581 ms  c:\stuff\myapp> 

but, obviously, css not in-lined.

edit:

i have ran vulcanize standalone tool , got error:

{ [error: enoent, open 'c:\stuff\myapp\wer_components\paper-drawer-panel\paper-drawer-panel.css']     errno: 34,     code: 'enoent',     path: 'c:\\stuff\\myapp\\wer_components\\paper-drawer-panel\\paper-drawer-panel.css' } error: enoent, open 'c:\stuff\myapp\wer_components\paper-drawer-panel\paper-drawer-panel.css' 

notice tries access c:\stuff\myapp\wer_components folder instead of c:\stuff\myapp\bower_components. somehow looses bo in folder name, can't seem figure out how.

i have solved issue, solution unusual. first, read lot problems absolute paths, have changed paths absolute relative , supplied abspath: '' option.

however, still didn't solve problem, getting no resolver found error, related absolute path problem.

after lucky guess, have found culprit - fonts.googleapis.com.

why problem? css include external , google hosted fonts following:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=roboto:400,300,300italic,400italic,500,500italic,700,700italic"> 

they use protocol-less urls in order preserve http(s) state of current page. notation has 2 slashes (//) @ beginning of path , confuses in-lining process. treats path file not url.

so, complete fix gulp task following:

var gulp = require('gulp'); var vulcanize = require('gulp-vulcanize');  gulp.task('vulcanize', function () {     return gulp.src('src/app.html')         .pipe(vulcanize({             abspath: '',             inlinescripts: true,             inlinecss: true,             stripexcludes: false,             excludes: ['//fonts.googleapis.com/*'],         }))         .pipe(gulp.dest('dist')); }); 

hope else finds useful.

also, if thinks // path problem bug, please report it.