stylelint-scss - Is there a way to disable double-slash-comments?

Question

Im using style-lint for linting Scss files and styled-components (by using different styleint.config files).

Stylint seems to have an open issue when valid css is commentted out (https://github.com/styled-components/stylelint-processor-styled-components/issues/299).

Im ok with not using double-slash comments but the block comments instead ( /* block comment */ ) but I want consistency: css in styled-components and Scss files sharing same css syntax.

My thinking was to disallow double-slash comments for styled-component and Scss files.

// file: stylelint.config.styledComponents.js

module.exports = {
  processors: [
    'stylelint-processor-styled-components',
  ],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-styled-components',
  ],
  rules: {
    // enforce block comments
    'no-invalid-double-slash-comments': true,
  },
};

And here is for the Scss files:

// file: stylelint.config.scss.js

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  plugins: [
    'stylelint-scss',
  ],
  rules: {
    //
    // `scss/at-rule-no-unknown` is basically a wrapper around the mentioned core rule,
    //   but with added SCSS-specific @-directives. So if you use the core rule, @if, @extend
    //   and other Sass-y things will get warnings. You must disable stylelint's core rule to
    //   make this rule work
    //
    // source: https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-rule-no-unknown/README.md#at-rule-no-unknown
    //
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,

    // Report errors for unknown pseudo-classes with exception for :export
    'selector-pseudo-class-no-unknown': [true, {
      ignorePseudoClasses: ['export'],
    }],

    // Override rules to match styles used in styled-components
    //
    // Following rules comes from diffing the print-config results
    //   from styled-components and scss files 
    'no-missing-end-of-source-newline': null,
    'no-empty-source': null,
    'value-no-vendor-prefix': [true],
    'property-no-vendor-prefix': [true],

    // enforce block comments
    'no-invalid-double-slash-comments': true,
  },
};

Linting Scss files does not error when using double-slash-comments. Is there a way to do this ?

Answer 1

The no-invalid-double-slash-comments rule disallows a particular type on double slash comment in CSS. Quoting from the docs:

If you are using a preprocessor that allows // single-line comments (e.g. Sass, Less, Stylus), this rule will not complain about those. They are compiled into standard CSS comments by your preprocessor, so stylelint will consider them valid.

I don't believe there's an existing rule to disallow SCSS double-slash comments. However, you can write a simple plugin to do this. I suggest you use the comment-no-loud rule from the stylelint-scss plugin pack as a blueprint.