Fixed scss function arguments on different lines in maps #9128

[agamkrbit]

Fixed bug #9128

• I’ve added tests to confirm my change works.
• (If changing the API or CLI) I’ve documented the changes I’ve made (in the docs/ directory)
• (If the change is user-facing) I’ve added my changes to changelog_unreleased/*/pr-XXXX.md file following changelog_unreleased/TEMPLATE.md.
• I’ve read the contributing guidelines.

✨Try the playground for this PR✨

[alexander-akait]

Please add tests

[alexander-akait]

Please add tests

[alexander-akait]

I think it is some ugly, more readable (with spaces):

#{map-get($grid-breakpoints, "sm") - 1}

[agamkrbit]

Sure will make the changes

[alexander-akait]

Can we add couple test more? the harder is the better

[agamkrbit]

sure, I will try to add. Do you have anything in mind?

[alexander-akait]

Something difficult with sass maps/list with interpolation

[agamkrbit]

added new testcases

[alexander-akait]

Bug?

[agamkrbit]

I guess no. checked in the playground. Over there also it is formatting in the same way link

[alexander-akait]

Let's add/fix two cases here in:

.text-#{ $name }

and

.text #{ $name }

[agamkrbit]

sorry, didn't get your point. Can you please explain a bit.
.text-
#{ $name }
is formatting into
.text- #{ $name }

do you think it a bug? because we can't just assume that if it ends with "-", we have to merge the next text without space. The class name can also be just "test-", right?

[alexander-akait]

No, it is not bug, just put in tests:

@each 
$size 
in 
$sizes {
.icon
#{$size} 
{
border
: 
"#{$size + "px"}" 
solid 
red;
}
}

and

@each 
$size 
in 
$sizes {
.icon-#{$size} 
{
border
: 
"#{$size + "px"}" 
solid 
red;
}
}

and

//map test
$font-weights
: 
("regular": 400
, 
"medium": 500, 
"bold": 
700);
@each 
$name, 
$boldness 
in 
$icons {
.text
#{
$name
} {
color: red;
font-weight: 
"#{$boldness}"
}
}

//map test
$font-weights
: 
("regular": 400
, 
"medium": 500, 
"bold": 
700);
@each 
$name, 
$boldness 
in 
$icons {
.text-#{
$name
} {
color: red;
font-weight: 
"#{$boldness}"
}
}

Instead

[agamkrbit]

Thanks, will make the changes

[alexander-akait]

Not sure it is safe to trim here, why we do it?

[agamkrbit]

Stringify was adding extra '\n', so I am using trim

[alexander-akait]

/cc @fisker @sosukesuzuki

[fisker]

.icon-#{$size} above didn't add space around

[alexander-akait]

@fisker and should not, you can write it in different ways (all valid):

.text foo { }

.text- foo {}

.text-foo {}

[fisker]

I mean space inside #{}, this one has space around $name, but .icon-#{$size} don't.

[alexander-akait]

Yep, you are right

/cc @agamkrbit

[agamkrbit]

I well make the changes ..
so .icon-#{$size} should be like .icon-#{ $size } right ?

[fisker]

Looks like we are keeping spaces on stable version.

Prettier 2.1.2
Playground link

--parser scss

Input:

#{$a                      } {
    color: red;
  }

#{                      $a} {
    color: red;
  }
#{           $a           } {
    color: red;
  }
#{$a} {
    color: red;
  }

Output:

#{$a } {
  color: red;
}

#{ $a} {
  color: red;
}
#{ $a } {
  color: red;
}
#{$a} {
  color: red;
}

[agamkrbit]

yeah.

[sosukesuzuki]

Thanks

[fisker]

I have a question #9224 (comment)

[fisker]

@evilebottnawi

Do you think we should fix this by a solution fix both this and #9224?
It's more like "interpolation inside quoted string".

---

Update:

Found a old issue #2734, it seems already fixed by the parser shellscape/postcss-values-parser#37, unfortunately we are still using a old version.

[alexander-akait]

@fisker I think we can merge, I am afraid we can't update parser, because it is broken in many cases, also postcss@8.1/8.2 want to include built-in parser for selectors and values, maybe better to wait it

Yes, for both

[fisker]

Looks like we forgot about this one.