Upgrade Webpack & Sass

package.json

@@ -21,24 +21,24 @@
     "test-coverage": "jest --config=jest/config.js --silent --coverage --coverageReporters text-summary",
     "test-cypress": "node_modules/.bin/cypress open --e2e --config-file ./cypress/cypress.config.ts --env openshift=true",
     "test-cypress-headless": "node --max-old-space-size=4096 node_modules/.bin/cypress run --e2e --config-file ./cypress/cypress.config.ts --env openshift=true --browser ${BRIDGE_E2E_BROWSER_NAME:=chrome} --headless",
-    "build:generate": "yarn clean-${PLUGIN} && tsm ./scripts/versionCheck.mts --plugin ${PLUGIN} && tsm ./scripts/generatePluginPackage.mts --plugin ${PLUGIN}",
-    "build:plugin": "yarn build:generate && NODE_OPTIONS='--max-old-space-size=4096' yarn ts-node node_modules/.bin/webpack -c ./webpack.config.ts",
+    "build:generate": "yarn clean-${PLUGIN} && tsx ./scripts/versionCheck.mts --plugin ${PLUGIN} && tsx ./scripts/generatePluginPackage.mts --plugin ${PLUGIN}",
+    "build:plugin": "yarn build:generate && NODE_OPTIONS='--max-old-space-size=4096' yarn tsx node_modules/.bin/webpack -c ./webpack.config.ts",
     "build": "NODE_ENV=production PLUGIN=odf I8N_NS=plugin__odf-console yarn build:plugin",
     "build-mco": "NODE_ENV=production PLUGIN=mco I8N_NS=plugin__odf-multicluster-console yarn build:plugin",
     "build-client": "NODE_ENV=production PLUGIN=client I8N_NS=plugin__odf-client-console yarn build:plugin",
     "build-dev": "NODE_ENV=development PLUGIN=odf I8N_NS=plugin__odf-console yarn build:plugin",
-    "server:plugin": "yarn build:generate && I8N_NS=${I8N_NS} yarn ts-node ./node_modules/.bin/webpack serve -c ./webpack.config.ts --progress",
-    "analyze-common": "yarn build:generate && NODE_ENV=production I8N_NS=${I8N_NS} ANALYZE_BUNDLE=true yarn ts-node ./node_modules/.bin/webpack -c ./webpack.config.ts",
-    "analyze-odf": "PLUGIN=odf yarn analyze-common && PLUGIN=odf yarn ts-node ./analyzeTest.ts",
-    "analyze-mco": "PLUGIN=mco yarn analyze-common && PLUGIN=mco yarn ts-node ./analyzeTest.ts",
-    "analyze-client": "PLUGIN=client yarn analyze-common && PLUGIN=client yarn ts-node ./analyzeTest.ts",
+    "server:plugin": "yarn build:generate && I8N_NS=${I8N_NS} yarn tsx ./node_modules/.bin/webpack serve -c ./webpack.config.ts --progress",
+    "analyze-common": "yarn build:generate && NODE_ENV=production I8N_NS=${I8N_NS} ANALYZE_BUNDLE=true yarn tsx ./node_modules/.bin/webpack -c ./webpack.config.ts",
+    "analyze-odf": "PLUGIN=odf yarn analyze-common && PLUGIN=odf yarn tsx ./analyzeTest.ts",
+    "analyze-mco": "PLUGIN=mco yarn analyze-common && PLUGIN=mco yarn tsx ./analyzeTest.ts",
+    "analyze-client": "PLUGIN=client yarn analyze-common && PLUGIN=client yarn tsx ./analyzeTest.ts",
     "dev": "PLUGIN=odf I8N_NS=plugin__odf-console yarn server:plugin",
     "dev:no-type-check": "DEV_NO_TYPE_CHECK=true yarn dev",
     "dev-mco": "PLUGIN=mco I8N_NS=plugin__odf-multicluster-console yarn server:plugin",
     "dev-client": "PLUGIN=client I8N_NS=plugin__odf-client-console yarn server:plugin",
     "serve-local-build": "./http-server.sh ./plugins/odf/dist",
+    "serve-local-build:c": "yarn ocp-console & yarn serve-local-build & wait",
     "serve-local-build-mco": "./http-server.sh ./plugins/mco/dist",
-    "ts-node": "ts-node --transpile-only -O '{\"module\":\"commonjs\"}' -I '/node_modules/(?!(@odf)/)/'",
     "lint-css": "yarn stylelint packages/**/**/*.scss",
     "lint-css-fix": "yarn stylelint packages/**/**/*.scss --fix",
     "lint-ts": "yarn eslint --ext .ts,.tsx .",
@@ -76,13 +76,13 @@
     "@types/lodash-es": "^4.17.4",
     "@types/react-dnd-html5-backend": "^3.0.2",
     "buffer": "^6.0.3",
-    "cache-loader": "1.x",
-    "circular-dependency-plugin": "5.x",
+    "cache-loader": "^4.1.0",
+    "circular-dependency-plugin": "^5.2.2",
     "classnames": "^2.3.1",
