Skip to content

Potentially unfulfilled atRule properties in parser #128

@alessandro-fazzi

Description

@alessandro-fazzi

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.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions