From: Fiete Ostkamp <fiete.ostkamp@telekom.de>
Date: Thu, 19 Mar 2026 07:45:02 +0000 (+0100)
Subject: Replace node-sass with sass in openecomp-ui
X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=4247defe4bf95cb3b38001faa3a7bb51258943b5;p=sdc.git

Replace node-sass with sass in openecomp-ui

- node-sass is deprecated [0] and the project recommends
  migrating to Dart Sass [1]
- sass is stricter than node-sass and disallows the usage of
  the /deep/ shadow dom selector
- /deep/ is defined in a version of onap-ui-common [2]  that is newer
  than what is contained in the corresponding gerrit repo, thus
  a manual patch of the artifact is required

[0] https://www.npmjs.com/package/node-sass
[1] https://sass-lang.com/dart-sass/
[2] https://gerrit.onap.org/r/admin/repos/sdc/onap-ui-common

Issue-ID: SDC-4811
Change-Id: Ia0f7e9142e09bef3eb9f11a5aae4bb41c20d9844
Signed-off-by: Fiete Ostkamp <fiete.ostkamp@telekom.de>
---

diff --git a/openecomp-ui/package.json b/openecomp-ui/package.json
index e7b47cf15c..f202e01116 100644
--- a/openecomp-ui/package.json
+++ b/openecomp-ui/package.json
@@ -14,7 +14,8 @@
         "test-coverage": "jest --coverage && start ./coverage/lcov-report/index.html",
         "test-build": "jest --coverage",
         "storyshots": "jest storyshots.test.js",
-        "lint-fix": "eslint --fix  --ext .js --ext .jsx src"
+        "lint-fix": "eslint --fix  --ext .js --ext .jsx src",
+        "postinstall": "patch-package"
     },
     "dependencies": {
         "attr-accept": "^1.1.0",
@@ -90,7 +91,8 @@
         "jsx-loader": "^0.13.2",
         "mkdirp": "^0.5.1",
         "moment": "^2.18.1",
-        "node-sass": "^9.0.0",
+        "sass": "^1.32.0",
+        "patch-package": "^8.0.0",
         "node-watch": "^0.3.5",
         "prettier": "1.10.2",
         "prompt": "^0.2.14",
@@ -99,7 +101,7 @@
         "react-test-renderer": "^16.4.2",
         "rosie": "^1.6.0",
         "run-sequence": "^2.2.1",
-        "sass-loader": "^6.0.6",
+        "sass-loader": "^7.3.1",
         "source-map-loader": "^0.1.5",
         "storyshots": "^3.2.2",
         "style-loader": "^0.13.0",
diff --git a/openecomp-ui/patches/README.md b/openecomp-ui/patches/README.md
new file mode 100644
index 0000000000..baf8727d08
--- /dev/null
+++ b/openecomp-ui/patches/README.md
@@ -0,0 +1,30 @@
+# patches
+
+This directory contains patches applied to `node_modules` via [patch-package](https://github.com/ds300/patch-package) after `npm install`.
+
+Patches are applied automatically by the `postinstall` script in `package.json`:
+
+```
+"postinstall": "patch-package"
+```
+
+## Patches
+
+### `onap-ui-common+1.0.119.patch`
+
+**Package:** `onap-ui-common@1.0.119`
+**File patched:** `lib/style.css`
+
+Removes a single use of the deprecated `/deep/` shadow-piercing CSS combinator from the compiled stylesheet:
+
+```css
+/* before */
+.file-upload .file-upload-input /deep/ .sdc-input { margin-bottom: 0px; }
+
+/* after */
+.file-upload .file-upload-input .sdc-input { margin-bottom: 0px; }
+```
+
+**Why:** `/deep/` is a non-standard Angular-era selector that Dart Sass rejects as a syntax error. Node Sass (libsass) silently accepted it, but since this project was migrated from `node-sass` to `sass` (Dart Sass), the invalid selector causes a build failure.
+
+**Upstream:** The `/deep/` is in the pre-compiled `lib/style.css` artifact shipped with the npm package. The source SCSS that produced it is not present in the available `onap-ui-common` source repository. This patch is intended as a temporary workaround until a fixed version of `onap-ui-common` is published.
diff --git a/openecomp-ui/patches/onap-ui-common+1.0.119.patch b/openecomp-ui/patches/onap-ui-common+1.0.119.patch
new file mode 100644
index 0000000000..c7fab94ec4
--- /dev/null
+++ b/openecomp-ui/patches/onap-ui-common+1.0.119.patch
@@ -0,0 +1,11 @@
+--- a/node_modules/onap-ui-common/lib/style.css
++++ b/node_modules/onap-ui-common/lib/style.css
+@@ -2911,7 +2911,7 @@
+   align-items: flex-end; }
+   .file-upload .file-upload-input {
+     flex-grow: 1; }
+-    .file-upload .file-upload-input /deep/ .sdc-input {
++    .file-upload .file-upload-input .sdc-input {
+       margin-bottom: 0px; }
+   .file-upload .file-upload-button {
+     position: relative;