enhance: Use 'oneOf' for loader rules

ntucker · Sep 17, 2021 · 9a91c32 · 9a91c32
1 parent 26a43f1
commit 9a91c32
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 144 deletions.
diff --git a/examples/typescript/src/pages/Home/my.worker.ts b/examples/typescript/src/pages/Home/my.worker.ts
@@ -5,5 +5,5 @@ ctx.postMessage({ foo: 'foo' });
 
 // Respond to message from parent thread
 ctx.addEventListener('message', (event: MessageEventInit) =>
-  event.data.message.toUpperCase(),
+  console.log(event.data.message.toUpperCase()),
 );
diff --git a/packages/webpack-config-anansi/src/base/css.js b/packages/webpack-config-anansi/src/base/css.js
@@ -97,74 +97,77 @@ export default function getStyleRules({
     const globalStyleRegex = new RegExp(`${globalStyleDir}/`);
     excludeCSSProcess.unshift(globalStyleRegex);
   }
-  return [
-    // css modules (local styles)
-    {
-      test: /\.scss$/i,
-      include: [absoluteBasePath, libraryInclude],
-      exclude: excludeCSSProcess,
-      use: [...cssModuleLoaders, ...sassLoaders],
-    },
-    // plain css as css-modules
-    {
-      test: /\.css$/i,
-      include: [absoluteBasePath, libraryInclude],
-      exclude: excludeCSSProcess,
-      use: cssModuleLoaders,
-    },
-    // global styles
-    globalStyleDir !== false && {
-      test: /\.scss$/i,
-      include: [absoluteBasePath],
-      exclude: [
-        /\.module\.scss$/,
-        new RegExp(`^((?!(${globalStyleDir}/|node_modules/)).)*$`),
-      ],
-      use: [...cssLoaders, ...sassLoaders],
-      // Don't consider CSS imports dead code even if the
-      // containing package claims to have no side effects.
-      // Remove this when webpack adds a warning or an error for this.
-      // See https://github.com/webpack/webpack/issues/6571
-      sideEffects: true,
-    },
-    globalStyleDir !== false && {
-      test: /\.module\.scss$/i,
-      include: [absoluteBasePath],
-      exclude: [new RegExp(`^((?!(${globalStyleDir}/|node_modules/)).)*$`)],
-      use: [...cssModuleLoaders, ...sassLoaders],
-    },
-    // css-in-js like linaria do not use css-modules
-    {
-      test: /\.css$/i,
-      include: [rootPath],
-      exclude: [/node_modules/, absoluteBasePath, libraryInclude],
-      use: cssLoaders,
-    },
-    // package css
-    {
-      test: /\.css$/i,
-      include: [/node_modules/],
-      use: cssModuleLoaders.slice(0, -1).map(loader => {
-        if (/($|\/)css-loader/.test(loader.loader)) {
-          return {
-            ...loader,
-            options: {
-              ...loader.options,
-              modules: {
-                ...loader.options.modules,
-                auto: true,
-                ...cssModulesOptions,
+  return {
+    test: /\.s?css$/i,
+    oneOf: [
+      // css modules (local styles)
+      {
+        test: /\.scss$/i,
+        include: [absoluteBasePath, libraryInclude],
+        exclude: excludeCSSProcess,
+        use: [...cssModuleLoaders, ...sassLoaders],
+      },
+      // plain css as css-modules
+      {
+        test: /\.css$/i,
+        include: [absoluteBasePath, libraryInclude],
+        exclude: excludeCSSProcess,
+        use: cssModuleLoaders,
+      },
+      // global styles
+      globalStyleDir !== false && {
+        test: /\.scss$/i,
+        include: [absoluteBasePath],
+        exclude: [
+          /\.module\.scss$/,
+          new RegExp(`^((?!(${globalStyleDir}/|node_modules/)).)*$`),
+        ],
+        use: [...cssLoaders, ...sassLoaders],
+        // Don't consider CSS imports dead code even if the
+        // containing package claims to have no side effects.
+        // Remove this when webpack adds a warning or an error for this.
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
+      },
+      globalStyleDir !== false && {
+        test: /\.module\.scss$/i,
+        include: [absoluteBasePath],
+        exclude: [new RegExp(`^((?!(${globalStyleDir}/|node_modules/)).)*$`)],
+        use: [...cssModuleLoaders, ...sassLoaders],
+      },
+      // css-in-js like linaria do not use css-modules
+      {
+        test: /\.css$/i,
+        include: [rootPath],
+        exclude: [/node_modules/, absoluteBasePath, libraryInclude],
+        use: cssLoaders,
+      },
+      // package css
+      {
+        test: /\.css$/i,
+        include: [/node_modules/],
+        use: cssModuleLoaders.slice(0, -1).map(loader => {
+          if (/($|\/)css-loader/.test(loader.loader)) {
+            return {
+              ...loader,
+              options: {
+                ...loader.options,
+                modules: {
+                  ...loader.options.modules,
+                  auto: true,
+                  ...cssModulesOptions,
+                },
               },
-            },
-          };
-        }
-        return loader;
-      }),
-      // Don't consider CSS imports dead code even if the
-      // containing package claims to have no side effects.
-      // Remove this when webpack adds a warning or an error for this.
-      // See https://github.com/webpack/webpack/issues/6571
-      sideEffects: true,
-    },
-  ].filter(rule => rule);
+            };
+          }
+          return loader;
+        }),
+        // Don't consider CSS imports dead code even if the
+        // containing package claims to have no side effects.
+        // Remove this when webpack adds a warning or an error for this.
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
+      },
+    ].filter(rule => rule),
+  };
 }
diff --git a/packages/webpack-config-anansi/src/base/index.js b/packages/webpack-config-anansi/src/base/index.js
@@ -100,50 +100,51 @@ export default function makeBaseConfig({
     ],
     module: {
       rules: [
-        {
-          test: /\.worker\.(t|j)s$/,
-          use: [
-            generateBabelLoader({
-              rootPath,
-              babelRoot,
-              target: argv?.target,
-              mode,
-              babelLoaderOptions,
-              noHotReload: true,
-            }),
-            {
-              loader: require.resolve('worker-loader'),
-              options: { inline: 'fallback' },
-            },
-          ],
-          include: [
-            new RegExp(basePath),
-            path.join(rootPath, 'stories'),
-            /.storybook/,
-            libraryInclude,
-          ],
-          exclude: libraryExclude,
-        },
         {
           test: /\.(t|j)sx?$/,
-          use: [
-            require.resolve('thread-loader'),
-            generateBabelLoader({
-              rootPath,
-              babelRoot,
-              target: argv?.target,
-              mode,
-              babelLoaderOptions,
-            }),
-            ...extraJsLoaders,
-          ],
           include: [
             new RegExp(basePath),
             path.join(rootPath, 'stories'),
             /.storybook/,
             libraryInclude,
           ],
           exclude: libraryExclude,
+          oneOf: [
+            {
+              test: /\.worker\.(t|j)s$/,
+              use: [
+                {
+                  loader: require.resolve('worker-loader'),
+                  options: {
+                    inline: 'fallback',
+                    filename: '[name].[contenthash].js',
+                  },
+                },
+                generateBabelLoader({
+                  rootPath,
+                  babelRoot,
+                  target: argv?.target,
+                  mode,
+                  babelLoaderOptions,
+                  noHotReload: true,
+                }),
+              ],
+            },
+            {
+              test: /\.(t|j)sx?$/,
+              use: [
+                require.resolve('thread-loader'),
+                generateBabelLoader({
+                  rootPath,
+                  babelRoot,
+                  target: argv?.target,
+                  mode,
+                  babelLoaderOptions,
+                }),
+                ...extraJsLoaders,
+              ],
+            },
+          ],
         },
         {
           test: /\.html$/,
@@ -155,50 +156,50 @@ export default function makeBaseConfig({
         },
         {
           test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: /\.(j|t)sx?$/,
-          use: [
+          oneOf: [
             {
-              loader: require.resolve('@svgr/webpack'),
-              options: {
-                svgoConfig: {
-                  plugins: [
-                    { removeTitle: false },
-                    { removeComments: true },
-                    { removeDesc: true },
-                    { removeUselessDefs: true },
-                    { removeDoctype: true },
-                    { removeMetadata: true },
-                    { convertColors: true },
-                    { removeViewBox: false },
-                    { convertShapeToPath: false },
-                  ],
+              issuer: /\.(j|t)sx?$/,
+              use: [
+                {
+                  loader: require.resolve('@svgr/webpack'),
+                  options: {
+                    svgoConfig: {
+                      plugins: [
+                        { removeTitle: false },
+                        { removeComments: true },
+                        { removeDesc: true },
+                        { removeUselessDefs: true },
+                        { removeDoctype: true },
+                        { removeMetadata: true },
+                        { convertColors: true },
+                        { removeViewBox: false },
+                        { convertShapeToPath: false },
+                      ],
+                    },
+                    ...svgrOptions,
+                  },
                 },
-                ...svgrOptions,
-              },
+                {
+                  loader: require.resolve('file-loader'),
+                  options: {
+                    name: nohash
+                      ? '[name].[ext]'
+                      : mode === 'production'
+                      ? '[name].[contenthash].[ext]'
+                      : '[path][contenthash].[ext]',
+                  },
+                },
+              ],
+              type: 'javascript/auto',
             },
+            // for non-js files always use file-loader
             {
-              loader: require.resolve('file-loader'),
-              options: {
-                name: nohash
-                  ? '[name].[ext]'
-                  : mode === 'production'
-                  ? '[name].[contenthash].[ext]'
-                  : '[path][contenthash].[ext]',
+              type: 'asset',
+              generator: {
+                emit: !argv?.target?.includes?.('node'),
               },
             },
           ],
-          type: 'javascript/auto',
-        },
-        // for non-js files always use file-loader
-        {
-          test: /\.(svg)(\?v=\d+\.\d+\.\d+)?$/,
-          issuer: {
-            not: [/\.(j|t)sx?$/],
-          },
-          type: 'asset',
-          generator: {
-            emit: !argv?.target?.includes?.('node'),
-          },
         },
         {
           test: /\.(apng|png|jpg|gif|ico|webp|avif|cur|ani|otf|eot|woff2|woff|ttf)(\?v=\d+\.\d+\.\d+)?$/,

diff --git a/packages/webpack-config-anansi/src/nobuild.js b/packages/webpack-config-anansi/src/nobuild.js
@@ -23,6 +23,6 @@ export default function makeNobuildConfig(
     cssModulesOptions,
     globalStyleDir,
   });
-  config.module.rules = [...config.module.rules, ...styleRules];
+  config.module.rules = [...config.module.rules, styleRules];
   return config;
 }
diff --git a/packages/webpack-config-anansi/src/prod.js b/packages/webpack-config-anansi/src/prod.js
@@ -170,7 +170,7 @@ export default function makeProdConfig(
     globalStyleDir,
     target: argv?.target,
   });
-  config.module.rules = [...config.module.rules, ...styleRules];
+  config.module.rules = [...config.module.rules, styleRules];
 
   if (env?.profile) {
     config.resolve.alias = {