Merge pull request #1139 from nextcloud/fix/1137/lint-scss

Add SCSS stylelint
nextcloud · Jul 22, 2020 · cc89772 · cc89772
2 parents 5fe9e54 + 06ceffc
commit cc89772
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 42 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -75,3 +75,25 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+  scss:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-versions: [12.x]
+
+    name: SCSS
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node ${{ matrix.node-versions }}
+        uses: actions/setup-node@v1
+        with:
+          node-versions: ${{ matrix.node-versions }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint SCSS
+        run: npm run stylelint
diff --git a/.gitignore b/.gitignore
@@ -5,8 +5,8 @@ composer.phar
 ######################
 ## Files build by make
 ######################
-/css/src/sprites-bw.scss
-/css/src/sprites-color.scss
+/css/sprites-bw.scss
+/css/sprites-color.scss
 /img/sprt-bw.svg
 /img/sprt-color.svg
 /js/

diff --git a/.stylelintrc b/.stylelintrc
@@ -1,9 +1,13 @@
 {
 	"extends": "stylelint-config-recommended-scss",
 	"rules": {
+		"no-eol-whitespace": true,
+		"length-zero-no-unit": true,
+		"block-opening-brace-space-before": "always",
+		"block-no-empty": true,
 		"indentation": "tab",
 		"selector-type-no-unknown": null,
-		"number-leading-zero": null,
+		"number-leading-zero": "never",
 		"rule-empty-line-before": ["always", {
 			"ignore": ["after-comment", "inside-block"]
 		}],

diff --git a/Makefile b/Makefile
@@ -100,9 +100,9 @@ update-composer: composer.phar
 # Removes the build directory and the compiled files
 .PHONY: clean
 clean:
-	rm -f ./css/src/sprites.scss
-	rm -f ./css/src/sprites-bw.scss
-	rm -f ./css/src/sprites-color.scss
+	rm -f ./css/sprites.scss
+	rm -f ./css/sprites-bw.scss
+	rm -f ./css/sprites-color.scss
 	rm -f ./img/sprites.svg
 	rm -f ./img/bw.svg
 	rm -f ./img/color.svg

diff --git a/css/src/Calendars/CalendarShares.scss b/css/src/Calendars/CalendarShares.scss
@@ -41,19 +41,19 @@
 			.action-checkbox__label {
 				padding-right: 0 !important;
 			}
-	
+
 			.action-checkbox__label::before {
 				margin: 4px 4px 0 !important;
 			}
 		}
-		
+
 		&__multiselect {
 			padding-left: 6px !important;
 
 			.multiselect {
 				width: calc(100% - 14px);
 				margin: 0;
-				.multiselect__tags:focus-within, 
+				.multiselect__tags:focus-within,
 				.multiselect__tags:hover {
 					border-color: var(--color-primary-element);
 				}

diff --git a/css/src/markdown.scss b/css/src/markdown.scss
@@ -17,7 +17,7 @@
 	}
 
 	a {
-		opacity: 0.5;
+		opacity: .5;
 		text-decoration: underline;
 	}
 
@@ -83,7 +83,7 @@
 	}
 
 	input[type=checkbox] {
-		margin: 0px 10px 0px 0px;
+		margin: 0 10px 0 0;
 		line-height: 10px;
 		font-size: 10px;
 		display: inline-block;

diff --git a/css/src/style.scss b/css/src/style.scss
@@ -63,7 +63,7 @@ $blue_due: #4271a6;			// due dates and low importance
 				}
 
 				.app-navigation-entry__icon-bullet {
-					opacity: 0.3;
+					opacity: .3;
 				}
 			}
 
@@ -74,14 +74,14 @@ $blue_due: #4271a6;			// due dates and low importance
 
 			button {
 				&.icon-share {
-					opacity: 0.3 !important;
+					opacity: .3 !important;
 				}
-		
+
 				&.icon-shared,
 				&.icon-public {
-					opacity: 0.7 !important;
+					opacity: .7 !important;
 				}
-		
+
 				&.icon-share:active,
 				&.icon-share:focus,
 				&.icon-share:hover,
@@ -122,7 +122,7 @@ $blue_due: #4271a6;			// due dates and low importance
 							border-left: 0 none;
 							background-position: center;
 							cursor: pointer;
-				
+
 							&:hover {
 								border-left: 1px solid;
 								margin-left: -1px;
@@ -350,7 +350,7 @@ $blue_due: #4271a6;			// due dates and low importance
 			}
 			.icon-alphabetically {
 				@include icon-color('icon-alphabetically', 'tasks', $color-black, 3);
-				
+
 				&__up {
 					@include icon-color('icon-alphabetically-up', 'tasks', $color-black, 3);
 				}
@@ -476,7 +476,7 @@ $blue_due: #4271a6;			// due dates and low importance
 							padding: 11px;
 							height: 44px;
 							width: 44px;
-							opacity: 0.5;
+							opacity: .5;
 						}
 
 						.task-info {
@@ -566,7 +566,7 @@ $blue_due: #4271a6;			// due dates and low importance
 								flex-wrap: nowrap;
 							}
 
-							
+
 							.icon-toggle {
 								@include icon-color('icon-toggle', 'tasks', $color-black, 3);
 							}
@@ -787,7 +787,7 @@ $blue_due: #4271a6;			// due dates and low importance
 
 			.detail-checkbox {
 				padding: 11px 10px;
-				opacity: 0.5;
+				opacity: .5;
 			}
 
 			.title-wrapper {
@@ -840,7 +840,7 @@ $blue_due: #4271a6;			// due dates and low importance
 					white-space: pre-wrap;
 					word-wrap: break-word;
 				}
-	
+
 				textarea {
 					margin: 0;
 					border-radius: 0;
@@ -852,7 +852,7 @@ $blue_due: #4271a6;			// due dates and low importance
 					top: 0;
 					width: 100%;
 				}
-	
+
 				pre {
 					border: 0 none !important;
 					display: block;
@@ -911,11 +911,11 @@ $blue_due: #4271a6;			// due dates and low importance
 							margin: 0 20px;
 							padding: 5px 15px;
 							cursor: text;
-		
+
 							.expandingArea {
 								position: relative;
 								margin-left: -1px;
-		
+
 								textarea,
 								pre {
 									box-shadow: none;
@@ -926,7 +926,7 @@ $blue_due: #4271a6;			// due dates and low importance
 									white-space: pre-wrap;
 									word-wrap: break-word;
 								}
-		
+
 								textarea {
 									margin: 0 0 0 1px;
 									border-radius: 0;
@@ -941,7 +941,7 @@ $blue_due: #4271a6;			// due dates and low importance
 									font-weight: 500;
 									outline: medium none;
 								}
-		
+
 								pre {
 									border: 0 none !important;
 									display: block;
@@ -951,29 +951,29 @@ $blue_due: #4271a6;			// due dates and low importance
 									visibility: hidden;
 								}
 							}
-		
+
 							.note-body,
 							.note-edit {
 								min-height: 140px;
 								word-wrap: break-word;
 								cursor: text;
 								width: 100%;
-		
+
 								.content-fakeable {
 									&.editing {
 										.display-view {
 											display: none !important;
 										}
-		
+
 										.edit-view {
 											display: block !important;
 										}
 									}
-		
+
 									.display-view {
 										cursor: text;
 									}
-		
+
 									.edit-view {
 										display: none !important;
 									}
@@ -1061,16 +1061,16 @@ $blue_due: #4271a6;			// due dates and low importance
 									border: 1px solid transparent;
 
 									.multiselect__tags-wrap {
-										padding-left: 0px;
+										padding-left: 0;
 									}
 
 									.multiselect__input {
-										padding: 0px !important;
+										padding: 0 !important;
 										font-weight: bold;
 									}
 
 									.multiselect__single {
-										padding-left: 0px !important;
+										padding-left: 0 !important;
 										font-weight: bold;
 										white-space: nowrap;
 										text-overflow: ellipsis;
@@ -1249,7 +1249,7 @@ button.inline {
 	border-radius: 0;
 
 	&:hover .icon {
-		opacity: 0.7;
+		opacity: .7;
 	}
 
 	span.icon {
@@ -1317,7 +1317,7 @@ input[type='checkbox'].checkbox {
 	width: unset !important;
 }
 
-.icon span{
+.icon span {
 	font-family: var(--font-face);
 }
 
@@ -1338,7 +1338,7 @@ input[type='checkbox'].checkbox {
 		opacity: .5;
 		cursor: pointer;
 
-		&:hover{
+		&:hover {
 			opacity: .7;
 		}
 	}

diff --git a/css/tasks.scss b/css/tasks.scss
@@ -19,8 +19,8 @@
  *
  */
 
-@import './src/sprites-color';
-@import './src/sprites-bw';
+@import './sprites-color';
+@import './sprites-bw';
 @import './src/style';
 @import './src/markdown';
 

diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
 		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
 		"lint": "eslint --ext .js,.vue src tests",
 		"lint:fix": "eslint --ext .js,.vue src tests --fix",
+		"stylelint": "stylelint 'css/src/**/*.scss'",
+		"stylelint:fix": "stylelint 'css/src/**/*.scss' --fix",
 		"test": "jest --verbose",
 		"svg_sprite": "svg-sprite --config svg-sprite-color.json img/src/color/*.svg && svg-sprite --config svg-sprite-bw.json img/src/bw/*.svg"
 	},

diff --git a/svg-sprite-bw.json b/svg-sprite-bw.json
@@ -14,7 +14,7 @@
 			"render": {
 				"scss": {
 					"template": "svg-sprite-bw.tmpl",
-					"dest": "src/sprites-bw.scss"
+					"dest": "sprites-bw.scss"
 				}
 			}
 		}

diff --git a/svg-sprite-color.json b/svg-sprite-color.json
@@ -14,7 +14,7 @@
 			"render": {
 				"scss": {
 					"template": "svg-sprite-color.tmpl",
-					"dest": "src/sprites-color.scss"
+					"dest": "sprites-color.scss"
 				}
 			}
 		}