From a06c4029d25184b3c74c7218d3910d4be84e4112 Mon Sep 17 00:00:00 2001 From: CM Lubinski Date: Tue, 12 Sep 2017 19:25:59 -0400 Subject: [PATCH] Add SCSS-Lint to codeclimate. 18F has a SCSS-linter configuration (https://frontend.18f.gov/#css-linting), which we now adopt. This also fixes many of the easy SCSS issues (white space, splitting a property shorthand, etc.). --- .codeclimate.yml | 2 + .scss-lint.yml | 145 ++++++++++++++++++++++++++ ui/assets/css/_base.scss | 5 +- ui/assets/css/_fonts.scss | 98 +++++++++-------- ui/assets/css/_header.scss | 5 +- ui/assets/css/_homepage.scss | 7 +- ui/assets/css/_loading-indicator.scss | 7 +- ui/assets/css/_policies.scss | 5 +- ui/assets/css/_req-filter-ui.scss | 2 +- ui/assets/css/_requirements.scss | 4 +- ui/assets/css/_search.scss | 6 +- ui/assets/css/_typography.scss | 7 +- ui/assets/css/main.scss | 10 +- 13 files changed, 229 insertions(+), 74 deletions(-) create mode 100644 .scss-lint.yml diff --git a/.codeclimate.yml b/.codeclimate.yml index 1eb0ba402..1cc81ab3c 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -14,6 +14,8 @@ engines: enabled: true radon: enabled: true + scss-lint: + enabled: true ratings: paths: - "**.css" diff --git a/.scss-lint.yml b/.scss-lint.yml new file mode 100644 index 000000000..2f4e26252 --- /dev/null +++ b/.scss-lint.yml @@ -0,0 +1,145 @@ +linters: + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + BorderZero: + enabled: false + convention: zero + ColorKeyword: + enabled: true + severity: warning + ColorVariable: + enabled: true + Comment: + enabled: true + DebugStatement: + enabled: true + DeclarationOrder: + enabled: false + DuplicateProperty: + enabled: true + ElsePlacement: + enabled: true + style: same_line + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + EmptyRule: + enabled: true + FinalNewline: + enabled: true + present: true + HexLength: + enabled: false + style: short + HexNotation: + enabled: true + style: lowercase + HexValidation: + enabled: true + IdSelector: + enabled: true + ImportantRule: + enabled: true + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + Indentation: + enabled: true + allow_non_nested_indentation: false + character: space + width: 2 + LeadingZero: + enabled: false + style: include_zero + MergeableSelector: + enabled: true + force_nesting: true + NameFormat: + enabled: true + allow_leading_underscore: true + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern + NestingDepth: + enabled: true + max_depth: 4 + severity: warning + PlaceholderInExtend: + enabled: false + PropertyCount: + enabled: true + include_nested: false + max_properties: 10 + PropertySortOrder: + enabled: false + ignore_unspecified: false + severity: warning + separate_groups: false + PropertySpelling: + enabled: true + extra_properties: [] + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + severity: warning + SelectorDepth: + enabled: true + max_depth: 2 + severity: warning + SelectorFormat: + enabled: false # strict_BEM doesn't seem to be supported by Hound + convention: strict_BEM + Shorthand: + enabled: true + allowed_shorthands: [1, 2] + severity: warning + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: true + SingleLinePerSelector: + enabled: true + SpaceAfterComma: + enabled: true + SpaceAfterPropertyColon: + enabled: true + style: one_space + SpaceAfterPropertyName: + enabled: true + SpaceBeforeBrace: + enabled: true + style: space + allow_single_line_padding: false + SpaceBetweenParens: + enabled: true + spaces: 0 + StringQuotes: + enabled: true + style: single_quotes + TrailingSemicolon: + enabled: true + TrailingZero: + enabled: false + UnnecessaryMantissa: + enabled: true + UnnecessaryParentReference: + enabled: true + UrlFormat: + enabled: true + UrlQuotes: + enabled: true + VariableForProperty: + enabled: false + properties: [] + VendorPrefixes: + enabled: true + identifier_list: bourbon + include: [] + exclude: [] + ZeroUnit: + enabled: true + severity: warning + Compass::PropertyWithMixin: + enabled: false diff --git a/ui/assets/css/_base.scss b/ui/assets/css/_base.scss index 5c16197d2..f31631a30 100644 --- a/ui/assets/css/_base.scss +++ b/ui/assets/css/_base.scss @@ -1,10 +1,11 @@ -$color-gray-lightest: #FAFAFA; +$color-gray-lightest: #fafafa; :root { font-size: 16px; } -a, a:link { +a, +a:link { color: $color-primary; } diff --git a/ui/assets/css/_fonts.scss b/ui/assets/css/_fonts.scss index d2942fe6b..ff27c055d 100644 --- a/ui/assets/css/_fonts.scss +++ b/ui/assets/css/_fonts.scss @@ -1,57 +1,55 @@ -/* - Fonts - ========================================================================== - Place all @font-face rules in fonts.scss - */ +// Fonts +// ========================================================================== +// Place all @font-face rules in fonts.scss - @font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 300; - src: url('/static/font/SourceSansPro-Light.ttf'); - } +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: url('/static/font/SourceSansPro-Light.ttf'); +} - @font-face { - font-family: 'Source Sans Pro'; - font-weight: 400; - src: url('/static/font/SourceSansPro-Regular.ttf'); - } +@font-face { + font-family: 'Source Sans Pro'; + font-weight: 400; + src: url('/static/font/SourceSansPro-Regular.ttf'); +} - @font-face { - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 400; - src: url('/static/font/SourceSansPro-Italic.ttf'); - } +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 400; + src: url('/static/font/SourceSansPro-Italic.ttf'); +} - @font-face { - font-family: 'Source Sans Pro'; - font-weight: 600; - src: url('/static/font/SourceSansPro-Semibold.ttf'); - } +@font-face { + font-family: 'Source Sans Pro'; + font-weight: 600; + src: url('/static/font/SourceSansPro-Semibold.ttf'); +} - @font-face { - font-family: 'Source Sans Pro'; - font-style: italic; - font-weight: 600; - src: url('/static/font/SourceSansPro-SemiboldItalic.ttf'); - } +@font-face { + font-family: 'Source Sans Pro'; + font-style: italic; + font-weight: 600; + src: url('/static/font/SourceSansPro-SemiboldItalic.ttf'); +} - @font-face { - font-family: 'Merriweather'; - font-weight: 300; - src: url('/static/font/Merriweather-Light.ttf'); - } - @font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 400; - src: url('/static/font/Merriweather-Regular.ttf'); - } +@font-face { + font-family: 'Merriweather'; + font-weight: 300; + src: url('/static/font/Merriweather-Light.ttf'); +} +@font-face { + font-family: 'Merriweather'; + font-style: normal; + font-weight: 400; + src: url('/static/font/Merriweather-Regular.ttf'); +} - @font-face { - font-family: 'Merriweather'; - font-style: italic; - font-weight: 400; - src: url('/static/font/Merriweather-Italic.ttf'); - } +@font-face { + font-family: 'Merriweather'; + font-style: italic; + font-weight: 400; + src: url('/static/font/Merriweather-Italic.ttf'); +} diff --git a/ui/assets/css/_header.scss b/ui/assets/css/_header.scss index 08d909549..b1b54bded 100644 --- a/ui/assets/css/_header.scss +++ b/ui/assets/css/_header.scss @@ -37,6 +37,9 @@ button.usa-disclaimer { } .header-search { - padding: 0 0 1rem 1rem; + padding-top: 0; + padding-right: 0; + padding-bottom: 1rem; + padding-left: 1rem; } } diff --git a/ui/assets/css/_homepage.scss b/ui/assets/css/_homepage.scss index 14e6235a3..fad59fd94 100644 --- a/ui/assets/css/_homepage.scss +++ b/ui/assets/css/_homepage.scss @@ -9,12 +9,15 @@ background-color: $color-primary; color: $color-white; border: 1px solid $color-white; + &:hover { cursor: pointer; } } - h2, h3, h4 { + h2, + h3, + h4 { font-weight: normal; line-height: 1.25em; } @@ -48,5 +51,5 @@ .new-policies { padding: 2rem 1rem; } - } + } } diff --git a/ui/assets/css/_loading-indicator.scss b/ui/assets/css/_loading-indicator.scss index 74b3a3209..2183420e1 100644 --- a/ui/assets/css/_loading-indicator.scss +++ b/ui/assets/css/_loading-indicator.scss @@ -1,4 +1,7 @@ .loading-indicator { + $loader-color-cursor: #333; + $loader-color: #ccc; + text-align: center; .loading-spinner { @@ -8,8 +11,8 @@ box-sizing: border-box; border-radius: 50%; border-style: solid; - border-color: #ccc; - border-right-color: #333; + border-color: $loader-color; + border-right-color: $loader-color-cursor; display: inline-block; } } diff --git a/ui/assets/css/_policies.scss b/ui/assets/css/_policies.scss index e2f85509b..5198e7e35 100644 --- a/ui/assets/css/_policies.scss +++ b/ui/assets/css/_policies.scss @@ -35,12 +35,13 @@ line-height: 1.2rem; margin-top: -.5rem; margin-right: .2rem; + a { - text-align: center; + text-align: center; } } .ninety-nine-plus { - font-size: 0.9375rem; + font-size: 0.9375rem; } } diff --git a/ui/assets/css/_req-filter-ui.scss b/ui/assets/css/_req-filter-ui.scss index dc0beacff..1db2eb5b8 100644 --- a/ui/assets/css/_req-filter-ui.scss +++ b/ui/assets/css/_req-filter-ui.scss @@ -43,4 +43,4 @@ .filter-header { display: none; } -} \ No newline at end of file +} diff --git a/ui/assets/css/_requirements.scss b/ui/assets/css/_requirements.scss index 4d56b63db..d15e14ece 100644 --- a/ui/assets/css/_requirements.scss +++ b/ui/assets/css/_requirements.scss @@ -16,11 +16,11 @@ } .topics { - li:after { + li::after { content: ', '; } - li:last-child:after { + li:last-child::after { content: ''; } } diff --git a/ui/assets/css/_search.scss b/ui/assets/css/_search.scss index 26bd01509..1ed1a3447 100644 --- a/ui/assets/css/_search.scss +++ b/ui/assets/css/_search.scss @@ -6,7 +6,8 @@ @include font-source-sans-pro(); border: 1px solid; border-right: 0; - border-radius: 5px 0 0 5px; + border-bottom-left-radius: 5px; + border-top-left-radius: 5px; font-size: 0.75rem; padding: 0.54rem; width: 20rem; @@ -16,7 +17,8 @@ background-color: $color-white; border: 1px solid; border-left: 0; - border-radius: 0 5px 5px 0; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; padding: 0.58rem; } } diff --git a/ui/assets/css/_typography.scss b/ui/assets/css/_typography.scss index 745cd030c..0e352787e 100644 --- a/ui/assets/css/_typography.scss +++ b/ui/assets/css/_typography.scss @@ -1,7 +1,6 @@ -/* -Typograhy styles - ========================================================================== -typography.scss contains both global and application specific typography */ +// Typograhy styles +// ========================================================================== +// typography.scss contains both global and application specific typography @mixin font-merriweather() { font-family: "Merriweather", serif; diff --git a/ui/assets/css/main.scss b/ui/assets/css/main.scss index fedf14d9a..dfeb2dc7e 100644 --- a/ui/assets/css/main.scss +++ b/ui/assets/css/main.scss @@ -1,9 +1,7 @@ -/* -Main.scss -========================================================================== -main.scss imports all supporting scss files -and includes any non-semantic helper classes -*/ +// Main.scss +// ========================================================================== +// main.scss imports all supporting scss files +// and includes any non-semantic helper classes // Third Party @import '~basscss-sass/scss/basscss';