chore: disable length-zero-no-unit rule for custom properties (#9818)

Author: web-padawan

.stylelintrc

@@ -22,6 +22,7 @@
   ],
   "rules": {
     "color-function-notation": "legacy",
+    "length-zero-no-unit": [true, { "ignore": ["custom-properties"] }],
     "no-duplicate-selectors": true
   }
 }

packages/dashboard/src/styles/vaadin-dashboard-section-base-styles.js

@@ -13,8 +13,6 @@ import { css } from 'lit';
 import { dashboardWidgetAndSectionStyles } from './vaadin-dashboard-widget-section-core-styles.js';
 
 const sectionStyles = css`
-  /* stylelint-disable length-zero-no-unit */
-
   :host {
     display: grid;
     position: relative;

packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js

@@ -9,7 +9,6 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 /* Styles shared between widgets and sections */
 const dashboardWidgetAndSection = css`
   /* stylelint-disable rule-empty-line-before */
-  /* stylelint-disable length-zero-no-unit */
 
   :host {
     --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));
@@ -304,18 +303,21 @@ const dashboardWidget = css`
     :host {
       border: 1px solid;
     }
+
     :host([focused]) {
       outline: 2px solid;
       outline-offset: 1px;
     }
+
     :host([selected]) {
       outline-width: 1px;
-      outline-offset: 0px;
+      outline-offset: 0;
       outline-color: Highlight;
     }
+
     :host([selected][focused]) {
       outline-width: 3px;
-      outline-offset: 0px;
+      outline-offset: 0;
     }
   }
 `;

packages/input-container/src/styles/vaadin-input-container-core-styles.js

@@ -19,7 +19,6 @@ export const inputContainerStyles = css`
     --_border-radius: var(--vaadin-input-field-border-radius, 0);
     --_input-border-width: var(--vaadin-input-field-border-width, 0px);
     --_input-border-color: var(--vaadin-input-field-border-color, transparent);
-    /* stylelint-disable-next-line length-zero-no-unit */
     box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
   }
 

packages/menu-bar/src/styles/vaadin-menu-bar-base-styles.js

@@ -22,7 +22,6 @@ export const menuBarStyles = css`
     padding: calc(var(--vaadin-focus-ring-width) + 1px);
     position: relative;
     width: 100%;
-    /* stylelint-disable length-zero-no-unit */
     --_gap: var(--vaadin-menu-bar-gap, 0px);
     --_bw: var(--vaadin-button-border-width, 1px);
     gap: var(--_gap);

packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js

@@ -22,7 +22,7 @@ export const progressBarStyles = css`
     box-sizing: border-box;
     height: 100%;
     --_padding: var(--vaadin-progress-bar-padding, 0px);
-    padding: var(--_padding); /* stylelint-disable-line length-zero-no-unit */
+    padding: var(--_padding);
     background: var(--vaadin-progress-bar-background, var(--vaadin-background-container));
     border-radius: var(--vaadin-progress-bar-border-radius, var(--vaadin-radius-m));
     border: var(--vaadin-progress-bar-border-width, 1px) solid

packages/vaadin-lumo-styles/src/components/input-container.css

@@ -9,10 +9,8 @@
     align-items: center;
     flex: 0 1 auto;
     --_border-radius: var(--vaadin-input-field-border-radius, 0);
-    /* stylelint-disable-next-line length-zero-no-unit */
     --_input-border-width: var(--vaadin-input-field-border-width, 0px);
-    /* stylelint-disable-next-line length-zero-no-unit */
-    box-shadow: inset 0 0 0 var(--_input-border-width, 0px) var(--_input-border-color);
+    box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     background: var(--_background);
     padding: 0 calc(0.375em + var(--_input-container-radius) / 4 - 1px);
     font-weight: var(--vaadin-input-field-value-font-weight, 500);

packages/vaadin-lumo-styles/src/mixins/dashboard-item.css

@@ -5,7 +5,6 @@
  */
 
 @media lumo_mixins_dashboard-item {
-  /* stylelint-disable length-zero-no-unit */
   :host {
     box-sizing: border-box;
     --_widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color));