Lint Report Comparison - bjankord/stylelint-config-sass-guidelines GitHub Wiki

This is a comparison of scss-lint rules recommended by Sass Guidelines with similar stylelint rules and not a direct comparison of scss-lint rules with stylelint rules. scss-lint does an excellent job of linting .scss files. Stylelint also has the ability to lint .scss files and with the help of stylelint-scss, it can match a lot of the linter rules from scss-lint. There are some scss-lint rules Sass Guideline recommends which stylelint does not currently check for. Below is a break down of the lint report from both tools. There is also a section below which details the scss-lint rules stylelint does not have an equivalent rule to report on.

Lint Report from scss-lint and stylelint

Bang Format

scss-lint

  • failing-test-cases.scss:3 [W] BangFormat: ! should be preceded by a space, and should not be followed by a space
  • failing-test-cases.scss:4 [W] BangFormat: ! should be preceded by a space, and should not be followed by a space

stylelint

  • 3:25 ✖ Unexpected whitespace after "!" - declaration-bang-space-after
  • 3:25 ✖ Expected single space before "!" - declaration-bang-space-before
  • 4:14 ✖ Expected single space before "!" - declaration-bang-space-before

Bem Depth

scss-lint

  • failing-test-cases.scss:11 [W] BemDepth: BEM selectors should have no more than 1 element, but block__element__subelement has 2

stylelint

  • No lint reported

Border Zero

scss-lint

  • failing-test-cases.scss:19 [W] BorderZero: border: 0 is preferred over border: none

stylelint

  • 19:3 ✖ Unexpected value "none" for property "border" - declaration-property-value-blacklist

Color Keyword

scss-lint

  • failing-test-cases.scss:24 [W] ColorKeyword: Color green should be written in hexadecimal form as #008000

stylelint

  • 24:10 ✖ Unexpected named color "green" - color-named

Debug Statement

scss-lint

  • failing-test-cases.scss:31 [W] DebugStatement: Remove @debug line

styelint

  • 31:3 ✖ Unexpected at-rule "debug" - at-rule-blacklist

Declaration Order

scss-lint

  • failing-test-cases.scss:44 [W] DeclarationOrder: Expected item on line 43 to appear before line 37. Rule sets should be ordered as follows: @extends, @includes without @content, properties, @includes with @content, nested rule sets

stylelint

  • 39:5 ✖ Expected "background-color" to come before "color" - declaration-block-properties-order
  • 42:3 ✖ Expected declaration to come before rule order/order
  • 43:3 ✖ Expected blockless @include to come before declaration order/order
  • 44:3 ✖ Expected @extend to come before blockless @include order/order

Else Placement

scss-lint

  • failing-test-cases.scss:55 [W] ElsePlacement: @else should be placed on same line as previous curly brace

stylelint

Empty Line Between Blocks

scss-lint

  • failing-test-cases.scss:64 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
  • failing-test-cases.scss:67 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line

stylelint

  • 64:3 ✖ Expected empty line before nested rule - rule-nested-empty-line-before
  • 68:1 ✖ Expected empty line before non-nested rule - rule-non-nested-empty-line-before

Empty Rule

scss-lint

  • failing-test-cases.scss:73 [W] EmptyRule: Empty rule

stylelint

  • 73:6 ✖ Unexpected empty block - block-no-empty

Final New line

scss-lint

  • failing-test-cases.scss:332 [W] FinalNewline: Files should end with a trailing newline

stylelint

  • 332:1 ✖ Unexpected missing newline at end of file - no-missing-eof-newline

Hex Length

scss-lint

  • failing-test-cases.scss:78 [W] HexLength: Color #ff22ee should be written as #f2e

stylelint

  • 78:10 ✖ Expected "#ff22ee" to be "#f2e" - color-hex-length

Hex Notation

scss-lint

  • failing-test-cases.scss:83 [W] HexNotation: Color #F00 should be written as #f00

stylelint

  • 83:10 ✖ Expected "#F00" to be "#f00" - color-hex-case

