Skip to content
This repository was archived by the owner on Jun 3, 2020. It is now read-only.

Commit d99c293

Browse files
vsvipulakashnimare
vsvipul
authored and
akashnimare
committed
lint: Implement CSS linting with stylelint.
* lint: Implement CSS linting with stylelint. * lint: Format CSS files according to lintconfig. Adds CSS linting following the rules of zulip webapp. Some rules have been ommitted because they required significant changes in code. Also, creates a separate .stylelintrc for storing css config. Fixes CSS part of #676.
1 parent 6e76097 commit d99c293

File tree

7 files changed

+132
-68
lines changed

7 files changed

+132
-68
lines changed

‎.stylelintrc

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"rules": {
3+
"function-comma-space-after": "always",
4+
"function-comma-space-before": "never",
5+
"function-max-empty-lines": 0,
6+
"function-whitespace-after": "always",
7+
8+
"value-keyword-case": "lower",
9+
"value-list-comma-newline-after": "always-multi-line",
10+
"value-list-comma-space-after": "always-single-line",
11+
"value-list-comma-space-before": "never",
12+
"value-list-max-empty-lines": 0,
13+
14+
"unit-case": "lower",
15+
"property-case": "lower",
16+
17+
"declaration-bang-space-before": "always",
18+
"declaration-colon-newline-after": "always-multi-line",
19+
"declaration-colon-space-after": "always-single-line",
20+
"declaration-colon-space-before": "never",
21+
"declaration-block-semicolon-newline-after": "always",
22+
"declaration-block-semicolon-space-before": "never",
23+
"declaration-block-trailing-semicolon": "always",
24+
25+
"block-closing-brace-empty-line-before": "never",
26+
"block-closing-brace-newline-after": "always",
27+
"block-closing-brace-newline-before": "always",
28+
"block-opening-brace-newline-after": "always",
29+
"block-opening-brace-space-before": "always",
30+
31+
"selector-attribute-brackets-space-inside": "never",
32+
"selector-attribute-operator-space-after": "never",
33+
"selector-attribute-operator-space-before": "never",
34+
"selector-combinator-space-after": "always",
35+
"selector-combinator-space-before": "always",
36+
"selector-descendant-combinator-no-non-space": true,
37+
"selector-pseudo-class-parentheses-space-inside": "never",
38+
"selector-pseudo-element-case": "lower",
39+
"selector-type-case": "lower",
40+
"selector-list-comma-newline-after": "always",
41+
"selector-list-comma-space-before": "never",
42+
43+
"media-feature-colon-space-after": "always",
44+
"media-feature-colon-space-before": "never",
45+
"media-feature-name-case": "lower",
46+
"media-feature-parentheses-space-inside": "never",
47+
"media-feature-range-operator-space-after": "always",
48+
"media-feature-range-operator-space-before": "always",
49+
"media-query-list-comma-newline-after": "always",
50+
"media-query-list-comma-space-before": "never",
51+
52+
"at-rule-name-case": "lower",
53+
"at-rule-name-space-after": "always",
54+
"at-rule-semicolon-newline-after": "always",
55+
"at-rule-semicolon-space-before": "never",
56+
57+
"comment-whitespace-inside": "always",
58+
"indentation": 4
59+
}
60+
}

‎app/renderer/css/about.css

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
body {
2-
background: #fafafa;
3-
font-family: menu, "Helvetica Neue", sans-serif;
4-
-webkit-font-smoothing: subpixel-antialiased;
2+
background: #fafafa;
3+
font-family: menu, "Helvetica Neue", sans-serif;
4+
-webkit-font-smoothing: subpixel-antialiased;
55
}
66

77
.logo {
8-
display: block;
9-
margin: -40px auto;
8+
display: block;
9+
margin: -40px auto;
1010
}
1111

1212
#version {
13-
color: #444343;
14-
font-size: 1.3em;
15-
padding-top: 40px;
13+
color: #444343;
14+
font-size: 1.3em;
15+
padding-top: 40px;
1616
}
1717

