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

feat(css): improve math output (#3984)

master
Evilebot Tnawi 2018-02-16 21:58:21 +03:00 committed by GitHub
parent 0ee9959bd6
commit 86f0b93e29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 444 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -440,106 +440,173 @@ function genericPrint(path, options, print) {
for (let i = 0; i < node.groups.length; ++i) {
parts.push(printed[i]);
// Ignore value inside `url()`
const functionAncestorNode = getAncestorNode(path, "value-func");
const insideInFunction =
functionAncestorNode && functionAncestorNode.value;
const insideURLFunction =
insideInFunction &&
functionAncestorNode.value.toLowerCase() === "url";
if (insideURLFunction) {
continue;
}
const iPrevNode = node.groups[i - 1];
const iNode = node.groups[i];
const iNextNode = node.groups[i + 1];
const iNextNextNode = node.groups[i + 2];
// Ignore after latest node (i.e. before semicolon)
if (!node.groups[i + 1]) {
if (!iNextNode) {
continue;
}
// Ignore colon
if (node.groups[i].value === ":") {
if (iNode.value === ":") {
continue;
}
// Ignore `filter: progid:DXImageTransform.Microsoft.Gradient(params);`
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]);
// Ignore math operators
if (
(isMathOperator &&
node.groups[i + 1].raws &&
node.groups[i + 1].raws.before === "") ||
(isNextMathOperator &&
node.groups[i + 1].raws &&
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]))))
iNode.type === "value-word" &&
iNode.value.endsWith("=")
) {
continue;
}
// Ignore `@` in Less (i.e. `@@var;`)
if (
node.groups[i].type === "value-atword" &&
node.groups[i].value === ""
) {
if (iNode.type === "value-atword" && iNode.value === "") {
continue;
}
// Ignore `~` in Less (i.e. `content: ~"^//* some horrible but needed css hack";`)
if (node.groups[i].value === "~") {
if (iNode.value === "~") {
continue;
}
const isHash = iNode.type === "value-word" && iNode.value === "#";
const isLeftCurlyBrace =
iNode.type === "value-word" && iNode.value === "{";
const isNextLeftCurlyBrace =
iNextNode.type === "value-word" && iNextNode.value === "{";
const isRightCurlyBrace =
iNode.type === "value-word" && iNode.value === "}";
const isNextRightCurlyBrace =
iNextNode.type === "value-word" && iNextNode.value === "}";
// Ignore interpolation in SCSS (i.e. ``#{variable}``)
if (
(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 === "")
isHash ||
isLeftCurlyBrace ||
isNextRightCurlyBrace ||
(isNextLeftCurlyBrace &&
iNextNode.raws &&
iNextNode.raws.before === "") ||
(isRightCurlyBrace && iNextNode.raws && iNextNode.raws.before === "")
) {
continue;
}
const isNextHash =
iNextNode.type === "value-word" && iNextNode.value === "#";
const isMathOperator = isMathOperatorNode(iNode);
const isNextMathOperator = isMathOperatorNode(iNextNode);
const isMultiplication =
!isNextHash && isMathOperator && iNode.value === "*";
const isNextMultiplication =
!isRightCurlyBrace && isNextMathOperator && iNextNode.value === "*";
const isDivision = !isNextHash && isMathOperator && iNode.value === "/";
const isNextDivision =
!isRightCurlyBrace && isNextMathOperator && iNextNode.value === "/";
const isAddition = !isNextHash && isMathOperator && iNode.value === "+";
const isNextAddition =
!isRightCurlyBrace && isNextMathOperator && iNextNode.value === "+";
const isPrevFunction = iPrevNode && iPrevNode.type === "value-func";
const isFunction = iNode.type === "value-func";
const isNextFunction = iNextNode.type === "value-func";
const isNextNextFunction =
iNextNextNode && iNextNextNode.type === "value-func";
const isPrevWord =
iPrevNode &&
["value-word", "value-atword"].indexOf(iPrevNode.type) !== -1;
const isWord =
["value-word", "value-atword"].indexOf(iNode.type) !== -1;
const isNextWord =
["value-word", "value-atword"].indexOf(iNextNode.type) !== -1;
const isNextNextWord =
iNextNextNode &&
["value-word", "value-atword"].indexOf(iNextNextNode.type) !== -1;
// Math operators
const insideCalcFunction =
insideInFunction &&
functionAncestorNode.value.toLowerCase() === "calc";
const hasSpaceBeforeOperator =
isNextNextFunction || isNextNextWord || isFunction || isWord;
const hasSpaceAfterOperator =
isNextFunction || isNextWord || isPrevFunction || isPrevWord;
if (
(isMathOperator || isNextMathOperator) &&
// Multiplication
!isMultiplication &&
!isNextMultiplication &&
// Division
!(isNextDivision && (hasSpaceBeforeOperator || insideCalcFunction)) &&
!(isDivision && (hasSpaceAfterOperator || insideCalcFunction)) &&
// Addition
!(isNextAddition && hasSpaceBeforeOperator) &&
!(isAddition && hasSpaceAfterOperator)
) {
const isNextParenGroup = isParenGroupNode(iNextNode);
const isNextValueNumber = iNextNode.type === "value-number";
if (
(iNextNode.raws && iNextNode.raws.before === "") ||
(isMathOperator &&
(isNextParenGroup ||
isNextWord ||
isNextValueNumber ||
isMathOperatorNode(iNextNode)) &&
(!iPrevNode || (iPrevNode && isMathOperatorNode(iPrevNode))))
) {
continue;
}
}
const isEqualityOperator =
isControlDirective && isEqualityOperatorNode(node.groups[i]);
isControlDirective && isEqualityOperatorNode(iNode);
const isRelationalOperator =
isControlDirective && isRelationalOperatorNode(node.groups[i]);
isControlDirective && isRelationalOperatorNode(iNode);
const isNextEqualityOperator =
isControlDirective && isEqualityOperatorNode(node.groups[i + 1]);
isControlDirective && isEqualityOperatorNode(iNextNode);
const isNextRelationalOperator =
isControlDirective && isRelationalOperatorNode(node.groups[i + 1]);
isControlDirective && isRelationalOperatorNode(iNextNode);
const isNextIfElseKeyword =
isControlDirective && isIfElseKeywordNode(node.groups[i + 1]);
const isEachKeyword =
isControlDirective && isEachKeywordNode(node.groups[i]);
isControlDirective && isIfElseKeywordNode(iNextNode);
const isEachKeyword = isControlDirective && isEachKeywordNode(iNode);
const isNextEachKeyword =
isControlDirective && isEachKeywordNode(node.groups[i + 1]);
isControlDirective && isEachKeywordNode(iNextNode);
const isForKeyword =
atRuleAncestorNode &&
atRuleAncestorNode.name === "for" &&
isForKeywordNode(node.groups[i]);
isForKeywordNode(iNode);
const isNextForKeyword =
isControlDirective && isForKeywordNode(node.groups[i + 1]);
const IsNextColon = node.groups[i + 1].value === ":";
isControlDirective && isForKeywordNode(iNextNode);
const IsNextColon = iNextNode.value === ":";
if (isGridValue) {
if (
node.groups[i].source.start.line !==
node.groups[i + 1].source.start.line
) {
if (iNode.source.start.line !== iNextNode.source.start.line) {
parts.push(hardline);
didBreak = true;
} else {
@ -690,6 +757,10 @@ function genericPrint(path, options, print) {
}
}
function isParenGroupNode(node) {
return node.type && node.type === "value-paren_group";
}
function isForKeywordNode(node) {
return (
node.type &&

44
tests/css_atrule/__snapshots__/jsfmt.spec.js.snap
View File

@ -3483,19 +3483,19 @@ margin
exports[`return.css 1`] = `
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n*$grid-width+($n-1)*$gutter-width;
@return $n*$grid-width+($n-1)*$gutter-width/10;
}
@function grid-width($n) {
@return $n * $grid-width + ( $n - 1 ) * $gutter-width ;
@return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
}
@function grid-width($n) {
@return $n * $grid-width + ( $n - 1 ) * $gutter-width ;
@return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
}
@function grid-width($n) {
@return $n
@ -3507,7 +3507,10 @@ exports[`return.css 1`] = `
1
)
*
$gutter-width;
$gutter-width
/
10
;
}
@function grid-width($n) {
@return
@ -3520,7 +3523,10 @@ exports[`return.css 1`] = `
1
)
*
$gutter-width;
$gutter-width
/
10
;
}
@function
grid-width(
@ -3539,6 +3545,8 @@ $n
)
*
$gutter-width
/
10
;
}
@function
@ -3575,6 +3583,10 @@ $n
$gutter-width
/
10
;
}
@ -3601,31 +3613,31 @@ $gutter-width
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n*$grid-width+ ($n-1)*$gutter-width;
@return $n * $grid-width + ($n-1) * $gutter-width/10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $very-very-very-very-very-very-vey-long-var *

26
tests/css_atrule/return.css
View File

@ -1,17 +1,17 @@
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
@return $n * $grid-width + ($n - 1) * $gutter-width / 10;
}
@function grid-width($n) {
@return $n*$grid-width+($n-1)*$gutter-width;
@return $n*$grid-width+($n-1)*$gutter-width/10;
}
@function grid-width($n) {
@return $n * $grid-width + ( $n - 1 ) * $gutter-width ;
@return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
}
@function grid-width($n) {
@return $n * $grid-width + ( $n - 1 ) * $gutter-width ;
@return $n * $grid-width + ( $n - 1 ) * $gutter-width / 10 ;
}
@function grid-width($n) {
@return $n
@ -23,7 +23,10 @@
1
)
*
$gutter-width;
$gutter-width
/
10
;
}
@function grid-width($n) {
@return
@ -36,7 +39,10 @@
1
)
*
$gutter-width;
$gutter-width
/
10
;
}
@function
grid-width(
@ -55,6 +61,8 @@ $n
)
*
$gutter-width
/
10
;
}
@function
@ -91,6 +99,10 @@ $n
$gutter-width
/
10
;
}

178
tests/css_parens/__snapshots__/jsfmt.spec.js.snap
View File

@ -127,6 +127,93 @@ a {
$image-height / ( $image-width-responsive + $image-margin-responsive * 2 )
);
padding-top: var( --paddingC );
margin: 1*1 (1)*1 1*(1) (1)*(1);
prop: -1*-1 -(-1)*-1 -1*-(-1) -(-1)*-(-1);
prop1: #{($m)*(10)};
prop2: #{$m * 10};
prop3: #{-(-$m)*-(-10)};
prop4: +1;
prop5: -1;
prop6: word + 1; /* word1 */
prop7: word - 1; /* word-1 */
prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */
prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */
prop10: (-1);
prop11: (+1);
prop12: 10px/8px;
prop13: round(1.5)/2 round(1.5) /2 round(1.5)/ 2 round(1.5) / 2;
prop14: 2/round(1.5) 2 /round(1.5) 2/ round(1.5) 2 / round(1.5);
prop15: (round(1.5)/2) (round(1.5) /2) (round(1.5)/ 2) (round(1.5) / 2);
prop16: (2/round(1.5)) (2 /round(1.5)) (2/ round(1.5)) (2 / round(1.5));
prop17: $width/2 $width /2 $width/ 2 $width / 2;
prop18: 2/$width 2 /$width 2/ $width 2 / $width;
prop19: ($width/2) ($width /2) ($width/ 2) ($width / 2);
prop20: (2/$width) (2 /$width) (2/ $width) (2 / $width);
prop21: @width/2 @width /2 @width/ 2 @width / 2;
prop22: 2/@width 2 /@width 2/ @width 2 / @width;
prop23: (@width/2) (@width /2) (@width/ 2) (@width / 2);
prop24: (2/@width) (2 /@width) (2/ @width) (2 / @width);
prop25-1: #{$width}/#{$width} #{$width} /#{$width} #{$width}/ #{$width} #{$width} / #{$width};
prop25-2: #{$width}*#{$width} #{$width} *#{$width} #{$width}* #{$width} #{$width} * #{$width};
prop25-3: #{$width}+#{$width} #{$width} +#{$width} #{$width}+ #{$width} #{$width} + #{$width};
prop25-4: #{$width}-#{$width} #{$width} -#{$width} #{$width}- #{$width} #{$width} - #{$width};
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
prop31: (#{$width}/2px) (8px/#{$width}) (#{$width} / 2px) (8px / #{$width});
prop32: func(8px/2);
prop33: 5px + 8px/2px;
prop34: func(+20px, + 20px);
prop35: 1+1+1+1;
prop36: 1 + 1 + 1 + 1;
prop37: 1 +1 1 +1;
prop38: ++1;
prop39: ++(1);
prop40: --1;
prop41: --(1);
prop42: 1px+1px+1px+1px;
prop43: 1px + 1px + 1px + 1px;
prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1);
prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2;
prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5);
prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2);
prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5));
prop49: $width*2 $width *2 $width* 2 $width * 2;
prop50: 2*$width 2 *$width 2* $width 2 * $width;
prop51: ($width*2) ($width *2) ($width* 2) ($width * 2);
prop52: (2*$width) (2 *$width) (2* $width) (2 * $width);
prop53: @width*2 @width *2 @width* 2 @width * 2;
prop54: 2*@width 2 *@width 2* @width 2 * @width;
prop55: (@width*2) (@width *2) (@width* 2) (@width * 2);
prop56: (2*@width) (2 *@width) (2* @width) (2 * @width);
prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2;
prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5);
prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2);
prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5));
prop61: $width+2 $width +2 $width+ 2 $width + 2;
prop62: 2+$width 2 +$width 2+ $width 2 + $width;
prop63: ($width+2) ($width +2) ($width+ 2) ($width + 2);
prop64: (2+$width) (2 +$width) (2+ $width) (2 + $width);
prop65: @width+2 @width +2 @width+ 2 @width + 2;
prop66: 2+@width 2 +@width 2+ @width 2 + @width;
prop67: (@width+2) (@width +2) (@width+ 2) (@width + 2);
prop68: (2+@width) (2 +@width) (2+ @width) (2 + @width);
prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1;
prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test";
prop71: "test"-1 "test" -1 "test"- 1 "test" - 1;
prop72: 1-"test" 1 -"test" 1- "test" 1 - "test";
prop73: calc(100%*2px) calc(100% *2px) calc(100%* 2px) calc(100% * 2px);
prop74: calc(100%/2px) calc(100% /2px) calc(100%/ 2px) calc(100% / 2px);
prop75: calc(100%+2px) calc(100% +2px) calc(100%+ 2px) calc(100% + 2px);
prop76: calc(100%-2px) calc(100% -2px) calc(100%- 2px) calc(100% - 2px);
prop77: calc(-5px);
prop78: calc(+5px);
prop79: calc(-100px + 100px);
prop80: calc(+100px + 100px);
prop81: calc(100px - 100px);
prop82: calc(100px + 100px);
}
.bar {
@ -277,6 +364,97 @@ a {
($image-width-responsive + $image-margin-responsive * 2)
);
padding-top: var(--paddingC);
margin: 1 * 1 (1) * 1 1 * (1) (1) * (1);
prop: -1 * -1 - (-1) * -1 -1 * -(-1) - (-1) * -(-1);
prop1: #{($m) * (10)};
prop2: #{$m * 10};
prop3: #{- (-$m) * -(-10)};
prop4: +1;
prop5: -1;
prop6: word + 1; /* word1 */
prop7: word - 1; /* word-1 */
prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */
prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */
prop10: (-1);
prop11: (+1);
prop12: 10px/8px;
prop13: round(1.5) / 2 round(1.5) / 2 round(1.5) / 2 round(1.5) / 2;
prop14: 2 / round(1.5) 2 / round(1.5) 2 / round(1.5) 2 / round(1.5);
prop15: (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2) (round(1.5) / 2);
prop16: (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5)) (2 / round(1.5));
prop17: $width/2 $width / 2 $width/ 2 $width / 2;
prop18: 2 / $width 2 / $width 2 / $width 2 / $width;
prop19: ($width/2) ($width / 2) ($width/ 2) ($width / 2);
prop20: (2 / $width) (2 / $width) (2 / $width) (2 / $width);
prop21: @width / 2 @width / 2 @width / 2 @width / 2;
prop22: 2 / @width 2 / @width 2 / @width 2 / @width;
prop23: (@width / 2) (@width / 2) (@width / 2) (@width / 2);
prop24: (2 / @width) (2 / @width) (2 / @width) (2 / @width);
prop25-1: #{$width}/#{$width} #{$width} /#{$width} #{$width}/ #{$width} #{$width} /
#{$width};
prop25-2: #{$width}*#{$width} #{$width} *#{$width} #{$width}* #{$width} #{$width} *
#{$width};
prop25-3: #{$width}+#{$width} #{$width} +#{$width} #{$width}+ #{$width} #{$width} +
#{$width};
prop25-4: #{$width}-#{$width} #{$width} -#{$width} #{$width}- #{$width} #{$width} -
#{$width};
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
prop31: (#{$width}/ 2px) (8px /#{$width}) (#{$width} / 2px) (8px / #{$width});
prop32: func(8px/2);
prop33: 5px + 8px/2px;
prop34: func(+20px, +20px);
prop35: 1+1+1+1;
prop36: 1 + 1 + 1 + 1;
prop37: 1 +1 1 +1;
prop38: ++1;
prop39: ++(1);
prop40: --1;
prop41: --(1);
prop42: 1px+1px+1px+1px;
prop43: 1px + 1px + 1px + 1px;
prop44: -1+-1 - (-1)+-1 -1+-(-1) - (-1)+-(-1);
prop45: round(1.5) * 2 round(1.5) * 2 round(1.5) * 2 round(1.5) * 2;
prop46: 2 * round(1.5) 2 * round(1.5) 2 * round(1.5) 2 * round(1.5);
prop47: (round(1.5) * 2) (round(1.5) * 2) (round(1.5) * 2) (round(1.5) * 2);
prop48: (2 * round(1.5)) (2 * round(1.5)) (2 * round(1.5)) (2 * round(1.5));
prop49: $width * 2 $width * 2 $width * 2 $width * 2;
prop50: 2 * $width 2 * $width 2 * $width 2 * $width;
prop51: ($width * 2) ($width * 2) ($width * 2) ($width * 2);
prop52: (2 * $width) (2 * $width) (2 * $width) (2 * $width);
prop53: @width*2 @width * 2 @width* 2 @width * 2;
prop54: 2 * @width 2 * @width 2 * @width 2 * @width;
prop55: (@width*2) (@width * 2) (@width* 2) (@width * 2);
prop56: (2 * @width) (2 * @width) (2 * @width) (2 * @width);
prop57: round(1.5) + 2 round(1.5) + 2 round(1.5) + 2 round(1.5) + 2;
prop58: 2 + round(1.5) 2 + round(1.5) 2 + round(1.5) 2 + round(1.5);
prop59: (round(1.5) + 2) (round(1.5) + 2) (round(1.5) + 2) (round(1.5) + 2);
prop60: (2 + round(1.5)) (2 + round(1.5)) (2 + round(1.5)) (2 + round(1.5));
prop61: $width + 2 $width + 2 $width + 2 $width + 2;
prop62: 2 + $width 2 + $width 2 + $width 2 + $width;
prop63: ($width + 2) ($width + 2) ($width + 2) ($width + 2);
prop64: (2 + $width) (2 + $width) (2 + $width) (2 + $width);
prop65: @width+2 @width + 2 @width+ 2 @width + 2;
prop66: 2 + @width 2 + @width 2 + @width 2 + @width;
prop67: (@width+2) (@width + 2) (@width+ 2) (@width + 2);
prop68: (2 + @width) (2 + @width) (2 + @width) (2 + @width);
prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1;
prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test";
prop71: "test"-1 "test" -1 "test"- 1 "test" - 1;
prop72: 1-"test" 1 -"test" 1- "test" 1 - "test";
prop73: calc(100% * 2px) calc(100% * 2px) calc(100% * 2px) calc(100% * 2px);
prop74: calc(100% / 2px) calc(100% / 2px) calc(100% / 2px) calc(100% / 2px);
prop75: calc(100%+2px) calc(100% +2px) calc(100%+ 2px) calc(100% + 2px);
prop76: calc(100%-2px) calc(100% -2px) calc(100%- 2px) calc(100% - 2px);
prop77: calc(-5px);
prop78: calc(+5px);
prop79: calc(-100px + 100px);
prop80: calc(+100px + 100px);
prop81: calc(100px - 100px);
prop82: calc(100px + 100px);
}
.bar {

87
tests/css_parens/parens.css
View File

@ -124,6 +124,93 @@ a {
$image-height / ( $image-width-responsive + $image-margin-responsive * 2 )
);
padding-top: var( --paddingC );
margin: 1*1 (1)*1 1*(1) (1)*(1);
prop: -1*-1 -(-1)*-1 -1*-(-1) -(-1)*-(-1);
prop1: #{($m)*(10)};
prop2: #{$m * 10};
prop3: #{-(-$m)*-(-10)};
prop4: +1;
prop5: -1;
prop6: word + 1; /* word1 */
prop7: word - 1; /* word-1 */
prop8: +1 +1 +1 +1; /* +1 +1 +1 +1 */
prop9: -1 -1 -1 -1; /* -1 -1 -1 -1 */
prop10: (-1);
prop11: (+1);
prop12: 10px/8px;
prop13: round(1.5)/2 round(1.5) /2 round(1.5)/ 2 round(1.5) / 2;
prop14: 2/round(1.5) 2 /round(1.5) 2/ round(1.5) 2 / round(1.5);
prop15: (round(1.5)/2) (round(1.5) /2) (round(1.5)/ 2) (round(1.5) / 2);
prop16: (2/round(1.5)) (2 /round(1.5)) (2/ round(1.5)) (2 / round(1.5));
prop17: $width/2 $width /2 $width/ 2 $width / 2;
prop18: 2/$width 2 /$width 2/ $width 2 / $width;
prop19: ($width/2) ($width /2) ($width/ 2) ($width / 2);
prop20: (2/$width) (2 /$width) (2/ $width) (2 / $width);
prop21: @width/2 @width /2 @width/ 2 @width / 2;
prop22: 2/@width 2 /@width 2/ @width 2 / @width;
prop23: (@width/2) (@width /2) (@width/ 2) (@width / 2);
prop24: (2/@width) (2 /@width) (2/ @width) (2 / @width);
prop25-1: #{$width}/#{$width} #{$width} /#{$width} #{$width}/ #{$width} #{$width} / #{$width};
prop25-2: #{$width}*#{$width} #{$width} *#{$width} #{$width}* #{$width} #{$width} * #{$width};
prop25-3: #{$width}+#{$width} #{$width} +#{$width} #{$width}+ #{$width} #{$width} + #{$width};
prop25-4: #{$width}-#{$width} #{$width} -#{$width} #{$width}- #{$width} #{$width} - #{$width};
prop26: 8px/2px 8px /1 1/ 2px 1 / 2;
prop27: 8px/2px 8px/1 1/2px 1/2;
prop28: 8px / 2px 8px / 1 1 / 2px 1 / 2;
prop29: (8px/2px) (8px/1) (1/2px) (1/2);
prop30: (8px / 2px) (8px / 1) (1 / 2px) (1 / 2);
prop31: (#{$width}/2px) (8px/#{$width}) (#{$width} / 2px) (8px / #{$width});
prop32: func(8px/2);
prop33: 5px + 8px/2px;
prop34: func(+20px, + 20px);
prop35: 1+1+1+1;
prop36: 1 + 1 + 1 + 1;
prop37: 1 +1 1 +1;
prop38: ++1;
prop39: ++(1);
prop40: --1;
prop41: --(1);
prop42: 1px+1px+1px+1px;
prop43: 1px + 1px + 1px + 1px;
prop44: -1+-1 -(-1)+-1 -1+-(-1) -(-1)+-(-1);
prop45: round(1.5)*2 round(1.5) *2 round(1.5)* 2 round(1.5) * 2;
prop46: 2*round(1.5) 2 *round(1.5) 2* round(1.5) 2 * round(1.5);
prop47: (round(1.5)*2) (round(1.5) *2) (round(1.5)* 2) (round(1.5) * 2);
prop48: (2*round(1.5)) (2 *round(1.5)) (2* round(1.5)) (2 * round(1.5));
prop49: $width*2 $width *2 $width* 2 $width * 2;
prop50: 2*$width 2 *$width 2* $width 2 * $width;
prop51: ($width*2) ($width *2) ($width* 2) ($width * 2);
prop52: (2*$width) (2 *$width) (2* $width) (2 * $width);
prop53: @width*2 @width *2 @width* 2 @width * 2;
prop54: 2*@width 2 *@width 2* @width 2 * @width;
prop55: (@width*2) (@width *2) (@width* 2) (@width * 2);
prop56: (2*@width) (2 *@width) (2* @width) (2 * @width);
prop57: round(1.5)+2 round(1.5) +2 round(1.5)+ 2 round(1.5) + 2;
prop58: 2+round(1.5) 2 +round(1.5) 2+ round(1.5) 2 + round(1.5);
prop59: (round(1.5)+2) (round(1.5) +2) (round(1.5)+ 2) (round(1.5) + 2);
prop60: (2+round(1.5)) (2 +round(1.5)) (2+ round(1.5)) (2 + round(1.5));
prop61: $width+2 $width +2 $width+ 2 $width + 2;
prop62: 2+$width 2 +$width 2+ $width 2 + $width;
prop63: ($width+2) ($width +2) ($width+ 2) ($width + 2);
prop64: (2+$width) (2 +$width) (2+ $width) (2 + $width);
prop65: @width+2 @width +2 @width+ 2 @width + 2;
prop66: 2+@width 2 +@width 2+ @width 2 + @width;
prop67: (@width+2) (@width +2) (@width+ 2) (@width + 2);
prop68: (2+@width) (2 +@width) (2+ @width) (2 + @width);
prop69: "test"+1 "test" +1 "test"+ 1 "test" + 1;
prop70: 1+"test" 1 +"test" 1+ "test" 1 + "test";
prop71: "test"-1 "test" -1 "test"- 1 "test" - 1;
prop72: 1-"test" 1 -"test" 1- "test" 1 - "test";
prop73: calc(100%*2px) calc(100% *2px) calc(100%* 2px) calc(100% * 2px);
prop74: calc(100%/2px) calc(100% /2px) calc(100%/ 2px) calc(100% / 2px);
prop75: calc(100%+2px) calc(100% +2px) calc(100%+ 2px) calc(100% + 2px);
prop76: calc(100%-2px) calc(100% -2px) calc(100%- 2px) calc(100% - 2px);
prop77: calc(-5px);
prop78: calc(+5px);
prop79: calc(-100px + 100px);
prop80: calc(+100px + 100px);
prop81: calc(100px - 100px);
prop82: calc(100px + 100px);
}
.bar {

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

@ -1406,7 +1406,7 @@ $lg-and-up: "(min-width: 1200px)";
line-height: #{strip-unit($line-height)}em;
height: 1#{$var};
width: calc(100% - #{$sidebar-width});
max-width: calc(#{$m*100}vw #{$sign} #{$b});
max-width: calc(#{$m * 100}vw #{$sign} #{$b});
font: #{$font-size}/#{$line-height};
content: "I have #{8 + 2} books on SASS!";
border: #{$var} #{$var} #{$var};