Hex Validation

scss-lint

  • failing-test-cases.scss:88 [W] HexValidation: Colors must have either three or six digits: #ab

stylelint

  • 88:15 ✖ Unexpected invalid hex color "#ab" - color-no-invalid-hex

Id Selector

scss-lint

  • failing-test-cases.scss:92 [W] IdSelector: Avoid using id selectors

stylelint

  • 92:1 ✖ Unexpected id selector - selector-no-id

Import Path

scss-lint

  • failing-test-cases.scss:97 [W] ImportPath: Imported partial foo/_bar.scss should be written as foo/bar
  • failing-test-cases.scss:98 [W] ImportPath: Imported partial _bar.scss should be written as bar
  • failing-test-cases.scss:99 [W] ImportPath: Imported partial _bar should be written as bar
  • failing-test-cases.scss:100 [W] ImportPath: Imported partial bar.scss should be written as bar

stylelint

  • 97:1 ✖ Unexpected leading underscore in imported partial name - scss/at-import-no-partial-leading-underscore
  • 97:19 ✖ Unexpected extension ".scss" in imported partial name - scss/at-import-partial-extension-blacklist
  • 98:1 ✖ Unexpected leading underscore in imported partial name - scss/at-import-no-partial-leading-underscore
  • 98:15 ✖ Unexpected extension ".scss" in imported partial name - scss/at-import-partial-extension-blacklist
  • 99:1 ✖ Unexpected leading underscore in imported partial name - scss/at-import-no-partial-leading-underscore
  • 100:14 ✖ Unexpected extension ".scss" in imported partial name - scss/at-import-partial-extension-blacklist

Indentation

scss-lint

  • failing-test-cases.scss:104 [W] Indentation: Line should be indented 2 spaces, but was indented 4 spaces

stylelint

  • 104:5 ✖ Expected indentation of 2 spaces - indentation

Leading Zero

scss-lint

  • failing-test-cases.scss:110 [W] LeadingZero: .5 should be written with a leading zero as 0.5

stylelint

  • 110:10 ✖ Expected a leading zero - number-leading-zero

Name Format

scss-lint

  • failing-test-cases.scss:116 [W] NameFormat: Name of function calculationFunction should be written in all lowercase letters with hyphens instead of underscores
  • failing-test-cases.scss:120 [W] NameFormat: Name of mixin myMixin should be written in all lowercase letters with hyphens instead of underscores
  • failing-test-cases.scss:124 [W] NameFormat: Name of variable myVar should be written in all lowercase letters with hyphens instead of underscores

stylelint

  • 116:1 ✖ Expected @function name to match specified pattern - scss/at-function-pattern
  • 120:1 ✖ Expected @mixin name to match specified pattern - scss/at-mixin-pattern
  • 124:1 ✖ Expected $ variable name to match specified pattern - scss/dollar-variable-pattern

Nesting Depth

scss-lint

  • failing-test-cases.scss:132 [W] NestingDepth: Nesting should be no greater than 1, but was 2

stylelint

  • 133:5 ✖ Expected nesting depth to be no more than 1 - max-nesting-depth
  • 134:7 ✖ Expected nesting depth to be no more than 1 - max-nesting-depth

Placeholder In Extend

scss-lint

  • failing-test-cases.scss:143 [W] PlaceholderInExtend: Prefer using placeholder selectors (e.g. %some-placeholder) with @extend

stylelint

  • 143:3 ✖ Expected a placeholder selector (e.g. %placeholder) to be used in @extend - scss/at-extend-no-missing-placeholder

Private Naming Convention

scss-lint

  • failing-test-cases.scss:150 [W] PrivateNamingConvention: Private variable _foo must be used in the same file it is defined

stylelint

  • No lint reported. Stylelint doesn't seem to have a way to check if a private variable is used/not used in the file it is defined in.

Property Spelling

scss-lint

  • failing-test-cases.scss:159 [W] PropertySpelling: Unknown property diplay
  • failing-test-cases.scss:349 [W] PropertySpelling: Unknown property diplay
  • failing-test-cases.scss:350 [W] PropertySpelling: Unknown property heigth

stylelint

  • 159:3 ✖ Unexpected unknown property "diplay" property-no-unknown
  • 349:3 ✖ Unexpected unknown property "diplay" property-no-unknown
  • 350:3 ✖ Unexpected unknown property "heigth" property-no-unknown

Pseudo Element

scss-lint

  • failing-test-cases.scss:163 [W] PseudoElement: Begin pseudo elements with double colons: ::
  • failing-test-cases.scss:167 [W] PseudoElement: Begin pseudo classes with a single colon: :

stylelint

  • 163:2 ✖ Expected double colon pseudo-element notation - selector-pseudo-element-colon-notation
  • 167:2 ✖ Unexpected unknown pseudo-element selector "::hover" - selector-pseudo-element-no-unknown

Qualifying Element

scss-lint

  • failing-test-cases.scss:173 [W] QualifyingElement: Avoid qualifying id selectors with an element.
  • failing-test-cases.scss:178 [W] QualifyingElement: Avoid qualifying class selectors with an element.
  • failing-test-cases.scss:182 [W] QualifyingElement: Avoid qualifying class selectors with an element.
  • failing-test-cases.scss:186 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.

stylelint

  • 173:1 ✖ Unexpected qualifying type selector - selector-no-qualifying-type
  • 178:1 ✖ Unexpected qualifying type selector - selector-no-qualifying-type
  • 182:4 ✖ Unexpected qualifying type selector - selector-no-qualifying-type
  • 186:1 ✖ Unexpected qualifying type selector - selector-no-qualifying-type

Selector Depth

scss-lint

  • failing-test-cases.scss:134 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
  • failing-test-cases.scss:191 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
  • failing-test-cases.scss:196 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4

stylelint

  • 134:7 ✖ Expected ".one .two .three .four" to have no more than 3 compound selectors - selector-max-compound-selectors
  • 191:1 ✖ Expected ".one .two .three > .four" to have no more than 3 compound selectors - selector-max-compound-selectors
  • 196:3 ✖ Expected ".one .two .three > .four" to have no more than 3 compound selectors - selector-max-compound-selectors

Selector Format

scss-lint

  • failing-test-cases.scss:126 [W] SelectorFormat: Selector placeHolder should be written in lowercase with hyphens
  • failing-test-cases.scss:202 [W] SelectorFormat: Selector SELECTOR__FORMAT should match regex /^(?:u|is|has)-[a-z][a-zA-Z0-9]$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9](?:-[a-z][a-zA-Z0-9])?(?:--[a-z][a-zA-Z0-9])?$/

stylelint

  • 126:1 ✖ Expected %-placeholder "%placeHolder" to match specified pattern - scss/percent-placeholder-pattern
  • 202:1 ✖ Selector should be written in lowercase with hyphens - selector-class-pattern

Shorthand

scss-lint

  • failing-test-cases.scss:208 [W] Shorthand: Shorthand form for property margin should be written more concisely as 1px instead of 1px 1px 1px 1px

stylelint

  • 208:3 ✖ Unexpected longhand value '1px 1px 1px 1px' instead of '1px' - shorthand-property-no-redundant-values

Single Line Per Property

scss-lint

  • failing-test-cases.scss:213 [W] SingleLinePerProperty: Property 'padding' should be placed on own line
  • failing-test-cases.scss:216 [W] SingleLinePerProperty: Property 'margin' should be placed on separate line from selector
  • failing-test-cases.scss:216 [W] SingleLinePerProperty: Property 'padding' should be placed on own line

stylelint

  • 213:13 ✖ Expected newline after ";" - declaration-block-semicolon-newline-after
  • 216:22 ✖ Expected no more than 1 declaration(s) - declaration-block-single-line-max-declarations
  • 216:34 ✖ Expected newline after ";" - declaration-block-semicolon-newline-after

