From dfdf0b5c7c899116fc8d819ca6e29b378db4fc05 Mon Sep 17 00:00:00 2001
From: Steve Van Opstal <stevevanopstal@gmail.com>
Date: Mon, 11 Jul 2016 17:54:11 +0200
Subject: [PATCH] perf: pack css files in one style.css

---
 config/webpack/common.js                    | 8 ++++++--
 package.json                                | 1 +
 src/client/build/build.component.ts         | 7 ++++---
 src/client/champions/champions.component.ts | 7 ++++---
 src/client/features/features.component.ts   | 7 ++++---
 src/client/index.html                       | 6 ------
 src/client/region/region.component.ts       | 5 +++--
 7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/config/webpack/common.js b/config/webpack/common.js
index 6a9c4be..6b4c008 100644
--- a/config/webpack/common.js
+++ b/config/webpack/common.js
@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const helpers = require('../../helpers');
 
 var DefinePlugin = require('webpack/lib/DefinePlugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const METADATA = {
   title: 'Legend Builder',
@@ -20,7 +21,10 @@ module.exports = {
   module: {
     loaders: [
       {test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/\.(spec|e2e)\.ts$/]},
-      {test: /\.json$/, loader: 'json-loader'}, {test: /\.css$/, loader: 'raw-loader'}
+      {test: /\.json$/, loader: 'json-loader'},
+      {test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')}
     ]
-  }
+  },
+
+  plugins: [new ExtractTextPlugin('style.css')]
 };
diff --git a/package.json b/package.json
index 3451c08..3c0e676 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
     "coveralls": "^2.11.9",
     "css-loader": "^0.23.1",
     "depcheck": "^0.6.3",
+    "extract-text-webpack-plugin": "^1.0.1",
     "glob": "^7.0.3",
     "html-webpack-plugin": "^2.14.0",
     "istanbul-instrumenter-loader": "^0.2.0",
diff --git a/src/client/build/build.component.ts b/src/client/build/build.component.ts
index f136da9..3d1050b 100644
--- a/src/client/build/build.component.ts
+++ b/src/client/build/build.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 
 import {settings} from '../../../config/settings';
@@ -14,14 +14,15 @@ import {LolApiService} from '../misc/lolapi.service';
 
 import {Item} from './item';
 
+require('../../assets/css/base.css');
+require('../../assets/css/build.css');
+
 @Component({
   providers: [LolApiService],
   directives: [
     GraphComponent, ItemsComponent, MasteriesComponent, ShopComponent, DDragonDirective,
     LoadingComponent, ErrorComponent
   ],
-  styles: [require('../../assets/css/build.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
     <div class="title">
       <img *ngIf="champion" [ddragon]="'champion/' + champion?.image?.full">
diff --git a/src/client/champions/champions.component.ts b/src/client/champions/champions.component.ts
index ff3681a..2d8ce04 100644
--- a/src/client/champions/champions.component.ts
+++ b/src/client/champions/champions.component.ts
@@ -1,5 +1,5 @@
 import {NgFor, NgIf} from '@angular/common';
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 
 import {FiltersComponent} from '../champions/filters.component';
@@ -14,6 +14,9 @@ import {ToIterablePipe} from '../misc/to-iterable.pipe';
 
 import {BarComponent} from './bar.component';
 
+require('../../assets/css/base.css');
+require('../../assets/css/champions.css');
+
 @Component({
   selector: 'champions',
   pipes: [ToIterablePipe, NamePipe, SortPipe, TagsPipe],
@@ -21,8 +24,6 @@ import {BarComponent} from './bar.component';
   directives: [
     NgFor, NgIf, FiltersComponent, BarComponent, LoadingComponent, ErrorComponent, DDragonDirective
   ],
-  styles: [require('../../assets/css/champions.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
     <filters [(name)]="name" [(tags)]="tags" [(sort)]="sort" (enterHit)="enterHit()"></filters>
     <div class="champion" *ngFor="let champion of champions?.data | toIterable | name:name | sort:sort | tags:tags">
diff --git a/src/client/features/features.component.ts b/src/client/features/features.component.ts
index a26cdd0..3937f21 100644
--- a/src/client/features/features.component.ts
+++ b/src/client/features/features.component.ts
@@ -1,13 +1,14 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {LolApiService} from '../misc/lolapi.service';
 
+require('../../assets/css/base.css');
+require('../../assets/css/summoner.css');
+
 @Component({
   directives: [],
   providers: [LolApiService],
-  styles: [require('../../assets/css/summoner.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
     <div>
       <p>
diff --git a/src/client/index.html b/src/client/index.html
index c451304..f3824f8 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -2,7 +2,6 @@
 <html>
 
 <head>
-
   <title><%= webpackConfig.metadata.title %></title>
 
   <meta charset="utf-8">
@@ -10,14 +9,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="<%= webpackConfig.metadata.title %>">
 
-  <!-- style -->
   <link rel="shortcut icon" href="/assets/images/favicon.ico" />
-  <link rel="stylesheet" href="/assets/css/base.css" />
-
-  <!-- fonts -->
   <link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
 
-  <!-- base url -->
   <base href="<%= webpackConfig.metadata.baseUrl %>">
 </head>
 
diff --git a/src/client/region/region.component.ts b/src/client/region/region.component.ts
index a0bab82..d27f7cd 100644
--- a/src/client/region/region.component.ts
+++ b/src/client/region/region.component.ts
@@ -4,13 +4,14 @@ import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {LolApiService} from '../misc/lolapi.service';
 import {ToIterablePipe} from '../misc/to-iterable.pipe';
 
+require('../../assets/css/base.css');
+require('../../assets/css/region.css');
+
 @Component({
   selector: 'region',
   providers: [LolApiService],
   directives: [NgFor],
   pipes: [ToIterablePipe],
-  styles: [require('../../assets/css/region.css')],
-  encapsulation: ViewEncapsulation.None,
   template: `
   <div class="align-center">
     <h2>Select your region:</h2>