Stylelint CSS Fixes (#4260)

- Lints all CSS, auto-fixes and shows summary on completion
- Consistent code formatting on `src\css\maplibre-gl.css` (each rule on a separate line)
- stylelintrc config no longer ignores `user-select` property since we have Autoprefixer for that

.stylelintrc.json

@@ -6,9 +6,7 @@
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["svg-load"]
     }],
-    "property-no-vendor-prefix": [true, {
-      "ignoreProperties": ["/user-select/"]
-    }],
+    "property-no-vendor-prefix": true,
     "function-no-unknown": [true, {
       "ignoreFunctions": ["svg-load", "svg-inline"]
     }]

docs/assets/extra.css

@@ -1,4 +1,5 @@
 /* see https://github.com/squidfunk/mkdocs-material/issues/4278 */
+/* stylelint-disable-next-line selector-class-pattern */
 .md-search-result .md-typeset {
     display: -webkit-box;
     -webkit-line-clamp: 5;

package.json

@@ -170,7 +170,7 @@
     "start": "run-p watch-css watch-dev start-server",
     "start-bench": "run-p watch-css watch-benchmarks start-server",
     "lint": "eslint --cache --ext .ts,.tsx,.js,.html --ignore-path .gitignore .",
-    "lint-css": "stylelint src/css/maplibre-gl.css",
+    "lint-css": "stylelint **/*.css --fix -f verbose",
     "test": "run-p lint lint-css test-render jest",
     "jest": "jest",
     "test-build": "jest --selectProjects=build --reporters=default",

src/css/maplibre-gl.css

@@ -58,15 +58,31 @@
 .maplibregl-ctrl-top-left,
 .maplibregl-ctrl-top-right,
 .maplibregl-ctrl-bottom-left,
-.maplibregl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.maplibregl-ctrl-bottom-right {
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+}
 
-.maplibregl-ctrl-top-left { top: 0; left: 0; }
+.maplibregl-ctrl-top-left {
+    top: 0;
+    left: 0;
+}
 
-.maplibregl-ctrl-top-right { top: 0; right: 0; }
+.maplibregl-ctrl-top-right {
+     top: 0;
+     right: 0;
+    }
 
-.maplibregl-ctrl-bottom-left { bottom: 0; left: 0; }
+.maplibregl-ctrl-bottom-left {
+    bottom: 0;
+    left: 0;
+}
 
-.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; }
+.maplibregl-ctrl-bottom-right {
+     right: 0;
+     bottom: 0;
+}
 
 .maplibregl-ctrl {
     clear: both;
@@ -76,13 +92,25 @@
     transform: translate(0, 0);
 }
 
-.maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 10px 0 0 10px; float: left; }
+.maplibregl-ctrl-top-left .maplibregl-ctrl {
+    margin: 10px 0 0 10px;
+     float: left;
+}
 
-.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; float: right; }
+.maplibregl-ctrl-top-right .maplibregl-ctrl {
+    margin: 10px 10px 0 0;
+    float: right;
+}
 
-.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 10px 10px; float: left; }
+.maplibregl-ctrl-bottom-left .maplibregl-ctrl {
+    margin: 0 0 10px 10px;
+    float: left;
+}
 
-.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; }
+.maplibregl-ctrl-bottom-right .maplibregl-ctrl {
+    margin: 0 10px 10px 0;
+    float: right;
+}
 
 .maplibregl-ctrl-group {
     border-radius: 4px;