[Snyk] Security upgrade webpack from 5.76.1 to 5.94.0 (#1703)

* fix: examples/webpack/package.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-WEBPACK-7840298

* Fix type errors

* Add changeset

* Fix another type error

* Fix tests failing

* Try to move yarn run v1.22.21
$ jest --no-cache
jest-haste-map: duplicate manual mock found: cache
  The following files share their name; please delete one of them:
    * <rootDir>/packages/babel-plugin/dist/utils/__mocks__/cache.js
    * <rootDir>/packages/babel-plugin/src/utils/__mocks__/cache.ts

Done in 26.38s. after bundle size

* Increase size limit by 2 bytes to make CI happy

---------

Co-authored-by: snyk-bot <[email protected]>
Co-authored-by: Grant Wong <[email protected]>

Author: 3 people

.changeset/mighty-squids-turn.md

@@ -0,0 +1,5 @@
+---
+'@compiled/webpack-loader': patch
+---
+
+When parsing the Webpack config `rules` option, also handle the situation where a rule might be falsy (null, undefined, 0, "")

.github/workflows/test.yml

@@ -43,9 +43,6 @@ jobs:
       - name: Validate
         run: yarn lint
 
-      - name: Run tests
-        run: yarn test:cover --ci
-
       - name: Check prettier
         run: yarn prettier:check
 
@@ -60,6 +57,11 @@ jobs:
       - name: Build source for remainder tests
         run: yarn build
 
+        # Needs to run after `yarn build` so that `packages/webpack-loader/`
+        # tests can resolve `@compiled/react/runtime` correctly.
+      - name: Run tests
+        run: yarn test:cover --ci
+
       - name: Run import test
         run: yarn test:imports
 

examples/webpack/package.json

@@ -19,7 +19,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "style-loader": "^3.3.2",
-    "webpack": "^5.76.1",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.0.1"
   }
 }

package.json

@@ -144,7 +144,7 @@
     },
     {
       "path": "./packages/react/dist/browser/runtime/style.js",
-      "limit": "480B",
+      "limit": "482B",
       "import": "CS",
       "ignore": [
         "react"

packages/parcel-transformer/src/utils.ts

@@ -8,6 +8,8 @@ import type { ParcelTransformerOpts } from './types';
 
 export function createDefaultResolver(config: ParcelTransformerOpts): Resolver {
   const resolver = ResolverFactory.createResolver({
+    // @ts-expect-error - enhanced-resolve CachedInputFileSystem types are not
+    // compatible with @types/node fs types
     fileSystem: new CachedInputFileSystem(fs, 4000),
     ...(config.extensions && {
       extensions: config.extensions,

packages/webpack-loader/src/create-default-resolver.ts

@@ -14,8 +14,12 @@ export function createDefaultResolver({ resolveOptions, webpackResolveOptions }:
   // Setup the default resolver, where webpack will merge any passed in options with the default
   // resolve configuration. Ideally, we use this.getResolve({ ...resolve, useSyncFileSystemCalls: true, })
   // However, it does not work correctly when in development mode :/
+
+  // @ts-expect-error - enhanced-resolve CachedInputFileSystem types are not
+  // compatible with @types/node fs types
   const resolver = ResolverFactory.createResolver({
-    // @ts-expect-error
+    // @ts-expect-error - enhanced-resolve CachedInputFileSystem types are not
+    // compatible with @types/node fs types
     fileSystem: new CachedInputFileSystem(fs, 4000),
     ...(webpackResolveOptions ?? {}),
     ...resolveOptions,

packages/webpack-loader/src/utils.ts

@@ -1,4 +1,10 @@
-import type { Compilation as CompilationType, Compiler, sources, RuleSetRule } from 'webpack';
+import type {
+  Compilation as CompilationType,
+  Compiler,
+  sources,
+  RuleSetRule,
+  WebpackOptionsNormalized,
+} from 'webpack';
 
 /**
  * Helper function to set plugin configured option on the @compiled/webpack-loader
@@ -13,6 +19,7 @@ const setOptionOnCompiledWebpackLoader = (use: RuleSetRule['use'], pluginName: s
 
   for (const nestedUse of use) {
     if (
+      nestedUse &&
       typeof nestedUse === 'object' &&
       (nestedUse.loader === '@compiled/webpack-loader' ||
         nestedUse.loader?.includes('/node_modules/@compiled/webpack-loader'))
@@ -34,15 +41,21 @@ const setOptionOnCompiledWebpackLoader = (use: RuleSetRule['use'], pluginName: s
  * @returns
  */
 export const setPluginConfiguredOption = (
-  rules: (RuleSetRule | '...')[],
+  rules: WebpackOptionsNormalized['module']['rules'],
   pluginName: string
 ): void => {
   for (const r of rules) {
+    if (!r) {
+      continue;
+    }
+
     const rule = r as RuleSetRule;
     const nestedRules = rule.oneOf ?? rule.rules;
     if (nestedRules) {
       for (const nestedRule of nestedRules) {
-        setOptionOnCompiledWebpackLoader(nestedRule.use, pluginName);
+        if (nestedRule) {
+          setOptionOnCompiledWebpackLoader(nestedRule.use, pluginName);
+        }
       }
     } else {
       setOptionOnCompiledWebpackLoader(rule.use, pluginName);