load-no-partial-leading-underscore.md

Pattern: Leading underscore in partial name

Issue: -

Description

Disallow leading underscore in partial names in @import, @use, @forward, and meta.load-css $url parameter.

@import "path/to/_file";
/**              ↑
 *   Disallow this */

The rule ignores cases when Sass considers an @import command just a plain CSS import:

• If the file’s extension is .css.
• If the filename begins with http:// (or any other protocol).
• If the filename is a url().
• If the @import has any media queries.

The following patterns are considered warnings:

@import "_foo";

@import "path/_fff";

@forward "path\\_fff"; /* Windows delimiters */

@use "df/fff", "_1.scss";

@use "sass:meta";
.a {
  @include meta.load-css("_fff", $with: ("border-contrast": true));
}

The following patterns are not considered warnings:

@use "_path/fff"; /* underscore in a directory name, not in a partial name */

@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */

@forward "_file.css"; /* Has ".css" extension, so doesn't count as a partial @import */

/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";

@import "_file.scss" screen; /* Has a media query, so doesn't count as a partial @import */

@use "sass:meta";
.a {
  @include meta.load-css("dark-theme/code", $with: ("border-contrast": true));
}

Further Reading

• stylelint-scss - load-no-partial-leading-underscore