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.

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

SCSS removing space when it shouldn't #5636

Open
jerelmiller opened this issue Dec 14, 2018 · 3 comments
Open

SCSS removing space when it shouldn't #5636

jerelmiller opened this issue Dec 14, 2018 · 3 comments
Labels
lang:css/scss/less Issues affecting CSS, Less or SCSS priority:high Code is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent! type:bug Issues identifying ugly output, or a defect in the program

Comments

@jerelmiller
Copy link

Prettier 1.15.3
Playground link

--parser scss

Input:

.result-container {
  @include transition(min-height ($spacer/2) ease-in-out);
}

Output:

.result-container {
  @include transition(min-height($spacer/2) ease-in-out);
}

Expected behavior:

That space between min-height and the math should be left alone. With the space removed, this unfortunately results in some invalid CSS as its now treated as a CSS function instead of the property name. This results in something similar to the the following CSS when compiled by Sass

// Incorrect
.result-container {
  transition: min-height(50px) ease-in-out;
}
@j-f1 j-f1 added lang:css/scss/less Issues affecting CSS, Less or SCSS priority:high Code is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent! type:bug Issues identifying ugly output, or a defect in the program labels Dec 14, 2018
@pspi
Copy link

pspi commented Dec 11, 2019

I found a similar case:

Prettier 1.19.1
Playground link

--parser scss

Input:

@function dist() {
  @return 10px;
}

div {
  margin: - dist();
}

Output:

@function dist() {
  @return 10px;
}

div {
  margin: -dist();
}

Expected behavior:
The space in - dist() should be preserved. Removing the space causes Sass, in turn, to generate invalid CSS. (SCSS margin: -dist(); generates incorrect CSS: margin: -dist(); instead of correct margin: -10px;.)

@kevincaradant
Copy link

Hi

This issue is still prsent in 2022 isn't it ? I have the issue with - math() which become -math :/

@Goodwine
Copy link

AFAICT the latter is resolved, but the original reported issue is not

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
lang:css/scss/less Issues affecting CSS, Less or SCSS priority:high Code is printed in a way that alters the AST, breaks syntax, or is a significant regression. Urgent! type:bug Issues identifying ugly output, or a defect in the program
Projects
None yet
Development

No branches or pull requests

5 participants