[infrastructure] Add (S)CSS linting infrastructure

* Add Stylelint config
* Add BEM linting
* Add SCSS linting
* Fix all general lint errors
* Remove theme scss files as we won't be using them moving forward

Part of #4464
Relates to #4539

.stylelintrc.yaml

@@ -0,0 +1,256 @@
+extends: stylelint-config-standard
+ignoreFiles:
+  - node_modules/**/*
+  - packages/**/node_modules/**/*
+plugins:
+  - stylelint-selector-bem-pattern
+  - stylelint-scss
+rules:
+  # Follow best practices
+  font-family-name-quotes: always-where-recommended
+  # http://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary
+  function-url-quotes: never
+  # https://www.w3.org/TR/selectors/#attribute-selectors
+  # http://stackoverflow.com/q/3851091
+  selector-attribute-quotes: always
+  # Single-quotes are a convention throughout our codebase
+  string-quotes: single
+  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
+  declaration-block-properties-order:
+    - display
+    - position
+    - top
+    - right
+    - bottom
+    - left
+
+    - flex
+    - flex-basis
+    - flex-direction
+    - flex-flow
+    - flex-grow
+    - flex-shrink
+    - flex-wrap
+    - align-content
+    - align-items
+    - align-self
+    - justify-content
+    - order
+
+    - width
+    - min-width
+    - max-width
+
+    - height
+    - min-height
+    - max-height
+
+    - margin
+    - margin-top
+    - margin-right
+    - margin-bottom
+    - margin-left
+
+    - padding
+    - padding-top
+    - padding-right
+    - padding-bottom
+    - padding-left
+
+    - float
+    - clear
+
+    - columns
+    - column-gap
+    - column-fill
+    - column-rule
+    - column-span
+    - column-count
+    - column-width
+
+    - transform
+    - transform-box
+    - transform-origin
+    - transform-style
+
+    - transition
+    - transition-delay
+    - transition-duration
+    - transition-property
+    - transition-timing-function
+
+    # Border
+
+    - border
+    - border-top
+    - border-right
+    - border-bottom
+    - border-left
+    - border-width
+    - border-top-width
+    - border-right-width
+    - border-bottom-width
+    - border-left-width
+
+    - border-style
+    - border-top-style
+    - border-right-style
+    - border-bottom-style
+    - border-left-style
+
+    - border-radius
+    - border-top-left-radius
+    - border-top-right-radius
+    - border-bottom-left-radius
+    - border-bottom-right-radius
+
+    - border-color
+    - border-top-color
+    - border-right-color
+    - border-bottom-color
+    - border-left-color
+
+    - outline
+    - outline-color
+    - outline-offset
+    - outline-style
+    - outline-width
+
+    # Background
+
+    - background
+    - background-attachment
+    - background-clip
+    - background-color
+    - background-image
+    - background-repeat
+    - background-position
+    - background-size
+
+    # Text
+
+    - color
+
+    - font
+    - font-family
+    - font-size
+    - font-smoothing
+    - font-style
+    - font-variant
+    - font-weight
+
+    - letter-spacing
+    - line-height
+    - list-style
+
+    - text-align
+    - text-decoration
+    - text-indent
+    - text-overflow
+    - text-rendering
+    - text-shadow
+    - text-transform
+    - text-wrap
+
+    - white-space
+    - word-spacing
+
+    # Other
+
+    - border-collapse
+    - border-spacing
+    - box-shadow
+    - caption-side
+    - content
+    - cursor
+    - empty-cells
+    - opacity
+    - overflow
+    - quotes
+    - speak
+    - table-layout
+    - vertical-align
+    - visibility
+    - z-index
+  # The following prefix rules are enabled since we use autoprefixer
+  at-rule-no-vendor-prefix: true
+  media-feature-name-no-vendor-prefix: true
+  selector-no-vendor-prefix: true
+  value-no-vendor-prefix: true
+  # Usually if you're nesting past 3 levels deep there's a problem
+  max-nesting-depth: 3
+  # Because we adhere to BEM we can limit the amount of necessary compound selectors. Most should
+  # just be 1 level selector. However, modifiers can introduce an additional compound selector.
+  # Futhermore, generic qualifying selectors (e.g. `[dir="rtl"]`) can introduce yet another level.
+  selector-max-compound-selectors: 3
+  # For specificity: disallow IDs (0). Allow for complex combinations of classes, pseudo-classes,
+  # attribute modifiers based on selector-max-compound-selectors, plus an addition for
+  # pseudo-classes (4). Allow for pseudo-elements (1).
+  selector-max-specificity: 0,4,1
+  # Disallow "@extend" in scss.
+  # http://csswizardry.com/2016/02/mixins-better-for-performance/
+  # http://vanseodesign.com/css/sass-mixin-or-extend/
+  # Besides performance, @extend actually *changes* the selector precedence by creating a compound
+  # selector, which can lead to ambiguous results.
+  at-rule-blacklist:
+    - extend
+  # Extremely useful for typos, and anything emergent can be ignored by this rule
+  property-no-unknown: true
+  # There is no reason that a specific ID would be needed for UI components
+  selector-no-id: true
+  # Qualifying types are not needed when using a naming system like BEM
+  selector-no-qualifying-type: true
+  # In general, we should *never* be modifying elements within our components, since we can't
+  # predict the use cases in which users would add a certain type of element into a component.
+  # An exception to this may be in packages/material-design-lite, in which case this rule could be
+  # disabled for that file, with an explanation.
+  selector-no-type: true
+  # Styles for components should never need the universal selector.
+  selector-no-universal: true
+  # Ensure any defined symbols are prefixed with "mdl-"
+  # TODO: Remove "md-" pattern.
+  custom-media-pattern: ^mdl?-.+
+  custom-property-pattern: ^mdl?-.+
+  selector-class-pattern:
+    - ^mdl?-.+
+    -
+      resolveNestedSelectors: true
+  selector-id-pattern: ^mdl?-.+
+  # Names are more semantic than numbers
+  font-weight-notation: named-where-possible
+  # :root is an important enough selector that it always stands on it's own. Also, there is no
+  # reason to make root a compound selector (?)
+  selector-root-no-composition: true
+  # http://www.paulirish.com/2010/the-protocol-relative-url/
+  function-url-no-scheme-relative: true
+  # TODO: and FIXME: warnings are super useful because they remind us that we should address these
+  # within our codebase
+  comment-word-blacklist:
+    -
+      - /^TODO:/
+      - /^FIXME:/
+    -
+      severity: warning
+  # Part of google's style guide
+  number-leading-zero: never
+
+  # We use Harry Roberts' BEM dialect as our preferred way to format classes.
+  # See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
+  # See: https://github.com/postcss/postcss-bem-linter/blob/c59db3f/lib/preset-patterns.js#L39
+  plugin/selector-bem-pattern:
+    componentName: ^[a-z]+(?:-[a-z]+)*$
+    # <namespace>-<block>__<element>*--<modifier>*[<attribute>]*
+    componentSelectors: ^\.mdl?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
+
+  # SCSS naming patterns, just like our CSS conventions above.
+  # (note for $-vars we use a leading underscore for "private" variables)
+  scss/dollar-variable-pattern: ^_?mdl?-.+
+  scss/at-function-pattern: ^mdl?-.+
+  scss/at-mixin-pattern: ^mdl?-.+
+  # Prevents unneeded nesting selectors
+  scss/selector-no-redundant-nesting-selector: true
+  # Since leading underscores are not needed, they can be omitted
+  scss/at-import-no-partial-leading-underscore: true
+  # Since mixins are explicit (`@include`) and parens are unnecessary for argumentless mixins, they
+  # can be omitted.
+  scss/at-mixin-no-argumentless-call-parentheses: true

package.json

@@ -10,6 +10,7 @@
     "dist": "npm run clean && npm run build && npm run build:min",
     "dev": "npm run clean && MDL_ENV=development webpack-dev-server --content-base demos --inline --hot",
     "lint:js": "eslint --fix packages webpack.config.js",
+    "lint:css": "stylefmt -R packages && stylelint packages/**/*.scss",
     "postinstall": "lerna bootstrap"
   },
   "devDependencies": {
@@ -27,13 +28,20 @@
     "raw-loader": "^0.5.1",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
+    "stylefmt": "^4.1.1",
+    "stylelint": "^7.0.3",
+    "stylelint-config-standard": "^11.0.0",
+    "stylelint-scss": "^1.2.1",
+    "stylelint-selector-bem-pattern": "^1.0.0",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   },
   "babel": {
     "presets": [
       "es2015"
     ],
-    "plugins": ["transform-object-assign"]
+    "plugins": [
+      "transform-object-assign"
+    ]
   }
 }

packages/mdl-animation/_variables.scss

@@ -1,3 +1,3 @@
-$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default;
-$mdl-animation-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
-$mdl-animation-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default
+$mdl-animation-linear-out-slow-in-timing-function: cubic-bezier(0, 0, .2, .1) !default;
+$mdl-animation-fast-out-slow-in-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
+$mdl-animation-fast-out-linear-in-timing-function: cubic-bezier(.4, 0, 1, 1) !default;