Lint Report Comparison

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

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

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