implement css linting with postcss (stylelint, doiuse, colorguard)

.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,6 +12,7 @@ loadTasks(PROJECT_TASKS_DIR);
 gulp.task('build.dev', done =>
   runSequence('clean.dev',
               'tslint',
+              'css-lint',
               'build.assets.dev',
               'build.html_css',
               'build.js.dev',
@@ -40,6 +41,7 @@ gulp.task('build.e2e', done =>
 gulp.task('build.prod', done =>
   runSequence('clean.prod',
               'tslint',
+              'css-lint',
               'build.assets.prod',
               'build.html_css',
               'copy.js.prod',

package.json

@@ -36,11 +36,13 @@
     "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",
@@ -77,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",
@@ -85,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",

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 }
   ];
 
 

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/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/css-lint.ts

@@ -0,0 +1,43 @@
+import * as gulp from 'gulp';
+import * as gulpLoadPlugins from 'gulp-load-plugins';
+import * as merge from 'merge-stream';
+import * as reporter from 'postcss-reporter';
+import * as stylelint from 'stylelint';
+import * as doiuse from 'doiuse';
+import * as colorguard from 'colorguard';
+import {join} from 'path';
+import {APP_SRC, APP_ASSETS, BROWSER_LIST, ENV} from '../../config';
+const plugins = <any>gulpLoadPlugins();
+
+const isProd = ENV === 'prod';
+
+const processors = [
+  doiuse({
+    browsers: BROWSER_LIST,
+  }),
+  colorguard(),
+  stylelint(),
+  reporter({clearMessages: true})
+];
+
+function lintComponentCss() {
+  return gulp.src([
+      join(APP_SRC, '**', '*.css'),
+      '!' + join(APP_SRC, 'assets', '**', '*.css')
+    ])
+    .pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
+    .pipe(plugins.postcss(processors));
+}
+
+function lintExternalCss() {
+  return gulp.src(getExternalCss().map(r => r.src))
+    .pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
+    .pipe(plugins.postcss(processors));
+}
+
+function getExternalCss() {
+  return APP_ASSETS.filter(d => /\.css$/.test(d.src) && !d.vendor);
+}
+
+
+export = () => merge(lintComponentCss(), lintExternalCss());