at-rule-no-unknown errors

[neverfox]

I get at-rule-no-unknown errors for things like @extend, @mixin etc. with this plugin installed. I could be mistaken, but I assumed this plugin would cover those cases, but right now I have to use a custom ignore rule:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": [ true, {
      ignoreAtRules: ['extend', 'at-root', 'debug', 'warn', 'error', 'if', 'else', 'for', 'each', 'while', 'mixin', 'include', 'content', 'return', 'function']
    }]
  }
}

[dryoma]

The list of known rules is defined in stylelint's code. This project loads stylelint as a dependency, thus we can use its code in our code, but can not alter the rules from a standalone stylelint users define in their configs. ... or can we @davidtheclark ? Is it possible to give a plugin set the ability to redefine things like objects in keywordSets?

Alternatively something like stylelint-scss/at-rule-no-unknown can be used instead of the core rule; it would be the same except it would utilize our extended set of known rules. The problem would be we'll also have to keep up with the currently applicable standart atrules, so the first option I think is preferrable.

[eriklharper]

@neverfox I'm in the same boat, but what I realized is that because stylelint-scss is a stylelint plugin, it doesn't automatically enable any rule for you because that's how plugins work.

What we really need to make the linter "scss aware" is a scss lint config that we can tell stylelint to extend instead, the same way you're extending stylelint-config-css-modules above.

I did a quick search online for "stylelint scss config" but it isn't turning up anything, perhaps this is a perfect moment for me to attempt to write one myself!

[eriklharper]

Here we go, there actually is one: https://github.com/bjankord/stylelint-config-sass-guidelines/blob/master/index.js. See how he's using stylelint-scss as a plugin and then implementing rules on top of that plugin to make it scss aware.

[neverfox]

@eriklharper Cool. Makes sense. Thanks for doing the leg work.

[davidtheclark]

Another possibility would be to write a new rule for stylelint-scss that wraps at-rule-no-unknown but automatically ignores Sass's special at-rules. Something like this:

var sassAtRules = [
  'extend', 'at-root', 'debug', 
  'warn', 'error', 'if', 'else', 
  'for', 'each', 'while', 'mixin', 
  'include', 'content', 'return', 'function'
];

function atRuleNoUnknownSassy(on, options) {
  return function (root, result) {
    const defaultedOptions = Object.assign({}, options, {
      ignoreAtRules: sassAtRules.concat(options.ignoreAtRules || [])
    });

    stylelint.rules['at-rule-no-unknown'](on, defaultedOptions)(root, result);
  };
};

This solution means your rule is easy to maintain, without duplicating code and at-rule lists in stylelint.

This ability to manually invoke stylelint rules within plugin rules opens a lot of doors!

[dryoma]

@davidtheclark awesome! Will give it a shot a bit later.

[jeddy3]

Another possibility would be to write a new rule for stylelint-scss that wraps at-rule-no-unknown

@dryoma FYI, this is documented in this section of the developer guide. It's also worth keeping an eye on stylelint/stylelint#2173 in case it impacts on how wrapping rules might work going forward.

[kristerkari]

This is implemented in version 1.5

[dmorenogogoleva]

I get at-rule-no-unknown errors for things like @extend, @mixin etc. with this plugin installed. I could be mistaken, but I assumed this plugin would cover those cases, but right now I have to use a custom ignore rule:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": [ true, {
      ignoreAtRules: ['extend', 'at-root', 'debug', 'warn', 'error', 'if', 'else', 'for', 'each', 'while', 'mixin', 'include', 'content', 'return', 'function']
    }]
  }
}

thank you!