feat(infrastructure): Add new test for style-lint during Travis-CI and local builds. (#27)

Author: trimox

.stylelint-config.yaml

@@ -0,0 +1,252 @@
+extends: stylelint-config-standard
+ignoreFiles:
+  - node_modules/**/*
+plugins:
+  - stylelint-selector-bem-pattern
+  - stylelint-scss
+  - stylelint-order
+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
+  # Double-quotes are our convention throughout our codebase within (S)CSS. They also reflect how
+  # attribute strings are normally quoted within the DOM.
+  string-quotes: double
+  # https://github.com/sasstools/sass-lint/blob/develop/lib/config/property-sort-orders/smacss.yml
+  order/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
+  declaration-property-unit-whitelist:
+    font-size:
+      - "rem"
+      - "px"
+  # 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: 4
+  # 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
+    - ignoreProperties:
+        - contain
+  # 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
+  # Styles for components should never need the universal selector.
+  selector-no-universal: true
+  # Names are more semantic than numbers
+  font-weight-notation: named-where-possible
+  # 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: ^\.mdc?-{componentName}(?:__[a-z]+(?:-[a-z]+)*)*(?:--[a-z]+(?:-[a-z]+)*)*(?:\[.+\])*$
+    ignoreSelectors:
+      - ^fieldset
+      - ^\[aria\-disabled=(?:.+)\]
+
+  # SCSS naming patterns, just like our CSS conventions above.
+  # (note for $-vars we use a leading underscore for "private" variables)
+  scss/dollar-variable-pattern:
+    - ^_?mdc-.+
+    -
+      ignore: local
+  scss/at-function-pattern: ^mdc-.+
+  scss/at-mixin-pattern: ^mdc-.+
+  # 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