Skip to content

Commit e548097

Browse files
thomasduenserthomasduenser
authored
Refactored rules and extend from "stylelint-config-standard-scss" (#16)
1 parent abb6d32 commit e548097

File tree

9 files changed

+90
-152
lines changed

9 files changed

+90
-152
lines changed

‎index.js‎

Lines changed: 50 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,70 @@
1-
"use strict"
1+
'use strict';
22

33
module.exports = {
4-
"extends": "stylelint-config-standard",
5-
"customSyntax": "scss",
6-
"plugins": [
7-
"stylelint-scss"
8-
],
9-
"ignoreFiles": [
10-
"sass/vendor/*.scss"
11-
],
12-
"rules": {
13-
"at-rule-empty-line-before": [
14-
"always",
4+
'extends': 'stylelint-config-standard-scss',
5+
'customSyntax': 'postcss-scss',
6+
'rules': {
7+
'alpha-value-notation': 'number',
8+
'block-no-empty': true,
9+
'color-hex-length': 'long',
10+
'comment-no-empty': true,
11+
'declaration-empty-line-before': 'never',
12+
'font-weight-notation': 'numeric',
13+
'keyframes-name-pattern': [
14+
'^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])*$',
1515
{
16-
"except": [
17-
"blockless-after-same-name-blockless",
18-
"first-nested"
19-
],
20-
"ignore": [
21-
"after-comment"
22-
],
23-
"ignoreAtRules": [
24-
"extend",
25-
"include",
26-
"else",
27-
"elseif",
28-
"content"
29-
]
30-
}
31-
],
32-
"at-rule-no-unknown": [
33-
true,
34-
{
35-
"ignoreAtRules": [
36-
"content",
37-
"extend",
38-
"include",
39-
"mixin",
40-
"container",
41-
"if",
42-
"for",
43-
"forward",
44-
"else",
45-
"elseif",
46-
"error",
47-
"each",
48-
"function",
49-
"return",
50-
"use",
51-
"while"
52-
]
53-
}
16+
message: (name) => `Expected keyframe name '${name}' to be camelCase`,
17+
},
5418
],
55-
"at-rule-name-space-after": "always",
56-
"function-comma-newline-before": "never-multi-line",
57-
"function-name-case": [
58-
"lower",
19+
'no-descending-specificity': null,
20+
'no-duplicate-selectors': true,
21+
'no-empty-source': true,
22+
'selector-class-pattern': [
23+
'^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
5924
{
60-
"ignoreFunctions": [
61-
"/^[a-z][a-z-A-Z0-9]*$/"
62-
]
63-
}
64-
],
65-
"function-no-unknown": null, // https://github.com/stylelint-scss/stylelint-scss/issues/589
66-
"block-closing-brace-newline-after": [
67-
"always",
68-
{
69-
"ignoreAtRules": [ "if", "else", "elseif" ]
70-
}
25+
resolveNestedSelectors: true,
26+
message: (selector) => `Expected class selector '${selector}' to match BEM CSS pattern (https://en.bem.info/methodology/css). Selector validation tool: https://regexr.com/3apms`,
27+
},
7128
],
72-
"font-weight-notation": "numeric",
73-
"string-quotes": "single",
74-
"value-keyword-case": [
75-
"lower",
29+
'selector-max-compound-selectors': 3,
30+
'selector-max-id': 0,
31+
'selector-max-type': 2,
32+
'selector-max-combinators': 2,
33+
'selector-max-universal': 1,
34+
'selector-max-specificity': '0,3,0',
35+
'value-keyword-case': [
36+
'lower',
7637
{
7738
camelCaseSvgKeywords: true,
7839
}
7940
],
80-
"declaration-empty-line-before": "never",
81-
"selector-attribute-quotes": "always",
82-
"selector-class-pattern": "^[a-z][a-z-A-Z_0-9]*$",
83-
"selector-max-compound-selectors": [
84-
3,
41+
'scss/at-function-pattern': [
42+
'^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])*$',
8543
{
86-
"severity": "warning"
87-
}
44+
message: 'Expected function name to be camelCase',
45+
},
8846
],
89-
"selector-max-id": 0,
90-
"selector-max-type": [
91-
2,
47+
'scss/at-mixin-argumentless-call-parentheses': 'always',
48+
'scss/at-mixin-pattern': [
49+
'^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])*$',
9250
{
93-
"severity": "warning"
94-
}
51+
message: 'Expected mixin to be camelCase',
52+
},
9553
],
96-
"selector-max-combinators": [
97-
2,
54+
'scss/declaration-nested-properties': 'never',
55+
'scss/double-slash-comment-empty-line-before': null,
56+
'scss/dollar-variable-pattern': [
57+
'^[a-z]+((\\d)|([A-Z0-9][a-z0-9]+))*([A-Z])*$',
9858
{
99-
"severity": "warning"
100-
}
59+
message: 'Expected variable to be camelCase',
60+
},
10161
],
102-
"selector-max-universal": 1,
103-
"selector-max-specificity": "0,3,0",
104-
"selector-list-comma-newline-before": "never-multi-line",
105-
"selector-list-comma-space-after": "always-single-line",
106-
"custom-media-pattern": "^[a-z][a-z-A-Z0-9]*$",
107-
"media-feature-parentheses-space-inside": "never",
108-
"media-query-list-comma-newline-before": "never-multi-line",
109-
"at-rule-semicolon-space-before": "never",
110-
"indentation": 4,
111-
"max-line-length": 120,
112-
"no-descending-specificity": null,
113-
"no-duplicate-selectors": true,
114-
"no-empty-source": true,
115-
"block-no-empty": true,
116-
"color-hex-length": "long",
117-
"color-hex-case": ["upper"],
118-
"rule-empty-line-before": [
119-
"always",
62+
'scss/no-global-function-names': null,
63+
'scss/percent-placeholder-pattern': [
64+
'^[a-z][a-z-A-Z0-9]*$',
12065
{
121-
"except": [
122-
"first-nested"
123-
],
124-
"ignore": [
125-
"after-comment"
126-
]
127-
}
128-
],
129-
"shorthand-property-no-redundant-values": true,
130-
"scss/dollar-variable-pattern": "^[a-z][a-z-A-Z0-9]*$",
131-
"scss/dollar-variable-colon-space-after": "always-single-line",
132-
"scss/dollar-variable-colon-space-before": "never",
133-
"scss/dollar-variable-empty-line-before": [
134-
"always",
135-
{
136-
"except": [
137-
"first-nested",
138-
"after-comment",
139-
"after-dollar-variable"
140-
]
141-
}
66+
message: 'Expected placeholder to be camelCase',
67+
},
14268
],
143-
"scss/percent-placeholder-pattern": "^[a-z][a-z-A-Z0-9]*$",
144-
"scss/double-slash-comment-whitespace-inside": "always",
145-
"scss/declaration-nested-properties": "never",
146-
"scss/operator-no-newline-after": true,
147-
"scss/operator-no-newline-before": true,
148-
"scss/operator-no-unspaced": true,
149-
"scss/at-else-if-parentheses-space-before": "always",
150-
"scss/at-function-parentheses-space-before": "never",
151-
"scss/at-function-pattern": "^[a-z][a-z-A-Z0-9]*$",
152-
"scss/at-mixin-parentheses-space-before": "never",
153-
"scss/at-else-closing-brace-newline-after": "always-last-in-chain",
154-
"scss/at-else-closing-brace-space-after": "always-intermediate",
155-
"scss/at-else-empty-line-before": "never",
156-
"scss/at-if-closing-brace-newline-after": "always-last-in-chain",
157-
"scss/at-if-closing-brace-space-after": "always-intermediate"
15869
}
15970
}

‎package.json‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,19 @@
1515
"stylelintconfig",
1616
"massiveart"
1717
],
18-
"author": "MASSIVE ART Webservices GmbH",
18+
"author": "MASSIVE ART WebServices GmbH",
1919
"license": "MIT",
2020
"bugs": {
2121
"url": "https://github.com/massiveart/stylelint-config-ma/issues"
2222
},
2323
"homepage": "https://github.com/massiveart/stylelint-config-ma#readme",
2424
"dependencies": {
25-
"stylelint-config-standard": "^20.0.0 || ^21.0.0 || ^22.0.0 || ^23.0.0 || ^24.0.0 || ^25.0.0",
26-
"stylelint-scss": "^3.0.0 || ^4.1.0"
25+
"stylelint-config-standard-scss": "^7.0.1"
2726
},
2827
"devDependencies": {
29-
"postcss": "^8.4.7",
30-
"postcss-scss": "^4.0.3",
31-
"stylelint": "^14.0.0"
28+
"postcss": "^8.4.21",
29+
"postcss-scss": "^4.0.6",
30+
"stylelint": "^15.3.0"
3231
},
3332
"peerDependencies": {
3433
"stylelint": "^8.3.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0"

‎test/animation.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@keyframes example-test {
1+
@keyframes exampleTest {
22
from {
33
background-color: red;
44
}
@@ -9,9 +9,9 @@
99
}
1010

1111
.test {
12-
animation-name: example-test;
12+
animation-name: exampleTest;
1313
}
1414

1515
.unknown {
16-
animation-name: unknown-function;
16+
animation-name: unknownFunction;
1717
}

‎test/compound-selectors.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.foo .bar .baz {
2+
display: block;
3+
}

‎test/content.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@mixin mq($width) {
2+
@media screen and (max-width: $width) {
3+
@content;
4+
}
5+
}
6+
7+
.test {
8+
@include mq(700px) {
9+
color: green;
10+
}
11+
}

‎test/empty-line.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.empty-line {
2+
@include shadow();
3+
@include other();
4+
color: red;
5+
6+
@media screen and (max-width: 1024px) {
7+
color: blue;
8+
}
9+
}

‎test/for.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
$grid-columns: 12;
1+
@use 'sass:math';
22

3-
@for $i from 1 through $grid-columns {
3+
$gridColumns: 12;
4+
5+
@for $i from 1 through $gridColumns {
46
.width-#{$i} {
5-
width: percentage($i / $grid-columns) !important;
7+
width: math.percentage($i / $gridColumns) !important;
68
}
79
}

‎test/if-else.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ $test: 1;
33
.test {
44
@if $test == 1 {
55
color: red;
6-
} @elseif $test == 2 {
6+
} @else if $test == 2 {
77
color: blue;
88
} @else {
99
color: purple;

‎test/selector-max-type.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
div a {
2+
color: green;
3+
}

0 commit comments

Comments
 (0)