gulp-inline-ng2-styles v0.0.1

#gulp-inline-ng2-styles

Inline Angular2 components style sheets into JavaScript ES5/ES6 and TypeScript files (and possibly more - not tested). This plugin uses the ES6 template strings syntax by default (which requires the use of a transpiler -typescript, babel, traceur- to produce valid ES5 files) but you can opt-in for ES5 one.

This is very convenient to bundle your components/application (avoid extra HTTP request and keeps your source clean).

You may also check out: gulp-inline-ng2-template

#Installation

npm install gulp-inline-ng2-styles --save-dev

#Configuration

You can pass a configuration object to the plugin.

defaults = {
  base: '/',          // Angular2 application base folder
  extension: '.css',  // Template file extension
  target: 'es6'       // Can swap to es5
};

#Example usage

//...
var inlineNg2Styles = require('gulp-inline-ng2-styles');

var result = gulp.src('./app/**/*ts')
  .pipe(inlineNg2Styles({ base: '/app' }))
  .pipe(tsc());

return result.js
  .pipe(gulp.dest(PATH.dest));

#How it works

hello.css

.hello {
  background-color: #000000;
}

component.ts

import {Component, View} from 'angular2/angular2';
@Component({ selector: 'hello' })
@View({
  templateUrl: './template.html',
  styleUrls: ['app.css']
})
class Hello {}

result (component.ts)

import {Component, View} from 'angular2/angular2';
@Component({ selector: 'hello' })
@View({
  templateUrl: './template.html',
  styles: [`
    .hello {
      background-color: #000000;
    }
  `]
})
class Hello {}

#Licence

MIT