Stylelint: Do not enforce unitless zero value in custom properties (#44401)

* Fix unitless overcorrection

* Add changelogs

Author: tbradsha

projects/packages/forms/changelog/fix-stylelint-do_not_enforce_unitless_0_value_in_custom_properties

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix padding on input and textarea fields.

projects/packages/forms/src/contact-form/css/grunion.css

@@ -3,7 +3,7 @@
 	--jetpack--contact-form--border-color: #8c8f94;
 	--jetpack--contact-form--border-size: 1px;
 	--jetpack--contact-form--border-style: solid;
-	--jetpack--contact-form--border-radius: 0;
+	--jetpack--contact-form--border-radius: 0px;
 	--jetpack--contact-form--input-padding: 16px;
 	--jetpack--contact-form--font-size: 16px;
 	--jetpack--contact-form--error-color: #b32d2e;

projects/plugins/boost/app/assets/src/js/pages/image-size-analysis/image-size-analysis.module.scss

@@ -36,8 +36,8 @@
 	 * Narrow screen overrides.
 	 */
 	@media ( max-width: 782px ) {
-		--expanded-gap: 0;
-		--border-radius: 0;
+		--expanded-gap: 0px;
+		--border-radius: 0px;
 		--table-column-expand: 32px;
 	}
 }

projects/plugins/boost/changelog/fix-stylelint-do_not_enforce_unitless_0_value_in_custom_properties

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+Comment: Use units in CSS vars to avoid issues with CSS math functions.
+

projects/plugins/jetpack/changelog/fix-stylelint-do_not_enforce_unitless_0_value_in_custom_properties

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Forms: Fix padding on input and textarea fields.

tools/js-tools/stylelint.config.base.mjs

@@ -19,6 +19,15 @@ const baseConfig = {
 			},
 		],
 
+		// Stylelint allows `0px` in math-type functions, but sometimes those math-type functions are
+		// passed vars instead of hard-coded values, and we need to prevent those from being unitless.
+		'length-zero-no-unit': [
+			true,
+			{
+				ignore: [ 'custom-properties' ],
+			},
+		],
+
 		// In theory this is a good rule, but in practice it's a massive lift to resolve existing violations.
 		// Here's an example that has no good answers:
 		// https://github.com/Automattic/jetpack/blob/86e27497d4b8e0736cae61c325f017dedad16dbb/projects/js-packages/components/components/button/style.module.scss#L73-L94