Merge pull request #118 from primer/scss-lint-settings-upgrade

Update scss-lint properties for v0.38.0

README.md

@@ -134,7 +134,7 @@ By contributing to Primer, you agree to the terms presented in [this license agr
 When contributing changes to Primer, be sure to do the following steps when opening a pull request:
 
 1. Bump the version number in `bower.json` (it's purely placebo right now, but it's good habit) and `package.json`.
-2. Run `grunt css` and commit the changes. This compiles the SCSS to CSS so we can do basic analysis on the number of selectors, file size, etc.
+2. Run `grunt` and commit the changes. This compiles the SCSS to CSS so we can do basic analysis on the number of selectors, file size, etc.
 
 In addition, please read through our [contributing guidelines](https://github.com/primer/primer/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 

css/.primer-stats.md

@@ -7,17 +7,17 @@
 ### css/primer.css
 
 - **Total Stylesheets:** 1
-- **Total Stylesheet Size:** 27568
+- **Total Stylesheet Size:** 27336
 - **Total Media Queries:** 1
 - **Total Rules:** 360
-- **Selectors Per Rule:** 1.4861111111111112
+- **Selectors Per Rule:** 1.4833333333333334
-- **Total Selectors:** 535
+- **Total Selectors:** 534
-- **Identifiers Per Selector:** 2.1289719626168226
+- **Identifiers Per Selector:** 2.1273408239700373
-- **Specificity Per Selector:** 16.457943925233646
+- **Specificity Per Selector:** 16.46441947565543
 - **Top Selector Specificity:** 50
 - **Top Selector Specificity Selector:** .fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before
 - **Total Id Selectors:** 0
-- **Total Identifiers:** 1139
+- **Total Identifiers:** 1136
-- **Total Declarations:** 904
+- **Total Declarations:** 899
-- **Total Unique Colors:** 79
+- **Total Unique Colors:** 78
 - **Total Important Keywords:** 1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primer",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "homepage": "http://primercss.io",
   "author": "GitHub, Inc.",
   "scss": "./scss/primer.scss",

scss/.scss-lint.yml

@@ -1,9 +1,9 @@
-# This is the lint file for .scss files. It uses https://github.com/causes/scss-lint
+# This is the lint file for .scss files. It uses https://github.com/brigade/scss-lint
 # to search through .scss files and point out errors.
 # You can view these errors in your editor.
 #
 # Here's a link to all the default configurations
-# https://github.com/causes/scss-lint/blob/master/config/default.yml
+# https://github.com/brigade/scss-lint/blob/master/config/default.yml
 # below is our settings.
 
 linters:
@@ -11,13 +11,19 @@ linters:
     enabled: true
     space_before_bang: true
     space_after_bang: false
+    severity: error
+
+  BemDepth:
+    enabled: false
 
   BorderZero:
     enabled: true
     convention: zero # or `none`
+    severity: error
 
   ColorKeyword:
     enabled: true
+    severity: error
 
   ColorVariable:
     enabled: false
@@ -27,20 +33,24 @@ linters:
 
   DebugStatement:
     enabled: true
+    severity: error
 
   DeclarationOrder:
-    enabled: true
+    enabled: false
 
   DuplicateProperty:
     enabled: true
+    severity: error
 
   ElsePlacement:
     enabled: true
     style: same_line # or 'new_line'
+    severity: error
 
   EmptyLineBetweenBlocks:
     enabled: true
     ignore_single_line_blocks: true
+    severity: error
 
   EmptyRule:
     enabled: false
@@ -48,54 +58,67 @@ linters:
   FinalNewline:
     enabled: true
     present: true
+    severity: error
 
   HexLength:
     enabled: true
     style: short # or 'long'
+    severity: error
 
   HexNotation:
     enabled: true
     style: lowercase # or 'uppercase'
+    severity: error
 
   HexValidation:
     enabled: true
+    severity: error
 
   IdSelector:
-    enabled: true
+    enabled: false
+    severity: warning
 
   ImportantRule:
-    enabled: true
+    enabled: false
+    severity: error
 
   ImportPath:
     enabled: true
     leading_underscore: false
     filename_extension: false
+    severity: error
 
   Indentation:
     enabled: true
     allow_non_nested_indentation: false
     character: space # or 'tab'
     width: 2
+    severity: error
 
   LeadingZero:
     enabled: true
     style: include_zero
+    severity: error
 
   MergeableSelector:
     enabled: true
     force_nesting: true
+    severity: error
 
   NameFormat:
     enabled: false
-    convention: hyphenated_lowercase # or 'BEM', or a regex pattern
 
   NestingDepth:
-    enabled: false
+    enabled: true
-    max_depth: 3
+    max_depth: 5
+    severity: error
 
   PlaceholderInExtend:
     enabled: false
 
+  PropertyCount:
+    enabled: false
+
   PropertySortOrder:
     enabled: false
     ignore_unspecified: true
@@ -273,82 +296,111 @@ linters:
 
   PropertySpelling:
     enabled: true
+    severity: error
     extra_properties: []
 
+  PropertyUnits:
+    enabled: false
+    severity: error
+    global: ['em', 'rem', '%'] # Allow relative units globally
+    properties:
+      border: ['px'] # Only pixels
+      line-height: [] # No units allowed
+      margin: ['em', 'rem']
+
   QualifyingElement:
-    enabled: true
+    enabled: false
     allow_element_with_attribute: false
     allow_element_with_class: false
     allow_element_with_id: false
+    severity: warning
 
   SelectorDepth:
     enabled: true
     max_depth: 4
+    severity: error
 
   SelectorFormat:
-    enabled: false
+    enabled: true
-    convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+    convention: ^((?!js\-))[a-z1-2\-\_]+
+    severity: error
 
   Shorthand:
     enabled: true
+    severity: error
 
   SingleLinePerProperty:
     enabled: true
     allow_single_line_rule_sets: true
+    severity: error
 
   SingleLinePerSelector:
     enabled: true
+    severity: error
 
   SpaceAfterComma:
     enabled: true
+    severity: error
 
   SpaceAfterPropertyColon:
     enabled: true
     style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+    severity: error
 
   SpaceAfterPropertyName:
     enabled: true
+    severity: error
 
   SpaceBeforeBrace:
     enabled: true
     style: space # or 'new_line'
     allow_single_line_padding: true
+    severity: error
 
   SpaceBetweenParens:
     enabled: true
     spaces: 0
+    severity: error
 
   StringQuotes:
     enabled: true
     style: double_quotes
+    severity: error
 
   TrailingSemicolon:
     enabled: true
+    severity: error
 
   TrailingZero:
-    enabled: false
+    enabled: true
+    severity: error
 
   UnnecessaryMantissa:
     enabled: true
+    severity: error
 
   UnnecessaryParentReference:
     enabled: true
+    severity: error
 
   UrlFormat:
     enabled: true
+    severity: error
 
   UrlQuotes:
     enabled: true
+    severity: error
 
   VariableForProperty:
     enabled: false
-    properties: []
 
   VendorPrefix:
     enabled: true
     identifier_list: base
     additional_identifiers: []
     excluded_identifiers: []
+    severity: error
 
   ZeroUnit:
     enabled: true
+    severity: error

scss/_buttons.scss

@@ -85,7 +85,7 @@
 // Green primary button
 .btn-primary {
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
   background-color: #60b044;
   background-image: linear-gradient(#8add6d, #60b044);
   border-color: darken(#60b044, 2%);
@@ -104,7 +104,7 @@
 
   &:active,
   &.selected {
-    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
+    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
     background-color: darken(#60b044, 5%);
     background-image: none;
     border-color: darken(#4a993e, 5%);
@@ -348,11 +348,11 @@
     &:focus {
       z-index: 3;
     }
-  }
 
-  // Tuck buttons into one another to prevent double border
+    // Tuck buttons into one another to prevent double border
-  .btn + .btn {
+    + .btn {
-    margin-left: -1px;
+      margin-left: -1px;
+    }
   }
 
   .btn + .button_to,

scss/_forms.scss

@@ -51,8 +51,7 @@ input.input-contrast,
 }
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
-::-webkit-input-placeholder,
+::placeholder {
-:-moz-placeholder {
   color: #aaa;
 }
 
@@ -161,12 +160,11 @@ dl.form {
       &.is-error { color: $brand-red; }
 
       &.is-success { color: $brand-green; }
-    }
 
-    h4 + p.note {
+      + p.note {
-      margin-top: 0;
+        margin-top: 0;
+      }
     }
-
   }
 
   //
@@ -180,63 +178,11 @@ dl.form {
       content: "*";
     }
   }
-}
 
-.note {
+  // Form AJAX states
-  min-height: 17px;
+  //
-  margin: 4px 0 2px;
+  // Form fields that need feedback for AJAX loading, success
-  font-size: 12px;
+  // states and errored states.
-  color: $brand-gray;
-
-  .spinner {
-    margin-right: 3px;
-    vertical-align: middle;
-  }
-}
-
-
-// Checkboxes and Radiobuttons
-//
-// For checkboxes and radio button selections.
-.form-checkbox {
-  padding-left: 20px;
-  margin: 15px 0;
-  vertical-align: middle;
-
-  label {
-
-    em.highlight {
-      position: relative;
-      left: -4px;
-      padding: 2px 4px;
-      font-style: normal;
-      background: #fffbdc;
-      border-radius: 3px;
-    }
-  }
-
-  input[type=checkbox],
-  input[type=radio] {
-    float: left;
-    margin: 2px 0 0 -20px;
-    vertical-align: middle;
-  }
-
-  .note {
-    display: block;
-    margin: 0;
-    font-size: 12px;
-    font-weight: normal;
-    color: #666;
-  }
-}
-
-
-// Form AJAX states
-//
-// Form fields that need feedback for AJAX loading, success
-// states and errored states.
-dl.form {
   .success,
   .error,
   .indicator {
@@ -326,6 +272,55 @@ dl.form {
   }
 }
 
+.note {
+  min-height: 17px;
+  margin: 4px 0 2px;
+  font-size: 12px;
+  color: $brand-gray;
+
+  .spinner {
+    margin-right: 3px;
+    vertical-align: middle;
+  }
+}
+
+
+// Checkboxes and Radiobuttons
+//
+// For checkboxes and radio button selections.
+.form-checkbox {
+  padding-left: 20px;
+  margin: 15px 0;
+  vertical-align: middle;
+
+  label {
+
+    em.highlight {
+      position: relative;
+      left: -4px;
+      padding: 2px 4px;
+      font-style: normal;
+      background: #fffbdc;
+      border-radius: 3px;
+    }
+  }
+
+  input[type=checkbox],
+  input[type=radio] {
+    float: left;
+    margin: 2px 0 0 -20px;
+    vertical-align: middle;
+  }
+
+  .note {
+    display: block;
+    margin: 0;
+    font-size: 12px;
+    font-weight: normal;
+    color: #666;
+  }
+}
+
 
 // Field groups
 //
@@ -339,10 +334,12 @@ dl.form {
     float: left;
     margin: 0 30px 0 0;
 
-    & > dt label {
+    > dt {
-      display: inline-block;
+      label {
-      margin: 5px 0 0;
+        display: inline-block;
-      color: #666;
+        margin: 5px 0 0;
+        color: #666;
+      }
 
       img {
         position: relative;

scss/_mixins.scss

@@ -22,6 +22,7 @@
 
 @mixin gradient($start: #fafafa, $end: #eaeaea) {
   @warn "Gradient mixin is deprecated.";
+  // scss-lint:disable VendorPrefix
   background-color: $end;
   // FF 3.6+
   background-image: -moz-linear-gradient($start, $end);

scss/_normalize.scss

@@ -8,8 +8,7 @@
 
 html {
   font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /**

scss/_tooltips.scss

@@ -171,8 +171,7 @@ $tooltip-text-color: #fff;
 // are always `$multiline-max-width` wide.
 .tooltipped-multiline {
   &:after {
-    width: -moz-max-content;
+    width: max-content;
-    width: -webkit-max-content;
     max-width: $multiline-max-width;
     word-break: break-word;
     word-wrap: normal;