fix(webpack-cli): fixed support for SCSS entry points (#1271)

ematipico · web-flow · commit 321bbe5d5da9 · 2020-02-28T15:36:11.000Z
* fix(webpack-cli): fixed support for SCSS entry points

* fix(webpack-cli): use children only when configuration is an array

* fix(webpack-cli): added tests correctly

* fix(webpack-cli): increased time out for installing deps

* tests(webpack-cli): enforced time out

* tests(webpack-cli): fix correct cwd when installing deps

* tests(webpack-cli): fix correct cwd when installing deps

* tests(webpack-cli): install all packages before launching the tests
diff --git a/jest.config.js b/jest.config.js
@@ -9,4 +9,5 @@ module.exports = {
     },
     testRegex: ['/__tests__/.*\\.(test.js|test.ts)$', '/test/.*\\.(test.js|test.ts)$'],
     moduleFileExtensions: ['ts', 'js', 'json'],
+    watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };
diff --git a/package.json b/package.json
@@ -25,13 +25,14 @@
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "build": "node scripts/buildPackages.js",
+    "prepsuite": "node scripts/prepareSuite.js",
     "clean:all": "rimraf node_modules packages/*/{node_modules}",
     "commit": "git-cz",
     "docs": "typedoc",
     "format": "eslint --fix . --ext .js,.ts",
     "lint": "eslint . --ext .js,.ts",
     "lint:fix": "eslint . --ext .js,.ts --fix",
-    "pretest": "yarn build && yarn lint",
+    "pretest": "yarn build && yarn lint && yarn prepsuite",
     "reportCoverage": "nyc report --reporter=json && codecov -f coverage/coverage-final.json --disable=gcov",
     "smoketest": "smoketests/smoketests.sh",
     "test": "nyc jest --maxWorkers=4 --reporters=default --reporters=jest-junit",
@@ -150,6 +151,7 @@
     "jest": "^25.1.0",
     "jest-junit": "^10.0.0",
     "jest-serializer-ansi": "^1.0.3",
+    "jest-watch-typeahead": "^0.4.2",
     "lerna": "^3.20.2",
     "lint-staged": "^9.4.2",
     "nyc": "^14.1.1",
