Some CSS/SCSS feedback

I ran prettier on our SCSS files to see if we can use it also for .scss files next to .js files & I noticed a couple of things:

• Selectors are flattened

-  &:before,
-  &:after {
+  &:before, &:after {

- @media all and (-webkit-min-device-pixel-ratio : 1.5),
- all and (-o-min-device-pixel-ratio: 3/2),
- all and (min--moz-device-pixel-ratio: 1.5),
- all and (min-device-pixel-ratio: 1.5) {
+ @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {

• Some values are formatted in a kind of weird way, I assume Prettier is trying to limit the line to 80 characters so that’s why this is happening. But for S/CSS maybe the limit can be disabled or changed to something like 120?

Some examples:

- border-left: 1px solid mix($warningBackgroundColor, $warningBorderColor, 50%);
+ border-left: 1px
+  solid
+  mix($warningBackgroundColor, $warningBorderColor, 50%);

- $fontFamily: "Lato", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ $fontFamily: "Lato",
+  -apple-system,
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;

• Some problems with inline comments

- background-position: center bottom; // center the image using background position
+ background-position: center
+   bottom; // center the image using background position

- span.label { // 1
+ span.label {
+  // 1

[yuchi]

A small note: your first point (flattened selectors lists) has been already addressed in #2047 and merged but not released yet (happened the day after the 1.4.4 release). @vjeux when is the ETA for this?

[vjeux]

–print-width is already working for css. I just used 80 as an example.