From 7797c93489228623f25844da29ce6fae0a2ab069 Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Wed, 24 Jan 2018 12:31:30 +0300
Subject: [PATCH] fix(css): ignore `media` params with scss interpolation
 (#3801)

---
 src/language-css/parser-postcss.js              |  8 ++++++++
 tests/css_scss/__snapshots__/jsfmt.spec.js.snap | 14 ++++++++++++++
 tests/css_scss/scss.css                         |  7 +++++++
 3 files changed, 29 insertions(+)

diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js
index b88a5b28..e46d2a16 100644
--- a/src/language-css/parser-postcss.js
+++ b/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);
       }
     }
diff --git a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap b/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
index 5ceb4810..57d560af 100644
--- a/tests/css_scss/__snapshots__/jsfmt.spec.js.snap
+++ b/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;
+}
+
 `;
diff --git a/tests/css_scss/scss.css b/tests/css_scss/scss.css
index 1d478490..f3d1c61c 100644
--- a/tests/css_scss/scss.css
+++ b/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;
+}