Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed scss function arguments on different lines in maps #9128 #9184

Merged
merged 13 commits into from Nov 24, 2022
Merged

Fixed scss function arguments on different lines in maps #9128 #9184

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e8d88ea
fixed-SCSS-function-arguments-on-different-lines-in-maps-#9128
agamkr123 Sep 10, 2020
dea1878
removed unwanted files
agamkr123 Sep 10, 2020
9e2dbfd
list issue fixed
agamkr123 Sep 10, 2020
f19e2dc
added test case
agamkr123 Sep 11, 2020
f04f623
fomated the files
agamkr123 Sep 11, 2020
4b842ad
upate snapshot
agamkr123 Sep 11, 2020
9a666b2
added space
agamkr123 Sep 11, 2020
2e76a1a
added new testcases
agamkr123 Sep 12, 2020
56e605f
added new testcases
agamkr123 Sep 12, 2020
4db2fae
Merge branch 'main' into fixed-SCSS-function-arguments-on-different-l…
fisker Nov 24, 2022
a3b690b
Move tests
fisker Nov 24, 2022
270325b
Add changelog
fisker Nov 24, 2022
97449b6
Update tests
fisker Nov 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
64 changes: 64 additions & 0 deletions tests/scss/others/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@ parsers: ["scss"]
printWidth: 80
| printWidth
=====================================input======================================
//simple test
$display-breakpoints: map-deep-merge(
(
"print-only": "only print",
Expand All @@ -15,7 +16,49 @@ $display-breakpoints: map-deep-merge(
),
$display-breakpoints
);


//list test
$size: 2 3 4;
@each
$size
in
$sizes {
.icon-
#{$size}
{
border
:
"#{$size + "px"}"
solid
red;
}
}

//map test
$font-weights
:
("regular": 400
,
"medium": 500,
"bold":
700);
@each
$name,
$boldness
in
$icons {
.text-
#{
$name
} {
color: red;
font-weight:
"#{$boldness}"
}
}
=====================================output=====================================
//simple test
$display-breakpoints: map-deep-merge(
(
"print-only": "only print",
Expand All @@ -26,5 +69,26 @@ $display-breakpoints: map-deep-merge(
$display-breakpoints
);

//list test
$size: 2 3 4;
@each $size in $sizes {
.icon- #{$size} {
border: "#{$size + "px"}" solid red;
}
}

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add/fix two cases here in:

.text-#{ $name }

and

.text #{ $name }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, will make the changes

color: red;
font-weight: "#{$boldness}";
}
}

================================================================================
`;
44 changes: 43 additions & 1 deletion tests/scss/others/functional_argument_on_same_lines_in_maps.scss
View file
Open in desktop
@@ -1,3 +1,4 @@
//simple test
$display-breakpoints: map-deep-merge(
(
"print-only": "only print",
Expand All @@ -6,4 +7,45 @@ $display-breakpoints: map-deep-merge(
"sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md") - 1})",
),
$display-breakpoints
);
);


//list test
$size: 2 3 4;
@each
$size
in
$sizes {
.icon-
#{$size}
{
border
:
"#{$size + "px"}"
solid
red;
}
}

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