fix(css): ignore `media` params with scss interpolation (#3801)

src/language-css/parser-postcss.js

@@ -211,6 +211,14 @@ function parseNestedCSS(node) {
           value: node.params
         };
       } else {
+        if (node.params.includes("#{")) {
+          // Workaround for media at rule with scss interpolation
+          return {
+            type: "media-unknown",
+            value: node.params
+          };
+        }
+
         node.params = parseMediaQuery(node.params);
       }
     }

tests/css_scss/__snapshots__/jsfmt.spec.js.snap

@@ -317,6 +317,13 @@ p {
   width: AnotherMyCalculationFunction(10px, 5px);
   border: border(25px, 35px);
 }
+
+$sm-only: '(min-width: 768px) and (max-width: 991px)';
+$lg-and-up: '(min-width: 1200px)';
+
+@media screen and #{$sm-only, $lg-and-up} {
+  color: #000;
+}
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @media #{$g-breakpoint-tiny} {
 }
@@ -648,4 +655,11 @@ p {
   border: border(25px, 35px);
 }
 
+$sm-only: "(min-width: 768px) and (max-width: 991px)";
+$lg-and-up: "(min-width: 1200px)";
+
+@media screen and #{$sm-only, $lg-and-up} {
+  color: #000;
+}
+
 `;

tests/css_scss/scss.css

@@ -307,3 +307,10 @@ p {
   width: AnotherMyCalculationFunction(10px, 5px);
   border: border(25px, 35px);
 }
+
+$sm-only: '(min-width: 768px) and (max-width: 991px)';
+$lg-and-up: '(min-width: 1200px)';
+
+@media screen and #{$sm-only, $lg-and-up} {
+  color: #000;
+}