Skip to content
This repository was archived by the owner on Mar 30, 2024. It is now read-only.

Commit e4a3809

Browse files
mvsdemvsde
committed
feat: Overhauled linting rules
BREAKING CHANGE: Complete overhaul for the linting rules. * Suit CSS naming convention. * Indentation with tabs. * Consistent whitespaces.
1 parent 510897a commit e4a3809

File tree

2 files changed

+196
-141
lines changed

2 files changed

+196
-141
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Shareable stylelint config for Pangolin.js based on [stylelint-config-sass-guidelines](https://github.com/bjankord/stylelint-config-sass-guidelines).
44

5+
The class name pattern follows the [Suit CSS naming convention](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
6+
57
## Installation
68

79
Install the configuration and all peer dependencies with one command:

‎index.js

+194-141
Original file line numberDiff line numberDiff line change
@@ -1,144 +1,197 @@
11
/** @type {import('stylelint').Config} */
22
module.exports = {
3-
customSyntax: 'postcss-scss',
4-
plugins: [
5-
'stylelint-order',
6-
'stylelint-scss'
7-
],
8-
rules: {
9-
'alpha-value-notation': 'number',
10-
'at-rule-disallowed-list': ['debug'],
11-
'at-rule-name-case': 'lower',
12-
'at-rule-no-unknown': null,
13-
'at-rule-no-vendor-prefix': true,
14-
'block-no-empty': true,
15-
'block-opening-brace-space-before': 'always',
16-
'color-function-notation': 'modern',
17-
'color-hex-case': 'lower',
18-
'color-hex-length': 'short',
19-
'color-named': 'never',
20-
'color-no-invalid-hex': true,
21-
'comment-no-empty': true,
22-
'comment-word-disallowed-list': [
23-
['/^TODO:/i', '/^FIX:/i', '/^FIXME:/i'],
24-
{ severity: 'warning' }
25-
],
26-
'declaration-bang-space-after': 'never',
27-
'declaration-bang-space-before': 'always',
28-
'declaration-block-semicolon-newline-after': 'always',
29-
'declaration-block-semicolon-space-before': 'never',
30-
'declaration-block-single-line-max-declarations': 1,
31-
'declaration-block-trailing-semicolon': 'always',
32-
'declaration-colon-space-after': 'always-single-line',
33-
'declaration-colon-space-before': 'never',
34-
'declaration-no-important': true,
35-
'font-family-name-quotes': 'always-unless-keyword',
36-
'function-calc-no-unspaced-operator': true,
37-
'function-comma-space-after': 'always-single-line',
38-
'function-linear-gradient-no-nonstandard-direction': true,
39-
'function-parentheses-newline-inside': 'always-multi-line',
40-
'function-parentheses-space-inside': 'never-single-line',
41-
'function-url-quotes': 'always',
42-
'hue-degree-notation': 'angle',
43-
indentation: 2,
44-
'keyframe-declaration-no-important': true,
45-
'length-zero-no-unit': true,
46-
linebreaks: 'unix',
47-
'max-empty-lines': 1,
48-
'max-nesting-depth': [
49-
3,
50-
{
51-
severity: 'warning',
52-
ignoreAtRules: [
53-
'each',
54-
'media',
55-
'supports',
56-
'include'
57-
]
58-
}
59-
],
60-
'media-feature-name-case': 'lower',
61-
'media-feature-parentheses-space-inside': 'never',
62-
'media-feature-name-no-unknown': true,
63-
'media-feature-name-no-vendor-prefix': true,
64-
'no-duplicate-at-import-rules': true,
65-
'no-duplicate-selectors': true,
66-
'no-empty-first-line': true,
67-
'no-eol-whitespace': true,
68-
'no-extra-semicolons': true,
69-
'no-missing-end-of-source-newline': true,
70-
'no-unknown-animations': true,
71-
'number-leading-zero': 'always',
72-
'number-no-trailing-zeros': true,
73-
'order/order': [
74-
[
75-
'custom-properties',
76-
'dollar-variables',
77-
{
78-
type: 'at-rule',
79-
name: 'extend'
80-
},
81-
{
82-
type: 'at-rule',
83-
name: 'include',
84-
hasBlock: false
85-
},
86-
'declarations',
87-
{
88-
type: 'at-rule',
89-
name: 'include',
90-
hasBlock: true
91-
},
92-
'rules'
93-
]
94-
],
95-
'property-case': 'lower',
96-
'property-no-unknown': true,
97-
'property-no-vendor-prefix': true,
98-
'rule-empty-line-before': [
99-
'always-multi-line',
100-
{
101-
except: ['first-nested'],
102-
ignore: ['after-comment']
103-
}
104-
],
105-
'scss/at-extend-no-missing-placeholder': true,
106-
'scss/at-function-pattern': '^[a-z]+([a-z0-9-]+[a-z0-9]+)?$',
107-
'scss/at-import-no-partial-leading-underscore': true,
108-
'scss/at-mixin-pattern': '^[a-z]+([a-z0-9-]+[a-z0-9]+)?$',
109-
'scss/at-rule-no-unknown': true,
110-
'scss/dollar-variable-colon-space-after': 'always-single-line',
111-
'scss/dollar-variable-colon-space-before': 'never',
112-
'scss/dollar-variable-pattern': '^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$',
113-
'scss/percent-placeholder-pattern': '^[a-z]+([a-z0-9-]+[a-z0-9]+)?$',
114-
'scss/selector-no-redundant-nesting-selector': true,
115-
'shorthand-property-no-redundant-values': true,
116-
'selector-attribute-quotes': 'always',
117-
'selector-class-pattern': [
118-
'^[a-z0-9\\_-]+$',
119-
{ message: 'Selector should be written in lowercase with underscores or hyphens' }
120-
],
121-
'selector-list-comma-newline-after': 'always',
122-
'selector-max-compound-selectors': 3,
123-
'selector-max-id': 0,
124-
'selector-nested-pattern': [
125-
'^(?!(&__)|(&--)).+',
126-
{ message: 'Creating BEM classes with Sass nesting is not allowed' }
127-
],
128-
'selector-no-qualifying-type': true,
129-
'selector-no-vendor-prefix': true,
130-
'selector-pseudo-class-case': 'lower',
131-
'selector-pseudo-class-no-unknown': true,
132-
'selector-pseudo-element-case': 'lower',
133-
'selector-pseudo-element-colon-notation': 'double',
134-
'selector-pseudo-element-no-unknown': true,
135-
'selector-type-case': 'lower',
136-
'selector-type-no-unknown': true,
137-
'string-no-newline': true,
138-
'string-quotes': 'double',
139-
'unit-case': 'lower',
140-
'unit-no-unknown': true,
141-
'value-keyword-case': 'lower',
142-
'value-no-vendor-prefix': true
143-
}
3+
plugins: [
4+
'stylelint-order',
5+
],
6+
rules: {
7+
// Animations
8+
'keyframe-declaration-no-important': true,
9+
'keyframe-selector-notation': 'percentage-unless-within-keyword-only-block',
10+
11+
// at-rules
12+
'at-rule-empty-line-before': ['always', {
13+
except: ['blockless-after-same-name-blockless', 'first-nested'],
14+
ignore: ['after-comment'],
15+
}],
16+
'at-rule-name-case': 'lower',
17+
'at-rule-name-newline-after': 'always-multi-line',
18+
'at-rule-name-space-after': 'always-single-line',
19+
'at-rule-no-unknown': true,
20+
'at-rule-no-vendor-prefix': true,
21+
'at-rule-semicolon-newline-after': 'always',
22+
'at-rule-semicolon-space-before': 'never',
23+
24+
// Blocks
25+
'block-closing-brace-empty-line-before': 'never',
26+
'block-closing-brace-newline-before': 'always',
27+
'block-no-empty': true,
28+
'block-opening-brace-newline-after': 'always',
29+
'block-opening-brace-space-before': 'always',
30+
31+
// Colors
32+
'alpha-value-notation': 'percentage',
33+
'color-function-notation': 'modern',
34+
'color-hex-case': 'lower',
35+
'color-hex-length': 'short',
36+
'color-no-invalid-hex': true,
37+
'hue-degree-notation': 'angle',
38+
39+
// Comments
40+
'comment-empty-line-before': ['always', {
41+
except: ['first-nested'],
42+
ignore: ['after-comment', 'stylelint-commands'],
43+
}],
44+
'comment-no-empty': true,
45+
'comment-whitespace-inside': 'always',
46+
'comment-word-disallowed-list': [
47+
['/^TODO:/i', '/^FIX:/i', '/^FIXME:/i'],
48+
{ severity: 'warning' },
49+
],
50+
'no-invalid-double-slash-comments': true,
51+
52+
// Custom properties
53+
'custom-property-no-missing-var-function': true,
54+
55+
// Declarations
56+
'declaration-bang-space-after': 'never',
57+
'declaration-bang-space-before': 'always',
58+
'declaration-block-no-shorthand-property-overrides': true,
59+
'declaration-block-semicolon-newline-after': 'always',
60+
'declaration-block-semicolon-space-before': 'never',
61+
'declaration-block-single-line-max-declarations': 0,
62+
'declaration-block-trailing-semicolon': 'always',
63+
'declaration-colon-newline-after': 'always-multi-line',
64+
'declaration-colon-space-after': 'always-single-line',
65+
'declaration-colon-space-before': 'never',
66+
'declaration-no-important': true,
67+
'declaration-empty-line-before': ['always', {
68+
except: ['first-nested'],
69+
ignore: ['after-comment', 'after-declaration'],
70+
}],
71+
72+
// Fonts
73+
'font-family-name-quotes': 'always-unless-keyword',
74+
'font-family-no-duplicate-names': true,
75+
'font-family-no-missing-generic-family-keyword': true,
76+
'font-weight-notation': 'named-where-possible',
77+
78+
// Functions
79+
'function-calc-no-unspaced-operator': true,
80+
'function-comma-newline-after': 'always-multi-line',
81+
'function-comma-newline-before': 'never-multi-line',
82+
'function-comma-space-after': 'always-single-line',
83+
'function-comma-space-before': 'never',
84+
'function-linear-gradient-no-nonstandard-direction': true,
85+
'function-max-empty-lines': 0,
86+
'function-name-case': 'lower',
87+
'function-no-unknown': true,
88+
'function-parentheses-newline-inside': 'always-multi-line',
89+
'function-parentheses-space-inside': 'never-single-line',
90+
'function-url-no-scheme-relative': true,
91+
'function-url-quotes': 'always',
92+
'function-whitespace-after': 'always',
93+
94+
// Imports
95+
'import-notation': 'string',
96+
'no-duplicate-at-import-rules': true,
97+
'no-invalid-position-at-import-rule': true,
98+
99+
// Media queries
100+
'media-feature-colon-space-after': 'always',
101+
'media-feature-colon-space-before': 'never',
102+
'media-feature-name-case': 'lower',
103+
'media-feature-name-no-unknown': true,
104+
'media-feature-name-no-vendor-prefix': true,
105+
'media-feature-parentheses-space-inside': 'never',
106+
'media-feature-range-operator-space-after': 'always',
107+
'media-feature-range-operator-space-before': 'always',
108+
'media-query-list-comma-newline-after': 'always-multi-line',
109+
'media-query-list-comma-newline-before': 'never-multi-line',
110+
'media-query-list-comma-space-after': 'always-single-line',
111+
'media-query-list-comma-space-before': 'never',
112+
113+
// Numbers
114+
'number-leading-zero': 'always',
115+
'number-no-trailing-zeros': true,
116+
117+
// Properties
118+
'property-case': 'lower',
119+
'property-no-unknown': true,
120+
'property-no-vendor-prefix': true,
121+
'shorthand-property-no-redundant-values': true,
122+
123+
// Selectors
124+
'no-duplicate-selectors': true,
125+
'selector-attribute-brackets-space-inside': 'never',
126+
'selector-attribute-operator-space-after': 'never',
127+
'selector-attribute-operator-space-before': 'never',
128+
'selector-attribute-quotes': 'always',
129+
'selector-class-pattern': ['^(u(-[a-z]+)?|is|has|([A-Z][a-z]+)+)(--?[a-z][A-Za-z]*)?$', {
130+
message: 'Expected selector format ComponentName[-descendantName|--modifierName], u-[condition-]utilityName, {is|has}-stateName',
131+
}],
132+
'selector-combinator-space-after': 'always',
133+
'selector-combinator-space-before': 'always',
134+
'selector-descendant-combinator-no-non-space': true,
135+
'selector-list-comma-newline-after': 'always',
136+
'selector-list-comma-newline-before': 'never-multi-line',
137+
'selector-max-empty-lines': 1,
138+
'selector-max-id': 0,
139+
'selector-no-qualifying-type': true,
140+
'selector-no-vendor-prefix': true,
141+
'selector-not-notation': 'complex',
142+
'selector-pseudo-class-case': 'lower',
143+
'selector-pseudo-class-no-unknown': true,
144+
'selector-pseudo-class-parentheses-space-inside': 'never',
145+
'selector-pseudo-element-case': 'lower',
146+
'selector-pseudo-element-colon-notation': 'double',
147+
'selector-pseudo-element-no-unknown': true,
148+
'selector-type-case': 'lower',
149+
'selector-type-no-unknown': [true, {
150+
ignore: ['custom-elements'],
151+
}],
152+
153+
// Units
154+
'unit-case': 'lower',
155+
'unit-no-unknown': true,
156+
'length-zero-no-unit': true,
157+
158+
// Values
159+
'value-keyword-case': 'lower',
160+
'value-list-comma-newline-after': 'always-multi-line',
161+
'value-list-comma-newline-before': 'never-multi-line',
162+
'value-list-comma-space-after': 'always-single-line',
163+
'value-list-comma-space-before': 'never',
164+
'value-list-max-empty-lines': 0,
165+
'value-no-vendor-prefix': true,
166+
167+
// Whitespace
168+
indentation: 'tab',
169+
linebreaks: 'unix',
170+
'max-empty-lines': [1, {
171+
ignore: ['comments'],
172+
}],
173+
'no-empty-first-line': true,
174+
'no-empty-source': true,
175+
'no-eol-whitespace': true,
176+
'no-irregular-whitespace': true,
177+
'no-missing-end-of-source-newline': true,
178+
'rule-empty-line-before': ['always', {
179+
except: ['first-nested'],
180+
ignore: ['after-comment'],
181+
}],
182+
'string-no-newline': true,
183+
184+
// Miscellaneous
185+
'annotation-no-unknown': true,
186+
'named-grid-areas-no-invalid': true,
187+
'no-extra-semicolons': true,
188+
'string-quotes': 'double',
189+
190+
// Order
191+
'order/order': [
192+
'custom-properties',
193+
'declarations',
194+
'rules',
195+
],
196+
},
144197
}

0 commit comments

Comments
 (0)