fix(webpack-config): update postcss [security] (#5314)

Adapt breaking changes for css-loader 6&7.
For version 6: file-loader and url-loader are deprecated, migrate on asset modules. More details
For version 7: The modules.namedExport option is true by default if you enable the esModule option. More details. This change impacts how CSS files are imported when using CSS Modules. Need update the modules config to keep the old behaviors. If not using CSS modules no changes required.

.changeset/spicy-bananas-report.md

@@ -0,0 +1,8 @@
+---
+"@talend/scripts-config-react-webpack": patch
+"@talend/storybook-docs": patch
+"@talend/icons": patch
+"@talend/bootstrap-theme": patch
+---
+
+fix: update postcss

package.json

@@ -38,6 +38,7 @@
     "prepare": "husky install"
   },
   "resolutions": {
+    "**/axios": "0.28.0",
     "**/ace-builds": "1.10.1",
     "**/cypress": "^13.6.0",
     "**/@types/react": "^18.2.7",

packages/design-system/src/components/Button/Button.tsx

@@ -1,10 +1,10 @@
 import { forwardRef, Ref } from 'react';
 
+import { AvailableSizes, ButtonVariantType } from './Primitive/ButtonPrimitive';
+import ButtonDestructive, { ButtonDestructivePropsType } from './variations/ButtonDestructive';
 import { ButtonPrimary, ButtonPrimaryPropsType } from './variations/ButtonPrimary';
 import ButtonSecondary, { ButtonSecondaryPropsType } from './variations/ButtonSecondary';
 import ButtonTertiary, { ButtonTertiaryPropsType } from './variations/ButtonTertiary';
-import ButtonDestructive, { ButtonDestructivePropsType } from './variations/ButtonDestructive';
-import { AvailableSizes, ButtonVariantType } from './Primitive/ButtonPrimitive';
 
 type Primary<S extends AvailableSizes> = ButtonVariantType<'primary', ButtonPrimaryPropsType<S>>;
 type Secondary<S extends AvailableSizes> = ButtonVariantType<

packages/design-system/src/components/Button/variations/ButtonPrimary.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, Ref } from 'react';
+
 import ButtonPrimitive, { AvailableSizes, BaseButtonProps } from '../Primitive/ButtonPrimitive';
 
 import styles from './ButtonPrimary.module.scss';

packages/icons/package.json

@@ -73,7 +73,7 @@
     "@talend/design-tokens": "^3.4.1",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^4.3.0",
+    "css-loader": "^7.1.2",
     "mini-css-extract-plugin": "^2.9.0",
     "mkdirp": "^1.0.4",
     "prettier": "^3.3.2",
@@ -82,7 +82,6 @@
     "string-replace-loader": "^2.3.0",
     "style-loader": "^1.3.0",
     "svgo": "^1.3.2",
-    "url-loader": "^4.1.1",
     "webfonts-loader": "^8.0.1",
     "webpack": "^5.92.0",
     "webpack-cli": "^4.10.0"

packages/icons/webpack.config.js

@@ -44,7 +44,7 @@ module.exports = {
 			},
 			{
 				test: /\.(woff|eot|ttf|svg)$/,
-				loader: require.resolve('url-loader'),
+				type: 'asset/resource',
 			},
 		],
 	},

packages/storybook-docs/package.json

@@ -46,9 +46,9 @@
     "@types/node": "^6.14.13",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "css-loader": "^4.3.0",
+    "css-loader": "^7.1.1",
     "mini-css-extract-plugin": "^2.9.0",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.1.1",
     "resolve-url-loader": "^5.0.0",
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",

packages/theme/package.json

@@ -37,12 +37,11 @@
     "@talend/scripts-core": "^16.5.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "css-loader": "^4.3.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^7.1.1",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^7.8.3",
     "rimraf": "^5.0.7",
     "sass": "^1.77.8",

packages/theme/webpack.config.js

@@ -23,16 +23,10 @@ module.exports = (env, argv) => {
 			rules: [
 				{
 					test: /\.woff(2)?(\?[a-z0-9=&.]+)?$/,
-					use: [
-						{
-							loader: require.resolve('file-loader'),
-							options: {
-								outputPath: 'fonts',
-								name: '[name].[ext]',
-								esModule: false,
-							},
-						},
-					],
+					type: 'asset/resource',
+					generator: {
+						filename: 'fonts/[name][ext]',
+					},
 				},
 				{
 					test: /bootstrap\.scss$/,

tools/scripts-config-react-webpack/config/webpack.config.common.js

@@ -34,6 +34,8 @@ function getCommonStyleLoaders(enableModules, isEnvDevelopmentServe) {
 		cssOptions = {
 			sourceMap,
 			modules: {
+				namedExport: false,
+				exportLocalsConvention: 'as-is',
 				localIdentName: '[name]__[local]___[hash:base64:5]',
 			},
 			importLoaders: 1,

tools/scripts-config-react-webpack/package.json

@@ -35,14 +35,13 @@
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "core-js-bundle": "^3.37.1",
-    "css-loader": "^4.3.0",
-    "file-loader": "^6.2.0",
+    "css-loader": "^7.1.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-plugin": "^5.6.0",
     "inspectpack": "^4.7.1",
     "mini-css-extract-plugin": "^2.9.0",
     "postcss": "^8.4.38",
-    "postcss-loader": "^7.3.4",
+    "postcss-loader": "^8.1.1",
     "postcss-safe-parser": "^6.0.0",
     "regenerator-runtime": "^0.13.11",
     "resolve-url-loader": "^5.0.0",
@@ -55,7 +54,6 @@
     "terser-webpack-plugin": "^5.3.10",
     "tmp": "^0.2.3",
     "url": "^0.11.3",
-    "url-loader": "^4.1.1",
     "webpack": "^5.92.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^4.10.0",