postcss-sass
postcss-sass copied to clipboard
Potentially unfulfilled atRule properties in parser
Hi @AleshaOleg ,
I was working on an example project with stylelint in order to inspect some bugs I encountered in the real life and I'd like to do a little report.
I've only this deps in my package.json
"devDependencies": {
"stylelint": "^12.0.0",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-recommended-scss": "^4.0.0",
"stylelint-config-sass-guidelines": "^6.1.0"
}
and this stylelint configuration
{
"extends": [
"stylelint-config-sass-guidelines"
],
"rules": {
"block-opening-brace-space-before": null,
"declaration-block-trailing-semicolon": null
}
}
and this screen.sass
file
@media screen and (min-width: 1680px)
.test
border: 0
Obviously I understand that postcss-sass parser in not directly related to stylelint, but let me try ;)
I had problems with these stylelint rules
- postcss-resolve-nested-selector
TypeError: Cannot read property 'type' of undefined
at /Users/fuzzy/dev/test_stylelint/screen.sass:2:3
at resolveNestedSelector (/Users/fuzzy/dev/test_stylelint/node_modules/postcss-resolve-nested-selector/index.js:3:35)
at resolveNestedSelector (/Users/fuzzy/dev/test_stylelint/node_modules/postcss-resolve-nested-selector/index.js:6:61)
- function-url-quotes
TypeError: Cannot read property 'toLowerCase' of undefined
at checkAtRuleParams (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/lib/rules/function-url-quotes/index.js:51:48)
- max-nesting-depth
TypeError: Cannot read property 'type' of undefined
at isIgnoreAtRule (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/lib/rules/max-nesting-depth/index.js:20:8)
and with this postcss's library
- postcss/lib/vendor
TypeError: Cannot read property 'match' of undefined
at Object.prefix (/Users/fuzzy/dev/test_stylelint/node_modules/stylelint/node_modules/postcss/lib/vendor.js:27:22)
Exceptions arose because those libraries' code apparently were expecting more properties on the atRule
than this parser was giving.
I've tried monkeypatching postcss-sass and I got this to get its parser.js
to work (arrow signed rows are added):
_proto.atrule = function atrule(node, parent) {
var _this6 = this;
// Skip unsupported @xxx rules
var supportedNode = node.content[0].content.some(function (contentNode) {
return SUPPORTED_AT_KEYWORDS.includes(contentNode.content);
});
if (!supportedNode) return;
var atrule = postcss.rule();
atrule.selector = '';
atrule.type = 'atrule'; // <------
atrule.name = node.content[0].content[0].content // <------
atrule.params = ''; // <------
atrule.parent = parent;
atrule.raws = {
before: this.raws.before || DEFAULT_RAWS_RULE.before,
between: DEFAULT_RAWS_RULE.between
};
node.content.forEach(function (contentNode, i) {
if (contentNode.type === 'space') {
var prevNodeType = node.content[i - 1].type;
switch (prevNodeType) {
case 'atkeyword':
case 'ident':
atrule.selector += contentNode.content;
break;
default:
}
return;
}
_this6.process(contentNode, atrule);
});
parent.nodes.push(atrule);
};
I also noticed that atrule.type
would be automatically populated by
var atrule = postcss.atRule();
I am not familiar with postcss API and never developed anything for it. At the moment I'm just reporting these snippets and experience with the goal to give you some interesting paths, even if I'm not sure they could be useful.
Sorry in advance if they will not be ;)
Thanks for your attention.
Hey @pioneerskies, sorry I completely forgot about this issue. Would you like to create PR based on your changes?