[Website] & [UI component]: Lint & fix SCSS files in site docs#1180
Conversation
|
yay! one small thing to note, when bringing in the patches, we'll want to change this one back to the original: #985 (diff) |
| .pipe(gulp.dest('tmpdocs')); | ||
| }); | ||
|
|
||
| gulp.task('lint-tmp-docs-scss', function (done) { |
There was a problem hiding this comment.
When this lint tasks finds errors, will it point to this tmpdocs directory as the path of the files with problems?
There was a problem hiding this comment.
It should only include the file name and line number, so it doesn't matter where the file lives. But, the initial line of where it found the errors, will be in the tmpdocs/ directory. We could have it say that it's checking files in doc_assets/ before it outputs any errors. That way people know where to find them more easily.
Here's some output from running it locally right now.
[16:08:29] Starting 'lint-tmp-docs-scss'...
[16:08:30] 13 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/tmpdocs/homepage.scss
[16:08:30] homepage.scss:39 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] homepage.scss:47 [W] StringQuotes: Prefer single quoted strings
[16:08:30] homepage.scss:51 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] homepage.scss:73 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] homepage.scss:150 [W] MergeableSelector: Merge rule `.usa-circle-block` with rule on line 130
[16:08:30] homepage.scss:154 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:154 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:154 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:154 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:154 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:159 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] homepage.scss:182 [W] SpaceBeforeBrace: Opening curly brace `{` should be preceded by one space
[16:08:30] homepage.scss:198 [W] MergeableSelector: Merge rule `.usa-section-examples` with rule on line 24
[16:08:30] 98 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/tmpdocs/styleguide.scss
[16:08:30] styleguide.scss:32 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:40 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:46 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:49 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:49 [W] NestingDepth: Nesting should be no greater than 4, but was 5
[16:08:30] styleguide.scss:61 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:70 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:75 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:79 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 5
[16:08:30] styleguide.scss:79 [W] NestingDepth: Nesting should be no greater than 4, but was 5
[16:08:30] styleguide.scss:88 [W] ColorVariable: Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:88 [W] ColorKeyword: Color `white` should be written in hexadecimal form as `#ffffff`
[16:08:30] styleguide.scss:91 [W] ColorVariable: Color literals like `#616161` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:93 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:95 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:97 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:101 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:105 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:118 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:140 [W] IdSelector: Avoid using id selectors
[16:08:30] styleguide.scss:147 [W] ColorVariable: Color literals like `#fff` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:152 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:162 [W] ColorVariable: Color literals like `#000` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:201 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:223 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:228 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:234 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:250 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:253 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:268 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:271 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:282 [W] ColorVariable: Color literals like `#fff` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:285 [W] ColorVariable: Color literals like `#eeeeee` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:286 [W] EmptyLineBetweenBlocks: Rule declaration should be preceded by an empty line
[16:08:30] styleguide.scss:301 [W] PseudoElement: Begin pseudo elements with double colons: `::`
[16:08:30] styleguide.scss:302 [W] StringQuotes: Prefer single quoted strings
[16:08:30] styleguide.scss:311 [W] PseudoElement: Begin pseudo elements with double colons: `::`
[16:08:30] styleguide.scss:312 [W] StringQuotes: Prefer single quoted strings
[16:08:30] styleguide.scss:323 [W] ColorVariable: Color literals like `#f5f5f5` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:324 [W] ColorVariable: Color literals like `#e0e0e0` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:328 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:333 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
[16:08:30] styleguide.scss:333 [W] NestingDepth: Nesting should be no greater than 4, but was 5
[16:08:30] styleguide.scss:344 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:415 [W] ColorVariable: Color literals like `#000` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:429 [W] TrailingSemicolon: Declaration should be terminated by a semicolon
[16:08:30] styleguide.scss:436 [W] ZeroUnit: `0rem` should be written without units as `0`
[16:08:30] styleguide.scss:448 [W] TrailingSemicolon: Declaration should be terminated by a semicolon
[16:08:30] styleguide.scss:448 [W] ColorVariable: Color literals like `#323a45` should only be used in variable declarations; they should be referred to via variable everywhere else.
[16:08:30] styleguide.scss:465 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:486 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:491 [W] SpaceAfterPropertyColon: Colon after property should be followed by one space
[16:08:30] styleguide.scss:498 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:517 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] styleguide.scss:536 [W] MergeableSelector: Merge rule `.usa-color-name` with rule on line 462
[16:08:30] styleguide.scss:627 [W] MergeableSelector: Merge rule `.usa-color-gray-dark` with rule on line 570
[16:08:30] styleguide.scss:631 [W] MergeableSelector: Merge rule `.usa-color-gray-light` with rule on line 574
[16:08:30] styleguide.scss:745 [W] MergeableSelector: Merge rule `.usa-color-text-gray-dark` with rule on line 741
[16:08:30] styleguide.scss:778 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:783 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:809 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[16:08:30] styleguide.scss:809 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[16:08:30] styleguide.scss:809 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:810 [W] Indentation: Line should be indented 2 spaces, but was indented 4 spaces
[16:08:30] styleguide.scss:813 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[16:08:30] styleguide.scss:813 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[16:08:30] styleguide.scss:813 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:817 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:821 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:821 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:821 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:821 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:821 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:825 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:825 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:830 [W] Indentation: Line should be indented 2 spaces, but was indented 4 spaces
[16:08:30] styleguide.scss:837 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[16:08:30] styleguide.scss:841 [W] MergeableSelector: Merge rule `.preview` with rule on line 280
[16:08:30] styleguide.scss:873 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:883 [W] EmptyLineBetweenBlocks: Rule declaration should be followed by an empty line
[16:08:30] styleguide.scss:908 [W] MergeableSelector: Merge rule `.usa-font-lead.usa-font-lead-alt` with rule on line 904
[16:08:30] styleguide.scss:924 [W] MergeableSelector: Merge rule `.usa-font-lead.usa-font-lead-alt` with rule on line 920
[16:08:30] styleguide.scss:932 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:932 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:932 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:932 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:932 [W] SingleLinePerSelector: Each selector in a comma sequence should be on its own single line
[16:08:30] styleguide.scss:1013 [W] EmptyLineBetweenBlocks: @include declaration should be followed by an empty line
[16:08:30] Finished 'lint-tmp-docs-scss' after 1.4 s
There was a problem hiding this comment.
I added this line to the output of gulp scss-lint-docs
[16:16:54] scss-lint-docs Linting files found by `docs/doc_assets/**/*.scss`
There was a problem hiding this comment.
On further inspection, I've also noticed that all linting line numbers are now off by three within this Nevermind on that. It was human error. 💫gulp task because of the empty lines at the top of the file without the --- triple dashes.
There was a problem hiding this comment.
Awesome, I think that's perfect then
[UI component]: Footer h4 semantics
[Website]: Move CONTRIBUTING file to root directory
|
LGTM once the conflicts are fixed. |
This patch disables very stubborn rules which would require us to refactor some markup on the styleguide site. For now they're disabled.
This patch disables very stubborn rules which would require us to refactor some markup on the styleguide site. For now they're disabled.
…s into scss-linting-fix # Conflicts: # src/stylesheets/components/_footer.scss
|
|
|
I'm posting this here for visibility. With all the work on this branch, I ran [12:09:55] 2 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/components/_accordions.scss
[12:09:55] components/_accordions.scss:29 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_accordions.scss:36 [W] PropertyCount: Rule set contains (13/10) properties
[12:09:55] 8 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/components/_forms.scss
[12:09:55] components/_forms.scss:12 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_forms.scss:12 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_forms.scss:25 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_forms.scss:25 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_forms.scss:54 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[12:09:55] components/_forms.scss:60 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[12:09:55] components/_forms.scss:134 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] components/_forms.scss:134 [W] QualifyingElement: Avoid qualifying attribute selectors with an element.
[12:09:55] 2 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/components/_sidenav.scss
[12:09:55] components/_sidenav.scss:37 [W] MergeableSelector: Merge rule `&.usa-current` with rule on line 32
[12:09:55] components/_sidenav.scss:58 [W] QualifyingElement: Avoid qualifying class selectors with an element.
[12:09:55] 2 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/core/_base.scss
[12:09:55] core/_base.scss:21 [W] ImportantRule: !important should not be used
[12:09:55] core/_base.scss:26 [W] ImportantRule: !important should not be used
[12:09:55] 1 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/core/_variables.scss
[12:09:55] core/_variables.scss:88 [W] ColorVariable: Color literals like `rgba(#000, 0.3)` should only be used in variable declarations; they should be referred to via variable everywhere else.
[12:09:55] 2 issues found in /Users/rogerruiz/Developer/federal-front-door/web-design-standards/src/stylesheets/elements/_buttons.scss
[12:09:55] elements/_buttons.scss:7 [W] PropertyCount: Rule set contains (20/10) properties
[12:09:55] elements/_buttons.scss:165 [W] SpaceBeforeBrace: Opening curly brace `{` should be preceded by one spaceThe The use of I think we can either ignore some of these linting errors and warnings with |
Description
Pull in fixes from #987 #985 and #1063, and add lint tasks for website CSS, and fix existing errors!
(Pairing with @rogeruiz)
Still in progress, do not merge
Additional Information