Single Line Per Selector

scss-lint

  • failing-test-cases.scss:219 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line

stylelint

  • 219:7 ✖ Expected newline after "," - selector-list-comma-newline-after

Space After Comma

Stylelint does not detect issues with commas in a mixin

@include box-shadow(0 2px 2px rgba(0,0,0,0.2));

scss-lint

  • failing-test-cases.scss:226 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space
  • failing-test-cases.scss:226 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space
  • failing-test-cases.scss:226 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space
  • failing-test-cases.scss:227 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space
  • failing-test-cases.scss:227 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space
  • failing-test-cases.scss:227 [W] SpaceAfterComma: Commas in function arguments should be followed by a single space

stylelint

  • 227:16 ✖ Expected single space after "," in a single-line function - function-comma-space-after
  • 227:18 ✖ Expected single space after "," in a single-line function - function-comma-space-after
  • 227:20 ✖ Expected single space after "," in a single-line function - function-comma-space-after

Space After Property Colon

scss-lint

  • failing-test-cases.scss:232 [W] SpaceAfterPropertyColon: Colon after property should be followed by one space
  • failing-test-cases.scss:233 [W] SpaceAfterPropertyColon: Colon after property should be followed by one space

stylelint

  • 232:10 ✖ Expected single space after ":" with a single-line declaration - declaration-colon-space-after
  • 233:11 ✖ Expected single space after ":" with a single-line declaration - declaration-colon-space-after

Space After Property Name

scss-lint

  • failing-test-cases.scss:238 [W] SpaceAfterPropertyName: Property name should be immediately followed by a colon

stylelint

  • 238:10 ✖ Unexpected whitespace before ":" - declaration-colon-space-before

Space After Variable Colon

scss-lint

  • failing-test-cases.scss:243 [W] SpaceAfterVariableColon: Colon after variable should be followed by at least one space

stylelint

  • 243:25 ✖ Expected single space after ":" scss/dollar-variable-colon-space-after

Space After Variable Name

scss-lint

  • failing-test-cases.scss:247 [W] SpaceAfterVariableName: Variable names should be followed immediately by a colon

stylelint

  • 247:25 ✖ Unexpected whitespace before ":" scss/dollar-variable-colon-space-before

Space Around Operator

scss-lint

  • failing-test-cases.scss:251 [W] SpaceAroundOperator: 5px+5px should be written with a single space on each side of the operator: 5px + 5px
  • failing-test-cases.scss:252 [W] SpaceAroundOperator: 5px + 5px should be written with a single space on each side of the operator: 5px + 5px

stylelint

No lint reported.

Space Before Brace

stylelint does not seem to support a rule similar to scss-lint's allow_single_line_padding

scss-lint

  • failing-test-cases.scss:256 [W] SpaceBeforeBrace: Opening curly brace { should be preceded by one space
  • failing-test-cases.scss:260 [W] SpaceBeforeBrace: Opening curly brace { should be preceded by one space

stylelint

  • 256:18 ✖ Expected single space before "{" - block-opening-brace-space-before
  • 260:20 ✖ Expected single space before "{" - block-opening-brace-space-before
  • 266:19 ✖ Expected single space before "{" - block-opening-brace-space-before
  • 267:19 ✖ Expected single space before "{" - block-opening-brace-space-before
  • 268:19 ✖ Expected single space before "{" - block-opening-brace-space-before

Space Between Parens

stylelint does not seem to support checking parens space in @includes

scss-lint

  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces before ) instead of
  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces after ( instead of
  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces after ( instead of
  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces before ) instead of
  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces before ) instead of
  • failing-test-cases.scss:273 [W] SpaceBetweenParens: Expected 0 spaces after ( instead of
  • failing-test-cases.scss:274 [W] SpaceBetweenParens: Expected 0 spaces before ) instead of
  • failing-test-cases.scss:274 [W] SpaceBetweenParens: Expected 0 spaces after ( instead of

stylelint

  • 274:15 ✖ Unexpected whitespace after "(" - function-parentheses-space-inside
  • 274:28 ✖ Unexpected whitespace before ")" - function-parentheses-space-inside

String Quotes

scss-lint

  • failing-test-cases.scss:279 [W] StringQuotes: Prefer single quoted strings

stylelint

  • 279:12 ✖ Expected single quotes - string-quotes

Trailing Semicolon

scss-lint

  • failing-test-cases.scss:284 [W] TrailingSemicolon: Declaration should not have a space before the terminating semicolon
  • failing-test-cases.scss:285 [W] TrailingSemicolon: Declaration should be terminated by a semicolon

stylelint

  • 284:25 ✖ Unexpected whitespace before ";" - declaration-block-semicolon-space-before
  • 285:13 ✖ Expected a trailing semicolon - declaration-block-trailing-semicolon

Trailing Zero

scss-lint

  • failing-test-cases.scss:290 [W] TrailingZero: 0.500 should be written without a trailing zero as 0.50
  • failing-test-cases.scss:295 [W] TrailingZero: 1.0 should be written without a trailing zero as 1

stylelint

  • 290:15 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros
  • 295:13 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros

UnnecessaryMantissa

scss-lint

  • failing-test-cases.scss:295 [W] UnnecessaryMantissa: 1.0em should be written without the mantissa as 1em

stylelint

  • 295:13 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros

Unnecessary Parent Reference

scss-lint

  • failing-test-cases.scss:300 [W] UnnecessaryParentReference: Unnecessary parent selector (&)

stylelint

  • 300:3 ✖ Unnecessary nesting selector (&) - scss/selector-no-redundant-nesting-selector

Url Quotes

scss-lint

  • failing-test-cases.scss:307 [W] UrlQuotes: URLs should be enclosed in quotes

stylelint

  • 307:19 ✖ Expected quotes around url argument - function-url-quotes

Vendor Prefixes

scss-lint

  • failing-test-cases.scss:311 [W] VendorPrefix: Avoid vendor prefixes.
  • failing-test-cases.scss:317 [W] VendorPrefix: Avoid vendor prefixes.
  • failing-test-cases.scss:322 [W] VendorPrefix: Avoid vendor prefixes.
  • failing-test-cases.scss:326 [W] VendorPrefix: Avoid vendor prefixes.

stylelint

  • 311:1 ✖ Unexpected vendor-prefixed at-rule "@-webkit-keyframes" - at-rule-no-vendor-prefix
  • 317:3 ✖ Unexpected vendor-prefix "::-moz-placeholder" - selector-no-vendor-prefix
  • 322:3 ✖ Unexpected vendor-prefix "-webkit-transition" - property-no-vendor-prefix
  • 326:12 ✖ Unexpected vendor-prefix "-webkit-flex" - value-no-vendor-prefix

Zero Unit

scss-lint

  • failing-test-cases.scss:331 [W] ZeroUnit: 0px should be written without units as 0

stylelint

  • 331:12 ✖ Unexpected unit - length-zero-no-unit

====

scss-lint rules stylelint does not have an equivalent rule to report on

Bem Depth Details

No lint reported.

Declaration Order Details

Alphabetical property order lint is reported. Current stylelint rules only check order of properties, they don't account for @extends, @includes without @content, properties, @includes with @content, nested rule sets

Else Placement Details

No lint reported. There is a custom plugin in the 18F stylelint-rules project which could possibly be used here.

Private Naming Convention Details

No lint reported. Stylelint doesn't seem to have a way to check if a private variable is used/not used in the file it is defined in.

Space After Comma Details

Stylelint does not detect issues with commas witin a mixin

Space Around Operator Details

stylelint has function-calc-no-unspaced-operator but stylelint does not currently support checking the space around operator inside of scss specific code Issue logged with stylelint-scss

Space Between Parens Details

stylelint does not seem to support checking parens space in @includes