Merge pull request #6 from node-projects/copilot/check-css-features-and-tests

Fix grid-template-areas round-trip bug, fix mapVisit empty-node delimiters, add complex CSS tests

Author: jogibear9988

src/stringify/compiler.ts

@@ -134,9 +134,12 @@ class Compiler {
     delim = delim || '';
 
     for (let i = 0, length = nodes.length; i < length; i++) {
-      buf += this.visit(nodes[i]);
-      if (delim && i < length - 1) {
-        buf += this.emit(delim);
+      const str = this.visit(nodes[i]);
+      if (str) {
+        if (delim && buf) {
+          buf += this.emit(delim);
+        }
+        buf += str;
       }
     }
 
@@ -598,17 +601,19 @@ class Compiler {
         this.emit(';')
       );
     }
-    if (node.property === 'grid-template-areas')
+    if (node.property === 'grid-template-areas') {
+      const indent = this.indent();
+      const pad = indent.length + node.property.length + 2; // 2 for ": "
+      const parts = node.value.split('\n');
+      const aligned = parts
+        .map((p, i) => (i === 0 ? p : ' '.repeat(pad) + p.trimStart()))
+        .join('\n');
       return (
-        this.emit(this.indent()) +
-        this.emit(
-          node.property +
-            ': ' +
-            node.value.split('\n').join('\n'.padEnd(22) + this.indent()),
-          node.position,
-        ) +
+        this.emit(indent) +
+        this.emit(`${node.property}: ${aligned}`, node.position) +
         this.emit(';')
       );
+    }
     return (
       this.emit(this.indent()) +
       this.emit(`${node.property}: ${node.value}`, node.position) +

test/cases/escapes/output.css

@@ -4,28 +4,16 @@
 
 /* will match elements with class=":`(" */
 
-
-
 /* will match elements with class="1a2b3c" */
 
-
-
 /* will match the element with id="#fake-id" */
 
-
-
 /* will match the element with id="---" */
 
-
-
 /* will match the element with id="-a-b-c-" */
 
-
-
 /* will match the element with id="©" */
 
-
-
 /* More tests from http://mathiasbynens.be/demo/html5-id */
 
 html {
@@ -175,4 +163,4 @@ li {
 
 /* css-parse does not yet pass this test */
 
-/*#\{\}{background:lime;}*/
+/*#\{\}{background:lime;}*/

test/cases/modern-css/ast.json

@@ -0,0 +1 @@
+{"type":"stylesheet","stylesheet":{"source":"input.css","rules":[{"type":"layer","layer":"base, components, utilities","position":{"start":{"line":1,"column":1},"end":{"line":3,"column":1},"source":"input.css"}},{"type":"property","name":"--accent","declarations":[{"type":"declaration","property":"syntax","value":"\"<color>\"","position":{"start":{"line":4,"column":3},"end":{"line":4,"column":20},"source":"input.css"}},{"type":"declaration","property":"inherits","value":"true","position":{"start":{"line":5,"column":3},"end":{"line":5,"column":17},"source":"input.css"}},{"type":"declaration","property":"initial-value","value":"oklch(0.7 0.15 180)","position":{"start":{"line":6,"column":3},"end":{"line":6,"column":37},"source":"input.css"}}],"position":{"start":{"line":3,"column":1},"end":{"line":7,"column":2},"source":"input.css"}},{"type":"font-face","declarations":[{"type":"declaration","property":"font-family","value":"\"App Font\"","position":{"start":{"line":10,"column":3},"end":{"line":10,"column":26},"source":"input.css"}},{"type":"declaration","property":"src","value":"url(\"font.woff2\") format(\"woff2\")","position":{"start":{"line":11,"column":3},"end":{"line":11,"column":41},"source":"input.css"}},{"type":"declaration","property":"font-display","value":"swap","position":{"start":{"line":12,"column":3},"end":{"line":12,"column":21},"source":"input.css"}},{"type":"declaration","property":"font-weight","value":"100 900","position":{"start":{"line":13,"column":3},"end":{"line":13,"column":23},"source":"input.css"}}],"position":{"start":{"line":9,"column":1},"end":{"line":14,"column":2},"source":"input.css"}},{"type":"layer","layer":"base","rules":[{"type":"rule","selectors":[":root"],"declarations":[{"type":"declaration","property":"--accent","value":"oklch(0.7 0.15 180)","position":{"start":{"line":18,"column":5},"end":{"line":18,"column":34},"source":"input.css"}},{"type":"declaration","property":"--spacing","value":"clamp(0.5rem, 2vw, 2rem)","position":{"start":{"line":19,"column":5},"end":{"line":19,"column":40},"source":"input.css"}}],"position":{"start":{"line":17,"column":3},"end":{"line":20,"column":4},"source":"input.css"}},{"type":"rule","selectors":["*","*::before","*::after"],"declarations":[{"type":"declaration","property":"box-sizing","value":"border-box","position":{"start":{"line":25,"column":5},"end":{"line":25,"column":27},"source":"input.css"}},{"type":"declaration","property":"margin","value":"0","position":{"start":{"line":26,"column":5},"end":{"line":26,"column":14},"source":"input.css"}}],"position":{"start":{"line":22,"column":3},"end":{"line":27,"column":4},"source":"input.css"}}],"position":{"start":{"line":16,"column":1},"end":{"line":28,"column":2},"source":"input.css"}},{"type":"layer","layer":"components","rules":[{"type":"rule","selectors":[".card"],"declarations":[{"type":"declaration","property":"container-type","value":"inline-size","position":{"start":{"line":32,"column":5},"end":{"line":32,"column":32},"source":"input.css"}},{"type":"declaration","property":"padding","value":"var(--spacing)","position":{"start":{"line":33,"column":5},"end":{"line":33,"column":28},"source":"input.css"}},{"type":"declaration","property":"background","value":"color-mix(in oklch, var(--accent) 10%, white)","position":{"start":{"line":34,"column":5},"end":{"line":34,"column":62},"source":"input.css"}},{"type":"rule","selectors":["& .title"],"declarations":[{"type":"declaration","property":"font-size","value":"1.5em","position":{"start":{"line":37,"column":7},"end":{"line":37,"column":23},"source":"input.css"}},{"type":"declaration","property":"color","value":"var(--accent)","position":{"start":{"line":38,"column":7},"end":{"line":38,"column":27},"source":"input.css"}},{"type":"rule","selectors":["&:hover"],"declarations":[{"type":"declaration","property":"color","value":"color-mix(in oklch, var(--accent), black 20%)","position":{"start":{"line":41,"column":9},"end":{"line":41,"column":61},"source":"input.css"}}],"position":{"start":{"line":40,"column":7},"end":{"line":42,"column":8},"source":"input.css"}}],"position":{"start":{"line":36,"column":5},"end":{"line":43,"column":6},"source":"input.css"}},{"type":"container","container":"(min-width: 400px)","rules":[{"type":"declaration","property":"display","value":"grid","position":{"start":{"line":46,"column":7},"end":{"line":46,"column":20},"source":"input.css"}},{"type":"declaration","property":"grid-template-columns","value":"1fr 2fr","position":{"start":{"line":47,"column":7},"end":{"line":47,"column":37},"source":"input.css"}},{"type":"declaration","property":"gap","value":"var(--spacing)","position":{"start":{"line":48,"column":7},"end":{"line":48,"column":26},"source":"input.css"}}],"position":{"start":{"line":45,"column":5},"end":{"line":49,"column":6},"source":"input.css"}},{"type":"media","media":"(prefers-color-scheme: dark)","rules":[{"type":"declaration","property":"background","value":"color-mix(in oklch, var(--accent) 10%, black)","position":{"start":{"line":52,"column":7},"end":{"line":52,"column":64},"source":"input.css"}}],"position":{"start":{"line":51,"column":5},"end":{"line":53,"column":6},"source":"input.css"}}],"position":{"start":{"line":31,"column":3},"end":{"line":54,"column":4},"source":"input.css"}}],"position":{"start":{"line":30,"column":1},"end":{"line":55,"column":2},"source":"input.css"}},{"type":"layer","layer":"utilities","rules":[{"type":"rule","selectors":[".sr-only:not(:focus):not(:active)"],"declarations":[{"type":"declaration","property":"clip","value":"rect(0 0 0 0)","position":{"start":{"line":59,"column":5},"end":{"line":59,"column":24},"source":"input.css"}},{"type":"declaration","property":"clip-path","value":"inset(50%)","position":{"start":{"line":60,"column":5},"end":{"line":60,"column":26},"source":"input.css"}},{"type":"declaration","property":"height","value":"1px","position":{"start":{"line":61,"column":5},"end":{"line":61,"column":16},"source":"input.css"}},{"type":"declaration","property":"overflow","value":"hidden","position":{"start":{"line":62,"column":5},"end":{"line":62,"column":21},"source":"input.css"}},{"type":"declaration","property":"position","value":"absolute","position":{"start":{"line":63,"column":5},"end":{"line":63,"column":23},"source":"input.css"}},{"type":"declaration","property":"white-space","value":"nowrap","position":{"start":{"line":64,"column":5},"end":{"line":64,"column":24},"source":"input.css"}},{"type":"declaration","property":"width","value":"1px","position":{"start":{"line":65,"column":5},"end":{"line":65,"column":15},"source":"input.css"}}],"position":{"start":{"line":58,"column":3},"end":{"line":66,"column":4},"source":"input.css"}}],"position":{"start":{"line":57,"column":1},"end":{"line":67,"column":2},"source":"input.css"}},{"type":"supports","supports":"selector(:has(> .child))","rules":[{"type":"rule","selectors":[".parent:has(> .child)"],"declarations":[{"type":"declaration","property":"color","value":"red","position":{"start":{"line":71,"column":5},"end":{"line":71,"column":15},"source":"input.css"}}],"position":{"start":{"line":70,"column":3},"end":{"line":72,"column":4},"source":"input.css"}}],"position":{"start":{"line":69,"column":1},"end":{"line":73,"column":2},"source":"input.css"}},{"type":"scope","scope":"(.theme-dark) to (.theme-light)","rules":[{"type":"rule","selectors":[":scope"],"declarations":[{"type":"declaration","property":"background","value":"#222","position":{"start":{"line":77,"column":5},"end":{"line":77,"column":21},"source":"input.css"}}],"position":{"start":{"line":76,"column":3},"end":{"line":78,"column":4},"source":"input.css"}},{"type":"rule","selectors":["a"],"declarations":[{"type":"declaration","property":"color","value":"lightblue","position":{"start":{"line":80,"column":5},"end":{"line":80,"column":21},"source":"input.css"}}],"position":{"start":{"line":79,"column":3},"end":{"line":81,"column":4},"source":"input.css"}}],"position":{"start":{"line":75,"column":1},"end":{"line":82,"column":2},"source":"input.css"}},{"type":"media","media":"(width > 600px)","rules":[{"type":"rule","selectors":[".wide"],"declarations":[{"type":"declaration","property":"display","value":"flex","position":{"start":{"line":86,"column":5},"end":{"line":86,"column":18},"source":"input.css"}}],"position":{"start":{"line":85,"column":3},"end":{"line":87,"column":4},"source":"input.css"}}],"position":{"start":{"line":84,"column":1},"end":{"line":88,"column":2},"source":"input.css"}},{"type":"media","media":"print","rules":[{"type":"page","selectors":[],"declarations":[{"type":"declaration","property":"margin","value":"2cm","position":{"start":{"line":92,"column":5},"end":{"line":92,"column":16},"source":"input.css"}},{"type":"page-margin-box","name":"top-center","declarations":[{"type":"declaration","property":"content","value":"\"Document Title\"","position":{"start":{"line":94,"column":7},"end":{"line":94,"column":32},"source":"input.css"}}],"position":{"start":{"line":93,"column":5},"end":{"line":95,"column":6},"source":"input.css"}}],"position":{"start":{"line":91,"column":3},"end":{"line":96,"column":4},"source":"input.css"}},{"type":"rule","selectors":[".no-print"],"declarations":[{"type":"declaration","property":"display","value":"none !important","position":{"start":{"line":98,"column":5},"end":{"line":98,"column":29},"source":"input.css"}}],"position":{"start":{"line":97,"column":3},"end":{"line":99,"column":4},"source":"input.css"}}],"position":{"start":{"line":90,"column":1},"end":{"line":100,"column":2},"source":"input.css"}}],"parsingErrors":[]}}

test/cases/modern-css/compressed.css

@@ -0,0 +1,100 @@
+@layer base, components, utilities;
+
+@property --accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.7 0.15 180);
+}
+
+@font-face {
+  font-family: "App Font";
+  src: url("font.woff2") format("woff2");
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+@layer base {
+  :root {
+    --accent: oklch(0.7 0.15 180);
+    --spacing: clamp(0.5rem, 2vw, 2rem);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+}
+
+@layer components {
+  .card {
+    container-type: inline-size;
+    padding: var(--spacing);
+    background: color-mix(in oklch, var(--accent) 10%, white);
+
+    & .title {
+      font-size: 1.5em;
+      color: var(--accent);
+
+      &:hover {
+        color: color-mix(in oklch, var(--accent), black 20%);
+      }
+    }
+
+    @container (min-width: 400px) {
+      display: grid;
+      grid-template-columns: 1fr 2fr;
+      gap: var(--spacing);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      background: color-mix(in oklch, var(--accent) 10%, black);
+    }
+  }
+}
+
+@layer utilities {
+  .sr-only:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+@supports selector(:has(> .child)) {
+  .parent:has(> .child) {
+    color: red;
+  }
+}
+
+@scope (.theme-dark) to (.theme-light) {
+  :scope {
+    background: #222;
+  }
+  a {
+    color: lightblue;
+  }
+}
+
+@media (width > 600px) {
+  .wide {
+    display: flex;
+  }
+}
+
+@media print {
+  @page {
+    margin: 2cm;
+    @top-center {
+      content: "Document Title";
+    }
+  }
+  .no-print {
+    display: none !important;
+  }
+}

test/cases/modern-css/input.css

@@ -0,0 +1,100 @@
+@layer base, components, utilities;
+
+@property --accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(0.7 0.15 180);
+}
+
+@font-face {
+  font-family: "App Font";
+  src: url("font.woff2") format("woff2");
+  font-display: swap;
+  font-weight: 100 900;
+}
+
+@layer base {
+  :root {
+    --accent: oklch(0.7 0.15 180);
+    --spacing: clamp(0.5rem, 2vw, 2rem);
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+}
+
+@layer components {
+  .card {
+    container-type: inline-size;
+    padding: var(--spacing);
+    background: color-mix(in oklch, var(--accent) 10%, white);
+    & .title {
+      font-size: 1.5em;
+      color: var(--accent);
+      &:hover {
+        color: color-mix(in oklch, var(--accent), black 20%);
+      }
+    }
+    @container (min-width: 400px) {
+      display: grid;
+
+      grid-template-columns: 1fr 2fr;
+
+      gap: var(--spacing);
+    }
+    @media (prefers-color-scheme: dark) {
+      background: color-mix(in oklch, var(--accent) 10%, black);
+    }
+  }
+}
+
+@layer utilities {
+  .sr-only:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+}
+
+@supports selector(:has(> .child)) {
+  .parent:has(> .child) {
+    color: red;
+  }
+}
+
+@scope (.theme-dark) to (.theme-light) {
+  :scope {
+    background: #222;
+  }
+
+  a {
+    color: lightblue;
+  }
+}
+
+@media (width > 600px) {
+  .wide {
+    display: flex;
+  }
+}
+
+@media print {
+@page {
+    margin: 2cm;
+    @top-center {
+      content: "Document Title";
+    }
+}
+
+  .no-print {
+    display: none !important;
+  }
+}

test/cases/modern-css/output.css

@@ -28,8 +28,8 @@
 
 .grid-areas {
   grid-template-areas: "header header header"
-                           "sidebar main aside"
-                           "footer footer footer";
+                       "sidebar main aside"
+                       "footer footer footer";
   grid-template-columns: 200px 1fr 150px;
 }