1818
.about {
19-
margin: 25vh auto;
20-
height: 25vh;
21-
text-align: center;
19+
margin: 25vh auto;
20+
height: 25vh;
21+
text-align: center;
2222
}
2323

2424
.about p {
25-
font-size: 20px;
26-
color: rgba(0, 0, 0, 0.62);
25+
font-size: 20px;
26+
color: rgba(0, 0, 0, 0.62);
2727
}
2828

2929
.about img {
30-
width: 150px;
30+
width: 150px;
3131
}
3232

3333
.detail {
34-
text-align: center;
34+
text-align: center;
3535
}
3636

3737
.detail.maintainer {
38-
font-size: 1.2em;
39-
font-weight: 500;
38+
font-size: 1.2em;
39+
font-weight: 500;
4040
}
4141

4242
.detail.license {
43-
font-size: 0.8em;
43+
font-size: 0.8em;
4444
}
4545

4646
.maintenance-info {
47-
cursor: pointer;
48-
position: absolute;
49-
width: 100%;
50-
left: 0px;
51-
color: #444;
47+
cursor: pointer;
48+
position: absolute;
49+
width: 100%;
50+
left: 0px;
51+
color: #444;
5252
}
5353

5454
.maintenance-info p {
55-
margin: 0;
56-
font-size: 1em;
57-
width: 100%;
55+
margin: 0;
56+
font-size: 1em;
57+
width: 100%;
5858
}
5959

6060
p.detail a {
61-
color: #355f4c;
61+
color: #355f4c;
6262
}
6363

6464
p.detail a:hover {
65-
text-decoration: underline;
65+
text-decoration: underline;
6666
}

‎app/renderer/css/main.css

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,25 @@ body {
4343
}
4444

4545
#view-controls-container {
46-
height: calc(100% - 208px);
47-
overflow-y: hidden;
46+
height: calc(100% - 208px);
47+
overflow-y: hidden;
4848
}
4949

5050
#view-controls-container:hover {
51-
overflow-y: overlay;
51+
overflow-y: overlay;
5252
}
5353

5454
#view-controls-container::-webkit-scrollbar {
55-
width: 4px;
55+
width: 4px;
5656
}
5757

5858
#view-controls-container::-webkit-scrollbar-track {
59-
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
59+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
6060
}
6161

6262
#view-controls-container::-webkit-scrollbar-thumb {
63-
background-color: darkgrey;
64-
outline: 1px solid slategrey;
63+
background-color: darkgrey;
64+
outline: 1px solid slategrey;
6565
}
6666

6767
@font-face {
@@ -278,7 +278,7 @@ body {
278278
width: 100%;
279279
}
280280

281-
/*Pseudo element for loading indicator*/
281+
/* Pseudo element for loading indicator */
282282
#webviews-container::before {
283283
content: "";
284284
position: absolute;
@@ -290,7 +290,7 @@ body {
290290
height: 100%;
291291
}
292292

293-
/*When the active webview is loaded*/
293+
/* When the active webview is loaded */
294294
#webviews-container.loaded::before {
295295
opacity: 0;
296296
z-index: -1;
@@ -453,24 +453,24 @@ webview.focus {
453453
}
454454

455455
send-feedback {
456-
width: 60%;
457-
height: 85%;
456+
width: 60%;
457+
height: 85%;
458458
}
459459

460460
#feedback-modal {
461-
display: none;
462-
position: absolute;
463-
top: 0;
464-
left: 0;
465-
width: 100%;
466-
height: 100%;
467-
background-color: rgba(68, 67, 67, 0.81);
468-
align-items: center;
469-
justify-content: center;
470-
z-index: 2;
471-
transition: all 1s ease-out;
461+
display: none;
462+
position: absolute;
463+
top: 0;
464+
left: 0;
465+
width: 100%;
466+
height: 100%;
467+
background-color: rgba(68, 67, 67, 0.81);
468+
align-items: center;
469+
justify-content: center;
470+
z-index: 2;
471+
transition: all 1s ease-out;
472472
}
473473

474474
#feedback-modal.show {
475-
display: flex;
475+
display: flex;
476476
}

