GCB-sass: tslint enable/disable now symmetrical when using css modules. (microsoft#15)

dzearing · web-flow · commit 397a2a30249e · 2016-11-01T13:12:49.000-07:00
* This removes the broken tslint enable that's causing lint issues downstream.

* Updates.

* PR feedback
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,4 @@ node_modules
 npm*.log
 temp
 package
+*.scss.ts
diff --git a/common/npm-shrinkwrap.json b/common/npm-shrinkwrap.json
diff --git a/common/temp_modules/npmx-test-web-library-build/package.json b/common/temp_modules/npmx-test-web-library-build/package.json
@@ -3,9 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
+    "@microsoft/load-themed-styles": "^1.2.2",
     "gulp": "~3.9.1"
   },
   "npmxDependencies": {
-    "@microsoft/web-library-build": ">=0.5.0 < 1.0.0"
+    "@microsoft/web-library-build": ">=0.5.0 <1.0.0"
   }
 }
diff --git a/gulp-core-build-sass/src/SassTask.ts b/gulp-core-build-sass/src/SassTask.ts
@@ -62,6 +62,7 @@ export class SassTask extends GulpTask<ISassTaskConfig> {
     const moduleSrcPattern: string[] = srcPattern.map((value: string) => value.replace('.scss', '.module.scss'));
 
     if (this.taskConfig.useCSSModules) {
+      this.logVerbose('Generating css modules.');
       return this._processFiles(gulp, srcPattern, completeCallback, modulePostCssPlugins);
     } else {
       moduleSrcPattern.forEach((value: string) => srcPattern.push(`!${value}`));
@@ -79,7 +80,6 @@ export class SassTask extends GulpTask<ISassTaskConfig> {
     postCSSPlugins: any[]
     /* tslint:enable:no-any */
   ): NodeJS.ReadWriteStream {
-
     /* tslint:disable:typedef */
     const changed = require('gulp-changed');
     const cleancss = require('gulp-clean-css');
@@ -123,7 +123,6 @@ export class SassTask extends GulpTask<ISassTaskConfig> {
 
           if (classNames) {
             const classNamesLines: string[] = [
-              this.taskConfig.preamble || '',
               'const styles = {'
             ];
 
@@ -148,35 +147,39 @@ export class SassTask extends GulpTask<ISassTaskConfig> {
             classNamesLines.push(
               '};',
               '',
-              'export default styles;',
-              this.taskConfig.postamble || '');
+              'export default styles;'
+            );
 
             exportClassNames = classNamesLines.join(EOL);
           }
 
           let lines: string[] = [];
+
+          lines.push(this.taskConfig.preamble || '');
+
           if (this.taskConfig.dropCssFiles) {
-            lines = [
+            lines = lines.concat([
               `require('${path.basename(file.path, scssTsExtName)}.css');`,
-              '',
-              exportClassNames,
-              ''
-            ];
+              exportClassNames
+            ]);
           } else if (!!content) {
-            lines = [
-              this.taskConfig.preamble || '',
+            lines = lines.concat([
               'import { loadStyles } from \'@microsoft/load-themed-styles\';',
               '',
               exportClassNames,
               '',
-              `loadStyles(${JSON.stringify(splitStyles(content))});`,
-              this.taskConfig.postamble || '',
-              ''
-            ];
+              `loadStyles(${JSON.stringify(splitStyles(content))});`
+            ]);
           }
 
-          return lines.join(EOL).replace(new RegExp(`(${EOL}){3,}`, 'g'), `${EOL}${EOL}`)
-                                .replace(new RegExp(`(${EOL})+$`, 'm'), EOL);
+          lines.push(this.taskConfig.postamble || '');
+
+          return (
+            lines
+              .join(EOL)
+              .replace(new RegExp(`(${EOL}){3,}`, 'g'), `${EOL}${EOL}`)
+              .replace(new RegExp(`(${EOL})+$`, 'm'), EOL)
+            );
         }
       }))
       .pipe(gulp.dest('src')));
diff --git a/test-web-library-build/gulpfile.js b/test-web-library-build/gulpfile.js
@@ -2,7 +2,9 @@
 
 let build = require('@microsoft/web-library-build');
 
+build.sass.setConfig({ useCSSModules: true });
 build.webpack.setConfig({ configPath: null });
 build.karma.setConfig({ configPath: null });
+
 build.initialize(require('gulp'));
 
diff --git a/test-web-library-build/package.json b/test-web-library-build/package.json
@@ -8,11 +8,9 @@
     "clean": "gulp clean",
     "test": "gulp"
   },
-  "directories": {
-    "packagePath": "package"
-  },
   "dependencies": {
-    "gulp": "~3.9.1",
-    "@microsoft/web-library-build": ">=0.5.0 <1.0.0"
+    "@microsoft/load-themed-styles": "^1.2.2",
+    "@microsoft/web-library-build": ">=0.5.0 <1.0.0",
+    "gulp": "~3.9.1"
   }
 }
diff --git a/test-web-library-build/src/test.scss b/test-web-library-build/src/test.scss
@@ -0,0 +1,7 @@
+body {
+  background: red;
+}
+
+.foo {
+  border: 1px solid red;
+}
diff --git a/test-web-library-build/src/test.ts b/test-web-library-build/src/test.ts
@@ -1,5 +1,7 @@
+import test from './test.scss';
+
 export function log(message: string): void {
-  console.log(message);
+  console.log(test.foo);
 }
 
 export function add(num1: number, num2: number): number {

Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,10 @@`
`3`	`3`	`"version": "0.0.0",`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
	`6`	`+ "@microsoft/load-themed-styles": "^1.2.2",`
`6`	`7`	`"gulp": "~3.9.1"`
`7`	`8`	`},`
`8`	`9`	`"npmxDependencies": {`
`9`		`- "@microsoft/web-library-build": ">=0.5.0 < 1.0.0"`
	`10`	`+ "@microsoft/web-library-build": ">=0.5.0 <1.0.0"`
`10`	`11`	`}`
`11`	`12`	`}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,7 @@ @@
 +body {
 +  background: red;
 +}
++
 +.foo {
 +  border: 1px solid red;
 +}
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
	`1`	`+import test from './test.scss';`
	`2`	`+`
`1`	`3`	`export function log(message: string): void {`
`2`		`- console.log(message);`
	`4`	`+ console.log(test.foo);`
`3`	`5`	`}`
`4`	`6`
`5`	`7`	`export function add(num1: number, num2: number): number {`