diff --git a/examples/typescript/src/pages/Home/my.worker.ts b/examples/typescript/src/pages/Home/my.worker.ts index 41d39ffcd..387569ee4 100644 --- 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 index b9ce8a29f..49fc333c4 100644 --- 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 index 6f3c4fd13..291c66789 100644 --- a/packages/webpack-config-anansi/src/base/index.js +++ b/packages/webpack-config-anansi/src/base/index.js @@ -100,43 +100,8 @@ 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'), @@ -144,6 +109,42 @@ export default function makeBaseConfig({ 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 index 71d900f2b..4a7530c5a 100644 --- 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 index 527f2d708..56e30b4c3 100644 --- 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 = {