Merge branch 'master' into feature/minify-nomangle-fn-names

storybookjs · Jan 10, 2018 · 48a980d · 48a980d
2 parents ff18c6c + 1e8c6dc
commit 48a980d
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 9 deletions.
diff --git a/app/angular/package.json b/app/angular/package.json
@@ -59,6 +59,7 @@
     "json5": "^0.5.1",
     "lodash.pick": "^4.4.0",
     "markdown-loader": "^2.0.2",
+    "node-sass": "^4.7.2",
     "postcss-flexbugs-fixes": "^3.0.0",
     "postcss-loader": "^2.0.10",
     "prop-types": "^15.5.10",
@@ -70,6 +71,7 @@
     "redux": "^3.6.0",
     "request": "^2.81.0",
     "rxjs": "^5.4.2",
+    "sass-loader": "^6.0.6",
     "serve-favicon": "^2.4.3",
     "shelljs": "^0.7.8",
     "style-loader": "^0.18.2",

diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js
@@ -72,9 +72,13 @@ export default function(configDir) {
           ],
         },
         {
-          test: /\.(html|css)$/,
+          test: /\.html$/,
           loader: 'raw-loader',
-          exclude: /\.async\.(html|css)$/,
+          exclude: /\.async\.css$/,
+        },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
         },
         {
           test: /\.md$/,

diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js
@@ -81,9 +81,13 @@ export default function(configDir) {
           ],
         },
         {
-          test: /\.(html|css)$/,
+          test: /\.html$/,
           loader: 'raw-loader',
-          exclude: /\.async\.(html|css)$/,
+          exclude: /\.async\.html$/,
+        },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
         },
       ],
     },

diff --git a/examples/angular-cli/.storybook/config.js b/examples/angular-cli/.storybook/config.js
@@ -1,6 +1,8 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
 import { configure } from '@storybook/angular';
+import addCssWarning from '../src/cssWarning';
+import '../src/assets/common.css'
+
+addCssWarning();
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed

diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
@@ -37,6 +37,7 @@
     "@storybook/angular": "^3.4.0-alpha.1",
     "@types/jasmine": "~2.8.3",
     "@types/node": "~6.0.96",
+    "global": "^4.3.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.0",

diff --git a/examples/angular-cli/src/app/app.component.css b/examples/angular-cli/src/app/app.component.css
diff --git a/examples/angular-cli/src/app/app.component.html b/examples/angular-cli/src/app/app.component.html
@@ -1,4 +1,7 @@
 <!--The content below is only a placeholder and can be replaced.-->
+<div class="hide" style="color: red; font-size: 30px; text-align: center;">
+  This should be hidden, if not - scss is not loaded as needed.
+</div>
 <div style="text-align:center">
   <h1>
     Welcome to {{title}}!

diff --git a/examples/angular-cli/src/app/app.component.scss b/examples/angular-cli/src/app/app.component.scss
@@ -0,0 +1,5 @@
+$display: none;
+
+.hide {
+  display: $display;
+}
diff --git a/examples/angular-cli/src/app/app.component.ts b/examples/angular-cli/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'storybook-app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'app';

diff --git a/examples/angular-cli/src/assets/common.css b/examples/angular-cli/src/assets/common.css
@@ -0,0 +1,3 @@
+.css-rules-warning {
+  display: none;
+}
diff --git a/examples/angular-cli/src/cssWarning.js b/examples/angular-cli/src/cssWarning.js
@@ -0,0 +1,10 @@
+import { document } from 'global';
+
+export default function addCssWarning() {
+  const warning = document.createElement('h1');
+  warning.textContent = 'CSS rules are not configured as needed';
+  warning.className = 'css-rules-warning';
+  warning.style.color = 'red';
+
+  document.body.insertBefore(warning, document.body.firstChild);
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9849,7 +9849,7 @@ node-pre-gyp@^0.6.36, node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.3.0:
+node-sass@^4.3.0, node-sass@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
   dependencies:
@@ -12795,7 +12795,7 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-sass-loader@^6.0.3:
+sass-loader@^6.0.3, sass-loader@^6.0.6:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
   dependencies: