Fix: Replace incompatible rgb() CSS syntax to support older gulp-sass versions (#5499) (#6161)

* docs(raster): clarify tileSize usage with 256px tiles and improve examples

* docs(raster): Fix tileSize note, update spec link, and fix TSDoc escape warning

* fix: replace modern rgb() notation with rgba() for sass compatibility

* fix: replace modern rgb() notation with rgba() for sass compatibility

* fix: replace modern rgb() notation with rgba() for sass compatibility

Author: shreeharshshinde

.stylelintrc.json

@@ -12,7 +12,8 @@
     "property-no-vendor-prefix": true,
     "function-no-unknown": [true, {
       "ignoreFunctions": ["svg-load", "svg-inline"]
-    }]
+    }],
+    "function-disallowed-list": ["/^rgb\\((?!\\d+,\\s*\\d+,\\s*\\d+\\))/"]
   },
   "ignoreFiles": [
       "dist/**/*.css"

src/css/maplibre-gl.css

@@ -2,7 +2,7 @@
     font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
     overflow: hidden;
     position: relative;
-    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+    -webkit-tap-highlight-color: rgb(0, 0, 0, 0);
 }
 
 .maplibregl-canvas {
@@ -118,7 +118,7 @@
 }
 
 .maplibregl-ctrl-group:not(:empty) {
-    box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px rgb(0, 0, 0, 0.1);
 }
 
 @media (forced-colors: active) {
@@ -169,7 +169,7 @@
 
 .maplibregl-ctrl-attrib-button:focus,
 .maplibregl-ctrl-group button:focus {
-    box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%);
+    box-shadow: 0 0 2px 2px rgb(0, 150, 255, 1);
 }
 
 .maplibregl-ctrl button:disabled {
@@ -182,16 +182,16 @@
 
 @media (hover: hover) {
     .maplibregl-ctrl button:not(:disabled):hover {
-        background-color: rgb(0 0 0/5%);
+        background-color: rgb(0, 0, 0, 0.05);
     }
 }
 
 .maplibregl-ctrl button:not(:disabled):active {
-    background-color: rgb(0 0 0/5%);
+    background-color: rgb(0, 0, 0, 0.05);
 }
 
 .maplibregl-ctrl-group button:focus:focus-visible {
-    box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%);
+    box-shadow: 0 0 2px 2px rgb(0, 150, 255, 1);
 }
 
 .maplibregl-ctrl-group button:focus:not(:focus-visible) {
@@ -482,7 +482,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 
 .maplibregl-ctrl.maplibregl-ctrl-attrib {
     padding: 0 5px;
-    background-color: rgb(255 255 255 / 50%);
+    background-color: rgb(255, 255, 255, 0.5);
     margin: 0;
 }
 
@@ -518,7 +518,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
         cursor: pointer;
         position: absolute;
         background-image: svg-load("svg/maplibregl-ctrl-attrib.svg");
-        background-color: rgb(255 255 255 / 50%);
+        background-color: rgb(255, 255, 255, 0.5);
         width: 24px;
         height: 24px;
         box-sizing: border-box;
@@ -549,7 +549,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     }
 
     .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
-        background-color: rgb(0 0 0 / 5%);
+        background-color: rgb(0, 0, 0, 0.05);
     }
 
     .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after {
@@ -586,7 +586,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 .maplibregl-ctrl-attrib a {
-    color: rgb(0 0 0 / 75%);
+    color: rgb(0, 0, 0, 0.75);
     text-decoration: none;
 }
 
@@ -600,7 +600,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 .maplibregl-ctrl-scale {
-    background-color: rgb(255 255 255 / 75%);
+    background-color: rgb(255, 255, 255, 0.75);
     font-size: 10px;
     border-width: medium 2px 2px;
     border-style: none solid solid;
@@ -709,14 +709,14 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 .maplibregl-popup-close-button:hover {
-    background-color: rgb(0 0 0 / 5%);
+    background-color: rgb(0, 0, 0, 0.05);
 }
 
 .maplibregl-popup-content {
     position: relative;
     background: #fff;
     border-radius: 3px;
-    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 1px 2px rgb(0, 0, 0, 0.1);
     padding: 15px 10px;
     pointer-events: auto;
 }
@@ -789,7 +789,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
     top: -2px;
     width: 19px;
     box-sizing: border-box;
-    box-shadow: 0 0 3px rgb(0 0 0 / 35%);
+    box-shadow: 0 0 3px rgb(0, 0, 0, 0.35);
 }
 
 @keyframes maplibregl-user-location-dot-pulse {
@@ -831,7 +831,7 @@ a.maplibregl-ctrl-logo.maplibregl-compact {
 }
 
 .maplibregl-cooperative-gesture-screen {
-    background: rgba(0 0 0 / 40%);
+    background: rgb(0, 0, 0, 0.4);
     position: absolute;
     inset: 0;
     display: flex;