canonical icon indicating copy to clipboard operation
canonical copied to clipboard

Breaking for scss when doing some math in sass string interpolation

Open bitspook opened this issue 9 years ago • 3 comments

Here's sample code for which canonical fails with Parse error

.event {
    width: calc(100% - #{$variable - 20px});
}

It works if we remove - 20px part.

Here's the error report I am getting:

01:15   ~/Desktop   cat ./test.scss | canonical lint --stdin --syntax scss                                                                                                 1 ↵
Unhandled [Error: Parsing error at <text>: Please check validity of the block starting from line #2] Promise {
  <rejected> [Error: Parsing error at <text>: Please check validity of the block starting from line #2] }
/usr/local/lib/node_modules/canonical/dist/bin/canonical.js:23
    throw reason;
    ^

Error: Parsing error at <text>: Please check validity of the block starting from line #2
    at module.exports (/usr/local/lib/node_modules/canonical/node_modules/css-lint/lib/groot.js:21:11)
    at Function.sassLint.lintText (/usr/local/lib/node_modules/canonical/node_modules/css-lint/index.js:36:13)
    at exports.default (/usr/local/lib/node_modules/canonical/dist/syntaxes/scss/lintText.js:25:32)
    at exports.default (/usr/local/lib/node_modules/canonical/dist/utilities/lintText.js:23:37)
    at /usr/local/lib/node_modules/canonical/dist/bin/commands/lintCommand.js:35:42
    at process._tickCallback (node.js:401:9)

bitspook avatar Feb 10 '16 19:02 bitspook

I am pretty sure it should be: (100% - #{$variable - 20 + px}); (this also assumes that variable is an integer)

gajus avatar Feb 10 '16 20:02 gajus

Variable is not an integer. It has same units (i.e px).

bitspook avatar Feb 10 '16 20:02 bitspook

I will look into it, though the problem appears to come from https://github.com/sasstools/sass-lint

gajus avatar Feb 10 '16 20:02 gajus