making tasks more tolerant and defer requiring tools (#118)

* making tasks more tolerant and defer requiring tools

* stylesoverlay work

common/changes/just-scripts/styles_2019-05-31-05-20.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "just-scripts",
+      "comment": "Fixes stylesOverlay and make tasks tolerant of tooling's absense",
+      "type": "patch"
+    }
+  ],
+  "packageName": "just-scripts",
+  "email": "kchau@microsoft.com"
+}

packages/just-scripts/src/index.ts

@@ -9,7 +9,7 @@ export * from './webpack/webpack.serve.config';
 // Webpack configs and overlays
 import { tsOverlay } from './webpack/overlays/tsOverlay';
 import { htmlOverlay } from './webpack/overlays/htmlOverlay';
-import { stylesOverlay } from './webpack/overlays/stylesOverlay';
+import { stylesOverlay, createStylesOverlay } from './webpack/overlays/stylesOverlay';
 import { fileOverlay } from './webpack/overlays/fileOverlay';
 import { displayBailoutOverlay } from './webpack/overlays/displayBailoutOverlay';
 
@@ -21,6 +21,8 @@ export const webpackOverlays = {
   displayBailout: displayBailoutOverlay
 };
 
+export { tsOverlay, htmlOverlay, stylesOverlay, fileOverlay, displayBailoutOverlay, createStylesOverlay };
+
 import webpackMerge from 'webpack-merge';
 export { webpackMerge };
 

packages/just-scripts/src/task-presets/webapp.ts

