fix #283 - nicer format of template areas

src/stringify/compiler.ts

@@ -458,6 +458,17 @@ class Compiler {
         this.emit(';')
       );
     }
+    if (node.property === 'grid-template-areas')
+      return (
+        this.emit(this.indent()) +
+        this.emit(
+          node.property +
+            ': ' +
+            node.value.split('\n').join('\n'.padEnd(22) + this.indent()),
+          node.position,
+        ) +
+        this.emit(';')
+      );
     return (
       this.emit(this.indent()) +
       this.emit(node.property + ': ' + node.value, node.position) +

test/cases/gridTemplateArea/ast.json

@@ -0,0 +1 @@
+{"type":"stylesheet","stylesheet":{"source":"input.css","rules":[{"type":"rule","selectors":["foo"],"declarations":[{"type":"declaration","property":"grid-template-areas","value":"\"menu head head head\"\n\"menu main main main\"\n\"menu main main main\"\n\"menu footer footer footer\"","position":{"start":{"line":2,"column":3},"end":{"line":5,"column":28},"source":"input.css"}}],"position":{"start":{"line":1,"column":1},"end":{"line":6,"column":2},"source":"input.css"}}],"parsingErrors":[]}}

test/cases/gridTemplateArea/compressed.css

@@ -0,0 +1,4 @@
+foo{grid-template-areas:"menu head head head"
+"menu main main main"
+"menu main main main"
+"menu footer footer footer";}

test/cases/gridTemplateArea/input.css

@@ -0,0 +1,6 @@
+foo {
+  grid-template-areas: "menu head head head"
+"menu main main main"
+"menu main main main"
+"menu footer footer footer";
+}

test/cases/gridTemplateArea/output.css

@@ -0,0 +1,6 @@
+foo {
+  grid-template-areas: "menu head head head"
+                       "menu main main main"
+                       "menu main main main"
+                       "menu footer footer footer";
+}