Don't remove space between unary minus and calc() in Sass

[nex3]

Prettier 2.4.1 Playground link

--parser scss

Input:

a {b: - calc($size / 2)}

Output:

a {
  b: -calc($size / 2);
}

Expected behavior:

Removing the space between - and calc() changes the behavior (since -calc is a valid CSS identifier, Sass parses it as an unknown function rather than a negation of the value of the calc() expression).

[stuprog]

Hello,

I wanted to know Which version of scss did you use ?

[fisker]

@stuprog she designed sass.

[stuprog]

Okay ,thank you

[stuprog]

I tested it with postcss-scss 2.1.1 and I found this result .

SCSS

}

JavaScript

const scssParser = require("postcss-scss");

const result = scssParser.parse(`
a {b: - calc($size / 2)}
}

`);
console.log(result);

Errors

$ node index.js
C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\postcss\lib\parser.js:565
    throw this.input.error('Unexpected }', token[2], token[3]);
    ^

CssSyntaxError: <css input>:3:1: Unexpected }
    at Input.error (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\←[4mpostcss←[24m\lib\input.js:128:16)
    at ScssParser.unexpectedClose (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\←[4mpostcss←[24m\lib\parser.js:565:22)
    at ScssParser.end (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\←[4mpostcss←[24m\lib\parser.js:386:12)
    at ScssParser.parse (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\←[4mpostcss←[24m\lib\parser.js:59:16)
    at Object.scssParse [as parse] (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\node_modules\←[4mpostcss-scss←[24m\lib\scss-parse.js:10:10)
    at Object.<anonymous> (C:\Users\PC\OneDrive - South Mediterranean University\Desktop\test\index.js:3:27)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1085:14)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:950:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:790:14)←[39m {
  reason: ←[32m'Unexpected }'←[39m,
  source: ←[32m'\na {b: - calc($size / 2)}\n}\n\n'←[39m,
  line: ←[33m3←[39m,
  column: ←[33m1←[39m,
  input: { line: ←[33m3←[39m, column: ←[33m1←[39m, source: ←[32m'\na {b: - calc($size / 2)}\n}\n\n'←[39m }
}

[nex3]

You're seeing a parsing error there because you have an extra }.

[sosukesuzuki]

@nex3 Thanks for this issue! I'm working on this. Do we need to consider other unary operators? Is to support only minus(- enough?

[nex3]

@nex3 Thanks for this issue! I'm working on this. Do we need to consider other unary operators? Is to support only minus(- enough?

Only - matters, because only - is valid as part of a CSS identifier.

[alexander-akait]

-calc is valid ident too :smile: so I think a valid solution is checking original code and look at space between - and ident