Does not work with LESS, shows "'length' of undefined"

[handonam]

Hi guys

I currently have this error:

TypeError: Cannot read property 'length' of undefined
    at hasNoDeclarations (/Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/lib/get-selectors.js:12:20)
    at getSelectors (/Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/lib/get-selectors.js:39:7)
    at module.exports (/Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/lib/validate-selectors.js:27:19)
    at checkRule (/Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/index.js:78:7)
    at /Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/index.js:45:9
    at Array.forEach (native)
    at /Users/handonam/Workspace/ipu/node_modules/postcss-bem-linter/index.js:42:14
    at /Users/handonam/Workspace/ipu/node_modules/postcss/lib/container.js:241:28
    at /Users/handonam/Workspace/ipu/node_modules/postcss/lib/container.js:148:26
    at Rule.each (/Users/handonam/Workspace/ipu/node_modules/postcss/lib/container.js:114:22)

This is my CSS file:

@import (reference) "~bootstrap-less/bootstrap/variables";
@import (reference) "~typography/variables";

/** @define content */
.content__copy {
  margin-top: 0px;
  margin-bottom: 30px;
  .typo-t6();  /*<-------------------- a less mixin known to work*/
  text-align: center;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.content__copy--t4 {
  .typo-t4();
}

.content__copy_____someIncorrectBem {
  .typo-t4();
}

This is my configuration in postcss.config.js

const stylelint = require("stylelint");

module.exports = {
  plugins: [
    stylelint("./.stylelintrc.js")
  ]
};

Which includes this in .stylelintrc.js

module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-selector-bem-pattern"
  ],
  "rules": {
    // currently throwing "cannot read 'length' of undefined" errors on atom stylelint.
    "plugin/selector-bem-pattern": {
      "preset": 'bem',
      "componentName": "[a-z]+",
      componentSelectors: function(componentName) {
        var WORD = '[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*';
        var element = '(?:__' + WORD + ')?';
        var modifier = '(?:--' + WORD + '){0,2}';
        var attribute = '(?:\\[.+\\])?';
        return new RegExp('^\\.' + componentName + element + modifier + attribute + '$');
      }
    }
  }
}

Wondering if you guys have any ideas around what may be happening here?

[handonam]

Ah, it looks like if you don't have the opening brace after the period, it will throw this error. This only happens in LESS files. Sass is fine, as it will throw "Unknown word" (CssSyntaxError).

@import (reference) "~bootstrap-less/bootstrap/variables";
@import (reference) "~typography/variables";

/** @define content */
.content__copy {
  display: block
}

.  /* <--- error with a period that doesn't have a corresponding `{` */