Attempt to fix CSS build side-effect

Automattic · Jan 31, 2023 · 8a3ec7e · 8a3ec7e
1 parent 7d2f470
commit 8a3ec7e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss b/projects/plugins/jetpack/extensions/blocks/contact-form/editor.scss
@@ -631,12 +631,17 @@
 				border-color: var(--jetpack--contact-form--border-color);
 				border-style: var(--jetpack--contact-form--border-style);
 				border-width: var(--jetpack--contact-form--border-size);
-				border-left: none;
-				border-right: none;
 				padding: 0 4px;
 				transition: border 150ms linear;
 			}
 
+			// For some reason, when keeping the rule below together with the above selector,
+			// on production builds, the attributes are being reordered, causing side-effects
+			.notched-label__notch {
+				border-left: none;
+				border-right: none;
+			}
+
 			.notched-label__label {
 				position: relative;
 				top: 50%;

diff --git a/projects/plugins/jetpack/modules/contact-form/css/grunion.css b/projects/plugins/jetpack/modules/contact-form/css/grunion.css
@@ -398,12 +398,19 @@
 	border-color: var(--jetpack--contact-form--border-color);
 	border-style: var(--jetpack--contact-form--border-style);
 	border-width: var(--jetpack--contact-form--border-size);
-	border-left: none;
-	border-right: none;
 	padding: 0 4px;
 	transition: border 150ms linear;
 }
 
+/*
+For some reason, when keeping the rule below together with the above selector,
+on production builds, the attributes are being reordered, causing side-effects
+*/
+.contact-form .is-style-outlined .grunion-field-wrap .notched-label .notched-label__notch {
+	border-left: none;
+	border-right: none;
+}
+
 .contact-form .is-style-outlined .grunion-field-wrap.no-label .notched-label__notch {
 	padding: 0;
 }