-    "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "0.28.x",
-    "file-loader": "1.x",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "copy-webpack-plugin": "^12.0.2",
+    "css-loader": "^7.1.2",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fuzzysearch": "^1.0.3",
     "history": "^4.9.0",
     "i18next": "^20.2.1",
@@ -111,19 +111,18 @@
     "react-window": "^1.8.10",
     "redux": "4.0.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.0.2",
+    "sass-embedded": "^1.81.0",
+    "sass-loader": "^16.0.3",
     "semver": "6.x",
-    "style-loader": "^0.23.1",
+    "style-loader": "^3.3.4",
     "swr": "2.2.5",
-    "thread-loader": "3.0.4",
-    "ts-loader": "^9.4.1",
-    "ts-node": "^10.9.2",
-    "tsm": "^2.3.0",
+    "thread-loader": "^4.0.4",
+    "ts-loader": "^9.5.1",
+    "tsx": "^4.19.2",
     "typesafe-actions": "^4.2.1",
     "typescript": "^5.6.3",
     "victory-core": "^35.4.4",
-    "webpack": "5.94.0",
+    "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "yup": "^0.32.11"
@@ -182,7 +181,7 @@
     "webpack-dev-server": "^5.1.0"
   },
   "resolutions": {
-    "webpack": "5.94.0",
+    "webpack": "^5.96.1",
     "webpack-bundle-analyzer/ws": "^7.5.10",
     "webpack-dev-server/express": "^4.21.0",
     "tough-cookie": "^4.1.3"

packages/mco/components/drpolicy-list-page/drpolicy-list-page.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities/all';
 
 .mco-drpolicy-list {
   @media (min-width: $pf-v5-global--breakpoint--md) {

packages/mco/components/mco-dashboard/disaster-recovery/alert-card/alert-item.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
+@import '@patternfly/patternfly/sass-utilities/colors';
 
 $mco-icon-and-text-icon-lg: 1.2rem;
 

packages/ocs/dashboards/object-service/buckets-card/buckets-card.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
+@import '@patternfly/patternfly/sass-utilities/colors';
 
 .nb-buckets-card__buckets-failure-status {
   display: flex;

packages/ocs/dashboards/object-service/capacity-breakdown/capacity-breakdown-card.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities/all';
 
 .nb-capacity-breakdown-card__body {
   padding-top: 24px;

packages/ocs/dashboards/object-service/data-consumption-card/data-consumption-card.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities/all';
 
 .nb-data-consumption-card__header {
   justify-content: space-between;

packages/ocs/dashboards/object-service/resource-providers-card/resource-providers-card.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
+@import '@patternfly/patternfly/sass-utilities/colors';
 
 .nb-resource-providers-card__not-available {
   display: flex;

packages/ocs/dashboards/persistent-internal/capacity-breakdown-card/capacity-breakdown-card.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities/all';
 
 .ceph-capacity-breakdown-card__body {
   padding-top: 24px;

packages/odf/modals/add-capacity/add-capacity-modal.scss

@@ -1,4 +1,4 @@
-@import '~@patternfly/patternfly/sass-utilities/colors';
+@import '@patternfly/patternfly/sass-utilities/colors';
 
 .add-capacity-modal--overflow {
   overflow-x: unset;

packages/shared/package.json

@@ -48,7 +48,7 @@
     "react-linkify": "^0.2.2",
     "react-tagsinput": "^3.19.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.55.0",
+    "sass-embedded": "^1.81.0",
     "typescript": "^5.6.3",
     "victory-core": "^35.4.4",
     "yup": "^0.32.11"

packages/shared/src/styles/_vars.scss

@@ -1,5 +1,5 @@
 // PatternFly variables -- imported here so they can be used throughout
-@import '~@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities/all';
 
 $screen-xs: 480px !default;
 //** Deprecated `$screen-xs-min` as of v3.2.0

webpack.config.ts

@@ -2,8 +2,8 @@
 
 import * as path from 'path';
 import { ConsoleRemotePlugin } from '@openshift-console/dynamic-plugin-sdk-webpack';
-import * as CircularDependencyPlugin from 'circular-dependency-plugin';
-import * as CopyWebpackPlugin from 'copy-webpack-plugin';
+import CircularDependencyPlugin from 'circular-dependency-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
 import { ForkTsCheckerWebpackPlugin } from 'fork-ts-checker-webpack-plugin/lib/plugin';
 import * as webpack from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
@@ -115,7 +115,13 @@ const config: webpack.Configuration & DevServerConfiguration = {
             loader: 'sass-loader',
             options: {
               sassOptions: {
-                outputStyle: 'compressed',
+                // @TODO: fix Sass deprecation warnings.
+                silenceDeprecations: [
+                  'global-builtin',
+                  'import',
+                  'mixed-decls',
+                ],
+                style: 'compressed',
                 quietDeps: true,
               },
               sourceMap: true,
@@ -138,7 +144,7 @@ const config: webpack.Configuration & DevServerConfiguration = {
   },
   plugins: [
     new ConsoleRemotePlugin(),
-    new CopyWebpackPlugin({
+    new CopyPlugin({
       patterns: [...resolveLocale(__dirname, process.env.I8N_NS || '')],
     }),
     new webpack.DefinePlugin({