Do not remove whitespace in token lists

Fixes #1005, fixes #1001, fixes #976, closes #1029, fixes #980, closes #1068, fixes #646, fixes #579

In unknown/custom properties and rules, we do not know what the syntax grammar is, so we don't know where whitespace is significant or not. Previously we tried to be too smart and made some assumptions. This broke certain unknown syntax and also affected custom transformers that tried to replace tokens with other values.

We now no longer remove whitespace during parsing, and during printing only replace whitespace with a single space character instead of trying to completely remove it. This results in worse compression in a few places that we can potentially later improve, but is more correct.

Note that if you write a custom transformer, you are responsible for ensuring that there are whitespace tokens surrounding any values you replace when needed. Lightning CSS does not automatically insert whitespace as it cannot know whether this is correct or not. But at least now Lightning CSS no longer removes whitespace that was already there.

Author: devongovett

node/test/visitor.test.mjs

@@ -249,6 +249,68 @@ test('specific environment variables', () => {
   assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');
 });
 
+test('spacing with env substitution', () => {
+  // Test spacing for different cases when `env()` functions are replaced with actual values.
+  /** @type {Record<string, string>} */
+  let tokens = {
+    '--var1': 'var(--foo)',
+    '--var2': 'var(--bar)',
+    '--function': 'scale(1.5)',
+    '--length1': '10px',
+    '--length2': '20px',
+    '--x': '4',
+    '--y': '12',
+    '--num1': '5',
+    '--num2': '10',
+    '--num3': '15',
+    '--counter': '2',
+    '--ident1': 'solid',
+    '--ident2': 'auto',
+    '--rotate': '45deg',
+    '--percentage1': '25%',
+    '--percentage2': '75%',
+    '--color': 'red',
+    '--color1': '#ff1234',
+    '--string1': '"hello"',
+    '--string2': '" world"'
+  };
+
+  let res = transform({
+    filename: 'test.css',
+    minify: true,
+    code: Buffer.from(`
+      .test {
+        /* Asymmetric spacing - no space after var(). */
+        background: env(--var1) env(--var2);
+        border: env(--var1)env(--ident1);
+        transform: env(--function) env(--function);
+        /* Normal spacing between values. */
+        padding: env(--length1) env(--length2);
+        margin: env(--length1) env(--ident2);
+        outline: env(--color) env(--ident1);
+        /* Raw numbers that need spacing. */
+        cursor: url(cursor.png) env(--x) env(--y), auto;
+        stroke-dasharray: env(--num1) env(--num2) env(--num3);
+        counter-increment: myCounter env(--counter);
+        /* Mixed token types. */
+        background: linear-gradient(red env(--percentage1), blue env(--percentage2));
+        content: env(--string1) env(--string2);
+        /* Inside calc expressions. */
+        width: calc(env(--length1) - env(--length2));
+      }
+    `),
+    visitor: {
+      EnvironmentVariable(env) {
+        if (env.name.type === 'custom' && tokens[env.name.ident]) {
+          return { raw: tokens[env.name.ident] };
+        }
+      }
+    }
+  });
+
+  assert.equal(res.code.toString(), '.test{background:var(--foo) var(--bar);border:var(--foo)solid;transform:scale(1.5) scale(1.5);padding:10px 20px;margin:10px auto;outline:red solid;cursor:url(cursor.png) 4 12, auto;stroke-dasharray:5 10 15;counter-increment:myCounter 2;background:linear-gradient(red 25%, blue 75%);content:"hello" " world";width:calc(10px - 20px)}');
+});
+
 test('url', () => {
   // https://www.npmjs.com/package/postcss-url
   let res = transform({

src/lib.rs

@@ -8020,7 +8020,22 @@ mod tests {
     );
     minify_test(
       ".foo { width: calc(100% - 2 (2 * var(--card-margin))); }",
-      ".foo{width:calc(100% - 2 (2*var(--card-margin)))}",
+      ".foo{width:calc(100% - 2 (2 * var(--card-margin)))}",
+    );
+
+    test(
+      indoc! {r#"
+    .test {
+      width: calc(var(--test) + 2px);
+      width: calc(var(--test) - 2px);
+    }
+    "#},
+      indoc! {r#"
+    .test {
+      width: calc(var(--test) + 2px);
+      width: calc(var(--test) - 2px);
+    }
+    "#},
     );
   }
 
@@ -8081,7 +8096,7 @@ mod tests {
     minify_test(".foo { rotate: atan2(0, -1)", ".foo{rotate:180deg}");
     minify_test(".foo { rotate: atan2(-1, 1)", ".foo{rotate:-45deg}");
     // incompatible units
-    minify_test(".foo { rotate: atan2(1px, -1vw)", ".foo{rotate:atan2(1px,-1vw)}");
+    minify_test(".foo { rotate: atan2(1px, -1vw)", ".foo{rotate:atan2(1px, -1vw)}");
   }
 
   #[test]
@@ -8113,7 +8128,10 @@ mod tests {
     minify_test(".foo { width: abs(1%)", ".foo{width:abs(1%)}"); // spec says percentages must be against resolved value
 
     minify_test(".foo { width: calc(10px * sign(-1vw)", ".foo{width:-10px}");
-    minify_test(".foo { width: calc(10px * sign(1%)", ".foo{width:calc(10px*sign(1%))}");
+    minify_test(
+      ".foo { width: calc(10px * sign(1%)",
+      ".foo{width:calc(10px * sign(1%))}",
+    );
   }
 
   #[test]
@@ -13947,7 +13965,7 @@ mod tests {
     // ref: https://github.com/parcel-bundler/lightningcss/pull/255#issuecomment-1219049998
     minify_test(
       "@font-face {src: url(\"foo.ttf\") tech(palettes  color-colrv0  variations) format(opentype);}",
-      "@font-face{src:url(foo.ttf) tech(palettes color-colrv0 variations)format(opentype)}",
+      "@font-face{src:url(foo.ttf) tech(palettes color-colrv0 variations) format(opentype)}",
     );
     // TODO(CGQAQ): make this test pass when we have strict mode
     // ref: https://github.com/web-platform-tests/wpt/blob/9f8a6ccc41aa725e8f51f4f096f686313bb88d8d/css/css-fonts/parsing/font-face-src-tech.html#L45
@@ -13969,7 +13987,7 @@ mod tests {
     // );
     minify_test(
       "@font-face {src: local(\"\") url(\"test.woff\");}",
-      "@font-face{src:local(\"\")url(test.woff)}",
+      "@font-face{src:local(\"\") url(test.woff)}",
     );
     minify_test("@font-face {font-weight: 200 400}", "@font-face{font-weight:200 400}");
     minify_test("@font-face {font-weight: 400 400}", "@font-face{font-weight:400}");
@@ -14067,7 +14085,7 @@ mod tests {
       font-family: Handover Sans;
       base-palette: 3;
       override-colors: 1 rgb(43, 12, 9), 3 var(--highlight);
-    }"#, "@font-palette-values --Cooler{font-family:Handover Sans;base-palette:3;override-colors:1 #2b0c09,3 var(--highlight)}");
+    }"#, "@font-palette-values --Cooler{font-family:Handover Sans;base-palette:3;override-colors:1 #2b0c09, 3 var(--highlight)}");
     prefix_test(
       r#"@font-palette-values --Cooler {
       font-family: Handover Sans;
@@ -20439,19 +20457,19 @@ mod tests {
     );
     minify_test(
       ".foo { color: color-mix(in srgb, currentColor, blue); }",
-      ".foo{color:color-mix(in srgb,currentColor,blue)}",
+      ".foo{color:color-mix(in srgb, currentColor, blue)}",
     );
     minify_test(
       ".foo { color: color-mix(in srgb, blue, currentColor); }",
-      ".foo{color:color-mix(in srgb,blue,currentColor)}",
+      ".foo{color:color-mix(in srgb, blue, currentColor)}",
     );
     minify_test(
       ".foo { color: color-mix(in srgb, accentcolor, blue); }",
-      ".foo{color:color-mix(in srgb,accentcolor,blue)}",
+      ".foo{color:color-mix(in srgb, accentcolor, blue)}",
     );
     minify_test(
       ".foo { color: color-mix(in srgb, blue, accentcolor); }",
-      ".foo{color:color-mix(in srgb,blue,accentcolor)}",
+      ".foo{color:color-mix(in srgb, blue, accentcolor)}",
     );
 
     // regex for converting web platform tests:
@@ -22645,15 +22663,15 @@ mod tests {
     minify_test(".foo { --test: var(--foo, 20px); }", ".foo{--test:var(--foo,20px)}");
     minify_test(
       ".foo { transition: var(--foo, 20px),\nvar(--bar, 40px); }",
-      ".foo{transition:var(--foo,20px),var(--bar,40px)}",
+      ".foo{transition:var(--foo,20px), var(--bar,40px)}",
     );
     minify_test(
       ".foo { background: var(--color) var(--image); }",
-      ".foo{background:var(--color)var(--image)}",
+      ".foo{background:var(--color) var(--image)}",
     );
     minify_test(
       ".foo { height: calc(var(--spectrum-global-dimension-size-300) / 2);",
-      ".foo{height:calc(var(--spectrum-global-dimension-size-300)/2)}",
+      ".foo{height:calc(var(--spectrum-global-dimension-size-300) / 2)}",
     );
     minify_test(
       ".foo { color: var(--color, rgb(255, 255, 0)); }",
@@ -22665,12 +22683,32 @@ mod tests {
     );
     minify_test(
       ".foo { color: var(--color, rgb(var(--red), var(--green), 0)); }",
-      ".foo{color:var(--color,rgb(var(--red),var(--green),0))}",
+      ".foo{color:var(--color,rgb(var(--red), var(--green), 0))}",
     );
     minify_test(".foo { --test: .5s; }", ".foo{--test:.5s}");
     minify_test(".foo { --theme-sizes-1\\/12: 2 }", ".foo{--theme-sizes-1\\/12:2}");
     minify_test(".foo { --test: 0px; }", ".foo{--test:0px}");
 
+    // Test attr() function with type() syntax - minified
+    minify_test(
+      ".foo { background-color: attr(data-color type(<color>)); }",
+      ".foo{background-color:attr(data-color type(<color>))}",
+    );
+    minify_test(
+      ".foo { width: attr(data-width type(<length>), 100px); }",
+      ".foo{width:attr(data-width type(<length>), 100px)}",
+    );
+
+    // Test attr() function with type() syntax - non-minified (issue with extra spaces)
+    test(
+      ".foo { background-color: attr(data-color type(<color>)); }",
+      ".foo {\n  background-color: attr(data-color type(<color>));\n}\n",
+    );
+    test(
+      ".foo { width: attr(data-width type(<length>), 100px); }",
+      ".foo {\n  width: attr(data-width type(<length>), 100px);\n}\n",
+    );
+
     prefix_test(
       r#"
       .foo {
@@ -23460,7 +23498,7 @@ mod tests {
     );
     attr_test(
       "text-decoration: var(--foo) lab(40% 56.6 39);",
-      "text-decoration:var(--foo)#b32323",
+      "text-decoration:var(--foo) #b32323",
       true,
       Some(Browsers {
         chrome: Some(90 << 16),
@@ -24686,7 +24724,9 @@ mod tests {
       indoc! {r#"
         div {
           color: #00f;
-          --button: focus { color: red; };
+          --button: focus {
+                    color: red;
+                  };
         }
       "#},
     );
@@ -29536,11 +29576,12 @@ mod tests {
         color: red;
       }
     }"#,
-      indoc! {r#"
-      @foo test {
-        div { color: red; }
-      }
-      "#},
+      indoc! { r#"@foo test {
+      div {
+            color: red;
+          }
+    }
+    "#},
     );
     minify_test(
       r#"@foo test {