Issue 5109 - Create stylelintrc for websites and ui modules

stylelint-config-eyeo/index.js

+/*

[juliandoucette, 2017/10/13 14:21:06]

Potential missing properties:

1. https://google.github.io/styleguide/htmlcssguide.html#Type_Selectors ->
https://stylelint.io/user-guide/rules/selector-no-qualifying-type/
2. https://google.github.io/styleguide/htmlcssguide.html#Hexadecimal_Notation ->
https://stylelint.io/user-guide/rules/color-hex-length/
3. https://google.github.io/styleguide/htmlcssguide.html#Property_Name_Stops ->
https://stylelint.io/user-guide/rules/declaration-block-semicolon-space-after/
4. https://google.github.io/styleguide/htmlcssguide.html#Property_Name_Stops ->
https://stylelint.io/user-guide/rules/declaration-block-semicolon-space-before/
5.
https://google.github.io/styleguide/htmlcssguide.html#Selector_and_Declaratio...
-> https://stylelint.io/user-guide/rules/selector-list-comma-newline-after/
6. https://google.github.io/styleguide/htmlcssguide.html#Rule_Separation ->
https://stylelint.io/user-guide/rules/rule-empty-line-before/

Also relevant:
https://github.com/WordPress-Coding-Standards/stylelint-config-wordpress/issu...

[ire, 2017/10/24 09:05:16]

Thanks, added
Yup I already mentioned that. There's another issue created to add this when
this has been committed.

+ * 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",

[juliandoucette, 2017/10/13 14:21:06]

NIT: We are currently using double slash comments for licence headers in SCSS
files.

(See
[stylelint-config-recommended](https://github.com/stylelint/stylelint-config-recommended/blob/master/index.js))

[ire, 2017/10/24 09:05:16]

The rule doesn't apply to SCSS files. See
https://stylelint.io/user-guide/rules/no-invalid-double-slash-comments/ 

[juliandoucette, 2017/10/26 15:24:08]

Acknowledged.

+  rules: {
+    // Opening braces go on their own line
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-newline-before": "always-multi-line",
+
+    // Use a space between the last selector and the declaration block
+    // (Google HTML/CSS Style Guide)

[juliandoucette, 2017/10/13 14:21:06]

Why did you put this label here? Is everything below Google HTML/CSS until
"WordPress CSS Coding Standards"? If so, shouldn't this label be above the above
comment?

[ire, 2017/10/24 09:05:16]

I put the label to specify that this particular rule comes from the Google
HTML/CSS Style Guide, not everything below. 

I think I should remove those comments. What do you/everyone think?

[juliandoucette, 2017/10/26 15:24:08]

I'm ok with:

- no comments
- category comments
- rule comments (as long as they are not repetitive e.g. Google Style Guide
above every relevant rule)

[ire, 2017/10/30 08:30:47]

Ack. I think I prefer either no comments or rule comments (I'm fine with
removing the rule sources so it's less repetitive). 

For now, I will remove the rule sources.

+    "block-closing-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always-single-line",
+
+    // Use double over single quotation marks
+    "string-quotes": "double",
+
+    // CSS color values should be specified in hexadecimal where possible
+    "color-named": "never",
+
+    // CSS shorthand properties usage is optional

[juliandoucette, 2017/10/13 14:21:06]

This doesn't refer to a property?

(The same applies elsewhere)

[ire, 2017/10/24 09:05:16]

You're right. But this is from our coding standards. So we should change it
there first?

[juliandoucette, 2017/10/26 15:24:08]

I wasn't suggesting that we change our standards. I was pointing out that these
comments do not apply to properties of this object. If your intention is to
point out style guide rules that are missing then I would suggest that you do so
more clearly e.g. by creating a clearly labeled list of rules that we haven't
been able to cover yet.

[ire, 2017/10/30 08:30:47]

Oh right! Yes I thought it was clear that if there was rule below the comment it
was not covered. Since there are just the two, I'll just remove them for now.

+
+    // CSS rule declaration order should follow the 
+    // WordPress CSS Coding Standards
+
+    // CSS number values should specify units where possible
+
+    // Don't omit the optional leading 0 for decimal numbers
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+
+    // Two spaces per logic level (Mozilla Coding Style)
+    "indentation": 2,
+
+    // Line length should be 80 characters or less
+    "max-line-length": 80
+  }
+};