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.).
18F · Sep 13, 2017 · a06c402 · a06c402
1 parent 0e3d437
commit a06c402
Show file tree

Hide file tree

Showing 13 changed files with 229 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -43,4 +43,4 @@
   .filter-header {
     display: none;
   }
-}
+}
diff --git 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
@@ -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
@@ -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;