PB-1603: add stylelint

add stylelint configuration

Author: sommerfe

package.json

@@ -10,8 +10,10 @@
         "dev": "pnpm run -r --filter=web-mapviewer dev ",
         "format": "prettier --write .",
         "format:check": "prettier --check .",
-        "lint": "eslint --fix",
-        "lint:no-fix": "eslint",
+        "lint": "eslint --fix || stylelint \"**/*.{vue,scss}\" --fix",
+        "lint:no-fix": "eslint && stylelint \"**/*.{vue,scss}\"",
+        "lint:styles": "stylelint \"**/*.{vue,scss}\" --fix",
+        "lint:styles:no-fix": "stylelint \"**/*.{vue,scss}\"",
         "preview": "pnpm run -r --filter=!web-mapviewer build && pnpm run -r --filter=web-mapviewer preview",
         "preview:dev": "pnpm run -r build:dev && pnpm run -r --filter=web-mapviewer preview:dev ",
         "preview:int": "pnpm run -r build:int && pnpm run -r --filter=web-mapviewer preview:int",
@@ -45,10 +47,16 @@
         "eslint-plugin-prettier": "catalog:",
         "eslint-plugin-vue": "catalog:",
         "globals": "catalog:",
+        "postcss-html": "catalog:",
         "prettier": "catalog:",
         "prettier-plugin-jsdoc": "catalog:",
         "prettier-plugin-packagejson": "catalog:",
         "prettier-plugin-tailwindcss": "catalog:",
+        "stylelint": "catalog:",
+        "stylelint-config-recommended-scss": "catalog:",
+        "stylelint-config-recommended-vue": "catalog:",
+        "stylelint-order": "catalog:",
+        "stylelint-scss": "catalog:",
         "typescript": "catalog:",
         "typescript-eslint": "catalog:",
         "vite": "catalog:",

packages/mapviewer/src/modules/infobox/components/FeatureAreaInfo.vue