‎app/renderer/css/network.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
html, body {
1+
html,
2+
body {
23
margin: 0;
34
cursor: default;
45
font-size: 14px;
56
color: #333;
67
background: #fff;
7-
user-select:none;
8+
user-select: none;
89
}
910

1011
#content {

‎app/renderer/css/preference.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ img.server-info-icon {
287287

288288
.settings-pane {
289289
flex-grow: 1;
290-
min-width: 550px;
290+
min-width: 550px;
291291
}
292292

293293
.action:hover {
@@ -441,24 +441,24 @@ i.open-tab-button {
441441
visibility: hidden;
442442
}
443443

444-
.toggle+label {
444+
.toggle + label {
445445
display: block;
446446
position: relative;
447447
cursor: pointer;
448448
outline: none;
449449
user-select: none;
450450
}
451451

452-
input.toggle-round+label {
452+
input.toggle-round + label {
453453
padding: 2px;
454454
width: 50px;
455455
height: 25px;
456456
background-color: #dddddd;
457457
border-radius: 25px;
458458
}
459459

460-
input.toggle-round+label:before,
461-
input.toggle-round+label:after {
460+
input.toggle-round + label:before,
461+
input.toggle-round + label:after {
462462
display: block;
463463
position: absolute;
464464
top: 2px;
@@ -467,7 +467,7 @@ input.toggle-round+label:after {
467467
content: "";
468468
}
469469

470-
input.toggle-round+label:before {
470+
input.toggle-round + label:before {
471471
background-color: #f1f1f1;
472472
border-radius: 25px;
473473
top: 0;
@@ -476,22 +476,22 @@ input.toggle-round+label:before {
476476
bottom: 0px;
477477
}
478478

479-
input.toggle-round+label:after {
479+
input.toggle-round + label:after {
480480
width: 25px;
481481
height: 25px;
482482
background-color: #fff;
483483
border-radius: 100%;
484484
}
485485

486-
input.toggle-round:checked+label:before {
486+
input.toggle-round:checked + label:before {
487487
background-color: #4EBFAC;
488488
top: 0;
489489
right: 0px;
490490
left: 0px;
491491
bottom: 0px;
492492
}
493493

494-
input.toggle-round:checked+label:after {
494+
input.toggle-round:checked + label:after {
495495
margin-left: 25px;
496496
}
497497

@@ -582,7 +582,7 @@ input.toggle-round:checked+label:after {
582582
}
583583

584584
.certificates-card {
585-
width: 80%
585+
width: 80%;
586586
}
587587

588588
.certificate-input {
@@ -609,8 +609,8 @@ input.toggle-round:checked+label:after {
609609
padding: 0;
610610
}
611611

612-
.tip:hover{
613-
box-shadow: none;
612+
.tip:hover {
613+
box-shadow: none;
614614
}
615615

616616
.md-14 {

‎app/renderer/css/preload.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Override css rules */
22

3-
.portico-wrap>.header {
3+
.portico-wrap > .header {
44
display: none;
55
}
66

7-
.portico-container>.footer {
7+
.portico-container > .footer {
88
display: none;
99
}

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
"start": "electron app --disable-http-cache --no-electron-connect",
2525
"reinstall": "node ./tools/reinstall-node-modules.js",
2626
"postinstall": "electron-builder install-app-deps",
27-
"test": "xo",
27+
"lint-css": "stylelint app/renderer/css/*.css",
28+
"lint-js": "xo",
29+
"test": "npm run lint-css && npm run lint-js",
2830
"test-e2e": "gulp test-e2e",
2931
"dev": "gulp dev & nodemon --watch app/main --watch app/renderer --exec 'npm test' -e html,css,js",
3032
"pack": "electron-builder --dir",
@@ -132,6 +134,7 @@
132134
"nodemon": "^1.14.11",
133135
"pre-commit": "1.2.2",
134136
"spectron": "^5.0.0",
137+
"stylelint": "^9.10.1",
135138
"tap-colorize": "^1.2.0",
136139
"tape": "^4.8.0",
137140
"xo": "0.18.2"

0 commit comments

Comments
 (0)