canonical
canonical copied to clipboard
Breaking for scss when doing some math in sass string interpolation
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)
I am pretty sure it should be: (100% - #{$variable - 20 + px});
(this also assumes that variable is an integer)
Variable is not an integer. It has same units (i.e px).
I will look into it, though the problem appears to come from https://github.com/sasstools/sass-lint