AngularJS 2 styleUrls: What's up with concatenation?

Question

My AngularJS 2 application has several style files which I concatenate with a gulp task. That's all fine, since they'll end up in a big file I send to the browser in production. My question is about the Angular 2 @Component and its styleUrls attribute.

@Component({
    selector: 'hero',
    templateUrl: 'hero/hero.template.html',
    styleUrls: ['hero/hero.component.css'],

    inputs: ['hero']
})

Thanks to shadow DOM emulation in default mode (emulated) the styles defined in the hero/hero.component.css are applied only to the component just like I want. My question is, what happens with concatenation? I cannot bundle all the CSS files specified in the multiple styleUrls since we'd be defeating the purpose of encapsulation: the styles for a component would leak to the whole document. However, I don't want either to make a call in production for every CSS file a component needs. How can I concatenate those styles (and possibly minify them) so the client gets them all in a single call, and still preserve encapsulation?

Answer 1

The template and css files can be bundled along the js files using a system js plugin.

import { Component } from '@angular/core';

import html from './hero/hero.template.html!text';
import css from './hero/hero.component.css!text';

@Component({
    selector: 'hero',
    template: html,
    styles: [css],
})
export class HeroComponent implements {
}