More readable output

Author: ai

index.js

@@ -139,7 +139,14 @@ function replaceFunctions(decl, func) {
     let paramResult = checkParams(decl, searchPattern + ')', params, startIndex)
     let [x, y, blur, color] = paramResult.args
     let shadows = renderShadows(func, paramResult.inset, x, y, blur, color)
-    let replacement = shadows.join(', ')
+
+    let replacement
+    if (decl.raws.between && decl.raws.before) {
+      replacement =
+        `${decl.raws.before}  ` + shadows.join(`,${decl.raws.before}  `)
+    } else {
+      replacement = shadows.join(', ')
+    }
 
     result =
       result.substring(0, startIndex) + replacement + result.substring(endIndex)

test/fixtures/does-not-insert-spaces-into-compressed-css.css

@@ -0,0 +1 @@
+a {box-shadow:--soft-shadow(2px 4px 12px blue);}

test/fixtures/does-not-insert-spaces-into-compressed-css.out.css

@@ -0,0 +1 @@
+a {box-shadow:calc(0.25 * 2px) calc(0.25 * 4px) calc(0.25 * 12px) rgb(from blue r g b / calc(alpha * 0.5)), calc(1 * 2px) calc(1 * 4px) calc(1 * 12px) rgb(from blue r g b / calc(alpha * 1));}

test/fixtures/handles-complex-calc-expressions-with-nested-functions.css

@@ -1 +1,5 @@
-a { box-shadow: --linear-shadow(calc(min(1px, 2px) + max(3px, 4px)) calc(clamp(1px, 50%, 10px)) 12px red); }
+a {
+  box-shadow: --linear-shadow(
+    calc(min(1px, 2px) + max(3px, 4px)) calc(clamp(1px, 50%, 10px)) 12px red
+  );
+}

test/fixtures/handles-complex-calc-expressions-with-nested-functions.out.css

@@ -1 +1,5 @@
-a { box-shadow: calc(0.25 * calc(min(1px, 2px) + max(3px, 4px))) calc(0.25 * calc(clamp(1px, 50%, 10px))) calc(0.25 * 12px) rgb(from red r g b / calc(alpha * 1)), calc(1 * calc(min(1px, 2px) + max(3px, 4px))) calc(1 * calc(clamp(1px, 50%, 10px))) calc(1 * 12px) rgb(from red r g b / calc(alpha * 1)); }
+a {
+  box-shadow: 
+    calc(0.25 * calc(min(1px, 2px) + max(3px, 4px))) calc(0.25 * calc(clamp(1px, 50%, 10px))) calc(0.25 * 12px) rgb(from red r g b / calc(alpha * 1)),
+    calc(1 * calc(min(1px, 2px) + max(3px, 4px))) calc(1 * calc(clamp(1px, 50%, 10px))) calc(1 * 12px) rgb(from red r g b / calc(alpha * 1));
+}

test/fixtures/handles-complex-nested-functions.css

@@ -1 +1,5 @@
-a { box-shadow: --linear-shadow(calc(1% + 1px) 2px 10rem oklch(0 0 0 / var(--test))); }
+a {
+  box-shadow: --linear-shadow(
+    calc(1% + 1px) 2px 10rem oklch(0 0 0 / var(--test))
+  );
+}

test/fixtures/handles-complex-nested-functions.out.css

@@ -1 +1,3 @@
-a { box-shadow: --soft-shadow(var(--x) var(--y) var(--blur) var(--color)); }
+a {
+  box-shadow: --soft-shadow(var(--x) var(--y) var(--blur) var(--color));
+}

test/fixtures/handles-css-variables-in-parameters.css

@@ -1 +1,8 @@
-a { box-shadow: calc(0.04 * var(--x)) calc(0.04 * var(--y)) calc(0.04 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.2)), calc(0.16 * var(--x)) calc(0.16 * var(--y)) calc(0.16 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.4)), calc(0.36 * var(--x)) calc(0.36 * var(--y)) calc(0.36 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.6)), calc(0.64 * var(--x)) calc(0.64 * var(--y)) calc(0.64 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.8)), calc(1 * var(--x)) calc(1 * var(--y)) calc(1 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 1)); }
+a {
+  box-shadow: 
+    calc(0.04 * var(--x)) calc(0.04 * var(--y)) calc(0.04 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.2)),
+    calc(0.16 * var(--x)) calc(0.16 * var(--y)) calc(0.16 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.4)),
+    calc(0.36 * var(--x)) calc(0.36 * var(--y)) calc(0.36 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.6)),
+    calc(0.64 * var(--x)) calc(0.64 * var(--y)) calc(0.64 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 0.8)),
+    calc(1 * var(--x)) calc(1 * var(--y)) calc(1 * var(--blur)) rgb(from var(--color) r g b / calc(alpha * 1));
+}

test/fixtures/handles-css-variables-in-parameters.out.css

@@ -1 +1,6 @@
-a { box-shadow: --linear-shadow(calc((1px + 2px) * (3 + 4)) calc(min(max(1px, 2px), 10px)) 12px hsl(calc(var(--base-hue, 0) + (var(--offset, 30) * 2)), 50%, 50%)); }
+a {
+  box-shadow: --linear-shadow(
+    calc((1px + 2px) * (3 + 4)) calc(min(max(1px, 2px), 10px)) 12px
+      hsl(calc(var(--base-hue, 0) + (var(--offset, 30) * 2)), 50%, 50%)
+  );
+}