Skip to content

Commit 22d1598

Browse files
mlaursenmlaursen
committed
build(stylelint): Updated to use stylelint
1 parent 6159e16 commit 22d1598

File tree

37 files changed

+499
-141
lines changed

37 files changed

+499
-141
lines changed

‎.stylelintrc.json‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
{
2+
"extends": [
3+
"stylelint-config-standard",
4+
"stylelint-config-recommended",
5+
"stylelint-config-standard-scss"
6+
],
7+
"plugins": ["stylelint-order", "stylelint-scss"],
8+
"rules": {
9+
"no-descending-specificity": null,
10+
"at-rule-empty-line-before": null,
11+
"block-closing-brace-newline-after": null,
12+
"block-closing-brace-newline-before": null,
13+
"declaration-colon-newline-after": null,
14+
"function-parentheses-newline-inside": null,
15+
"selector-pseudo-class-no-unknown": [
16+
true,
17+
{ "ignorePseudoClasses": ["global", "local"] }
18+
],
19+
"value-list-comma-newline-after": null,
20+
"indentation": null,
21+
"function-calc-no-unspaced-operator": null,
22+
"declaration-no-important": true,
23+
"at-rule-disallowed-list": ["debug"],
24+
"at-rule-no-unknown": null,
25+
"at-rule-no-vendor-prefix": true,
26+
"block-no-empty": true,
27+
"block-opening-brace-space-before": null,
28+
"max-empty-lines": null,
29+
"color-hex-case": "lower",
30+
"color-hex-length": "short",
31+
"color-named": "never",
32+
"color-no-invalid-hex": true,
33+
"declaration-property-value-disallowed-list": {
34+
"border": ["none"],
35+
"border-top": ["none"],
36+
"border-right": ["none"],
37+
"border-bottom": ["none"],
38+
"border-left": ["none"]
39+
},
40+
"length-zero-no-unit": null,
41+
"max-nesting-depth": [
42+
3,
43+
{
44+
"ignore": ["pseudo-classes"],
45+
"ignoreAtRules": ["each", "media", "supports", "include"]
46+
}
47+
],
48+
"media-feature-name-no-vendor-prefix": true,
49+
"media-feature-parentheses-space-inside": "never",
50+
"no-missing-end-of-source-newline": true,
51+
"number-leading-zero": "always",
52+
"number-no-trailing-zeros": true,
53+
"order/order": [
54+
[
55+
"custom-properties",
56+
"dollar-variables",
57+
{
58+
"type": "at-rule",
59+
"name": "extend"
60+
},
61+
{
62+
"type": "at-rule",
63+
"name": "include",
64+
"hasBlock": false
65+
},
66+
{
67+
"type": "at-rule",
68+
"name": "include",
69+
"hasBlock": true
70+
},
71+
"declarations",
72+
"rules"
73+
]
74+
],
75+
"order/properties-alphabetical-order": true,
76+
"property-no-unknown": true,
77+
"property-no-vendor-prefix": true,
78+
"scss/at-extend-no-missing-placeholder": true,
79+
"scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
80+
"scss/at-import-no-partial-leading-underscore": true,
81+
"scss/at-import-partial-extension-blacklist": ["scss"],
82+
"scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
83+
"scss/at-rule-no-unknown": true,
84+
"scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
85+
"scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
86+
"scss/selector-no-redundant-nesting-selector": true,
87+
"scss/comment-no-empty": null,
88+
"scss/at-if-no-null": null,
89+
"scss/dollar-variable-empty-line-before": null,
90+
"scss/operator-no-newline-after": null,
91+
"scss/double-slash-comment-empty-line-before": null,
92+
"selector-class-pattern": null,
93+
"selector-max-compound-selectors": 8,
94+
"selector-max-id": 0,
95+
"selector-no-qualifying-type": [
96+
true,
97+
{
98+
"ignore": ["attribute"]
99+
}
100+
],
101+
"alpha-value-notation": null,
102+
"selector-no-vendor-prefix": true,
103+
"selector-pseudo-element-colon-notation": "double",
104+
"selector-pseudo-element-no-unknown": true,
105+
"shorthand-property-no-redundant-values": true,
106+
"string-quotes": null,
107+
"font-family-no-missing-generic-family-keyword": null,
108+
"no-invalid-position-at-import-rule": null,
109+
"color-function-notation": null,
110+
"max-line-length": null,
111+
"value-no-vendor-prefix": true
112+
}
113+
}

‎package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"build": "npm-run-all styles combine-styles build-ejs build-cjs build-var",
3131
"typecheck": "tsc -p tsconfig.check.json",
3232
"lint-scripts": "eslint \"packages/*/src/**/*.{ts,tsx,js,jsx}\"",
33-
"lint": "npm-run-all lint-scripts typecheck",
33+
"lint-styles": "stylelint \"packages/*/src/**/*.scss\"",
34+
"lint": "npm-run-all lint-scripts lint-styles typecheck",
3435
"test": "jest",
3536
"format": "prettier --write \"**/*.{ts,tsx,scss,js,jsx,md,yml,json}\"",
3637
"clean": "dev-utils clean",
@@ -84,6 +85,12 @@
8485
"react": "^17.0.2",
8586
"react-dom": "^17.0.1",
8687
"react-test-renderer": "^17.0.2",
88+
"stylelint": "^14.0.1",
89+
"stylelint-config-recommended": "^6.0.0",
90+
"stylelint-config-standard": "^23.0.0",
91+
"stylelint-config-standard-scss": "^2.0.0",
92+
"stylelint-order": "^5.0.0",
93+
"stylelint-scss": "^4.0.0",
8794
"ts-jest": "^27.0.7",
8895
"typescript": "^4.4.4"
8996
},

‎packages/app-bar/src/_mixins.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@
7575
/// </div>
7676
///
7777
@mixin rmd-app-bar-fixed {
78+
$positions: top right bottom left;
79+
7880
&--fixed {
7981
@include rmd-theme-update-var(
8082
surface,
@@ -91,7 +93,6 @@
9193
@include rmd-elevation($rmd-app-bar-fixed-elevation);
9294
}
9395

94-
$positions: top right bottom left;
9596
@each $position in $positions {
9697
&--#{$position} {
9798
#{$position}: 0;
@@ -190,6 +191,7 @@
190191
margin-right: $rmd-app-bar-title-nav-margin,
191192
)
192193
);
194+
193195
flex-shrink: 0;
194196

195197
&--inherit {
@@ -384,5 +386,6 @@
384386
}
385387
}
386388

389+
// stylelint-disable order/order
387390
@include rmd-app-bar-offsets;
388391
}

‎packages/avatar/src/_mixins.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,5 +110,6 @@
110110
}
111111
}
112112

113+
// stylelint-disable order/order
113114
@include rmd-avatar-colors;
114115
}

‎packages/card/src/_mixins.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363
text-secondary-on-background,
6464
rmd-card-theme-var(secondary-color)
6565
);
66+
@include rmd-card-theme(background-color);
67+
@include rmd-card-theme(color);
6668
@include rmd-utils-mouse-only {
6769
&--raiseable {
6870
// Note: Only worthwhile with the `--shadowed` class
@@ -73,8 +75,6 @@
7375
);
7476
}
7577
}
76-
@include rmd-card-theme(background-color);
77-
@include rmd-card-theme(color);
7878

7979
border-radius: $rmd-card-border-radius;
8080
display: inline-block;

‎packages/chip/src/_mixins.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
@include rmd-states-theme-update-var(hover-color, transparent);
8787

8888
&:hover {
89+
// stylelint-disable declaration-no-important
8990
// because the rmd-states-surface mixin uses
9091
// `:not(:disabled):not([aria-disabled='true'])`, have to use important or
9192
// an even more specific selector
@@ -135,31 +136,28 @@
135136
}
136137

137138
&--leading-icon {
139+
@include rmd-chip-theme(padding-left, small-spacing);
138140
@include rmd-utils-rtl {
139141
@include rmd-chip-theme(padding-left, large-spacing);
140142
@include rmd-chip-theme(padding-right, small-spacing);
141143
}
142-
143-
@include rmd-chip-theme(padding-left, small-spacing);
144144
}
145145

146146
&--trailing-icon {
147+
@include rmd-chip-theme(padding-right, medium-spacing);
147148
@include rmd-utils-rtl {
148149
@include rmd-chip-theme(padding-left, medium-spacing);
149150
@include rmd-chip-theme(padding-right, large-spacing);
150151
}
151-
152-
@include rmd-chip-theme(padding-right, medium-spacing);
153152
}
154153

155154
&--surrounded {
155+
@include rmd-chip-theme(padding-left, small-spacing);
156+
@include rmd-chip-theme(padding-right, medium-spacing);
156157
@include rmd-utils-rtl {
157158
@include rmd-chip-theme(padding-left, medium-spacing);
158159
@include rmd-chip-theme(padding-right, small-spacing);
159160
}
160-
161-
@include rmd-chip-theme(padding-left, small-spacing);
162-
@include rmd-chip-theme(padding-right, medium-spacing);
163161
}
164162

165163
&__content {

‎packages/documentation/src/components/DemoSandbox/CodePreview.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@
1616
}
1717

1818
.offset {
19+
@include rmd-sheet-theme(margin-left, static-width);
1920
@include rmd-utils-rtl {
2021
@include rmd-sheet-theme(margin-right, static-width);
2122

2223
margin-left: auto;
2324
}
24-
25-
@include rmd-sheet-theme(margin-left, static-width);
2625
}

‎packages/documentation/src/components/DemoSandbox/SandboxNavigation.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
}
77

88
.breadcrumbs {
9+
@include rmd-theme(color, text-secondary-on-dark);
10+
@include rmd-typography(subtitle-2);
911
@include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-keyline);
1012
@include rmd-utils-phone-media {
1113
@include rmd-utils-rtl-auto(margin-left, $rmd-app-bar-title-keyline);
@@ -14,8 +16,6 @@
1416
100% - #{$rmd-app-bar-title-keyline + $rmd-app-bar-keyline}
1517
);
1618
}
17-
@include rmd-theme(color, text-secondary-on-dark);
18-
@include rmd-typography(subtitle-2);
1919

2020
bottom: 0.5rem;
2121
font-family: 'Source Code Pro', Consolas, Monaco, monospace;

‎packages/documentation/src/components/Demos/AppBar/AnimatingAppBar.module.scss‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,12 @@
2525
}
2626

2727
.header {
28+
$width: 20 * 16; // 20rem
29+
$height: (3.5 * 16) + 96; // app-bar-height (3.5rem) + 96 for custom offset
30+
2831
@include rmd-button-theme-update-var(color, $rmd-white-base);
2932
@include rmd-theme(color, $rmd-white-base);
3033

31-
// 20rem
32-
$width: 20 * 16;
33-
// app-bar-height (3.5rem) + 96 for custom offset
34-
$height: (3.5 * 16) + 96;
35-
3634
background-image: url(#{'https://picsum.photos/#{$width}/#{$height}?image=811'});
3735
height: auto;
3836
padding-bottom: var(--offset);

‎packages/documentation/src/components/Demos/AppBar/FixedWithOffset.module.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@
2929
}
3030
}
3131

32+
// just a reminder that you don't need to use the `rmd-PACKAGE-theme-var` stuff if
33+
// you will have mostly static variables. You can instead use the corresponding
34+
// SCSS variable instead. I'm just using them since the documentation site can be
35+
// fully configured
36+
$offset: $rmd-app-bar-title-keyline + $rmd-app-bar-lr-margin * 2;
37+
3238
.title {
3339
@include rmd-typography-text-overflow-ellipsis;
3440

35-
// just a reminder that you don't need to use the `rmd-PACKAGE-theme-var` stuff if
36-
// you will have mostly static variables. You can instead use the corresponding
37-
// SCSS variable instead. I'm just using them since the documentation site can be
38-
// fully configured
39-
$offset: $rmd-app-bar-title-keyline + $rmd-app-bar-lr-margin * 2;
4041
width: calc(100% - #{$offset} - #{rmd-button-theme-var(icon-size)} * 2);
4142
}
4243

0 commit comments

Comments
 (0)