From 29711695d90115208bbc5e1e746874ce1e6fa4cd Mon Sep 17 00:00:00 2001
From: Jan Kuri <jkuri88@gmail.com>
Date: Thu, 28 Jul 2016 15:14:05 +0200
Subject: [PATCH] chore(): sass support

---
 addon/ng2/models/webpack-build-common.ts |  2 +-
 addon/ng2/models/webpack-build-test.js   |  2 +-
 tests/e2e/e2e_workflow.spec.js           | 31 ++++++++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/addon/ng2/models/webpack-build-common.ts b/addon/ng2/models/webpack-build-common.ts
index edb412f710b1..4871410f9be7 100644
--- a/addon/ng2/models/webpack-build-common.ts
+++ b/addon/ng2/models/webpack-build-common.ts
@@ -53,7 +53,7 @@ export function getWebpackCommonConfig(projectRoot: string, sourceDir: string) {
         { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
         { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
         { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
         { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'},
         { test: /\.html$/, loader: 'raw-loader' }
       ]
diff --git a/addon/ng2/models/webpack-build-test.js b/addon/ng2/models/webpack-build-test.js
index 3e249d549929..5ed3d5c55ff8 100644
--- a/addon/ng2/models/webpack-build-test.js
+++ b/addon/ng2/models/webpack-build-test.js
@@ -60,7 +60,7 @@ const getWebpackTestConfig = function(projectRoot, sourceDir) {
         { test: /\.css$/,  loaders: ['raw-loader', 'postcss-loader'] },
         { test: /\.styl$/, loaders: ['raw-loader', 'postcss-loader', 'stylus-loader'] },
         { test: /\.less$/, loaders: ['raw-loader', 'postcss-loader', 'less-loader'] },
-        { test: /\.scss$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
+        { test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'postcss-loader', 'sass-loader'] },
         { test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000' },
         { test: /\.html$/, loader: 'raw-loader', exclude: [path.resolve(projectRoot, `./${sourceDir}/index.html`)] }
       ],
diff --git a/tests/e2e/e2e_workflow.spec.js b/tests/e2e/e2e_workflow.spec.js
index 052efd377a21..1aaa5159f3b7 100644
--- a/tests/e2e/e2e_workflow.spec.js
+++ b/tests/e2e/e2e_workflow.spec.js
@@ -326,6 +326,37 @@ describe('Basic end-to-end Workflow', function () {
     sh.rm('-f', scssPartialFile);
   });
 
+  it_not_mobile('Supports sass in styleUrls', function() {
+    this.timeout(420000);
+
+    let cssFilename = 'app.component.css';
+    let sassFilename = 'app.component.sass';
+    let componentPath = path.join(process.cwd(), 'src', 'app');
+    let componentFile = path.join(componentPath, 'app.component.ts');
+    let cssFile = path.join(componentPath, cssFilename);
+    let sassFile = path.join(componentPath, sassFilename);
+    let sassExample = '@import "app.component.partial";\n\n.outer\n  .inner\n    background: #fff';
+    let sassPartialFile = path.join(componentPath, '_app.component.partial.sass');
+    let sassPartialExample = '.partial\n  @extend .outer';
+    let componentContents = fs.readFileSync(componentFile, 'utf8');
+
+    sh.mv(cssFile, sassFile);
+    fs.writeFileSync(sassFile, sassExample, 'utf8');
+    fs.writeFileSync(sassPartialFile, sassPartialExample, 'utf8');
+    fs.writeFileSync(componentFile, componentContents.replace(new RegExp(cssFilename, 'g'), sassFilename), 'utf8');
+
+    sh.exec(`${ngBin} build`);
+    let destCssBundle = path.join(process.cwd(), 'dist', 'main.bundle.js');
+    let contents = fs.readFileSync(destCssBundle, 'utf8');
+    expect(contents).to.include('.outer .inner');
+    expect(contents).to.include('.partial .inner');
+
+    sh.mv(sassFile, cssFile);
+    fs.writeFileSync(cssFile, '', 'utf8');
+    fs.writeFileSync(componentFile, componentContents, 'utf8');
+    sh.rm('-f', sassPartialFile);
+  });
+
   // Mobile mode doesn't have styles
   it_not_mobile('Supports less in styleUrls', function() {
     this.timeout(420000);