fix: Make CSS custom properties compatible with sass-spec 3.5 (#1076)

Fixes #1075
material-components · Aug 8, 2017 · 264c154 · 264c154
1 parent c6a1f2a
commit 264c154
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {