Issue #5109 - Create stylelintrc for websites and ui modules

stylelintrc.json

Index: stylelintrc.json
===================================================================
new file mode 100644
--- /dev/null
+++ b/stylelintrc.json
@@ -0,0 +1,293 @@
+{

[Thomas Greiner, 2017/07/07 21:45:00]

Did you also consider the "General" section of our coding style?

The reason why I'm wondering is because rules such as "max-line-length" are not
present.

+  "rules": {
+
+    "color-hex-length": "short",
+    "color-named": "never",
+    "color-no-invalid-hex": true,
+
+    "font-family-name-quotes": "always-where-recommended",
+    "font-weight-notation": "numeric",
+
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-before": "never-multi-line",

[Thomas Greiner, 2017/07/07 21:45:01]

Where's this mentioned in the coding style?

In general, there seem to be a few rules here that are not based on our coding
style so I won't comment on each of those. We should be very careful with
enforcing additional rules to avoid unnecessary conflicts.

That being said, I'd assume that rules that check for invalid syntax and errors
(e.g. "color-no-invalid-hex" or "string-no-newline") should still be fine.

+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never-single-line",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-space-inside": "never",
+    "function-url-quotes": "always",

[Thomas Greiner, 2017/07/07 21:45:01]

This is the opposite of what our coding style defines (see
https://google.github.io/styleguide/htmlcssguide.html#CSS_Quotation_Marks)
 and most of our code doesn't use quotation marks for URLs.

+    "function-whitespace-after": "always",
+
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+
+    "string-no-newline": true,
+    "string-quotes": "double",
+
+    "time-no-imperceptible": true,

[Thomas Greiner, 2017/07/07 21:45:00]

Apart from it not being in the coding style, this rule also appears to be
deprecated (see
https://github.com/stylelint/stylelint/tree/master/lib/rules/time-no-impercep...).

I also noticed other rules which have been deprecated (e.g.
"custom-property-no-outside-root").

+
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+
+    "value-keyword-case": "lower",
+    "value-no-vendor-prefix": true,
+
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never-single-line",
+    "value-list-max-empty-lines": 0,
+
+    "custom-property-empty-line-before": "never",
+    "custom-property-no-outside-root": true,
+
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "property-no-vendor-prefix": true,
+
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": "never",
+    "declaration-no-important": true,

[Thomas Greiner, 2017/07/07 21:45:01]

While this is not part of the coding style, I'd argue that it still makes sense.
Of course, there are situations in which it is perfectly fine to use
`!important` but forcing someone to explicitly disable this rule for such a line
is probably a good idea.

It might make sense to mention that in our coding style, however, that it is
highly discouraged to use `!important`.

+
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-no-ignored-properties": true,
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-properties-order": [

[Thomas Greiner, 2017/07/07 21:45:00]

We have also discussed the approach of enumerating properties for CSS linting of
our Flattr extension and decided against it. Unfortunately, I couldn't find the
thread anymore to look up our arguments from back then.

At least its maintainability and stiffness are significant arguments against it.
Therefore solutions that allow us to define the order of property groups rather
than individual properties would be more appropriate since that's all the coding
style dictates.

Fortunately, it seems that stylelint supports that so here's an example:

e.g.
[
  {
    "order": "flexible",
    "properties": [
      "display",
      "visibility"
    ]
  },
  {
    "order": "flexible",
    "properties": [
      "bottom",
      "clear",
      "float",
      "left",
      "position",
      "right",
      "top",
      "z-index"
    ]
  },
  ...
]

However, according to
https://github.com/stylelint/stylelint/tree/master/lib/rules/declaration-bloc...
that rule has been deprecated.

+      "display",
+      "visibility",
+
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "float",
+      "clear",
+      "z-index",
+
+      "flex",
+      "flex-direction",
+      "flex-order",
+      "flex-pack",
+      "flex-align",
+      "box-sizing",
+      "table-layout",
+      "empty-cells",
+      "border-spacing",
+      "border-collapse",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "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",
+      "border",
+      "border-collapse",
+      "border-width",
+      "border-style",
+      "border-color",
+      "border-top",
+      "border-top-width",
+      "border-top-style",
+      "border-top-color",
+      "border-right",
+      "border-right-width",
+      "border-right-style",
+      "border-right-color",
+      "border-bottom",
+      "border-bottom-width",
+      "border-bottom-style",
+      "border-bottom-color",
+      "border-left",
+      "border-left-width",
+      "border-left-style",
+      "border-left-color",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "border-image",
+      "border-image-source",
+      "border-image-slice",
+      "border-image-width",
+      "border-image-outset",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "box-shadow",
+      "text-shadow",
+
+      "color",
+      "opacity",
+      "background",
+      "background-color",
+      "background-image",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "background-clip",
+      "background-origin",
+      "background-size",
+
+      "font",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "font-style",
+      "font-variant",
+      "line-height",
+      "text-align",
+      "text-align-last",
+      "vertical-align",
+      "white-space",
+      "text-decoration",
+      "text-transform",
+      "letter-spacing",
+      "word-spacing",
+      "text-transform",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "word-wrap",
+      "word-break",
+      "tab-size",
+
+      "content",
+      "quotes",
+      "cursor",
+      "counter-reset",
+      "counter-increment",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+
+      "transition",
+      "transition-delay",
+      "transition-timing-function",
+      "transition-duration",
+      "transition-property",
+      "transform",
+      "transform-origin",
+      "animation",
+      "animation-name",
+      "animation-duration",
+      "animation-play-state",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-iteration-count",
+      "animation-direction"
+    ],
+    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-after": "never-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always",
+    "block-closing-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-no-single-line": true,
+    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-before": "always-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always-single-line",
+
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-attribute-quotes": "always",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-max-compound-selectors": 3,
+    "selector-no-empty": true,
+    "selector-no-qualifying-type": [true, {"ignore": "attribute"}],
+    "selector-no-vendor-prefix": true,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "selector-max-empty-lines": 0,
+
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-after": "always-single-line",
+    "selector-list-comma-space-before": "never",
+
+    "root-no-standard-properties": true,
+
+    "rule-nested-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["after-comment"]}],
+    "rule-non-nested-empty-line-before": ["always", {"ignore": ["after-comment"]}],
+
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-name-no-vendor-prefix": true,
+    "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": "never-multi-line",
+    "media-query-list-comma-newline-before": "never-multi-line",
+    "media-query-list-comma-space-after": "always",
+    "media-query-list-comma-space-before": "never",
+
+    "at-rule-name-case": "lower",
+    "at-rule-no-unknown": true,
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-newline-after": "always",
+
+    "comment-no-empty": true,
+
+    "indentation": 2,
+    "max-empty-lines": 1,
+    "max-nesting-depth": 3,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-missing-end-of-source-newline": true,
+    "no-unsupported-browser-features": [

[Thomas Greiner, 2017/07/07 21:45:01]

Note that the requirements for the extension UIs depend on the platforms they're
being shipped in. For instance, our upcoming mobile options page won't need to
be compatible with other browsers than Firefox Mobile.

Therefore this seems to be one of the few rules that we shouldn't define
globally.

+      true,
+      {
+        "browsers": "last 2 versions, Safari 6, IE 8",

[ire, 2017/07/07 15:51:29]

Shouldn't this be "last 2 versions, IE >= 9" ?

[juliandoucette, 2017/07/07 20:15:04]

Perhaps. We haven't set this is stone yet. 

+        "ignore": ["css-gencontent", "css-mediaqueries"]

[ire, 2017/07/07 15:51:28]

What about feature queries?

[juliandoucette, 2017/07/07 20:15:04]

I didn't know that they existed at the time I made this :D

+      }
+    ]
+  }
+}