Add another set of parenthesis to media queries with operator, ref: UP-440

nadyahakkinen · nadyahakkinen · commit 757a624d52dd · 2025-09-02T18:33:22.000+03:00
diff --git a/css/dev/global.css b/css/dev/global.css
diff --git a/css/dev/gutenberg-editor-styles.css b/css/dev/gutenberg-editor-styles.css
diff --git a/sass/gutenberg/blocks/_core-image.scss b/sass/gutenberg/blocks/_core-image.scss
@@ -48,7 +48,7 @@
     margin-right: auto;
   }
 
-  @media (max-width: $width-grid-base + 40px) {
+  @media (max-width: ( $width-grid-base + 40px)) {
     &.alignwide {
       width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
     }
diff --git a/sass/gutenberg/blocks/_core-paragraph.scss b/sass/gutenberg/blocks/_core-paragraph.scss
@@ -17,7 +17,7 @@
   }
 }
 
-@media (max-width: $width-grid-base + 40px) {
+@media (max-width: ( $width-grid-base + 40px)) {
   .has-background {
     width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
diff --git a/sass/gutenberg/blocks/_core-pullquote.scss b/sass/gutenberg/blocks/_core-pullquote.scss
@@ -5,13 +5,13 @@
   border-width: 3px;
   display: grid;
 
-  [aria-label="Pullquote citation text"],
+  [aria-label='Pullquote citation text'],
   cite {
     display: block;
     margin-top: 1.875rem;
   }
 
-  @media (max-width: $width-grid-base + 40px) {
+  @media (max-width: ( $width-grid-base + 40px)) {
     width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
@@ -25,7 +25,7 @@
     justify-self: center;
   }
 
-  @media (max-width: $width-grid-base + 40px) {
+  @media (max-width: ( $width-grid-base + 40px)) {
     margin-left: var(--spacing-container-padding-inline);
     margin-right: var(--spacing-container-padding-inline);
   }
diff --git a/sass/gutenberg/blocks/_core-table.scss b/sass/gutenberg/blocks/_core-table.scss
@@ -55,7 +55,7 @@ table {
 }
 
 .wp-block-table {
-  @media (max-width: $width-grid-base + 40px) {
+  @media (max-width: ( $width-grid-base + 40px)) {
     width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
 }
@@ -66,7 +66,7 @@ table {
   width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
 }
 
-@media (max-width: $width-grid-base + 40px) {
+@media (max-width: ( $width-grid-base + 40px)) {
   .wp-block-table.alignwide {
     margin-left: var(--spacing-container-padding-inline);
     margin-right: var(--spacing-container-padding-inline);
diff --git a/sass/gutenberg/blocks/_core-video.scss b/sass/gutenberg/blocks/_core-video.scss
@@ -5,7 +5,7 @@
   width: 100%;
 }
 
-@media (max-width: $width-grid-base + 40px) {
+@media (max-width: ( $width-grid-base + 40px)) {
   .wp-block-video.alignwide {
     width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
   }
diff --git a/sass/variables/_spacings.scss b/sass/variables/_spacings.scss
@@ -18,7 +18,7 @@
   --spacing-paragraphs-margin-block: 1.6875rem;
 
   // Mid-sized screens
-  @media (max-width: $width-grid-base + 150px) {
+  @media (max-width: ($width-grid-base + 150px)) {
     --spacing-container-padding-inline: 4rem;
   }
 

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@`
`48`	`48`	`margin-right: auto;`
`49`	`49`	`}`
`50`	`50`
`51`		`- @media (max-width: $width-grid-base + 40px) {`
	`51`	`+ @media (max-width: ( $width-grid-base + 40px)) {`
`52`	`52`	`&.alignwide {`
`53`	`53`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`54`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`
`20`		`-@media (max-width: $width-grid-base + 40px) {`
	`20`	`+@media (max-width: ( $width-grid-base + 40px)) {`
`21`	`21`	`.has-background {`
`22`	`22`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,13 +5,13 @@`
`5`	`5`	`border-width: 3px;`
`6`	`6`	`display: grid;`
`7`	`7`
`8`		`- [aria-label="Pullquote citation text"],`
	`8`	`+ [aria-label='Pullquote citation text'],`
`9`	`9`	`cite {`
`10`	`10`	`display: block;`
`11`	`11`	`margin-top: 1.875rem;`
`12`	`12`	`}`
`13`	`13`
`14`		`- @media (max-width: $width-grid-base + 40px) {`
	`14`	`+ @media (max-width: ( $width-grid-base + 40px)) {`
`15`	`15`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`16`	`16`	`}`
`17`	`17`	`}`
`@@ -25,7 +25,7 @@`
`25`	`25`	`justify-self: center;`
`26`	`26`	`}`
`27`	`27`
`28`		`- @media (max-width: $width-grid-base + 40px) {`
	`28`	`+ @media (max-width: ( $width-grid-base + 40px)) {`
`29`	`29`	`margin-left: var(--spacing-container-padding-inline);`
`30`	`30`	`margin-right: var(--spacing-container-padding-inline);`
`31`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ table {`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.wp-block-table {`
`58`		`- @media (max-width: $width-grid-base + 40px) {`
	`58`	`+ @media (max-width: ( $width-grid-base + 40px)) {`
`59`	`59`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`60`	`60`	`}`
`61`	`61`	`}`
`@@ -66,7 +66,7 @@ table {`
`66`	`66`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`67`	`67`	`}`
`68`	`68`
`69`		`-@media (max-width: $width-grid-base + 40px) {`
	`69`	`+@media (max-width: ( $width-grid-base + 40px)) {`
`70`	`70`	`.wp-block-table.alignwide {`
`71`	`71`	`margin-left: var(--spacing-container-padding-inline);`
`72`	`72`	`margin-right: var(--spacing-container-padding-inline);`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`width: 100%;`
`6`	`6`	`}`
`7`	`7`
`8`		`-@media (max-width: $width-grid-base + 40px) {`
	`8`	`+@media (max-width: ( $width-grid-base + 40px)) {`
`9`	`9`	`.wp-block-video.alignwide {`
`10`	`10`	`width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`--spacing-paragraphs-margin-block: 1.6875rem;`
`19`	`19`
`20`	`20`	`// Mid-sized screens`
`21`		`- @media (max-width: $width-grid-base + 150px) {`
	`21`	`+ @media (max-width: ($width-grid-base + 150px)) {`
`22`	`22`	`--spacing-container-padding-inline: 4rem;`
`23`	`23`	`}`
`24`	`24`