Merge pull request #952 from hank-ehly/feature/enable-scss

feature/enable-scss - issue #895

Author: mgechev

karma.conf.js

@@ -40,6 +40,8 @@ module.exports = function(config) {
       { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
 
       { pattern: 'dist/dev/**/*.js', included: false, watched: true },
+      { pattern: 'dist/dev/**/*.html', included: false, watched: true, served: true },
+      { pattern: 'dist/dev/**/*.css', included: false, watched: true, served: true },
       { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it
 
       // suppress annoying 404 warnings for resources, images, etc.

package.json

@@ -62,8 +62,11 @@
     "gulp-load-plugins": "^1.2.2",
     "gulp-plumber": "~1.1.0",
     "gulp-postcss": "^6.1.1",
+    "gulp-progeny": "^0.2.1",
     "gulp-protractor": "^2.3.0",
     "gulp-replace": "^0.5.4",
+    "gulp-sass": "^2.3.1",
+    "gulp-sass-lint": "^1.1.1",
     "gulp-shell": "~0.5.2",
     "gulp-sourcemaps": "2.0.0-alpha",
     "gulp-template": "^4.0.0",

tools/config/seed.config.ts

@@ -210,7 +210,7 @@ export class SeedConfig {
    * The name of the bundle file to includes all CSS files.
    * @type {string}
    */
-  CSS_PROD_BUNDLE = 'all.css';
+  CSS_PROD_BUNDLE = 'main.css';
 
   /**
    * The name of the bundle file to include all JavaScript shims.
@@ -241,6 +241,13 @@ export class SeedConfig {
    */
   CODELYZER_RULES = customRules();
 
+  /**
+   * The flag to enable handling of SCSS files
+   * The default value is false. Override with the '--scss' flag.
+   * @type {boolean}
+   */
+  ENABLE_SCSS = argv['scss'] || false;
+
   /**
    * The list of NPM dependcies to be injected in the `index.html`.
    * @type {InjectableDependency[]}
@@ -258,7 +265,7 @@ export class SeedConfig {
    * @type {InjectableDependency[]}
    */
   APP_ASSETS: InjectableDependency[] = [
-    { src: `${this.CSS_SRC}/main.css`, inject: true, vendor: false }
+    { src: `${this.CSS_SRC}/main.${ this.getInjectableStyleExtension() }`, inject: true, vendor: false },
   ];
 
   /**
@@ -430,6 +437,10 @@ export class SeedConfig {
     return null;
   }
 
+  getInjectableStyleExtension() {
+    return this.ENV === ENVIRONMENTS.PRODUCTION && this.ENABLE_SCSS ? 'scss' : 'css';
+  }
+
 }
 
 /**

tools/tasks/seed/build.assets.dev.ts

@@ -10,7 +10,8 @@ import { APP_DEST, APP_SRC, TEMP_FILES } from '../../config';
 export = () => {
   let paths: string[] = [
     join(APP_SRC, '**'),
-    '!' + join(APP_SRC, '**', '*.ts')
+    '!' + join(APP_SRC, '**', '*.ts'),
+    '!' + join(APP_SRC, '**', '*.scss')
   ].concat(TEMP_FILES.map((p) => { return '!' + p; }));
 
   return gulp.src(paths)

tools/tasks/seed/build.assets.prod.ts

@@ -25,6 +25,7 @@ export = () => {
     '!' + join(APP_SRC, '**', '*.ts'),
     '!' + join(APP_SRC, '**', '*.css'),
     '!' + join(APP_SRC, '**', '*.html'),
+    '!' + join(APP_SRC, '**', '*.scss'),
     '!' + join(ASSETS_SRC, '**', '*.js')
   ].concat(TEMP_FILES.map((p) => { return '!' + p; })))
     .pipe(onlyDirs(es))

tools/tasks/seed/build.html_css.ts

@@ -5,7 +5,18 @@ import * as gulpLoadPlugins from 'gulp-load-plugins';
 import * as merge from 'merge-stream';
 import { join } from 'path';
 
-import { APP_DEST, APP_SRC, BROWSER_LIST, CSS_DEST, CSS_PROD_BUNDLE, DEPENDENCIES, ENV, getPluginConfig, TMP_DIR } from '../../config';
+import {
+  APP_DEST,
+  APP_SRC,
+  BROWSER_LIST,
+  CSS_DEST,
+  CSS_PROD_BUNDLE,
+  DEPENDENCIES,
+  ENV,
+  getPluginConfig,
+  TMP_DIR,
+  ENABLE_SCSS
+} from '../../config';
 
 const plugins = <any>gulpLoadPlugins();
 const cleanCss = require('gulp-clean-css');
@@ -37,6 +48,55 @@ function prepareTemplates() {
     .pipe(gulp.dest(TMP_DIR));
 }
 
+/**
+ * Execute the appropriate component-stylesheet processing method based on presence of --scss flag.
+ */
+function processComponentStylesheets() {
+  return ENABLE_SCSS ? processScss('component') : processComponentCss();
+}
+
+/**
+ * Processes the SCSS files for the specified origin.
+ * @param {string} origin The origin of the SCSS files being handled. Must be either 'component' or 'external.'
+ */
+function processScss(origin: 'component'|'external') {
+  let scssSrc = getScssForOrigin(origin);
+  let scssDest = getScssDestForOrigin(origin);
+  return gulp.src(scssSrc)
+    .pipe(isProd ? plugins.cached(`process-${origin}-scss`) : plugins.util.noop())
+    .pipe(isProd ? plugins.progeny() : plugins.util.noop())
+    .pipe(plugins.sourcemaps.init())
+    .pipe(plugins.sass({includePaths: ['./node_modules/']}).on('error', plugins.sass.logError))
+    .pipe(plugins.postcss(processors))
+    .pipe(plugins.sourcemaps.write(isProd ? '.' : ''))
+    .pipe(gulp.dest(scssDest));
+}
+
+/**
+ * Get an array of SCSS files belonging to the specified origin.
+ * @param {string} origin The origin of the SCSS files being handled. Must be either 'component' or 'external.'
+ */
+function getScssForOrigin(origin: 'component'|'external') {
+  if (origin === 'component') return [join(APP_SRC, '**', '*.scss')]; else {
+    return getExternalStylesheets().map(r => r.src);
+  }
+}
+
+function getExternalStylesheets() {
+  let stylesheet = ENABLE_SCSS ? 'scss' : 'css';
+  return DEPENDENCIES.filter(d => new RegExp(`\.${stylesheet}$`).test(d.src));
+}
+
+/**
+ * Get the destination of the processed SCSS files belonging to the specified origin.
+ * @param {string} origin The origin of the SCSS files being handled. Must be either 'component' or 'external.'
+ */
+function getScssDestForOrigin(origin: 'component'|'external') {
+  if (origin === 'component') return (isProd ? TMP_DIR : APP_DEST); else {
+    return CSS_DEST;
+  }
+}
+
 /**
  * Processes the CSS files within `src/client` excluding those in `src/client/assets` using `postcss` with the
  * configured processors.
@@ -48,7 +108,14 @@ function processComponentCss() {
     ])
     .pipe(isProd ? plugins.cached('process-component-css') : plugins.util.noop())
     .pipe(plugins.postcss(processors))
-    .pipe(gulp.dest(isProd ? TMP_DIR: APP_DEST));
+    .pipe(gulp.dest(isProd ? TMP_DIR : APP_DEST));
+}
+
+/**
+ * Execute external-stylesheet processing method based on presence of --scss flag.
+ */
+function processExternalStylesheets() {
+  return ENABLE_SCSS ? processScss('external') : processExternalCss();
 }
 
 /**
@@ -73,4 +140,4 @@ function getExternalCss() {
 /**
  * Executes the build process, processing the HTML and CSS files.
  */
-export = () => merge(processComponentCss(), prepareTemplates(), processExternalCss());
+export = () => merge(processComponentStylesheets(), prepareTemplates(), processExternalStylesheets());

tools/tasks/seed/build.index.dev.ts

@@ -3,7 +3,7 @@ import * as gulpLoadPlugins from 'gulp-load-plugins';
 import { join } from 'path';
 import * as slash from 'slash';
 
-import { APP_BASE, APP_DEST, APP_SRC, DEPENDENCIES } from '../../config';
+import { APP_BASE, APP_DEST, APP_SRC, DEPENDENCIES, CSS_DEST, ASSETS_SRC } from '../../config';
 import { templateLocals } from '../../utils';
 
 const plugins = <any>gulpLoadPlugins();
@@ -48,8 +48,10 @@ function getInjectablesDependenciesRef(name?: string) {
  */
 function mapPath(dep: any) {
   let envPath = dep.src;
-  if (envPath.startsWith(APP_SRC)) {
-    envPath = join(APP_DEST, dep.src.replace(APP_SRC, ''));
+  if (envPath.startsWith(APP_SRC) && !envPath.endsWith('.scss')) {
+    envPath = join(APP_DEST, envPath.replace(APP_SRC, ''));
+  } else if (envPath.startsWith(APP_SRC) && envPath.endsWith('.scss')) {
+    envPath = envPath.replace(ASSETS_SRC, CSS_DEST).replace('.scss', '.css');
   }
   return envPath;
 }

tools/tasks/seed/css-lint.ts

@@ -5,13 +5,14 @@ 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 { join} from 'path';
+import { join } from 'path';
 
-import { APP_ASSETS, APP_SRC, BROWSER_LIST, CSS_SRC, ENV } from '../../config';
+import { APP_ASSETS, APP_SRC, BROWSER_LIST, CSS_SRC, ENV, DEPENDENCIES, ENABLE_SCSS } from '../../config';
 
 const plugins = <any>gulpLoadPlugins();
 
 const isProd = ENV === 'prod';
+var stylesheetType = ENABLE_SCSS ? 'scss' : 'css';
 
 const processors = [
   doiuse({
@@ -22,35 +23,33 @@ const processors = [
   reporter({clearMessages: true})
 ];
 
-/**
- * Lints the component CSS files.
- */
-function lintComponentCss() {
+function lintComponentStylesheets() {
   return gulp.src([
-      join(APP_SRC, '**', '*.css'),
-      '!' + join(CSS_SRC, '**', '*.css')
-    ])
-    .pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
-    .pipe(plugins.postcss(processors));
+    join(APP_SRC, '**', `*.${stylesheetType}`),
+    `!${join(APP_SRC, 'assets', '**', '*.scss')}`,
+    `!${join(CSS_SRC, '**', '*.css')}`
+  ]).pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
+    .pipe(ENABLE_SCSS ? plugins.sassLint() : plugins.postcss(processors))
+    .pipe(ENABLE_SCSS ? plugins.sassLint.format() : plugins.util.noop())
+    .pipe(ENABLE_SCSS ? plugins.sassLint.failOnError() : plugins.util.noop());
 }
 
-/**
- * Lints the external CSS files.
- */
-function lintExternalCss() {
-  return gulp.src(getExternalCss().map(r => r.src))
+function lintExternalStylesheets() {
+  return gulp.src(getExternalStylesheets().map(r => r.src))
     .pipe(isProd ? plugins.cached('css-lint') : plugins.util.noop())
-    .pipe(plugins.postcss(processors));
+    .pipe(ENABLE_SCSS ? plugins.sassLint() : plugins.postcss(processors))
+    .pipe(ENABLE_SCSS ? plugins.sassLint.format() : plugins.util.noop())
+    .pipe(ENABLE_SCSS ? plugins.sassLint.failOnError() : plugins.util.noop());
 }
 
-/**
- * Returns the array of external CSS files.
- */
-function getExternalCss() {
-  return APP_ASSETS.filter(d => /\.css$/.test(d.src) && !d.vendor);
+function getExternalStylesheets() {
+  let stylesheets = ENABLE_SCSS ? DEPENDENCIES : APP_ASSETS;
+  return stylesheets
+    .filter(d => new RegExp(`\.${stylesheetType}$`)
+    .test(d.src) && !d.vendor);
 }
 
 /**
  * Executes the build process, linting the component and external CSS files using `stylelint`.
  */
-export = () => merge(lintComponentCss(), lintExternalCss());
+export = () => merge(lintComponentStylesheets(), lintExternalStylesheets());

typings.json

@@ -16,6 +16,7 @@
     "gulp": "github:DefinitelyTyped/DefinitelyTyped/gulp/gulp.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
     "gulp-load-plugins": "github:DefinitelyTyped/DefinitelyTyped/gulp-load-plugins/gulp-load-plugins.d.ts#e081148d88b857d66509e3b46edbd08b3f75f96a",
     "gulp-protractor": "registry:dt/gulp-protractor#1.0.0+20160316155526",
+    "gulp-sass": "github:DefinitelyTyped/DefinitelyTyped/gulp-sass/gulp-sass.d.ts#56295f5058cac7ae458540423c50ac2dcf9fc711",
     "gulp-shell": "github:DefinitelyTyped/DefinitelyTyped/gulp-shell/gulp-shell.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
     "gulp-util": "github:DefinitelyTyped/DefinitelyTyped/gulp-util/gulp-util.d.ts#5a8fc5ee71701431e4fdbb80c506e3c13f85a9ff",
     "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",