From 264c1545f53ac697e8206c51afff3c66344b046d Mon Sep 17 00:00:00 2001
From: Gonzalo <grzuy@users.noreply.github.com>
Date: Tue, 8 Aug 2017 20:05:54 -0300
Subject: [PATCH] fix: Make CSS custom properties compatible with sass-spec 3.5
 (#1076)

Fixes #1075
---
 packages/mdc-dialog/mdc-dialog.scss                       | 2 +-
 packages/mdc-drawer/permanent/mdc-permanent-drawer.scss   | 2 +-
 packages/mdc-drawer/persistent/mdc-persistent-drawer.scss | 2 +-
 packages/mdc-layout-grid/mdc-layout-grid.scss             | 6 +++---
 packages/mdc-theme/mdc-theme.scss                         | 2 +-
 packages/mdc-toolbar/mdc-toolbar.scss                     | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
index e4907ced7a7..af0c16d84c4 100644
--- a/packages/mdc-dialog/mdc-dialog.scss
+++ b/packages/mdc-dialog/mdc-dialog.scss
@@ -24,7 +24,7 @@
 $mdc-dialog-dark-theme-bg-color: #303030 !default;
 
 :root {
-  --mdc-dialog-dark-theme-bg-color: $mdc-dialog-dark-theme-bg-color;
+  --mdc-dialog-dark-theme-bg-color: #{$mdc-dialog-dark-theme-bg-color};
 }
 
 // postcss-bem-linter: define dialog
diff --git a/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss b/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss
index 1d0166bf2b7..6bdb739fd6a 100644
--- a/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss
+++ b/packages/mdc-drawer/permanent/mdc-permanent-drawer.scss
@@ -22,7 +22,7 @@ $mdc-permanent-drawer-width: 240px;
 $mdc-permanent-drawer-dark-theme-bg-color: #212121 !default;
 
 :root {
-  --mdc-permanent-drawer-dark-theme-bg-color: $mdc-permanent-drawer-dark-theme-bg-color;
+  --mdc-permanent-drawer-dark-theme-bg-color: #{$mdc-permanent-drawer-dark-theme-bg-color};
 }
 
 .mdc-permanent-drawer {
diff --git a/packages/mdc-drawer/persistent/mdc-persistent-drawer.scss b/packages/mdc-drawer/persistent/mdc-persistent-drawer.scss
index 5c44698ab78..7629926ff3b 100644
--- a/packages/mdc-drawer/persistent/mdc-persistent-drawer.scss
+++ b/packages/mdc-drawer/persistent/mdc-persistent-drawer.scss
@@ -24,7 +24,7 @@ $mdc-persistent-drawer-width: 240px;
 $mdc-persistent-drawer-dark-theme-bg-color: #212121 !default;
 
 :root {
-  --mdc-persistent-drawer-dark-theme-bg-color: $mdc-persistent-drawer-dark-theme-bg-color;
+  --mdc-persistent-drawer-dark-theme-bg-color: #{$mdc-persistent-drawer-dark-theme-bg-color};
 }
 
 .mdc-persistent-drawer {
diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss
index 541208d0a16..6d2c8c86233 100644
--- a/packages/mdc-layout-grid/mdc-layout-grid.scss
+++ b/packages/mdc-layout-grid/mdc-layout-grid.scss
@@ -17,9 +17,9 @@
 
 :root {
   @each $size in map-keys($mdc-layout-grid-columns) {
-    --mdc-layout-grid-margin-#{$size}: map-get($mdc-layout-grid-default-margin, $size);
-    --mdc-layout-grid-gutter-#{$size}: map-get($mdc-layout-grid-default-gutter, $size);
-    --mdc-layout-grid-column-width-#{$size}: map-get($mdc-layout-grid-column-width, $size);
+    --mdc-layout-grid-margin-#{$size}: #{map-get($mdc-layout-grid-default-margin, $size)};
+    --mdc-layout-grid-gutter-#{$size}: #{map-get($mdc-layout-grid-default-gutter, $size)};
+    --mdc-layout-grid-column-width-#{$size}: #{map-get($mdc-layout-grid-column-width, $size)};
   }
 }
 
diff --git a/packages/mdc-theme/mdc-theme.scss b/packages/mdc-theme/mdc-theme.scss
index f0254351fe4..59bc42752ba 100644
--- a/packages/mdc-theme/mdc-theme.scss
+++ b/packages/mdc-theme/mdc-theme.scss
@@ -18,7 +18,7 @@
 
 :root {
   @each $style in map-keys($mdc-theme-property-values) {
-    --mdc-theme-#{$style}: map-get($mdc-theme-property-values, $style);
+    --mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
   }
 }
 
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
index 8c260642fea..b46950b0379 100644
--- a/packages/mdc-toolbar/mdc-toolbar.scss
+++ b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -136,7 +136,7 @@
 .mdc-toolbar--flexible {
   // stylelint-disable plugin/selector-bem-pattern
   // bem linter is disabled because it cannot correctly reconcile mdc prefix for css variables.
-  --mdc-toolbar-ratio-to-extend-flexible: $mdc-toolbar-ratio-to-extend-flexible;
+  --mdc-toolbar-ratio-to-extend-flexible: #{$mdc-toolbar-ratio-to-extend-flexible};
   // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-toolbar__row:first-child {