Copy .stylelintrc from bedrock & update, make .scss files conform

.stylelintignore

@@ -0,0 +1 @@
+kuma/static/styles/libs/

.stylelintrc

@@ -0,0 +1,76 @@
+{
+    "rules": {
+        "at-rule-name-case": "lower",
+        "at-rule-name-space-after": "always-single-line",
+        "at-rule-semicolon-newline-after": "always",
+        "block-closing-brace-empty-line-before": "never",
+        "block-closing-brace-newline-after": "always",
+        "block-closing-brace-newline-before": "always",
+        "block-no-empty": true,
+        "block-opening-brace-newline-after": "always",
+        "block-opening-brace-space-before": "always",
+        "color-hex-case": "lower",
+        "color-named": "never",
+        "color-no-invalid-hex": true,
+        "comment-no-empty": true,
+        "declaration-bang-space-after": "never",
+        "declaration-bang-space-before": "always",
+        "declaration-block-no-shorthand-property-overrides": true,
+        "declaration-block-semicolon-newline-after": "always-multi-line",
+        "declaration-block-semicolon-newline-before": "never-multi-line",
+        "declaration-block-single-line-max-declarations": 1,
+        "declaration-block-trailing-semicolon": "always",
+        "declaration-colon-space-after": "always-single-line",
+        "declaration-colon-space-before": "never",
+        "declaration-empty-line-before": ["never", { ignore: ["after-comment", "after-declaration"] }],
+        "declaration-no-important": true,
+        "font-family-name-quotes": "always-where-recommended",
+        "font-family-no-duplicate-names": true,
+        "function-comma-space-after": "always-single-line",
+        "function-name-case": "lower",
+        "function-url-no-scheme-relative": true,
+        "function-url-quotes": "always",
+        "indentation": [4, { ignore: ["value"] }],
+        "keyframe-declaration-no-important": true,
+        "length-zero-no-unit": true,
+        "max-empty-lines": 2,
+        "max-nesting-depth": 5,
+        "media-feature-colon-space-after": "always",
+        "media-feature-colon-space-before": "never",
+        "media-feature-name-case": "lower",
+        "media-feature-name-no-unknown": [true, { ignoreMediaFeatureNames: ["min--moz-device-pixel-ratio"]}],
+        "media-feature-parentheses-space-inside": "never",
+        "media-feature-range-operator-space-after": "always",
+        "media-feature-range-operator-space-before": "always",
+        "media-query-list-comma-newline-after": "always-multi-line",
+        "media-query-list-comma-newline-before": "never-multi-line",
+        "media-query-list-comma-space-after": "always-single-line",
+        "media-query-list-comma-space-before": "never",
+        "no-eol-whitespace": true,
+        "no-extra-semicolons": true,
+        "no-invalid-double-slash-comments": true,
+        "no-missing-end-of-source-newline": true,
+        "no-unknown-animations": true,
+        "number-leading-zero": "never",
+        "number-no-trailing-zeros": true,
+        "property-case": "lower",
+        "property-no-unknown": true,
+        "rule-empty-line-before": ["always", { ignore: ["after-comment", "inside-block"] }],
+        "selector-combinator-space-after": "always",
+        "selector-combinator-space-before": "always",
+        "selector-list-comma-newline-after": "always",
+        "selector-list-comma-newline-before": "never-multi-line",
+        "selector-max-empty-lines": 0,
+        "selector-pseudo-class-case": "lower",
+        "selector-pseudo-class-no-unknown": true,
+        "selector-pseudo-element-case": "lower",
+        "selector-pseudo-element-no-unknown": true,
+        "selector-type-case": "lower",
+        "selector-type-no-unknown": true,
+        "string-no-newline": true,
+        "string-quotes": "single",
+        "unit-case": "lower",
+        "unit-no-unknown": true,
+        "value-keyword-case": "lower",
+    }
+}

kuma/static/styles/base/elements.scss

@@ -1,6 +1,6 @@
 /*
-    Base styles for HTML elements
-*/
+Base styles for HTML elements
+********************************************************************** */
 
 @import 'elements/reset';
 @import 'elements/document';

kuma/static/styles/base/elements/document.scss

@@ -1,6 +1,6 @@
 /*
-    Styles for overall document.  Minimally styles the canvas.
-*/
+Styles for overall document.  Minimally styles the canvas.
+********************************************************************** */
 
 html {
     background: #fff;
@@ -11,11 +11,12 @@ body {
     color: $text-color;
     @include create-gradient-background($header-background-color);
 
+    /* typography */
     font-family: $site-font-family;
     line-height: 1.5;
     #{$selector-site-font-fallback} {
         font-family: $site-font-family-fallback;
-        letter-spacing: 0.01em;
-        word-spacing: 0.03em;
+        letter-spacing: .01em;
+        word-spacing: .03em;
     }
 }

kuma/static/styles/base/elements/forms.scss