diff --git a/packages/webpack-cli/lib/utils/Compiler.js b/packages/webpack-cli/lib/utils/Compiler.js
@@ -6,6 +6,7 @@ const { CompilerOutput } = require('./CompilerOutput');
 class Compiler {
     constructor() {
         this.output = new CompilerOutput();
+        this.compilerOptions = {};
     }
     setUpHookForCompilation(compilation, outputOptions, options) {
         const { ProgressPlugin } = webpack;
@@ -81,7 +82,7 @@ class Compiler {
             this.output.generateRawOutput(stats);
         } else {
             const statsObj = stats.toJson(outputOptions);
-            if (statsObj.children && statsObj.children.length) {
+            if (statsObj.children && Array.isArray(statsObj.children) && this.compilerOptions && Array.isArray(this.compilerOptions)) {
                 statsObj.children.forEach(child => {
                     this.output.generateFancyOutput(child, statsErrors, processingMessageBuffer);
                 });
@@ -146,6 +147,7 @@ class Compiler {
     async createCompiler(options) {
         try {
             this.compiler = await webpack(options);
+            this.compilerOptions = options;
         } catch (err) {
             process.stdout.write('\n');
             logger.error(`${err.name}: ${err.message}`);
diff --git a/packages/webpack-cli/lib/utils/CompilerOutput.js b/packages/webpack-cli/lib/utils/CompilerOutput.js
@@ -32,38 +32,40 @@ class CompilerOutput {
                 const asset = assets.find(asset => {
                     return asset.name === assetName;
                 });
-                const entrypointChunks = entrypoint.chunks.map(id => {
-                    return chunks.find(chunk => chunk.id === id);
-                });
-
-                const chunksOutput = this._createChunksOutput(entrypointChunks);
-                const kbSize = `${(asset.size / 1000).toFixed(2)} kb`;
-                const hasBeenCompiled = asset.comparedForEmit;
-                const bundleTbl = new Table({
-                    chars: {
-                        top: '',
-                        'top-mid': '',
-                        'top-left': '',
-                        'top-right': '',
-                        bottom: '',
-                        'bottom-mid': '',
-                        'bottom-left': '',
-                        'bottom-right': '',
-                        left: '',
-                        'left-mid': '',
-                        mid: '',
-                        'mid-mid': '',
-                        right: '',
-                        'right-mid': '',
-                    },
-                    style: { compact: true },
-                });
-                bundleTbl.push({ 'Bundle Name': asset.name });
-                bundleTbl.push({ 'Compared For Emit': hasBeenCompiled });
-                bundleTbl.push({ 'Bundle size': kbSize });
-                const bundleOutput = bundleTbl.toString() + `\n\nModules:\n${chunksOutput}`;
-                assetsTble.push([entrypoint.name, bundleOutput]);
-                compilationTableEmpty = false;
+                if (asset) {
+                    const entrypointChunks = entrypoint.chunks.map(id => {
+                        return chunks.find(chunk => chunk.id === id);
+                    });
+
+                    const chunksOutput = this._createChunksOutput(entrypointChunks);
+                    const kbSize = `${(asset.size / 1000).toFixed(2)} kb`;
+                    const hasBeenCompiled = asset.comparedForEmit;
+                    const bundleTbl = new Table({
+                        chars: {
+                            top: '',
+                            'top-mid': '',
+                            'top-left': '',
+                            'top-right': '',
+                            bottom: '',
+                            'bottom-mid': '',
+                            'bottom-left': '',
+                            'bottom-right': '',
+                            left: '',
+                            'left-mid': '',
+                            mid: '',
+                            'mid-mid': '',
+                            right: '',
+                            'right-mid': '',
+                        },
+                        style: { compact: true },
+                    });
+                    bundleTbl.push({ 'Bundle Name': asset.name });
+                    bundleTbl.push({ 'Compared For Emit': hasBeenCompiled });
+                    bundleTbl.push({ 'Bundle size': kbSize });
+                    const bundleOutput = bundleTbl.toString() + `\n\nModules:\n${chunksOutput}`;
+                    assetsTble.push([entrypoint.name, bundleOutput]);
+                    compilationTableEmpty = false;
+                }
             });
         });
 
diff --git a/scripts/prepareSuite.js b/scripts/prepareSuite.js
@@ -0,0 +1,53 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+// eslint-disable-next-line node/no-unpublished-require
+const execa = require('execa');
+// eslint-disable-next-line node/no-unpublished-require
+const chalk = require('chalk');
+
+const BASE_DIR = 'test/';
+const PACKAGE = 'package.json';
+
+function collectTestingFoldersWithPackage() {
+    const testFolder = path.resolve(path.join(process.cwd(), BASE_DIR));
+
+    return extractFolder(testFolder);
+}
+
+function extractFolder(folderToRead, folders = []) {
+    const files = fs.readdirSync(folderToRead);
+
+    files.forEach(file => {
+        const filePath = path.resolve(path.join(folderToRead, file));
+        const stats = fs.statSync(filePath);
+        if (stats.isFile() && file === PACKAGE) {
+            folders.push(folderToRead);
+        }
+        if (stats.isDirectory() && file !== 'node_modules') {
+            extractFolder(filePath, folders);
+        }
+    });
+
+    return folders;
+}
+
+{
+    Promise.all(
+        collectTestingFoldersWithPackage().map(async folder => {
+            return execa('yarn', {
+                cwd: folder,
+                stdio: 'inherit',
+            });
+        }),
+    )
+        .then(() => {
+            console.log(chalk.inverse.green(' Successfully prepared the test suite '));
+        })
+        .catch(e => {
+            console.error(chalk.inverse.red(' Unable to prepare the test suite '));
+            console.error(e.stack);
+            process.exitCode = 1;
+        });
+}
diff --git a/test/entry/scss/.gitignore b/test/entry/scss/.gitignore
@@ -0,0 +1,3 @@
+yarn.lock
+package-lock.json
+node_modules/
diff --git a/test/entry/scss/home.js b/test/entry/scss/home.js
@@ -0,0 +1 @@
+console.log('home');
diff --git a/test/entry/scss/home.scss b/test/entry/scss/home.scss
@@ -0,0 +1,6 @@
+body {
+    font-size: 100%;
+    body {
+        background-color: red;
+    }
+}
diff --git a/test/entry/scss/package.json b/test/entry/scss/package.json
@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "css-loader": "^3.4.2",
+    "style-loader": "^1.1.3",
+    "sass-loader": "^8.0.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1"
+  }
+}
diff --git a/test/entry/scss/scss.test.js b/test/entry/scss/scss.test.js
@@ -0,0 +1,15 @@
+/* eslint-disable   node/no-missing-require */
+/* eslint-disable   node/no-unpublished-require */
+const { run, runInstall } = require('../../utils/test-utils');
+
+jest.setTimeout(1000 * 60 * 5);
+
+describe('entry point', () => {
+    it('should support SCSS files', async () => {
+        await runInstall(__dirname);
+        const { stdout } = run(__dirname);
+        expect(stdout).toBeTruthy();
+        expect(stdout).toContain('home.scss');
+        expect(stdout).toContain('home.js');
+    });
+});
diff --git a/test/entry/scss/webpack.config.js b/test/entry/scss/webpack.config.js
@@ -0,0 +1,30 @@
+/* eslint-disable   node/no-missing-require */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+    mode: 'production',
+    entry: {
+        home: ['./home.js', './home.scss'],
+    },
+    output: {
+        filename: '[name].js',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: [
+                    // fallback to style-loader in development
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'sass-loader',
+                ],
+            },
+        ],
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+        }),
+    ],
+};
diff --git a/test/typescript/.gitignore b/test/typescript/.gitignore
@@ -1,5 +1,3 @@
 yarn.lock
 package-lock.json
 node_modules/
