-
Notifications
You must be signed in to change notification settings - Fork 37
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.
- 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
- 3:14 ✖ Expected single space before "!" - declaration-bang-space-before
- 4:25 ✖ Unexpected whitespace after "!" - declaration-bang-space-after
- 4:25 ✖ Expected single space before "!" - declaration-bang-space-before
- failing-test-cases.scss:11 [W] BemDepth: BEM selectors should have no more than 1 element, but
block__element__subelement
has 2
- No lint reported
- failing-test-cases.scss:19 [W] BorderZero:
border: 0
is preferred overborder: none
- 19:3 ✖ Unexpected value "none" for property "border" - declaration-property-value-blacklist
- failing-test-cases.scss:24 [W] ColorKeyword: Color
green
should be written in hexadecimal form as#008000
- 24:10 ✖ Unexpected named color "green" - color-named
- failing-test-cases.scss:31 [W] DebugStatement: Remove @debug line
- 31:3 ✖ Unexpected at-rule "debug" - at-rule-blacklist
- failing-test-cases.scss:43 [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
- 39:5 ✖ Expected "background-color" to come before "color" - declaration-block-properties-order
- Current stylelint rules only check order of properties, they don't account for
@extends
,@includes
without@content
, properties,@includes
with@content
, nested rule sets
- failing-test-cases.scss:54 [W] ElsePlacement: @else should be placed on same line as previous curly brace
- No lint reported. There is a custom plugin in the 18F stylelint-rules project which could possibly be used here.
- failing-test-cases.scss:63 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
- failing-test-cases.scss:66 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
- 63:3 ✖ Expected empty line before nested rule - rule-nested-empty-line-before
- 67:1 ✖ Expected empty line before non-nested rule - rule-non-nested-empty-line-before
- failing-test-cases.scss:72 [W] EmptyRule: Empty rule
- 72:6 ✖ Unexpected empty block - block-no-empty
- failing-test-cases.scss:336 [W] FinalNewline: Files should end with a trailing newline
- 336:1 ✖ Unexpected missing newline at end of file - no-missing-eof-newline
- failing-test-cases.scss:77 [W] HexLength: Color
#ff22ee
should be written as#f2e
- 77:10 ✖ Expected "#ff22ee" to be "#f2e" - color-hex-length
- failing-test-cases.scss:82 [W] HexNotation: Color
#F00
should be written as#f00
- 82:10 ✖ Expected "#F00" to be "#f00" - color-hex-case
- failing-test-cases.scss:87 [W] HexValidation: Colors must have either three or six digits:
#ab
- 87:15 ✖ Unexpected invalid hex color "#ab" - color-no-invalid-hex
- failing-test-cases.scss:91 [W] IdSelector: Avoid using id selectors
- 91:1 ✖ Unexpected id selector - selector-no-id
- failing-test-cases.scss:96 [W] ImportPath: Imported partial
foo/_bar.scss
should be written asfoo/bar
- failing-test-cases.scss:97 [W] ImportPath: Imported partial
_bar.scss
should be written asbar
- failing-test-cases.scss:98 [W] ImportPath: Imported partial
_bar
should be written asbar
- failing-test-cases.scss:99 [W] ImportPath: Imported partial
bar.scss
should be written asbar
- 96:1 ✖ Unexpected leading underscore in imported partial name - scss/at-import-no-partial-leading-underscore
- 96:19 ✖ Unexpected extension ".scss" in imported partial name - scss/at-import-partial-extension-blacklist
- 97:1 ✖ Unexpected leading underscore in imported partial name - scss/at-import-no-partial-leading-underscore
- 97:15 ✖ 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
- 99:14 ✖ Unexpected extension ".scss" in imported partial name - scss/at-import-partial-extension-blacklist
- failing-test-cases.scss:103 [W] Indentation: Line should be indented 2 spaces, but was indented 4 spaces
- 103:5 ✖ Expected indentation of 2 spaces - indentation
- failing-test-cases.scss:109 [W] LeadingZero:
.5
should be written with a leading zero as0.5
- 109:10 ✖ Expected a leading zero - number-leading-zero
- failing-test-cases.scss:115 [W] NameFormat: Name of function
calculationFunction
should be written in all lowercase letters with hyphens instead of underscores - failing-test-cases.scss:119 [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
- 115:1 ✖ Expected @function name to match specified pattern - scss/at-function-pattern
- 119: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
- failing-test-cases.scss:132 [W] NestingDepth: Nesting should be no greater than 1, but was 2
No lint reported. Need to revisit.
- failing-test-cases.scss:143 [W] PlaceholderInExtend: Prefer using placeholder selectors (e.g. %some-placeholder) with @extend
- 143:3 ✖ Expected a placeholder selector (e.g. %placeholder) to be used in @extend - scss/at-extend-no-missing-placeholder
- failing-test-cases.scss:150 [W] PrivateNamingConvention: Private variable _foo must be used in the same file it is defined
- 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.
- failing-test-cases.scss:159 [W] PropertySpelling: Unknown property diplay
No Lint reported. stylelint doesn't seem to have a first class rule for property spelling Could possibly use stylelint-property-unknown or stylelint-known-property
- 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:
:
- 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
- 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.
- 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
- 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
- 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
- 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])?$/
- 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
- failing-test-cases.scss:208 [W] Shorthand: Shorthand form for property
margin
should be written more concisely as1px
instead of1px 1px 1px 1px
- 208:3 ✖ Unexpected longhand value '1px 1px 1px 1px' instead of '1px' - shorthand-property-no-redundant-values
- 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
- 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
- failing-test-cases.scss:219 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
- 219:7 ✖ Expected newline after "," - selector-list-comma-newline-after
Stylelint does not detect issues with commas in a mixin
@include box-shadow(0 2px 2px rgba(0,0,0,0.2));
- 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
- 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
- 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
- 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
- failing-test-cases.scss:238 [W] SpaceAfterPropertyName: Property name should be immediately followed by a colon
- 238:10 ✖ Unexpected whitespace before ":" - declaration-colon-space-before
- failing-test-cases.scss:243 [W] SpaceAfterVariableColon: Colon after variable should be followed by at least one space
stylelint does not currently support this Issue logged with stylelint-scss
- failing-test-cases.scss:247 [W] SpaceAfterVariableName: Variable names should be followed immediately by a colon
stylelint does not currently support this Issue logged with stylelint-scss
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
stylelint does not seem to support a rule similar to scss-lint's allow_single_line_padding
- 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
- 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
stylelint does not seem to support checking parens space in @includes
- 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
- 274:15 ✖ Unexpected whitespace after "(" - function-parentheses-space-inside
- 274:28 ✖ Unexpected whitespace before ")" - function-parentheses-space-inside
- failing-test-cases.scss:279 [W] StringQuotes: Prefer single quoted strings
- 279:12 ✖ Expected single quotes - string-quotes
- 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
- 284:25 ✖ Unexpected whitespace before ";" - declaration-block-semicolon-space-before
- 285:13 ✖ Expected a trailing semicolon - declaration-block-trailing-semicolon
- failing-test-cases.scss:290 [W] TrailingZero:
0.500
should be written without a trailing zero as0.50
- failing-test-cases.scss:296 [W] TrailingZero:
1.0
should be written without a trailing zero as1
- 290:15 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros
- 296:13 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros
- failing-test-cases.scss:296 [W] UnnecessaryMantissa:
1.0em
should be written without the mantissa as1em
- 296:13 ✖ Unexpected trailing zero(s) - number-no-trailing-zeros
- failing-test-cases.scss:301 [W] UnnecessaryParentReference: Unnecessary parent selector (&)
- 301:3 ✖ Unnecessary nesting selector (&) - scss/selector-no-redundant-nesting-selector
- failing-test-cases.scss:308 [W] UrlQuotes: URLs should be enclosed in quotes
- 308:19 ✖ Expected quotes around url argument - function-url-quotes
- failing-test-cases.scss:312 [W] VendorPrefix: Avoid vendor prefixes.
- failing-test-cases.scss:318 [W] VendorPrefix: Avoid vendor prefixes.
- failing-test-cases.scss:323 [W] VendorPrefix: Avoid vendor prefixes.
- failing-test-cases.scss:327 [W] VendorPrefix: Avoid vendor prefixes.
- 312:1 ✖ Unexpected vendor-prefixed at-rule "@-webkit-keyframes" - at-rule-no-vendor-prefix
- 318:3 ✖ Unexpected vendor-prefix "::-moz-placeholder" - selector-no-vendor-prefix
- 323:3 ✖ Unexpected vendor-prefix "-webkit-transition" - property-no-vendor-prefix
- 327:12 ✖ Unexpected vendor-prefix "-webkit-flex" - value-no-vendor-prefix
- failing-test-cases.scss:332 [W] ZeroUnit:
0px
should be written without units as0
- 332:12 ✖ Unexpected unit - length-zero-no-unit
====
No lint reported.
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
No lint reported. There is a custom plugin in the 18F stylelint-rules project which could possibly be used here.
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.
No Lint reported. stylelint doesn't seem to have a first class rule for property spelling Could possibly use stylelint-property-unknown or stylelint-known-property
Stylelint does not detect issues with commas witin a mixin
stylelint does not currently support this Issue logged with stylelint-scss
stylelint does not currently support this Issue logged with stylelint-scss
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
stylelint does not seem to support checking parens space in @includes