@@ -1,24 +1,37 @@
 /*
-    Styles for form elements
-*/
-
-input, button, textarea, select, optgroup, option {
+Styles for form elements
+********************************************************************** */
+
+input,
+button,
+textarea,
+select,
+optgroup,
+option {
     font-family: inherit;
     @include set-font-size(inherit);
     font-style: inherit;
     font-weight: inherit;
 }
 
-input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], textarea {
+input[type=text],
+input[type=password],
+input[type=search],
+input[type=email],
+input[type=url],
+textarea {
     background: #fff;
     border: 1px solid #cbc8b9;
     padding: $content-vertical-spacing $content-horizontal-spacing;
 }
 
 input[type='search'] {
-   @include vendorize(appearance, textfield);
+    @include vendorize(appearance, textfield);
 
-    &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration {
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
         display: none;
     }
 }
@@ -28,17 +41,21 @@ label {
 }
 
 /* disabling of elements */
-.disabled, [disabled] {
+.disabled,
+[disabled] {
     pointer-events: none;
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: .5;
 }
 
 /*
     buttons
 */
 
-.button, button, input[type='submit'], input[type='button'] {
+.button,
+button,
+input[type='submit'],
+input[type='button'] {
     border: 0;
     cursor: pointer;
     display: inline-block;
@@ -53,11 +70,14 @@ label {
     color: $button-color;
     text-decoration: none;
 
-    &.disabled, &[disabled] {
-        box-shadow: inset 0 -1px rgba($button-shadow-color, 0.5);
+    &.disabled,
+    &[disabled] {
+        box-shadow: inset 0 -1px rgba($button-shadow-color, .5);
     }
 
-    &.neutral, &.negative, &.positive {
+    &.neutral,
+    &.negative,
+    &.positive {
         color: #fff;
     }
 

kuma/static/styles/base/elements/lists.scss

@@ -1,6 +1,6 @@
 /*
-    Styles for list elements
-*/
+Styles for list elements
+********************************************************************** */
 
 dl {
     margin-bottom: $content-block-margin;

kuma/static/styles/base/elements/media.scss

@@ -1,7 +1,11 @@
-img, iframe, video {
+img,
+iframe,
+video {
     max-width: 100%;
 }
 
-img, video {
-    height: auto !important; /* always constrain to width, fixes CKEditor issue of autopopulating dimensions */
+img,
+video {
+    /* always constrain to width, fixes CKEditor issue of autopopulating dimensions */
+    height: auto !important; /* stylelint-disable-line declaration-no-important */
 }

kuma/static/styles/base/elements/reset.scss

@@ -1,6 +1,8 @@
 /*
-    Reset styles
-*/
+Reset styles
+********************************************************************** */
+
+/* stylelint-disable selector-list-comma-newline-after */
 
 html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -29,3 +31,5 @@ a img {
 ul, ol {
     list-style-type: none;
 }
+
+/* stylelint-enable */

kuma/static/styles/base/elements/sectioning.scss

@@ -1,13 +1,12 @@
 /*
-    Sectioning elements - things that contribute to document outline
-    Section, article, aside, header, footer, main (main is not actually sectioning,
-    did you know that?), hr (hr is sectioning in HTML5, did you know that?)
-*/
+Sectioning elements - things that contribute to document outline
+Section, article, aside, header, footer, main (main is not actually sectioning,
+did you know that?), hr (hr is sectioning in HTML5, did you know that?)
+********************************************************************** */
 
 aside {
     @include column-half();
     @include prevent-last-child-bottom-spacing();
-
     float: right;
     border: 1px solid $header-background-color;
     background: $light-background-color;
@@ -27,12 +26,12 @@ main {
 
 footer {
     background: #fff;
-    padding:  $first-content-top-padding 0 0 0;
+    padding: $first-content-top-padding 0 0 0;
     font-style: italic;
 
     @include set-smaller-font-size();
     #{$selector-heading-font-fallback} {
-        letter-spacing: -0.01em;
+        letter-spacing: -.01em;
         word-spacing: 0;
     }
 
@@ -62,7 +61,12 @@ summary {
     cursor: pointer;
     color: $link-color;
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         display: inline-block;
         margin-bottom: 0;
         color: inherit;
@@ -103,15 +107,16 @@ hr {
 }
 
 @media #{$media-query-mobile} {
-   /* add bottom spacing to the footer */
+    /* add bottom spacing to the footer */
     footer {
         padding-bottom: $grid-spacing;
     }
 }
 
 
 @media print {
-    header, footer {
+    header,
+    footer {
         display: none;
     }
 }

kuma/static/styles/base/elements/tables.scss

@@ -1,6 +1,6 @@
 /*
-    Table styles
-*/
+Table styles
+********************************************************************** */
 
 table {
     margin-bottom: $content-block-margin;
@@ -10,6 +10,7 @@ caption {
     font-weight: bold;
 }
 
-caption, th {
+caption,
+th {
     @include bidi-value(text-align, left, right);
 }