Skip to content

[Website] & [UI component]: Lint & fix SCSS files in site docs#1180

Merged
maya merged 28 commits into
18f-pages-stagingfrom
scss-linting-fix
May 25, 2016
Merged

[Website] & [UI component]: Lint & fix SCSS files in site docs#1180
maya merged 28 commits into
18f-pages-stagingfrom
scss-linting-fix

Conversation

@yozlet

@yozlet yozlet commented May 20, 2016

Copy link
Copy Markdown
Contributor

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

@maya

maya commented May 20, 2016

Copy link
Copy Markdown
Contributor

yay! one small thing to note, when bringing in the patches, we'll want to change this one back to the original: #985 (diff)

Comment thread config/gulp/sass.js
.pipe(gulp.dest('tmpdocs'));
});

gulp.task('lint-tmp-docs-scss', function (done) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When this lint tasks finds errors, will it point to this tmpdocs directory as the path of the files with problems?

@rogeruiz rogeruiz May 24, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@msecret

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`

@rogeruiz rogeruiz May 24, 2016

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On further inspection, I've also noticed that all linting line numbers are now off by three within this gulp task because of the empty lines at the top of the file without the --- triple dashes. Nevermind on that. It was human error. 💫

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, I think that's perfect then

@msecret

msecret commented May 24, 2016

Copy link
Copy Markdown
Contributor

LGTM once the conflicts are fixed.

rogeruiz added 2 commits May 24, 2016 17:07
This patch disables very stubborn rules which would require us to
refactor some markup on the styleguide site. For now they're disabled.
@rogeruiz

rogeruiz commented May 25, 2016

Copy link
Copy Markdown
Contributor

@yozlet, where are we at for errors and warnings? Are we at peak fixes? never mind, I commented below with what I found. 👍

@rogeruiz

rogeruiz commented May 25, 2016

Copy link
Copy Markdown
Contributor

I'm posting this here for visibility. With all the work on this branch, I ran gulp scss-lint-docs scss-lint to see what the remaining errors warnings are.

[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 space

The styleguide files are passing the linter without an issue, but they are also disabling quite a few rules to do so. The reason being outlined in this commit. Some of the scss-lint rules in the yaml file are good for most problems, but others should maybe be ignored?

The use of !important is something that we might actually need in the core/_base.scss file. and the ProperyCount rules are also things that might need to be ignored as well. The QualifyingElement rule within the components/_forms.scss is something that we may want to ignore too, because these are targeting <form> child-elements that need to be qualified since they may/can share attributes.

I think we can either ignore some of these linting errors and warnings with scss-lint:disable comments, or fix them. And if we fix them, we might have to update some markup or we might not. But I'd rather get a consensus from the team on how to approach this issue. Because these are edge cases for sure.

cc: @yozlet @maya @juliaelman @msecret

@rogeruiz rogeruiz changed the title [WIP] [Website] & [UI component]: Lint & fix SCSS files in site docs [Website] & [UI component]: Lint & fix SCSS files in site docs May 25, 2016
@maya maya merged commit fd9018f into 18f-pages-staging May 25, 2016
@maya maya deleted the scss-linting-fix branch May 25, 2016 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants