Visitar URL original
Fixed scss function arguments on different lines in maps #9128 (#9184) · prettier/prettier@4a1e32a · GitHub
Skip to content

Commit 4a1e32a

Browse files
agamkrbitagamkr123fisker
authored
Fixed scss function arguments on different lines in maps #9128 (#9184)
Co-authored-by: agamkrbit <agamkrbit123@gmail.com> Co-authored-by: fisker Cheung <lionkay@gmail.com>
1 parent 38806fe commit 4a1e32a

5 files changed

Lines changed: 284 additions & 0 deletions

File tree

‎changelog_unreleased/scss/9184.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
#### Fix SCSS map in arguments (#9184 by @agamkrbit)
2+
3+
<!-- prettier-ignore -->
4+
```scss
5+
// Input
6+
$display-breakpoints: map-deep-merge(
7+
(
8+
"print-only": "only print",
9+
"screen-only": "only screen",
10+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
11+
),
12+
$display-breakpoints
13+
);
14+
15+
// Prettier stable
16+
$display-breakpoints: map-deep-merge(
17+
(
18+
"print-only": "only print",
19+
"screen-only": "only screen",
20+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm
21+
")-1})",
22+
),
23+
$display-breakpoints
24+
);
25+
26+
// Prettier main
27+
$display-breakpoints: map-deep-merge(
28+
(
29+
"print-only": "only print",
30+
"screen-only": "only screen",
31+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
32+
),
33+
$display-breakpoints
34+
);
35+
```

‎src/language-css/parser-postcss.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,23 @@ function parseValueNode(valueNode, options) {
122122
parenGroupStack.pop();
123123
parenGroup = getLast(parenGroupStack);
124124
} else if (node.type === "comma") {
125+
if (commaGroup.groups.length > 1) {
126+
for (const group of commaGroup.groups) {
127+
// if css interpolation
128+
if (
129+
group.value &&
130+
typeof group.value === "string" &&
131+
group.value.includes("#{")
132+
) {
133+
commaGroup.groups = [
134+
stringifyNode({
135+
groups: commaGroup.groups,
136+
}).trim(),
137+
];
138+
break;
139+
}
140+
}
141+
}
125142
parenGroup.groups.push(commaGroup);
126143
commaGroup = {
127144
groups: [],

‎tests/format/scss/map/function-argument/__snapshots__/jsfmt.spec.js.snap‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`functional-argument.scss format 1`] = `
4+
====================================options=====================================
5+
parsers: ["scss"]
6+
printWidth: 80
7+
| printWidth
8+
=====================================input======================================
9+
//simple test
10+
$display-breakpoints: map-deep-merge(
11+
(
12+
"print-only": "only print",
13+
"screen-only": "only screen",
14+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm") - 1})",
15+
"sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
16+
),
17+
$display-breakpoints
18+
);
19+
20+
21+
//list test
22+
@each
23+
$size
24+
in
25+
$sizes {
26+
.icon
27+
#{$size}
28+
{
29+
border
30+
:
31+
"#{$size + "px"}"
32+
solid
33+
red;
34+
}
35+
}
36+
37+
@each
38+
$size
39+
in
40+
$sizes {
41+
.icon-#{$size}
42+
{
43+
border
44+
:
45+
"#{$size + "px"}"
46+
solid
47+
red;
48+
}
49+
}
50+
51+
//map test
52+
$font-weights
53+
:
54+
("regular": 400
55+
,
56+
"medium": 500,
57+
"bold":
58+
700);
59+
@each
60+
$name,
61+
$boldness
62+
in
63+
$icons {
64+
.text
65+
#{
66+
$name
67+
} {
68+
color: red;
69+
font-weight:
70+
"#{$boldness}"
71+
}
72+
}
73+
74+
$font-weights
75+
:
76+
("regular": 400
77+
,
78+
"medium": 500,
79+
"bold":
80+
700);
81+
@each
82+
$name,
83+
$boldness
84+
in
85+
$icons {
86+
.text-#{
87+
$name
88+
} {
89+
color: red;
90+
font-weight:
91+
"#{$boldness}"
92+
}
93+
}
94+
95+
=====================================output=====================================
96+
//simple test
97+
$display-breakpoints: map-deep-merge(
98+
(
99+
"print-only": "only print",
100+
"screen-only": "only screen",
101+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm") - 1})",
102+
"sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
103+
),
104+
$display-breakpoints
105+
);
106+
107+
//list test
108+
@each $size in $sizes {
109+
.icon #{$size} {
110+
border: "#{$size + "px"}" solid red;
111+
}
112+
}
113+
114+
@each $size in $sizes {
115+
.icon-#{$size} {
116+
border: "#{$size + "px"}" solid red;
117+
}
118+
}
119+
120+
//map test
121+
$font-weights: (
122+
"regular": 400,
123+
"medium": 500,
124+
"bold": 700,
125+
);
126+
@each $name, $boldness in $icons {
127+
.text #{ $name } {
128+
color: red;
129+
font-weight: "#{$boldness}";
130+
}
131+
}
132+
133+
$font-weights: (
134+
"regular": 400,
135+
"medium": 500,
136+
"bold": 700,
137+
);
138+
@each $name, $boldness in $icons {
139+
.text-#{ $name } {
140+
color: red;
141+
font-weight: "#{$boldness}";
142+
}
143+
}
144+
145+
================================================================================
146+
`;

‎tests/format/scss/map/function-argument/functional-argument.scss‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
//simple test
2+
$display-breakpoints: map-deep-merge(
3+
(
4+
"print-only": "only print",
5+
"screen-only": "only screen",
6+
"xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm") - 1})",
7+
"sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
8+
),
9+
$display-breakpoints
10+
);
11+
12+
13+
//list test
14+
@each
15+
$size
16+
in
17+
$sizes {
18+
.icon
19+
#{$size}
20+
{
21+
border
22+
:
23+
"#{$size + "px"}"
24+
solid
25+
red;
26+
}
27+
}
28+
29+
@each
30+
$size
31+
in
32+
$sizes {
33+
.icon-#{$size}
34+
{
35+
border
36+
:
37+
"#{$size + "px"}"
38+
solid
39+
red;
40+
}
41+
}
42+
43+
//map test
44+
$font-weights
45+
:
46+
("regular": 400
47+
,
48+
"medium": 500,
49+
"bold":
50+
700);
51+
@each
52+
$name,
53+
$boldness
54+
in
55+
$icons {
56+
.text
57+
#{
58+
$name
59+
} {
60+
color: red;
61+
font-weight:
62+
"#{$boldness}"
63+
}
64+
}
65+
66+
$font-weights
67+
:
68+
("regular": 400
69+
,
70+
"medium": 500,
71+
"bold":
72+
700);
73+
@each
74+
$name,
75+
$boldness
76+
in
77+
$icons {
78+
.text-#{
79+
$name
80+
} {
81+
color: red;
82+
font-weight:
83+
"#{$boldness}"
84+
}
85+
}

‎tests/format/scss/map/function-argument/jsfmt.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
run_spec(__dirname, ["scss"]);

0 commit comments

Comments
 (0)