From 1d093b383e82d5b1bf3af0f0a0b4261b090fe92c Mon Sep 17 00:00:00 2001 From: Tome Pejoski Date: Wed, 10 Oct 2018 16:44:13 +0200 Subject: [PATCH 1/6] Add support for sass type files --- app/angular/src/server/framework-preset-angular.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 01777ba5001..029ee7445e6 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -31,7 +31,7 @@ export function webpack(config, { configDir }) { exclude: /\.async\.html$/, }, { - test: /\.scss$/, + test: /\.(scss|sass)$/, use: [require.resolve('raw-loader'), require.resolve('sass-loader')], }, ], From 499eddff4583c89bd20c7a435efe8fbc73cd58a7 Mon Sep 17 00:00:00 2001 From: Tome Pejoski Date: Thu, 11 Oct 2018 11:54:41 +0200 Subject: [PATCH 2/6] Add sass type files also to the filter --- app/angular/src/server/angular-cli_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index 41ec13d99c7..ac9348794f6 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -110,7 +110,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions // because @angular-devkit/build-angular created rules have include/exclude for global style files. const rulesExcludingStyles = baseConfig.module.rules.filter( rule => - !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/') + !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.sass$/' && rule.test.toString() !== '/\\.scss$/') ); // cliStyleConfig.entry adds global style files to the webpack context From ee840fa66cedd9d4fda05492d2a8d4bbd9354f90 Mon Sep 17 00:00:00 2001 From: Tome Pejoski Date: Thu, 11 Oct 2018 11:56:53 +0200 Subject: [PATCH 3/6] Update the comment --- app/angular/src/server/angular-cli_config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index ac9348794f6..796c3a843e2 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -106,7 +106,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const { cliCommonConfig, cliStyleConfig } = cliParts; - // Don't use storybooks .css/.scss rules because we have to use rules created by @angular-devkit/build-angular + // Don't use storybooks .css/.sass/.scss rules because we have to use rules created by @angular-devkit/build-angular // because @angular-devkit/build-angular created rules have include/exclude for global style files. const rulesExcludingStyles = baseConfig.module.rules.filter( rule => From b84559e40dc063d06041ccbccb78554e9ca8a5bc Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 18 Oct 2018 21:48:49 +0300 Subject: [PATCH 4/6] Fix styling rules exclusion --- app/angular/src/server/angular-cli_config.js | 30 +++++++++++++------ .../src/server/framework-preset-angular.js | 2 +- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index ed51830b6fe..80dc99d35a1 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -41,6 +41,26 @@ function getAngularCliParts(cliWebpackConfigOptions) { } } +function isStylingRule(rule) { + const { test } = rule; + + if (!test) { + return false; + } + + if (!(test instanceof RegExp)) { + return false; + } + + return test.test('.css') || test.test('.scss') || test.test('.sass'); +} + +function filterOutStylingRules(config) { + // Don't use storybooks .css/.sass/.scss rules because we have to use rules created by @angular-devkit/build-angular + // because @angular-devkit/build-angular created rules have include/exclude for global style files. + return config.module.rules.filter(rule => !isStylingRule(rule)); +} + export function getAngularCliWebpackConfigOptions(dirToSearch) { const fname = path.join(dirToSearch, 'angular.json'); @@ -107,15 +127,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const { cliCommonConfig, cliStyleConfig } = cliParts; - // Don't use storybooks .css/.sass/.scss rules because we have to use rules created by @angular-devkit/build-angular - // because @angular-devkit/build-angular created rules have include/exclude for global style files. - const rulesExcludingStyles = baseConfig.module.rules.filter( - rule => - !rule.test || - (rule.test.toString() !== '/\\.css$/' && - rule.test.toString() !== '/\\.sass$/' && - rule.test.toString() !== '/\\.scss$/') - ); + const rulesExcludingStyles = filterOutStylingRules(baseConfig); // cliStyleConfig.entry adds global style files to the webpack context const entry = { diff --git a/app/angular/src/server/framework-preset-angular.js b/app/angular/src/server/framework-preset-angular.js index 029ee7445e6..882e212caec 100644 --- a/app/angular/src/server/framework-preset-angular.js +++ b/app/angular/src/server/framework-preset-angular.js @@ -31,7 +31,7 @@ export function webpack(config, { configDir }) { exclude: /\.async\.html$/, }, { - test: /\.(scss|sass)$/, + test: /\.s(c|a)ss$/, use: [require.resolve('raw-loader'), require.resolve('sass-loader')], }, ], From 42756657c17e800c05e5ffb70a56a0a5764e6554 Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 18 Oct 2018 22:01:25 +0300 Subject: [PATCH 5/6] Set filterOutStylingRules method in utils --- app/angular/src/server/angular-cli_config.js | 28 +++++--------------- app/angular/src/server/angular-cli_utils.js | 18 +++++++++++++ 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index 80dc99d35a1..fbc763b1feb 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -2,7 +2,11 @@ import path from 'path'; import fs from 'fs'; import { logger } from '@storybook/node-logger'; import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'; -import { isBuildAngularInstalled, normalizeAssetPatterns } from './angular-cli_utils'; +import { + isBuildAngularInstalled, + normalizeAssetPatterns, + filterOutStylingRules, +} from './angular-cli_utils'; function getTsConfigOptions(tsConfigPath) { const basicOptions = { @@ -41,26 +45,6 @@ function getAngularCliParts(cliWebpackConfigOptions) { } } -function isStylingRule(rule) { - const { test } = rule; - - if (!test) { - return false; - } - - if (!(test instanceof RegExp)) { - return false; - } - - return test.test('.css') || test.test('.scss') || test.test('.sass'); -} - -function filterOutStylingRules(config) { - // Don't use storybooks .css/.sass/.scss rules because we have to use rules created by @angular-devkit/build-angular - // because @angular-devkit/build-angular created rules have include/exclude for global style files. - return config.module.rules.filter(rule => !isStylingRule(rule)); -} - export function getAngularCliWebpackConfigOptions(dirToSearch) { const fname = path.join(dirToSearch, 'angular.json'); @@ -127,6 +111,8 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions const { cliCommonConfig, cliStyleConfig } = cliParts; + // Don't use storybooks styling rules because we have to use rules created by @angular-devkit/build-angular + // because @angular-devkit/build-angular created rules have include/exclude for global style files. const rulesExcludingStyles = filterOutStylingRules(baseConfig); // cliStyleConfig.entry adds global style files to the webpack context diff --git a/app/angular/src/server/angular-cli_utils.js b/app/angular/src/server/angular-cli_utils.js index d2ec6b6ed42..1d05f9a1c23 100644 --- a/app/angular/src/server/angular-cli_utils.js +++ b/app/angular/src/server/angular-cli_utils.js @@ -23,6 +23,24 @@ function getAssetsParts(resolvedAssetPath, assetPath) { }; } +function isStylingRule(rule) { + const { test } = rule; + + if (!test) { + return false; + } + + if (!(test instanceof RegExp)) { + return false; + } + + return test.test('.css') || test.test('.scss') || test.test('.sass'); +} + +export function filterOutStylingRules(config) { + return config.module.rules.filter(rule => !isStylingRule(rule)); +} + export function isBuildAngularInstalled() { try { require.resolve('@angular-devkit/build-angular'); From 66b3158f41643cd79e300fe8aec53e810a3b16ed Mon Sep 17 00:00:00 2001 From: igor-dv Date: Thu, 18 Oct 2018 22:09:58 +0300 Subject: [PATCH 6/6] Move getAngularCliParts to utils --- app/angular/src/server/angular-cli_config.js | 15 +-------------- app/angular/src/server/angular-cli_utils.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js index fbc763b1feb..3043dff9c17 100644 --- a/app/angular/src/server/angular-cli_config.js +++ b/app/angular/src/server/angular-cli_config.js @@ -6,6 +6,7 @@ import { isBuildAngularInstalled, normalizeAssetPatterns, filterOutStylingRules, + getAngularCliParts, } from './angular-cli_utils'; function getTsConfigOptions(tsConfigPath) { @@ -31,20 +32,6 @@ function getTsConfigOptions(tsConfigPath) { return basicOptions; } -function getAngularCliParts(cliWebpackConfigOptions) { - // eslint-disable-next-line global-require, import/no-extraneous-dependencies - const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); - - try { - return { - cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions), - cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions), - }; - } catch (e) { - return null; - } -} - export function getAngularCliWebpackConfigOptions(dirToSearch) { const fname = path.join(dirToSearch, 'angular.json'); diff --git a/app/angular/src/server/angular-cli_utils.js b/app/angular/src/server/angular-cli_utils.js index 1d05f9a1c23..3129fa49109 100644 --- a/app/angular/src/server/angular-cli_utils.js +++ b/app/angular/src/server/angular-cli_utils.js @@ -50,6 +50,20 @@ export function isBuildAngularInstalled() { } } +export function getAngularCliParts(cliWebpackConfigOptions) { + // eslint-disable-next-line global-require, import/no-extraneous-dependencies + const ngCliConfigFactory = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs'); + + try { + return { + cliCommonConfig: ngCliConfigFactory.getCommonConfig(cliWebpackConfigOptions), + cliStyleConfig: ngCliConfigFactory.getStylesConfig(cliWebpackConfigOptions), + }; + } catch (e) { + return null; + } +} + export function normalizeAssetPatterns(assetPatterns, dirToSearch, sourceRoot) { if (!assetPatterns || !assetPatterns.length) { return [];