@@ -13,6 +13,7 @@ export function webapp() {
   task('jest:watch', jestTask({ watch: true }));
 
   task('webpack', webpackTask());
+
   task('webpack:watch', webpackDevServerTask());
 
   task('build', series('clean', 'ts', parallel('jest', 'webpack')));

packages/just-scripts/src/tasks/sassTask.ts

@@ -1,8 +1,9 @@
 import glob from 'glob';
 import path from 'path';
 import fs from 'fs';
-import { resolveCwd, TaskFunction } from 'just-task';
+import { resolveCwd, TaskFunction, logger } from 'just-task';
 import parallelLimit from 'run-parallel-limit';
+import { tryRequire } from '../tryRequire';
 
 export interface SassTaskOptions {
   createSourceModule: (fileName: string, css: string) => string;
@@ -26,12 +27,19 @@ export function sassTask(
   }
   postcssPlugins = postcssPlugins || [];
 
-  const nodeSass = require('node-sass');
-  const postcss = require('postcss');
-  const autoprefixer = require('autoprefixer');
-  const autoprefixerFn = autoprefixer({ browsers: ['> 1%', 'last 2 versions', 'ie >= 11'] });
-
   return function sass(done: (err?: Error) => void) {
+    const nodeSass = tryRequire('node-sass');
+    const postcss = tryRequire('postcss');
+    const autoprefixer = tryRequire('autoprefixer');
+
+    if (!nodeSass || !postcss || !autoprefixer) {
+      logger.warn('node-sass, postcss, and autoprefixer are not installed, so this task has no effect');
+      done();
+      return;
+    }
+
+    const autoprefixerFn = autoprefixer({ browsers: ['> 1%', 'last 2 versions', 'ie >= 11'] });
+
     const files = glob.sync(path.resolve(process.cwd(), 'src/**/*.scss'));
 
     if (files.length) {

packages/just-scripts/src/tasks/webpackTask.ts

@@ -2,6 +2,7 @@ import { logger, argv, resolve, resolveCwd, TaskFunction } from 'just-task';
 import fs from 'fs';
 import { encodeArgs, spawn } from 'just-scripts-utils';
 import webpackMerge from 'webpack-merge';
+import { tryRequire } from '../tryRequire';
 
 export interface WebpackTaskOptions {
   config?: string;
@@ -16,9 +17,14 @@ export interface WebpackTaskOptions {
 }
 
 export function webpackTask(options?: WebpackTaskOptions): TaskFunction {
-  const wp = require('webpack');
-
   return function webpack() {
+    const wp = tryRequire('webpack');
+
+    if (!wp) {
+      logger.warn('webpack is not installed, this task no effect');
+      return;
+    }
+
     logger.info(`Running Webpack`);
     const webpackConfigPath = resolveCwd((options && options.config) || 'webpack.config.js');
     logger.info(`Webpack Config Path: ${webpackConfigPath}`);

packages/just-scripts/src/tryRequire.ts

@@ -1,8 +1,16 @@
+import { resolve } from 'just-task';
+
 export function tryRequire(specifier: string) {
+  const resolved = resolve(specifier);
+
+  if (!resolved) {
+    return null;
+  }
+
   let requiredModule = null;
 
   try {
-    requiredModule = require(specifier);
+    requiredModule = require(resolved);
   } catch (e) {
     // ignore
   }

packages/just-scripts/src/webpack/overlays/stylesOverlay.ts

@@ -1,88 +1,110 @@
-import { resolveCwd } from 'just-task';
+import { resolve } from 'just-task';
 
-const styleLoader = resolveCwd('@microsoft/loader-load-themed-styles') || resolveCwd('style-loader');
-const sassLoader = resolveCwd('sass-loader');
-const cssLoader = resolveCwd('css-loader');
-const postCssLoader = resolveCwd('postcss-loader');
+const styleLoader = resolve('@microsoft/loader-load-themed-styles') || resolve('style-loader');
+const sassLoader = resolve('node-sass') && resolve('sass-loader');
+const cssLoader = resolve('css-loader');
+const postCssLoader = resolve('postcss-loader');
 
-const merge = require('webpack-merge');
+const cssTest = /\.css$/;
+const cssModuleTest = /\.module\.css$/;
+const sassTest = /\.(scss|sass)$/;
+const sassModuleTest = /\.module\.(scss|sass)$/;
+const defaultIdentName = '[name]_[local]_[hash:base64:5]';
 
-export const stylesOverlay = merge(
-  {
-    ...(sassLoader &&
-      styleLoader &&
-      cssLoader &&
-      postCssLoader && {
-        module: {
-          rules: [
-            {
-              test: /\.scss$/,
-              enforce: 'pre',
-              exclude: [/node_modules/],
-              use: [
-                {
-                  loader: styleLoader // creates style nodes from JS strings
-                },
-                {
-                  loader: 'css-loader', // translates CSS into CommonJS
-                  options: {
-                    modules: true,
-                    importLoaders: 2,
-                    localIdentName: '[name]_[local]_[hash:base64:5]',
-                    minimize: false
-                  }
-                },
-                {
-                  loader: 'postcss-loader',
-                  options: {
-                    plugins: function() {
-                      return [require('autoprefixer')];
-                    }
-                  }
-                },
-                {
-                  loader: 'sass-loader'
-                }
-              ]
+interface CssLoaderOptions {
+  modules?: boolean;
+  localIdentName?: string;
+}
+
+function createStyleLoaderRule(cssOptions: CssLoaderOptions, preprocessor: 'sass-loader' | null = null) {
+  const preloaders = [
+    ...(postCssLoader
+      ? [
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function() {
+                return [resolve('autoprefixer')];
+              }
             }
-          ]
-        }
-      })
-  },
-  {
-    ...(cssLoader &&
-      postCssLoader && {
-        module: {
-          rules: [
-            {
-              test: /\.css$/,
-              enforce: 'pre',
-              exclude: [/node_modules/],
-              use: [
-                {
-                  loader: styleLoader // creates style nodes from JS strings
-                },
-                {
-                  loader: 'css-loader', // translates CSS into CommonJS
-                  options: {
+          }
+        ]
+      : []),
+    ...(preprocessor ? [preprocessor] : [])
+  ];
+
+  return [
+    {
+      loader: styleLoader // creates style nodes from JS strings
+    },
+    {
+      loader: 'css-loader', // translates CSS into CommonJS
+      options: {
+        ...cssOptions,
+        importLoaders: preloaders.length
+      }
+    },
+    ...preloaders
+  ];
+}
+
+export const createStylesOverlay = function(options: CssLoaderOptions = {}) {
+  return {
+    module: {
+      rules: [
+        ...(cssLoader
+          ? [
+              {
+                test: cssTest,
+                exclude: [/node_modules/, cssModuleTest],
+                use: createStyleLoaderRule({
+                  modules: false,
+                  localIdentName: options.localIdentName || defaultIdentName
+                }),
+                sideEffects: true
+              },
+              {
+                test: cssModuleTest,
+                exclude: [/node_modules/],
+                use: createStyleLoaderRule({
+                  modules: true,
+                  localIdentName: options.localIdentName || defaultIdentName
+                })
+              }
+            ]
+          : []),
+        ...(sassLoader && cssLoader
+          ? [
+              {
+                test: sassTest,
+                exclude: [/node_modules/, sassModuleTest],
+                use: createStyleLoaderRule(
+                  {
+                    modules: false,
+                    localIdentName: options.localIdentName || defaultIdentName
+                  },
+                  'sass-loader'
+                ),
+                sideEffects: true
+              },
+              {
+                test: sassModuleTest,
+                exclude: [/node_modules/],
+                use: createStyleLoaderRule(
+                  {
                     modules: true,
-                    importLoaders: 2,
-                    localIdentName: '[name]_[local]_[hash:base64:5]',
-                    minimize: false
-                  }
-                },
-                {
-                  loader: 'postcss-loader',
-                  options: {
-                    plugins: function() {
-                      return [require('autoprefixer')];
-                    }
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      })
-  }
-);
+                    localIdentName: options.localIdentName || defaultIdentName
+                  },
+                  'sass-loader'
+                )
+              }
+            ]
+          : [])
+      ]
+    }
+  };
+};
+
+export const stylesOverlay = createStylesOverlay({
+  localIdentName: defaultIdentName
+});