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

Update scss-lint properties for v0.38.0

Author: mdo

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
-- **Total Selectors:** 535
-- **Identifiers Per Selector:** 2.1289719626168226
-- **Specificity Per Selector:** 16.457943925233646
+- **Selectors Per Rule:** 1.4833333333333334
+- **Total Selectors:** 534
+- **Identifiers Per Selector:** 2.1273408239700373
+- **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 Declarations:** 904
-- **Total Unique Colors:** 79
+- **Total Identifiers:** 1136
+- **Total Declarations:** 899
+- **Total Unique Colors:** 78
 - **Total Important Keywords:** 1

css/primer.css

@@ -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",

package.json

@@ -1,23 +1,29 @@
-# 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:
   BangFormat:
     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,75 +33,92 @@ 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
 
   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
-    max_depth: 3
+    enabled: true
+    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
-    convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+    enabled: true
+    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/.scss-lint.yml

@@ -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
-  .btn + .btn {
-    margin-left: -1px;
+    // Tuck buttons into one another to prevent double border
+    + .btn {
+      margin-left: -1px;
+    }
   }
 
   .btn + .button_to,