CSS can't be inlined to style tag in html file using gulp-inline-css

Question

So, I'm already pulling my hair out on this one. I'm using Polymer to build components. But I still want to use SASS to build my css files. Now, because Polymer forces me to keep the styles inside the <style> tag inside html files, I need a process to inline those css I create with SASS into my Polymer elements.

I'm trying to inline a certain css file into the <style> tag of an html file using gulp and the plugin gulp-inline-css . But no mater what I try, it just don't seem to work. Here are the files and their locations.

app/src/css/myapp/myapp.css

:host {
    display: block; 
}
.test-class{
    margin: auto;
}

app/src/myapp/myapp.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp">
  <template>
    <style>
    </style>
    <link rel="stylesheet" href="../css/myapp/myapp.css">

    <myapp-header></myapp-header>
    <myapp-content></myapp-content>
    <myapp-footer></myapp-footer>

  </template>
  <script>
    Polymer({
      is: 'myapp',
      properties: {}
    });
  </script>
</dom-module>

gulpfile.js

gulp.task('test', function(){
  gulp.src('./src/myapp/myapp.html')
    .pipe(inlineCss({
      applyStyleTags: true,
      applyLinkTags: true,
      removeStyleTags: false,
      removeLinkTags: false
    }))
    .pipe(gulp.dest('./build'));
});

Instead of getting outputted the html with the css inlined, I get only the html, without any css inside the <style> tag.

Just to add some more info here, I tried to debug the plugin and inside it I see that it can extract the css correctly. It is just not "inlinning" it to the html file.

One super thanks for who help me out with this! Thanks in advance!

Answer 1

Sorry, but the plugin does not work this way. Here is how it is expected to work:

https://github.com/jonkemp/gulp-inline-css#how-it-works

It doesn't inline the CSS to the style tag. It inlines them to the element itself using the style attribute.

Answer 2

CSS declaration should have type="css" , making your code:

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="myapp">
  <template>
    <style>
    </style>
    <link rel="stylesheet" type="css" href="../css/myapp/myapp.css">

    <myapp-header></myapp-header>
    <myapp-content></myapp-content>
    <myapp-footer></myapp-footer>

  </template>
  <script>
    Polymer({
      is: 'myapp',
      properties: {}
    });
  </script>
</dom-module>