From bc2f57dcf9675ff2f810c5b1bbbdba677036b5e2 Mon Sep 17 00:00:00 2001
From: Evilebot Tnawi <evilebottnawi@users.noreply.github.com>
Date: Sat, 12 May 2018 22:38:28 +0300
Subject: [PATCH] fix: css variables and scss interpolation (#4471)

---
 src/language-css/printer-postcss.js           |  7 ++++-
 .../__snapshots__/jsfmt.spec.js.snap          | 31 +++++++++++++++++++
 tests/css_variables/variables.scss            | 13 ++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 tests/css_variables/variables.scss

diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
index ea7d75956..86877b779 100644
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -452,7 +452,7 @@ function genericPrint(path, options, print) {
         const isNextRightCurlyBrace =
           iNextNode.type === "value-word" && iNextNode.value === "}";
 
-        // Ignore interpolation in SCSS (i.e. ``#{variable}``)
+        // Ignore interpolation in SCSS (i.e. `#{variable}`)
         if (
           isHash ||
           isLeftCurlyBrace ||
@@ -465,6 +465,11 @@ function genericPrint(path, options, print) {
           continue;
         }
 
+        // Ignore css variables and interpolation in SCSS (i.e. `--#{$var}`)
+        if (iNode.value === "--" && iNextNode.value === "#") {
+          continue;
+        }
+
         const isNextHash =
           iNextNode.type === "value-word" && iNextNode.value === "#";
 
diff --git a/tests/css_variables/__snapshots__/jsfmt.spec.js.snap b/tests/css_variables/__snapshots__/jsfmt.spec.js.snap
index 92b54730b..7fe76f20d 100644
--- a/tests/css_variables/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/css_variables/__snapshots__/jsfmt.spec.js.snap
@@ -28,3 +28,34 @@ exports[`variables.css 1`] = `
 }
 
 `;
+
+exports[`variables.scss 1`] = `
+.foo {
+  --#{$prop}: 10px;
+  #{$prop}: 10px;
+  prop1: var(--#{$var});
+  prop2: var(#{$var}, --my-#{$var}, pink);
+  prop3: calc(var(--#{$var}) * 1px);
+}
+
+@supports (--#{$prop}: green) {
+  body {
+    color: var(--#{$var});
+  }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.foo {
+  --#{$prop}: 10px;
+  #{$prop}: 10px;
+  prop1: var(--#{$var});
+  prop2: var(#{$var}, --my-#{$var}, pink);
+  prop3: calc(var(--#{$var}) * 1px);
+}
+
+@supports (--#{$prop}: green) {
+  body {
+    color: var(--#{$var});
+  }
+}
+
+`;
diff --git a/tests/css_variables/variables.scss b/tests/css_variables/variables.scss
new file mode 100644
index 000000000..35e7c6e9b
--- /dev/null
+++ b/tests/css_variables/variables.scss
@@ -0,0 +1,13 @@
+.foo {
+  --#{$prop}: 10px;
+  #{$prop}: 10px;
+  prop1: var(--#{$var});
+  prop2: var(#{$var}, --my-#{$var}, pink);
+  prop3: calc(var(--#{$var}) * 1px);
+}
+
+@supports (--#{$prop}: green) {
+  body {
+    color: var(--#{$var});
+  }
+}