Issue 5109 - Create stylelintrc for websites and ui modules

stylelint-config-eyeo/index.js

Index: stylelint-config-eyeo/index.js
===================================================================
new file mode 100644
--- /dev/null
+++ b/stylelint-config-eyeo/index.js
@@ -0,0 +1,72 @@
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-present eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+"use strict";
+
+module.exports = {
+  extends: "stylelint-config-recommended",
+  rules: {
+    // Opening braces go on their own line
+    "block-opening-brace-newline-before": "always-multi-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+
+    // Use a space between the last selector and the declaration block
+    "block-opening-brace-space-before": "always-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-closing-brace-space-after": "always-single-line",
+
+    // Use a space after a property name’s colon.
+    "declaration-colon-space-after": "always",
+
+    // Separate selectors and declarations by new lines.

[Thomas Greiner, 2017/11/14 13:18:32]

Suggestion: This sentence and the one below are a bit ambiguous because they're
not supposed to be separated by actual lines but by the newline character.

Rephrasing it to say that each should be in their own line could resolve this.

[ire, 2017/11/15 06:38:33]

I agree with you. Done.

+    "selector-list-comma-newline-after": "always",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+
+    // Separate rules by new lines.
+    "rule-empty-line-before": ["always", {
+      "ignore": ["after-comment", "inside-block"]

[Thomas Greiner, 2017/11/14 13:18:32]

Do we actually want to specify "inside-block"?

i.e.
@media
{
  a
  {
    aa: aaa;
  }
  b
  {
    bb: bbb;
  }
}

Instead, "first-nested" seems to be the option we're aiming for here.

[ire, 2017/11/15 06:38:33]

You're right. Done.

+    }],
+
+    // Use double over single quotation marks
+    "string-quotes": "double",
+
+    // CSS color values should be specified in hexadecimal where possible
+    "color-named": "never",
+
+    // Use 3 character hexadecimal notation where possible.

[Thomas Greiner, 2017/11/14 13:18:31]

Suggestion: The rule below also encourages 4-digit hexadecimal notation over the
8-digit one.

[ire, 2017/11/15 06:38:32]

Sorry I don't understand. Is your suggestion that I add that phrase to the
comment describing this rule?

[Thomas Greiner, 2017/11/15 12:22:00]

I just wanted to point out that this statement doesn't match what the rule does.

But if you want a suggestion on how to resolve this, we could either rephrase "3
character hexadecimal notation" as "short hexadecimal notation" or leave it as
is and not ignore the fact that the rule does more than what's required of it.

[ire, 2017/11/15 17:04:02]

Ah I see what you mean (that completely flew over my head :*)

I like your suggestion to use "short hexadecimal notation" instead. Done.

+    "color-hex-length": "short",
+
+    // Don't omit the optional leading 0 for decimal numbers
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+
+    // Two spaces per logic level
+    "indentation": 2,
+
+    // Line length should be 80 characters or less
+    "max-line-length": 80,
+
+    // Avoid qualifying ID and class names with type selectors.
+    "selector-no-qualifying-type": [true, {
+      "ignore": ["attribute"]

[Thomas Greiner, 2017/11/14 13:18:32]

This rule appears to refer to
https://google.github.io/styleguide/htmlcssguide.html#Type_Selectors which,
however, doesn't make an exception for attributes. So we should adapt our coding
style to reflect that.

[ire, 2017/11/15 06:38:33]

The way I read that rule was that it implicitly allowed for attributes, since
they specifically mentioned only IDs and class names. 

[Thomas Greiner, 2017/11/15 12:22:00]

Very good point. I guess I assumed that they implied that it also applied to
other selector types (e.g. `[foo]`, `:foo`, `::foo`) but reading it again, I
agree with your assessment.

+    }]
+  }
+};