chore(web): remove install and build warnings (#7343)

e2e/react/src/react-package.test.ts

@@ -109,20 +109,14 @@ describe('Build React libraries and apps', () => {
       /*
        * 1. Without dependencies
        */
-      const childLibOutput = runCLI(`build ${childLib}`)
+      runCLI(`build ${childLib}`);
-        // FIX for windows and OSX where output names might get broken to multipleline
+      runCLI(`build ${childLib2}`);
-        .replace(/\s\s\s││\s\s\s/gm, '');
-      const childLib2Output = runCLI(`build ${childLib2}`)
-        // FIX for windows and OSX where output names might get broken to multipleline
-        .replace(/\s\s\s││\s\s\s/gm, '');
 
       checkFilesExist(`dist/libs/${childLib}/${childLib}.esm.js`);
       checkFilesExist(`dist/libs/${childLib}/${childLib}.umd.js`);
-      expect(childLibOutput).toContain(`Bundle complete: ${childLib}`);
 
       checkFilesExist(`dist/libs/${childLib2}/${childLib2}.esm.js`);
       checkFilesExist(`dist/libs/${childLib2}/${childLib2}.umd.js`);
-      expect(childLib2Output).toContain(`Bundle complete: ${childLib2}`);
 
       checkFilesExist(`dist/libs/${childLib}/assets/hello.txt`);
       checkFilesExist(`dist/libs/${childLib2}/README.md`);
@@ -130,13 +124,10 @@ describe('Build React libraries and apps', () => {
       /*
        * 2. With dependencies
        */
-      let parentLibOutput = runCLI(`build ${parentLib}`)
+      runCLI(`build ${parentLib}`);
-        // FIX for windows and OSX where output names might get broken to multipleline
-        .replace(/\s\s\s││\s\s\s/gm, '');
 
       checkFilesExist(`dist/libs/${parentLib}/${parentLib}.esm.js`);
       checkFilesExist(`dist/libs/${parentLib}/${parentLib}.umd.js`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${parentLib}`);
 
       const jsonFile = readJson(`dist/libs/${parentLib}/package.json`);
       expect(jsonFile.peerDependencies).toEqual(
@@ -151,13 +142,11 @@ describe('Build React libraries and apps', () => {
        */
       rmDist();
 
-      parentLibOutput = runCLI(
+      runCLI(`build ${parentLib} --with-deps --skip-nx-cache`);
-        `build ${parentLib} --with-deps --skip-nx-cache`
-      ).replace(/\s\s\s││\s\s\s/gm, '');
 
-      expect(parentLibOutput).toContain(`Bundle complete: ${parentLib}`);
+      checkFilesExist(`dist/libs/${parentLib}/${parentLib}.esm.js`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${childLib}`);
+      checkFilesExist(`dist/libs/${childLib}/${childLib}.esm.js`);
-      expect(parentLibOutput).toContain(`Bundle complete: ${childLib2}`);
+      checkFilesExist(`dist/libs/${childLib2}/${childLib2}.esm.js`);
     });
 
     it('should support --format option', () => {

e2e/react/src/react.test.ts

@@ -70,7 +70,7 @@ describe('React Applications', () => {
     const libTestResults = await runCLIAsync(
       `build ${libName} --no-extract-css`
     );
-    expect(libTestResults.stdout).toContain(`Bundle complete: ${libName}`);
+    expect(libTestResults.stdout).toMatch(/Done in \d+\.\d+s/);
 
     checkFilesExist(
       `dist/libs/${libName}/package.json`,

package.json

@@ -145,7 +145,7 @@
     "eslint-plugin-react": "7.23.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "express": "4.17.1",
-    "file-loader": "4.2.0",
+    "file-loader": "^6.2.0",
     "file-type": "^16.2.0",
     "flat": "^5.0.2",
     "fork-ts-checker-webpack-plugin": "6.2.10",
@@ -174,7 +174,7 @@
     "karma-webpack": "4.0.2",
     "kill-port": "^1.6.1",
     "less": "3.12.2",
-    "less-loader": "5.0.0",
+    "less-loader": "^10.1.0",
     "license-webpack-plugin": "2.3.15",
     "loader-utils": "1.2.3",
     "memfs": "^3.0.1",
@@ -198,7 +198,7 @@
     "prettier": "2.3.2",
     "pretty-quick": "^3.1.0",
     "protractor": "5.4.3",
-    "raw-loader": "3.1.0",
+    "raw-loader": "^4.0.2",
     "react-redux": "7.2.3",
     "react-refresh": "^0.10.0",
     "react-router-dom": "5.1.2",
@@ -206,23 +206,22 @@
     "release-it": "^14.11.3",
     "rollup": "^2.56.2",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.30.0",
     "rxjs": "6.6.7",
     "rxjs-for-await": "0.0.2",
     "sass": "^1.42.1",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^12.2.0",
     "semver": "7.3.4",
     "source-map": "0.7.3",
     "source-map-loader": "^3.0.0",
     "source-map-support": "0.5.19",
     "strip-json-comments": "^3.1.1",
-    "style-loader": "1.0.0",
+    "style-loader": "^3.3.0",
     "styled-components": "5.0.0",
     "stylus": "0.54.5",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "^6.2.0",
     "tailwindcss": "^2.2.7",
     "tcp-port-used": "^1.0.2",
     "terser": "4.3.8",
@@ -242,7 +241,7 @@
     "typedoc-plugin-markdown": "^3.10.3",
     "typescript": "~4.3.5",
     "unzipper": "^0.10.11",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
     "verdaccio": "^5.0.4",
     "webpack-dev-server": "^4.3.1",
     "webpack-sources": "^3.0.2",

packages/next/package.json

@@ -45,7 +45,7 @@
     "chalk": "4.1.0",
     "eslint-config-next": "^11.1.2",
     "fs-extra": "^9.1.0",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
     "tsconfig-paths": "^3.9.0",
     "ts-node": "~9.1.1",
     "webpack-merge": "^5.8.0"

packages/react/package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "react-refresh": "^0.10.0",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.1",
     "webpack": "^5.58.1",
     "webpack-merge": "^5.8.0",
     "@storybook/node-logger": "6.1.20",

packages/web/package.json

@@ -48,11 +48,12 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "autoprefixer": "^10.2.5",
-    "babel-loader": "8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-const-enum": "^1.0.1",
     "babel-plugin-macros": "^2.8.0",
     "babel-plugin-transform-async-to-promises": "^0.8.15",
     "babel-plugin-transform-typescript-metadata": "^0.3.1",
+    "bytes": "^3.1.0",
     "browserslist": "^4.16.6",
     "caniuse-lite": "^1.0.30001251",
     "chalk": "4.1.0",
@@ -61,14 +62,14 @@
     "react-refresh": "^0.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "core-js": "^3.6.5",
-    "css-loader": "3.6.0",
+    "css-loader": "^6.4.0",
     "css-minimizer-webpack-plugin": "^3.1.1",
-    "file-loader": "4.2.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "6.2.10",
     "fs-extra": "^9.1.0",
     "identity-obj-proxy": "3.0.0",
     "less": "3.12.2",
-    "less-loader": "5.0.0",
+    "less-loader": "^10.1.0",
     "license-webpack-plugin": "2.3.15",
     "loader-utils": "1.2.3",
     "mini-css-extract-plugin": "^2.1.0",
@@ -77,25 +78,24 @@
     "open": "^7.4.2",
     "postcss": "8.3.0",
     "postcss-import": "14.0.2",
-    "postcss-loader": "4.2.0",
+    "postcss-loader": "^6.1.1",
-    "raw-loader": "3.1.0",
+    "raw-loader": "^4.0.2",
     "rxjs": "^6.5.4",
     "rxjs-for-await": "0.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.56.2",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-typescript2": "^0.30.0",
     "sass": "^1.42.1",
-    "sass-loader": "8.0.2",
+    "sass-loader": "^12.2.0",
     "semver": "7.3.4",
     "source-map": "0.7.3",
     "source-map-loader": "^3.0.0",
-    "style-loader": "1.0.0",
+    "style-loader": "^3.3.0",
     "stylus": "0.54.5",
-    "stylus-loader": "3.0.2",
+    "stylus-loader": "^6.2.0",
     "terser": "4.3.8",
     "terser-webpack-plugin": "^5.1.1",
     "ts-loader": "^9.2.6",

packages/web/src/executors/package/lib/analyze-plugin.ts

@@ -0,0 +1,22 @@
+import * as chalk from 'chalk';
+import { logger } from '@nrwl/devkit';
+
+const formatBytes = (bytes) => {
+  if (bytes === 0) return '0 Byte';
+  const k = 1000;
+  const dm = 3;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+export function analyze() {
+  return {
+    name: 'rollup-plugin-nx-analyzer',
+    renderChunk(source, chunk) {
+      const sourceBytes = formatBytes(source.length);
+      const fileName = chunk.fileName;
+      logger.info(`  ${chalk.bold(fileName)} ${chalk.cyan(sourceBytes)}`);
+    },
+  };
+}

packages/web/src/executors/package/package.impl.ts

@@ -27,6 +27,7 @@ import {
   NormalizedWebPackageOptions,
   normalizePackageOptions,
 } from './lib/normalize';
+import { analyze } from './lib/analyze-plugin';
 
 // These use require because the ES import isn't correct.
 const commonjs = require('@rollup/plugin-commonjs');
@@ -35,7 +36,6 @@ const image = require('@rollup/plugin-image');
 const json = require('@rollup/plugin-json');
 const copy = require('rollup-plugin-copy');
 const postcss = require('rollup-plugin-postcss');
-const filesize = require('rollup-plugin-filesize');
 
 const fileExtensions = ['.js', '.jsx', '.ts', '.tsx'];
 
@@ -114,6 +114,8 @@ export default async function* run(
       deleteOutputDir(context.root, options.outputPath);
     }
 
+    const start = process.hrtime.bigint();
+
     return from(rollupOptions)
       .pipe(
         concatMap((opts) =>
@@ -121,26 +123,31 @@ export default async function* run(
             catchError((e) => {
               logger.error(`Error during bundle: ${e}`);
               return of({ success: false });
-            }),
-            last(),
-            tap({
-              next: (result) => {
-                if (result.success) {
-                  updatePackageJson(
-                    options,
-                    context,
-                    target,
-                    dependencies,
-                    packageJson
-                  );
-                  logger.info(`Bundle complete: ${context.projectName}`);
-                } else {
-                  logger.error(`Bundle failed: ${context.projectName}`);
-                }
-              },
             })
           )
-        )
+        ),
+        last(),
+        tap({
+          next: (result) => {
+            if (result.success) {
+              const end = process.hrtime.bigint();
+              const duration = `${(Number(end - start) / 1_000_000_000).toFixed(
+                2
+              )}s`;
+
+              updatePackageJson(
+                options,
+                context,
+                target,
+                dependencies,
+                packageJson
+              );
+              logger.info(`⚡ Done in ${duration}`);
+            } else {
+              logger.error(`Bundle failed: ${context.projectName}`);
+            }
+          },
+        })
       )
       .toPromise();
   }
@@ -209,7 +216,7 @@ export function createRollupOptions(
         ].filter(Boolean),
       }),
       commonjs(),
-      filesize(),
+      analyze(),
       json(),
     ];
 

packages/web/src/utils/third-party/cli-files/models/webpack-configs/styles.ts

@@ -153,8 +153,10 @@ export function getStylesConfig(
           loader: require.resolve('less-loader'),
           options: {
             sourceMap: cssSourceMap,
-            javascriptEnabled: true,
+            lessOptions: {
-            ...lessPathOptions,
+              javascriptEnabled: true,
+              ...lessPathOptions,
+            },
           },
         },
       ],
@@ -166,7 +168,9 @@ export function getStylesConfig(
           loader: require.resolve('stylus-loader'),
           options: {
             sourceMap: cssSourceMap,
-            paths: includePaths,
+            stylusOptions: {
+              include: includePaths,
+            },
           },
         },
       ],

packages/web/src/utils/web.config.ts

@@ -258,7 +258,9 @@ export function getStylesPartial(
             {
               loader: require.resolve('less-loader'),
               options: {
-                paths: includePaths,
+                lessOptions: {
+                  paths: includePaths,
+                },
               },
             },
           ],
@@ -270,7 +272,9 @@ export function getStylesPartial(
             {
               loader: require.resolve('stylus-loader'),
               options: {
-                paths: includePaths,
+                stylusOptions: {
+                  include: includePaths,
+                },
               },
             },
           ],

yarn.lock

@@ -16799,6 +16799,13 @@ less-loader@5.0.0:
     loader-utils "^1.1.0"
     pify "^4.0.1"
 
+less-loader@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-10.1.0.tgz#4379bdff409d1eef36c4cb50611b8944a27659b2"
+  integrity sha512-Xz5e/YLoLmdWFu7XzzA6LVX8a2+6onDz5LJb8oLWAkOnIZ5Hjcpe+nf+Sta6UgEoIMfzWVrR3XlIVfPeZDb10A==
+  dependencies:
+    klona "^2.0.4"
+
 less@3.12.2:
   version "3.12.2"
   resolved "https://registry.yarnpkg.com/less/-/less-3.12.2.tgz#157e6dd32a68869df8859314ad38e70211af3ab4"
@@ -22522,6 +22529,14 @@ sass-loader@^10.1.0:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
+sass-loader@^12.2.0:
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.2.0.tgz#b370010fb0ababae2ef9c6c89e05d6c6debc6042"
+  integrity sha512-qducnp5vSV+8A8MZxuH6zV0MUg4MOVISScl2wDTCAn/2WJX+9Auxh92O/rnkdR2bvi5QxZBafnzkzRrWGZvm7w==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
 sass@1.36.0:
   version "1.36.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.36.0.tgz#5912ef9d5d16714171ba11cb17edb274c4bbc07e"
@@ -23728,6 +23743,11 @@ style-loader@^1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+style-loader@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.0.tgz#d66ea95fc50b22f8b79b69a9e414760fcf58d8d8"
+  integrity sha512-szANub7ksJtQioJYtpbWwh1hUl99uK15n5HDlikeCRil/zYMZgSxucHddyF/4A3qJMUiAjPhFowrrQuNMA7jwQ==
+
 style-to-object@0.3.0, style-to-object@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
@@ -23801,6 +23821,15 @@ stylus-loader@6.1.0:
     klona "^2.0.4"
     normalize-path "^3.0.0"
 
+stylus-loader@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/stylus-loader/-/stylus-loader-6.2.0.tgz#0ba499e744e7fb9d9b3977784c8639728a7ced8c"
+  integrity sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==
+  dependencies:
+    fast-glob "^3.2.7"
+    klona "^2.0.4"
+    normalize-path "^3.0.0"
+
 stylus@0.54.5:
   version "0.54.5"
   resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79"