Fix #954

lib/hacks/grid-template-areas.js

@@ -44,14 +44,22 @@ class GridTemplateAreas extends Declaration {
 
     static names = ['grid-template-areas'];
 
+    getRoot(parent) {
+        if (parent.type === 'atrule' || parent.type === 'root')  {
+            return parent;
+        }
+        return this.getRoot(parent.parent);
+    }
+
     /**
      * Translate grid-template-areas to separate -ms- prefixed properties
      */
     insert(decl, prefix, prefixes, result) {
         if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes);
 
         const areas = parseGridAreas(decl.value);
-        decl.root().walkDecls('grid-area', gridArea => {
+        const root = this.getRoot(decl.parent);
+        root.walkDecls('grid-area', gridArea => {
             const value = gridArea.value;
             const area = areas[value];
             delete areas[value];
@@ -92,7 +100,6 @@ class GridTemplateAreas extends Declaration {
 
         return decl;
     }
-
 }
 
 module.exports = GridTemplateAreas;

test/cases/grid-template-areas.css

@@ -20,3 +20,17 @@
 .e {
     grid-area: foot;
 }
+
+@media (max-width: 1000px) {
+    .a {
+        grid-template-areas: "head main";
+    }
+
+    .b {
+        grid-area: head;
+    }
+
+    .c {
+        grid-area: main;
+    }
+}

test/cases/grid-template-areas.out.css

@@ -30,3 +30,21 @@
     -ms-grid-column: 2;
     grid-area: foot;
 }
+
+@media (max-width: 1000px) {
+    .a {
+        grid-template-areas: "head main";
+    }
+
+    .a {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+        grid-area: head;
+    }
+
+    .b {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+        grid-area: main;
+    }
+}