-*.js
-*.js.map
diff --git a/test/typescript/typescript.test.js b/test/typescript/typescript.test.js
@@ -1,17 +1,24 @@
-// eslint-disable-next-line node/no-unpublished-require
+/* eslint-disable   node/no-missing-require */
+/* eslint-disable   node/no-unpublished-require */
 const { run, runInstall } = require('../utils/test-utils');
 const { stat } = require('fs');
 const { resolve } = require('path');
 
+jest.setTimeout(1000 * 60 * 5);
+
 describe('webpack cli', () => {
-    it('should support typescript file', async () => {
-        await runInstall(__dirname);
-        const { stderr, stdout } = run(__dirname, ['-c', './webpack.config.ts']);
-        expect(stderr).toBeFalsy();
-        expect(stdout).toBeTruthy();
-        stat(resolve(__dirname, 'bin/foo.bundle.js'), (err, stats) => {
-            expect(err).toBe(null);
-            expect(stats.isFile()).toBe(true);
-        });
-    });
+    it(
+        'should support typescript file',
+        async () => {
+            await runInstall(__dirname);
+            const { stderr, stdout } = run(__dirname, ['-c', './webpack.config.ts']);
+            expect(stderr).toBeFalsy();
+            expect(stdout).toBeTruthy();
+            stat(resolve(__dirname, 'bin/foo.bundle.js'), (err, stats) => {
+                expect(err).toBe(null);
+                expect(stats.isFile()).toBe(true);
+            });
+        },
+        1000 * 60 * 5,
+    );
 });
diff --git a/yarn.lock b/yarn.lock
@@ -7984,7 +7984,20 @@ jest-validate@^25.1.0:
     leven "^3.1.0"
     pretty-format "^25.1.0"
 
-jest-watcher@^24.9.0:
+jest-watch-typeahead@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.2.tgz#e5be959698a7fa2302229a5082c488c3c8780a4a"
+  integrity sha512-f7VpLebTdaXs81rg/oj4Vg/ObZy2QtGzAmGLNsqUS5G5KtSN68tFcIsbvNODfNyQxU78g7D8x77o3bgfBTR+2Q==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^2.4.1"
+    jest-regex-util "^24.9.0"
+    jest-watcher "^24.3.0"
+    slash "^3.0.0"
+    string-length "^3.1.0"
+    strip-ansi "^5.0.0"
+
+jest-watcher@^24.3.0, jest-watcher@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
   integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+yarn.lock`
	`2`	`+package-lock.json`
	`3`	`+node_modules/`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +body {
 +    font-size: 100%;
 +    body {
 +        background-color: red;
 +    }
 +}