@@ -74,6 +74,7 @@ const humanReadableArea = computed(() => {
 $rectangle-line-width: 2px;
 $rectangle-line-color: $gray-600;
 $transparent: rgba(0, 0, 0, 0);
+
 .rectangle {
     height: 1rem;
     width: 1.5rem;
@@ -90,7 +91,8 @@ $transparent: rgba(0, 0, 0, 0);
         $transparent 2 * $rectangle-line-width
     );
 }
+
 .area-information {
-    @extend .clear-no-ios-long-press;
+    @extend %clear-no-ios-long-press;
 }
 </style>

packages/mapviewer/src/modules/infobox/components/FeatureList.vue

@@ -111,6 +111,7 @@ function loadMoreResultForLayer(layerId) {
 
 <style lang="scss" scoped>
 @import '@/scss/variables.module';
+
 .feature-list {
     display: flex;
     flex-direction: column;

packages/mapviewer/src/modules/infobox/components/styling/DrawingStyleColorSelector.vue

@@ -67,6 +67,11 @@ function colorCircleStyle(color) {
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 
+.color-select-box button {
+    display: inline-flex;
+    justify-content: center;
+}
+
 .color-select-box {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -81,11 +86,6 @@ function colorCircleStyle(color) {
         }
     }
 
-    button {
-        display: inline-flex;
-        justify-content: center;
-    }
-
     .color-circle {
         width: 1.25rem;
         height: 1.25rem;

packages/mapviewer/src/modules/map/components/MapPopover.vue

@@ -191,6 +191,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/* stylelint-disable scss/operator-no-newline-after */
 @import '@/scss/webmapviewer-bootstrap-theme';
 @import '@/scss/media-query.mixin';
 

packages/mapviewer/src/modules/map/components/footer/backgroundSelector/BackgroundSelectorSquared.vue

@@ -86,6 +86,7 @@ const { show, animate, getImageForBackgroundLayer, toggleShowSelector, onSelectB
 
 <style lang="scss" scoped>
 @use 'sass:math';
+
 @import './bg-selector';
 
 $main-element: '.bg-selector-squared';

packages/mapviewer/src/modules/map/components/footer/backgroundSelector/bg-selector.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import '@/scss/webmapviewer-bootstrap-theme';
 
 $bg-selector-transition-duration: 0.4s;
@@ -26,22 +28,16 @@ $nb-max-bg: 10;
             display: flex;
         }
         &-wheel {
-            display: none;
-            // resets the position "stack" so that absolute positioning of children is now relative to the parent
-            position: relative;
-            opacity: 0;
-            z-index: $zindex-map + 1;
-            // animate the display/opacity changes
-            transition: all $bg-selector-transition-duration;
-            &.show,
-            &.animate {
-                display: block;
-            }
 
             // as we are using this selector down in the for loop, we hit a limitation of SASS and can't use the
             // &- notation, but have to declare a full fledged selector (otherwise & is misinterpreted in the loop and
             // it fails)
             $buttons: '#{$main-element}-wheel-button';
+
+            &.show,
+            &.animate {
+                display: block;
+            }
             #{$buttons} {
                 // the parent is set to position relative, so this element will now be placed under the parent
                 position: absolute;
@@ -50,14 +46,27 @@ $nb-max-bg: 10;
                 transition-property: $spread-direction, opacity;
                 transition-duration: $bg-selector-transition-duration;
             }
+
             &.show:not(.animate) {
                 // fade in/out on show/hide
                 opacity: 1;
             }
 
+            & {
+                display: none;
+                // resets the position "stack" so that absolute positioning of children is now relative to the parent
+                position: relative;
+                opacity: 0;
+                z-index: $zindex-map + 1;
+                // animate the display/opacity changes
+                transition: all $bg-selector-transition-duration;
+            }
+
+
             @for $i from 0 through $nb-max-bg {
                 // doubling the starting margin between the first child and the parent (hence $i + 2 when calculating margin)
                 $spread-amount: calc($i * $button-width + $bg-selector-button-gap * ($i + 2));
+
                 &.show:not(.animate) {
                     #{$buttons}-#{$i} {
                         // move from a stacked under the main button position to a spread position (and vide-versa on hide)
@@ -81,7 +90,7 @@ $nb-max-bg: 10;
     $background-button-width: $map-button-diameter,
     $background-button-height-ratio: 1
 ) {
-    $background-button-height: floor($background-button-width * $background-button-height-ratio);
+    $background-button-height: math.floor($background-button-width * $background-button-height-ratio);
     #{$main-element} {
         &-wheel-button {
             padding: 0;
@@ -109,7 +118,6 @@ $nb-max-bg: 10;
                 img {
                     // tailwind set max-width to 100% by default for img tags, but that breaks our style here
                     max-width: unset;
-
                     display: inline;
                     margin: 0 auto;
                 }
@@ -126,13 +134,15 @@ $nb-max-bg: 10;
             }
 
             @keyframes pulse {
-                from {
+                0% {
                     transform: scale3d(1, 1, 1);
                 }
+
                 20% {
                     transform: scale3d(1.25, 1.25, 1.25);
                 }
-                to {
+
+                100% {
                     transform: scale3d(1, 1, 1);
                 }
             }

packages/mapviewer/src/modules/map/components/openlayers/OpenLayersMap.vue

@@ -107,6 +107,8 @@ const { zIndexTileInfo, zIndexLayerExtents } = useLayerZIndexCalculation()
 <style lang="scss" scoped>
 @import '@/scss/webmapviewer-bootstrap-theme';
 
+$dragbox-width: 3px;
+
 .ol-map {
     top: 0;
     left: 0;
@@ -115,8 +117,6 @@ const { zIndexTileInfo, zIndexLayerExtents } = useLayerZIndexCalculation()
     position: absolute; // Element must be positioned to set a z-index
     z-index: $zindex-map;
 }
-
-$dragbox-width: 3px;
 // Show selected area when shift click + drag on map
 :global(.ol-dragzoom) {
     border: $dragbox-width solid $malibu;

packages/mapviewer/src/modules/map/components/openlayers/OpenLayersScale.vue

@@ -74,13 +74,12 @@ onBeforeUnmount(() => olMap.removeControl(scaleLine))
         $scaleBarPrimary: $black;
         $scaleBarSecondary: $light-grey;
 
-        position: relative;
+        $fontSize: 8px;
 
         .scale-bar-inner {
             display: flex;
         }
 
-        $fontSize: 8px;
         &.with-relative-size {
             $fontSize: max(max(0.8vw, 0.8vh), 8px);
         }
@@ -124,6 +123,10 @@ onBeforeUnmount(() => olMap.removeControl(scaleLine))
         .ol-scale-singlebar-odd {
             background-color: $scaleBarPrimary;
         }
+
+        & {
+            position: relative;
+        }
     }
 }
 </style>

packages/mapviewer/src/modules/map/components/toolbox/FullScreenButton.vue

@@ -66,6 +66,7 @@ function handleKeydown(event) {
 
 <style lang="scss" scoped>
 @import '@/modules/map/scss/toolbox-buttons';
+
 .fullscreen-warning {
     position: fixed;
     top: 120px;
@@ -78,20 +79,23 @@ function handleKeydown(event) {
     font-size: 16px;
     z-index: 1000;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    animation: fadeInOut 3s ease-in-out forwards;
+    animation: fade-in-out 3s ease-in-out forwards;
 }
 
-@keyframes fadeInOut {
+@keyframes fade-in-out {
     0% {
         opacity: 0;
         visibility: visible;
     }
+
     10% {
         opacity: 0.9;
     }
+
     90% {
         opacity: 0.9;
     }
+
     100% {
         opacity: 0;
         visibility: hidden;