Unknown rule `scss/at-rule-no-unknown`

[Antonio-Laguna]

Describe the bug

The rule scss/at-rule-no-unknown does not exist on stylelint. Usages of this package outside of toolkit cause the above error.

Unknown rule scss/at-rule-no-unknown. Did you mean scss/at-rule-no-unknown at-rule-no-unknown?

Steps to Reproduce

Need to install this outside of toolkit which does install stylelint-config-standard-scss and then try to run lint.

Screenshots, screen recording, code snippet

No response

Environment information

No response

WordPress information

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Antonio-Laguna]

@nicholasio this is tricky.

Solving this can be done by creating a separate scss.js like this:

module.exports = {
    extends: ['./index.js'],
    rules: {
        'scss/at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'define-mixin'] }],
    },
};

However, this is technically breaking. We could make it not-breaking for toolkit by making sure it uses @10up/stylelint-config/scss.

However, stylelint has released version 15 which will create more breaking versions of this package given that Node support changes severely

[nicholasio]

Where does scss/at-rule-no-unknown come from?

[Antonio-Laguna]

That's right now on @10up/stylelint but that plugin is not installed by default. If you use the package without both installing the plugin and enabling it, you're going to get errors.

[nicholasio]

OK, so it comes from stylelint-config-standard-scss.

We could try to disable that rule by checking if stylelint-config-standard-scss is installed or not. Then in the next breaking release we split the scss config,

const isPackageInstalled = (packageName: string): boolean => {
    try {
        if (require.resolve(packageName)) {
            return true;
        }
    } catch (error) {
        // do nothing
    }

    return false;
};

const config = {};

if (isPackageInstalled('stylelint-config-standard-scss')) {
   config.rules['css/at-rule-no-unknown'] = [true, { ignoreAtRules: ['mixin', 'define-mixin'] }];
}

module.exports = config;

[Antonio-Laguna]

@nicholasio I realized this change was introduced in the last version so it should be safe to be patched as it's not a relied-upon behavior.