postcss-sass icon indicating copy to clipboard operation
postcss-sass copied to clipboard

Potentially unfulfilled atRule properties in parser

Open alessandro-fazzi opened this issue 4 years ago • 1 comments

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.

alessandro-fazzi avatar Nov 19 '19 11:11 alessandro-fazzi

Hey @pioneerskies, sorry I completely forgot about this issue. Would you like to create PR based on your changes?

AleshaOleg avatar Jan 21 '20 15:01 AleshaOleg