fix: if css optimizers turn 0px to "0", fix vars inside calc functions (#3566)

Co-authored-by: [email protected] <>

Author: bfintal

src/block/columns/style.scss

@@ -55,7 +55,8 @@
 	@for $columns from 2 through 6 {
 		@for $index from 1 through $columns {
 			:where(body:not(.wp-admin) .stk-block-column:nth-child(#{ $index }):nth-last-child(#{ $columns - ($index - 1) })) {
-				flex: 1 1 calc(( 100% / #{ $columns } ) - var(--stk-column-gap, 0px) * #{ $columns - 1 } / #{ $columns }) !important;
+				// "* 1px" is added to prevent optimizers that remove the "px" unit from "0px" values from destroying calculations.
+				flex: 1 1 calc(( 100% / #{ $columns } ) - var(--stk-column-gap, 0px) * 1px * #{ $columns - 1 } / #{ $columns }) !important;
 			}
 		}
 	}

src/block/feature-grid/style.scss

@@ -2,5 +2,6 @@
 
 .stk-block-feature-grid.stk--column-wrap-desktop .stk--flex > .stk-block-column,
 .stk-block-feature-grid.stk--column-wrap-desktop .stk--flex > * > * > [data-type="stackable/column"] {
-	flex: var(--stk-flex-grow, 1) 1 calc(100% - var(--stk-column-gap, 0px) * 0 / 1) !important;
+	// "* 1px" is added to prevent optimizers that remove the "px" unit from "0px" values from destroying calculations.
+	flex: var(--stk-flex-grow, 1) 1 calc(100% - var(--stk-column-gap, 0px) * 1px * 0 / 1) !important;
 }

src/block/posts/style.scss

@@ -50,8 +50,8 @@
 		// We need this to make advanced position work.
 		position: relative;
 		// Generate a flex basis value based on the number of columns.
-		flex-basis: calc((100%/var(--stk-columns, 2)) - (var(--stk-column-gap, 16px)) + (var(--stk-column-gap, 16px)/var(--stk-columns, 2)));
-		width: calc((100%/var(--stk-columns, 2)) - (var(--stk-column-gap, 16px)) + (var(--stk-column-gap, 16px)/var(--stk-columns, 2)));
+		flex-basis: calc((100%/var(--stk-columns, 2)) - (var(--stk-column-gap, 16px) * 1px) + ((var(--stk-column-gap, 16px) * 1px)/var(--stk-columns, 2)));
+		width: calc((100%/var(--stk-columns, 2)) - (var(--stk-column-gap, 16px) * 1px) + ((var(--stk-column-gap, 16px) * 1px)/var(--stk-columns, 2)));
 		overflow: hidden;
 		// Make the contents occupy entire area.
 		display: flex;