implement autoprefixer, css-lint

.stylelintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "block-no-empty": null,
+    "at-rule-empty-line-before": null,
+    "rule-non-nested-empty-line-before": null
+  }
+}

gulpfile.ts

@@ -12,7 +12,9 @@ loadTasks(PROJECT_TASKS_DIR);
 gulp.task('build.dev', done =>
   runSequence('clean.dev',
               'tslint',
+              'css-lint',
               'build.assets.dev',
+              'build.html_css',
               'build.js.dev',
               'build.index.dev',
               done));
@@ -39,8 +41,10 @@ gulp.task('build.e2e', done =>
 gulp.task('build.prod', done =>
   runSequence('clean.prod',
               'tslint',
+              'css-lint',
               'build.assets.prod',
-              'build.html_css.prod',
+              'build.html_css',
+              'copy.js.prod',
               'build.js.prod',
               'build.bundles',
               'build.bundles.app',

package.json

@@ -33,23 +33,28 @@
   "license": "MIT",
   "devDependencies": {
     "async": "^1.4.2",
+    "autoprefixer": "^6.3.3",
     "browser-sync": "^2.11.1",
     "chalk": "^1.1.1",
+    "colorguard": "^1.0.1",
     "connect": "^3.4.1",
     "connect-history-api-fallback": "^1.1.0",
     "connect-livereload": "^0.5.3",
+    "cssnano": "^3.5.2",
     "del": "^2.2.0",
+    "doiuse": "^2.3.0",
     "event-stream": "^3.3.2",
     "express": "~4.13.1",
     "extend": "^3.0.0",
     "gulp": "^3.9.0",
+    "gulp-cached": "^1.1.0",
     "gulp-concat": "^2.5.2",
-    "gulp-cssnano": "^2.0.0",
     "gulp-filter": "^4.0.0",
     "gulp-inject": "^3.0.0",
     "gulp-inline-ng2-template": "^1.1.0",
     "gulp-load-plugins": "^1.2.0",
     "gulp-plumber": "~1.1.0",
+    "gulp-postcss": "^6.1.0",
     "gulp-shell": "~0.5.2",
     "gulp-sourcemaps": "~1.6.0",
     "gulp-template": "^3.0.0",
@@ -74,6 +79,7 @@
     "ng2lint": "0.0.10",
     "open": "0.0.5",
     "phantomjs-prebuilt": "^2.1.4",
+    "postcss-reporter": "^1.3.3",
     "protractor": "^3.0.0",
     "remap-istanbul": "^0.5.1",
     "rimraf": "^2.5.2",
@@ -82,6 +88,8 @@
     "serve-static": "^1.10.2",
     "slash": "~1.0.0",
     "stream-series": "^0.1.1",
+    "stylelint": "^4.5.1",
+    "stylelint-config-standard": "^4.0.0",
     "systemjs-builder": "^0.15.10",
     "tiny-lr": "^0.2.1",
     "traceur": "^0.0.91",

src/app/components/navbar.component.css

@@ -1,5 +1,5 @@
 :host {
-  border-color: #E1E1E1;
+  border-color: #e1e1e1;
   border-style: solid;
   border-width: 0 0 1px;
   display: block;
@@ -8,7 +8,7 @@
 }
 
 nav a {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
   font-weight: 500;
   line-height: 48px;
@@ -18,5 +18,5 @@ nav a {
 }
 
 nav a.router-link-active {
-  color: #106CC8;
+  color: #106cc8;
 }

src/app/components/toolbar.component.css

@@ -1,6 +1,6 @@
 :host {
-  background-color: #106CC8;
-  color: rgba(255,255,255,0.87);
+  background-color: #106cc8;
+  color: rgba(255, 255, 255, 0.87);
   display: block;
   height: 48px;
   padding: 0 16px;

src/assets/main.css

@@ -1,12 +1,16 @@
 /* Reset */
-html, body, div {
+html,
+body,
+div {
   border: 0;
   margin: 0;
   padding: 0;
 }
 
 /* Box-sizing border-box */
-* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 /* Set up a default font and some padding to provide breathing room */
 body {
@@ -18,7 +22,7 @@ body {
 
 p {
   font-weight: 400;
-  letter-spacing: 0.010em;
+  letter-spacing: 0.01em;
   line-height: 20px;
   margin-bottom: 1em;
   margin-top: 1em;
@@ -35,17 +39,17 @@ li {
 }
 
 input {
-  border: 1px solid #106CC8;
+  border: 1px solid #106cc8;
   font-size: 14px;
   height: 40px;
   outline: none;
   padding: 8px;
 }
 
 button {
-  background-color: #106CC8;
+  background-color: #106cc8;
   border-style: none;
-  color: rgba(255,255,255,0.87);
+  color: rgba(255, 255, 255, 0.87);
   cursor: pointer;
   display: inline-block;
   font-size: 14px;
@@ -55,5 +59,5 @@ button {
 }
 
 button:hover {
-  background-color: #28739E;
+  background-color: #28739e;
 }

tools/config/seed.config.interface.ts

@@ -1,4 +1,5 @@
 export interface InjectableDependency {
   src: string;
   inject: string | boolean;
+  vendor?: boolean;
 }

tools/config/seed.config.ts

@@ -74,7 +74,7 @@ export class SeedConfig {
 
   // Declare local files that needs to be injected
   APP_ASSETS: InjectableDependency[] = [
-    { src: `${this.ASSETS_SRC}/main.css`, inject: true }
+    { src: `${this.ASSETS_SRC}/main.css`, inject: true, vendor: false }
   ];
 
 
@@ -107,6 +107,20 @@ export class SeedConfig {
       '*': 'node_modules/*'
     }
   };
+
+  // ----------------
+  // Autoprefixer configuration.
+  BROWSER_LIST = [
+    'ie >= 10',
+    'ie_mob >= 10',
+    'ff >= 30',
+    'chrome >= 34',
+    'safari >= 7',
+    'opera >= 23',
+    'ios >= 7',
+    'android >= 4.4',
+    'bb >= 10'
+  ];
 }
 
 

tools/manual_typings/seed/autoprefixer.d.ts

@@ -0,0 +1,13 @@
+declare module 'autoprefixer' {
+
+  interface IOptions {
+    browsers: string[];
+  }
+
+  interface IAutoprefixer {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const autoprefixer: IAutoprefixer;
+  export = autoprefixer;
+}

tools/manual_typings/seed/colorguard.d.ts

@@ -0,0 +1,15 @@
+declare module 'colorguard' {
+
+  interface IOptions {
+    ignore?: string[];
+    threshold?: number;
+    whitelist?: string[];
+  }
+
+  interface IColorguard {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const colorguard: IColorguard;
+  export = colorguard;
+}

tools/manual_typings/seed/cssnano.d.ts

@@ -0,0 +1,15 @@
+declare module 'cssnano' {
+
+  interface IOptions {
+    discardComments: {
+      removeAll: boolean;
+    };
+  }
+
+  interface ICssnano {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const cssnano: ICssnano;
+  export = cssnano;
+}

tools/manual_typings/seed/doiuse.d.ts

@@ -0,0 +1,16 @@
+declare module 'doiuse' {
+
+  interface IOptions {
+    browsers?: string[];
+    ignore?: string[];
+    ignoreFiles?: string[];
+    onFeatureUsage?: Function;
+  }
+
+  interface IDoiuse {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const doiuse: IDoiuse;
+  export = doiuse;
+}

tools/manual_typings/seed/postcss-reporter.d.ts

@@ -0,0 +1,20 @@
+declare module 'postcss-reporter' {
+
+  interface IOptions {
+    clearMessages?: boolean;
+    formatter?: Function;
+    plugins?: string[];
+    throwError?: boolean;
+    sortByPosition?: boolean;
+    positionless?: string;
+    noIcon?: boolean;
+    noPlugin?: boolean;
+  }
+
+  interface IPostcssReporter {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const postcssReporter: IPostcssReporter;
+  export = postcssReporter;
+}

tools/manual_typings/seed/stylelint.d.ts

@@ -0,0 +1,16 @@
+declare module 'stylelint' {
+
+  interface IOptions {
+    config?: Object;
+    configFile?: string;
+    configBasedir?: string;
+    configOverrides?: Object;
+  }
+
+  interface IStylelint {
+    (opts?: IOptions): NodeJS.ReadWriteStream;
+  }
+
+  const stylelint: IStylelint;
+  export = stylelint;
+}

tools/tasks/seed/build.html_css.ts

@@ -0,0 +1,54 @@
+import * as gulp from 'gulp';
+import * as gulpLoadPlugins from 'gulp-load-plugins';
+import * as merge from 'merge-stream';
+import * as autoprefixer from 'autoprefixer';
+import * as cssnano from 'cssnano';
+import {join} from 'path';
+import {APP_SRC, TMP_DIR, APP_ASSETS, CSS_PROD_BUNDLE, CSS_DEST, APP_DEST, BROWSER_LIST, ENV} from '../../config';
+const plugins = <any>gulpLoadPlugins();
+
+const processors = [
+  autoprefixer({
+    browsers: BROWSER_LIST
+  })
+];
+
+const isProd = ENV === 'prod';
+
+if (isProd) {
+  processors.push(
+    cssnano({
+      discardComments: {removeAll: true}
+    })
+  );
+}
+
+function prepareTemplates() {
+  return gulp.src(join(APP_SRC, '**', '*.html'))
+    .pipe(gulp.dest(TMP_DIR));
+}
+
+function processComponentCss() {
+  return gulp.src([
+      join(APP_SRC, '**', '*.css'),
+      '!' + join(APP_SRC, 'assets', '**', '*.css')
+    ])
+    .pipe(isProd ? plugins.cached('process-component-css') : plugins.util.noop())
+    .pipe(plugins.postcss(processors))
+    .pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST));
+}
+
+function processExternalCss() {
+  return gulp.src(getExternalCss().map(r => r.src))
+    .pipe(isProd ? plugins.cached('process-external-css') : plugins.util.noop())
+    .pipe(plugins.postcss(processors))
+    .pipe(isProd ? plugins.concat(CSS_PROD_BUNDLE) : plugins.util.noop())
+    .pipe(gulp.dest(CSS_DEST));
+}
+
+function getExternalCss() {
+  return APP_ASSETS.filter(d => /\.css$/.test(d.src));
+}
+
+
+export = () => merge(processComponentCss(), prepareTemplates(), processExternalCss());