vitalif-js
/
prettier
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(css): space after math operations before parens (#3945)

master
Evilebot Tnawi 2018-02-10 20:57:06 +03:00 committed by GitHub
parent b449a526ce
commit 1bb5cbaa4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 414 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/language-css/printer-postcss.js
View File

@ -399,6 +399,15 @@ function genericPrint(path, options, print) {
const printed = path.map(print, "groups");
const parts = [];
const isProgid =
declAncestorNode &&
declAncestorNode.value.group &&
declAncestorNode.value.group.group &&
declAncestorNode.value.group.group.groups &&
declAncestorNode.value.group.group.groups[0] &&
declAncestorNode.value.group.group.groups[0].type === "value-word" &&
declAncestorNode.value.group.group.groups[0].value === "progid";
let didBreak = false;
for (let i = 0; i < node.groups.length; ++i) {
parts.push(printed[i]);
@ -413,6 +422,14 @@ function genericPrint(path, options, print) {
continue;
}
if (
isProgid &&
node.groups[i].type === "value-word" &&
node.groups[i].value.endsWith("=")
) {
continue;
}
const isMathOperator = isMathOperatorNode(node.groups[i]);
const isNextMathOperator = isMathOperatorNode(node.groups[i + 1]);
@ -423,7 +440,14 @@ function genericPrint(path, options, print) {
node.groups[i + 1].raws.before === "") ||
(isNextMathOperator &&
node.groups[i + 1].raws &&
node.groups[i + 1].raws.before === "")
node.groups[i + 1].raws.before === "") ||
(isMathOperator &&
(node.groups[i + 1].type === "value-paren_group" ||
node.groups[i + 1].type === "value-word" ||
node.groups[i + 1].type === "value-number" ||
isMathOperatorNode(node.groups[i + 1])) &&
(!node.groups[i - 1] ||
(node.groups[i - 1] && isMathOperatorNode(node.groups[i - 1]))))
) {
continue;
}
@ -443,13 +467,18 @@ function genericPrint(path, options, print) {
// Ignore interpolation in SCSS (i.e. ``#{variable}``)
if (
node.groups[i].value === "#" ||
node.groups[i].value === "{" ||
node.groups[i + 1].value === "}" ||
(node.groups[i].value === "#" &&
node.groups[i].type === "value-word") ||
(node.groups[i].value === "{" &&
node.groups[i].type === "value-word") ||
(node.groups[i + 1].value === "}" &&
node.groups[i + 1].type === "value-word") ||
(node.groups[i + 1].value === "{" &&
node.groups[i + 1].type === "value-word" &&
node.groups[i + 1].raws &&
node.groups[i + 1].raws.before === "") ||
(node.groups[i].value === "}" &&
node.groups[i].type === "value-word" &&
node.groups[i + 1].raws &&
node.groups[i + 1].raws.before === "")
) {
@ -516,7 +545,7 @@ function genericPrint(path, options, print) {
return group(indent(concat(parts)));
}
return group(indent(fill(parts)));
return group(isProgid ? fill(parts) : indent(fill(parts)));
}
case "value-paren_group": {
const parentNode = path.getParentNode();

8
tests/css_numbers/__snapshots__/jsfmt.spec.js.snap
View File

@ -71,6 +71,9 @@ exports[`numbers.css 1`] = `
height: attr(data-size em, .01);
}
}
@media only screen and (-webkit-min-device-pixel-ratio : .5), only screen and (min-device-pixel-ratio : .5) { }
@include single-transition(transform, .5s ease);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@supports (margin: 0.5px ".30px" 1e2px) {
a {
@ -143,4 +146,9 @@ exports[`numbers.css 1`] = `
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 0.5),
only screen and (min-device-pixel-ratio: 0.5) {
}
@include single-transition(transform, 0.5s ease);
`;

3
tests/css_numbers/numbers.css
View File

@ -68,3 +68,6 @@
height: attr(data-size em, .01);
}
}
@media only screen and (-webkit-min-device-pixel-ratio : .5), only screen and (min-device-pixel-ratio : .5) { }
@include single-transition(transform, .5s ease);

239
tests/css_scss/__snapshots__/jsfmt.spec.js.snap
View File

@ -650,6 +650,7 @@ $lg-and-up: '(min-width: 1200px)';
.class-#{$var} {
#{$var}: #7b3d66;
#{$attr}-color: blue;
#{$prop}-#{$side}: $value;
background-#{$var}: #7b3d66;
animation-name: #{var};
line-height: #{strip-unit($line-height)}em;
@ -754,6 +755,135 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
content: "#{nth($icon, 2)}";
}
}
.foo {
prop: -($grid-gutter-width / 2);
prop1: -( $grid-gutter-width / 2 );
prop2: -$grid-gutter-width / 2;
prop3: +($grid-gutter-width / 2);
prop4: 10px/8px; /* Plain CSS, no division */
prop5: $width / 2; /* Uses a variable, does division */
prop6: round(1.5) / 2; /* Uses a function, does division */
prop7: (500px / 2); /* Uses parentheses, does division */
prop8: 5px + 8px / 2px; //* Uses +, does division */
prop9: (italic bold 10px/8px); /* In a list, parentheses don't count */
prop10: #010203 + #040506;
prop11: #010203 * 2;
prop12: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
prop13: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
prop14: e + -resize;
prop15: sans- + "serif";
prop16: 1em + (2em * 3);
prop17: rotate(-2deg);
prop18: rotate( -2deg ) ;
_:_;
prop19: 10 - ($grid-gutter-width / 2);
prop20: 10 + -($grid-gutter-width / 2);
prop21: 10 + - ( $grid-gutter-width / 2 ) ;
prop22: - ( $grid-gutter-width / 2 ) ;
prop23: - ( $grid-gutter-width / 2 ) ;
prop24: -$grid-gutter-width;
prop25: + ( $grid-gutter-width / 2 ) ;
prop26: + ( $grid-gutter-width / 2 ) ;
prop27: +$grid-gutter-width;
prop28: --($grid-gutter-width / 2);
prop28: ++($grid-gutter-width / 2);
prop29: rotate( - 2deg ) ;
}
$last:nth($juggler,length($juggler));
$x:if($last%2==0,1/2,3/2);
$new:pow($last,$x);
$sequence:1,1 1,2 1,1 2 1 1, 1 1 1 2 2 1;
$new-entry:();
$new-entry : ( ) ;
$new-entry : ( ) ;
$new-entry
:
(
)
;
body:before {
content: quote(to-string(fibonacci(100), ' \\A '));
white-space: pre-wrap;
}
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
width
:
(
(
100%
-
(
(
$numPerRow
-
1
)
*
$margin
)
)
/
$numPerRow
)
;
a:nth-child(#{$numPerRow}n) {
margin-right: 0;
margin-bottom: 0;
}
@function em($pixels, $context: $browser-context) {
@return #{ $pixels / $context }em
}
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
@extend %#{$item};
}
.icon-#{$icon-name} {
background-image: '/images/#{$icon-name}.svg';
}
$extmods:(eot:"?",svg:"#" + str-replace($name," ","_"));
@mixin keyframes {@-moz-keyframes{@content;}@-webkit-keyframes{@content;}}
@function gcd($a,$b){
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
@if ($b != 0) {
@return gcd($b,$a % $b);
}@else{
@return abs($a);
}
}
$colors: (
primary: (
base: #00abc9,
light: #daf1f6,
dark: #12799a
),
secondary: (
base: #424d55,
light: #ccc,
lightest: #efefef,
dark: #404247
),
success: (
base: #bbd33e,
light: #eaf0c6
)
);
@function color($color, $tone: "base") {
@return map-get(map-get($colors, $color), $tone);
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@media #{$g-breakpoint-tiny} {
}
@ -1270,6 +1400,7 @@ $lg-and-up: "(min-width: 1200px)";
.class-#{$var} {
#{$var}: #7b3d66;
#{$attr}-color: blue;
#{$prop}-#{$side}: $value;
background-#{$var}: #7b3d66;
animation-name: #{var};
line-height: #{strip-unit($line-height)}em;
@ -1333,4 +1464,112 @@ $icons: wifi "\\600", wifi-hotspot "\\601", weather "\\602";
}
}
.foo {
prop: -($grid-gutter-width / 2);
prop1: -($grid-gutter-width / 2);
prop2: -$grid-gutter-width / 2;
prop3: +($grid-gutter-width / 2);
prop4: 10px/8px; /* Plain CSS, no division */
prop5: $width / 2; /* Uses a variable, does division */
prop6: round(1.5) / 2; /* Uses a function, does division */
prop7: (500px / 2); /* Uses parentheses, does division */
prop8: 5px + 8px / 2px; //* Uses +, does division */
prop9: (italic bold 10px/8px); /* In a list, parentheses don't count */
prop10: #010203 + #040506;
prop11: #010203 * 2;
prop12: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
prop13: progid:DXImageTransform.Microsoft.gradient(
enabled="false",
startColorstr="#{ie-hex-str($green)}",
endColorstr="#{ie-hex-str($translucent-red)}"
);
prop14: e + -resize;
prop15: sans- + "serif";
prop16: 1em + (2em * 3);
prop17: rotate(-2deg);
prop18: rotate(-2deg);
_: _;
prop19: 10 - ($grid-gutter-width / 2);
prop20: 10 + -($grid-gutter-width / 2);
prop21: 10 + -($grid-gutter-width / 2);
prop22: -($grid-gutter-width / 2);
prop23: -($grid-gutter-width / 2);
prop24: -$grid-gutter-width;
prop25: +($grid-gutter-width / 2);
prop26: +($grid-gutter-width / 2);
prop27: +$grid-gutter-width;
prop28: --($grid-gutter-width / 2);
prop28: ++($grid-gutter-width / 2);
prop29: rotate(-2deg);
}
$last: nth($juggler, length($juggler));
$x: if($last%2==0, 1/2, 3/2);
$new: pow($last, $x);
$sequence: 1, 1 1, 2 1, 1 2 1 1, 1 1 1 2 2 1;
$new-entry: ();
$new-entry: ();
$new-entry: ();
$new-entry: ();
body:before {
content: quote(to-string(fibonacci(100), " \\A "));
white-space: pre-wrap;
}
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
a:nth-child(#{$numPerRow}n) {
margin-right: 0;
margin-bottom: 0;
}
@function em($pixels, $context: $browser-context) {
@return #{$pixels / $context}em;
}
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
@extend %#{$item};
}
.icon-#{$icon-name} {
background-image: "/images/#{$icon-name}.svg";
}
$extmods: (
eot: "?",
svg: "#" + str-replace($name, " ", "_")
);
@mixin keyframes {
@-moz-keyframes {
@content;
}
@-webkit-keyframes {
@content;
}
}
@function gcd($a, $b) {
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
@if ($b != 0) {
@return gcd($b, $a % $b);
} @else {
@return abs($a);
}
}
$colors: (
primary: (base: #00abc9, light: #daf1f6, dark: #12799a),
secondary: (base: #424d55, light: #ccc, lightest: #efefef, dark: #404247),
success: (base: #bbd33e, light: #eaf0c6)
);
@function color($color, $tone: "base") {
@return map-get(map-get($colors, $color), $tone);
}
`;

130
tests/css_scss/scss.css
View File

@ -640,6 +640,7 @@ $lg-and-up: '(min-width: 1200px)';
.class-#{$var} {
#{$var}: #7b3d66;
#{$attr}-color: blue;
#{$prop}-#{$side}: $value;
background-#{$var}: #7b3d66;
animation-name: #{var};
line-height: #{strip-unit($line-height)}em;
@ -744,3 +745,132 @@ $icons: wifi "\600", wifi-hotspot "\601", weather "\602";
content: "#{nth($icon, 2)}";
}
}
.foo {
prop: -($grid-gutter-width / 2);
prop1: -( $grid-gutter-width / 2 );
prop2: -$grid-gutter-width / 2;
prop3: +($grid-gutter-width / 2);
prop4: 10px/8px; /* Plain CSS, no division */
prop5: $width / 2; /* Uses a variable, does division */
prop6: round(1.5) / 2; /* Uses a function, does division */
prop7: (500px / 2); /* Uses parentheses, does division */
prop8: 5px + 8px / 2px; //* Uses +, does division */
prop9: (italic bold 10px/8px); /* In a list, parentheses don't count */
prop10: #010203 + #040506;
prop11: #010203 * 2;
prop12: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
prop13: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
prop14: e + -resize;
prop15: sans- + "serif";
prop16: 1em + (2em * 3);
prop17: rotate(-2deg);
prop18: rotate( -2deg ) ;
_:_;
prop19: 10 - ($grid-gutter-width / 2);
prop20: 10 + -($grid-gutter-width / 2);
prop21: 10 + - ( $grid-gutter-width / 2 ) ;
prop22: - ( $grid-gutter-width / 2 ) ;
prop23: - ( $grid-gutter-width / 2 ) ;
prop24: -$grid-gutter-width;
prop25: + ( $grid-gutter-width / 2 ) ;
prop26: + ( $grid-gutter-width / 2 ) ;
prop27: +$grid-gutter-width;
prop28: --($grid-gutter-width / 2);
prop28: ++($grid-gutter-width / 2);
prop29: rotate( - 2deg ) ;
}
$last:nth($juggler,length($juggler));
$x:if($last%2==0,1/2,3/2);
$new:pow($last,$x);
$sequence:1,1 1,2 1,1 2 1 1, 1 1 1 2 2 1;
$new-entry:();
$new-entry : ( ) ;
$new-entry : ( ) ;
$new-entry
:
(
)
;
body:before {
content: quote(to-string(fibonacci(100), ' \A '));
white-space: pre-wrap;
}
width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
width
:
(
(
100%
-
(
(
$numPerRow
-
1
)
*
$margin
)
)
/
$numPerRow
)
;
a:nth-child(#{$numPerRow}n) {
margin-right: 0;
margin-bottom: 0;
}
@function em($pixels, $context: $browser-context) {
@return #{ $pixels / $context }em
}
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
@extend %#{$item};
}
.icon-#{$icon-name} {
background-image: '/images/#{$icon-name}.svg';
}
$extmods:(eot:"?",svg:"#" + str-replace($name," ","_"));
@mixin keyframes {@-moz-keyframes{@content;}@-webkit-keyframes{@content;}}
@function gcd($a,$b){
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
@if ($b != 0) {
@return gcd($b,$a % $b);
}@else{
@return abs($a);
}
}
$colors: (
primary: (
base: #00abc9,
light: #daf1f6,
dark: #12799a
),
secondary: (
base: #424d55,
light: #ccc,
lightest: #efefef,
dark: #404247
),
success: (
base: #bbd33e,
light: #eaf0c6
)
);
@function color($color, $tone: "base") {
@return map-get(map-get($colors, $color), $tone);
}