Compressed mode adds whitespace between arguments of some functions

[MahdiAljazairi]

Release: Dart Sass v1.26.10 Platform: Windows7 32bit

When output style is set to be compressed, the compiler should do whatever it can to reduce the size of the output. However, the compiler still adds spaces in some certain places. See the example below:

Input:

.btn {
  --clr-a: rgb(255,170,0);
  --clr-b:rgb(255,170,0);
  color: rgb(255,170,0);
  background: linear-gradient(transparent,rgba(0,0,0,0.25));
  
  &:hover {
    transform: scale(1.1,0.9);
  }
}

@supports (background:conic-gradient(red,yellow)) {
  .btn {
    background: conic-gradient(transparent,rgba(black,0.25),transparent);
  }
}

Output:

.btn{--clr-a: rgb(255,170,0);--clr-b:rgb(255,170,0);color:#fa0;background:linear-gradient(transparent, rgba(0, 0, 0, 0.25))}.btn:hover{transform:scale(1.1, 0.9)}@supports(background: conic-gradient(red, yellow)){.btn{background:conic-gradient(transparent, rgba(0, 0, 0, 0.25), transparent)}}

Spaces Added after Commas and Colons

As you can see, functions like linear-gradient, scale and conic-gradient get spaces after all commas inside. While function like rgb don't. This might seem inconsistent, but it is not. It seems like modern functions -like gradients and transformations- get ignored by the compression algorithm. And thus get rendered as expanded instead of compressed.

Any way.. there shouldn't be any spaces after commas no matter where they appeare. Except if present in a quoted string.

The same problem occurs for the statement in the head of @supports.

@supports(background: conic-gradient(red, yellow)){ ... }

A space is added after the colon in the statement. While, instead, eliminated in the body of the rule. I didn't test other at-rules, this is all what I know.

Custom Properties Delivered As Is

This one is related to the input. When you compare the declarations of --clr-a and --clr-b, you can see that a space after a colon is rendered only if present in the input , and vice versa.

/*Input*/
--clr-a: rgb(255,170,0);
--clr-b:rgb(255,170,0);
color: rgb(255,170,0);

/*Output*/
--clr-a: rgb(255,170,0);--clr-b:rgb(255,170,0);color:#fa0;

This issue also occurs in the expanded style. Where no spaces after colons are rendered if not present in the input.

Another side issue is that expressions in custom properties' declarations are not shortened. As you can see, the property value in color is shortened, while left as is in --clr-a & --clr-b.

An Extra Newline Character

There is an extra newline character added to the end of the output file. This one also occurs in the expanded style. I know this is not a big issue. But still, it would be nice if fixed.

[jathak]

The allowed syntax for CSS custom properties is extremely broad, so SassScript isn't evaluated within them unless you use #{} interpolation, and the compiler avoids making optimizations within them as much as possible.

It's considered good practice for text files to end with a newline character (see here for an explanation why), so Sass always includes one, even if your source file did not end with a newline.

The space between some function arguments is something we could improve, so I'll retarget this issue for that improvement specifically.