SCSS: Unify code style and enforce it using stylelint

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
nextcloud · Sep 8, 2022 · 02557e1 · 02557e1
1 parent 5353e5d
commit 02557e1
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 64 deletions.
diff --git a/css/prosemirror.scss b/css/prosemirror.scss
@@ -1,4 +1,4 @@
-@use "sass:selector";
+@use 'sass:selector';
 
 /* Document rendering styles */
 div.ProseMirror {
@@ -153,7 +153,7 @@ div.ProseMirror {
 	}
 
 	hr:after {
-		content: "";
+		content: '';
 		display: block;
 		height: 1px;
 		background-color: var(--color-border-dark);

diff --git a/css/style.scss b/css/style.scss
@@ -5,100 +5,110 @@
 }
 
 .modal-container #editor-container {
-  position: absolute;
+	position: absolute;
 }
 
-.ProseMirror-hideselection *::selection { background: transparent; color: var(--color-main-text); }
-.ProseMirror-hideselection *::-moz-selection { background: transparent; color: var(--color-main-text); }
-.ProseMirror-hideselection { caret-color: transparent; color: var(--color-main-text); }
+.ProseMirror-hideselection {
+	caret-color: transparent;
+	color: var(--color-main-text);
+
+	*::selection {
+		background: transparent;
+		color: var(--color-main-text);
+	}
+
+	*::-moz-selection {
+		background: transparent;
+		color: var(--color-main-text);
+	}
+}
 
 .ProseMirror-selectednode {
-  outline: 2px solid #8cf;
+	outline: 2px solid #8cf;
 }
 
 /* Make sure li selections wrap around markers */
 li.ProseMirror-selectednode {
-  outline: none;
-}
-
-li.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -32px;
-  right: -2px; top: -2px; bottom: -2px;
-  border: 2px solid #8cf;
-  pointer-events: none;
+	outline: none;
+
+	&:after {
+		content: '';
+		position: absolute;
+		left: -32px;
+		right: -2px; top: -2px; bottom: -2px;
+		border: 2px solid #8cf;
+		pointer-events: none;
+	}
 }
 
 .has-conflicts,
 #editor-wrapper.icon-loading {
-  .ProseMirror-menubar {
-    display: none;
-  }
+	.ProseMirror-menubar {
+		display: none;
+	}
 }
 
 .ProseMirror-gapcursor {
-  display: none;
-  pointer-events: none;
-  position: absolute;
-}
-
-.ProseMirror-gapcursor:after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: -2px;
-  width: 20px;
-  border-top: 1px solid var(--color-main-text);
-  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+	display: none;
+	pointer-events: none;
+	position: absolute;
+
+	&:after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: -2px;
+		width: 20px;
+		border-top: 1px solid var(--color-main-text);
+		animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+	}
 }
 
 @keyframes ProseMirror-cursor-blink {
-  to {
-    visibility: hidden;
-  }
+	to {
+		visibility: hidden;
+	}
 }
 
 .animation-rotate {
 	animation: rotate var(--animation-duration, 0.8s) linear infinite;
 }
 
-[data-handler="text"] {
-  background-color: var(--color-main-background);
-  border-top: 3px solid var(--color-primary-element);
-  .modal-title {
-    font-weight: bold;
-  }
+[data-handler='text'] {
+	background-color: var(--color-main-background);
+	border-top: 3px solid var(--color-primary-element);
+	.modal-title {
+		font-weight: bold;
+	}
 }
 
 // from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInDown.css
 @keyframes fadeInDown {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
+	from {
+		opacity: 0;
+		transform: translate3d(0, -100%, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
 }
 
 
 // from https://github.com/animate-css/animate.css/blob/main/source/fading_entrances/fadeInLeft.css
 @keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
+	from {
+		opacity: 0;
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
 }
 
 .fadeInLeft {
-  animation-name: fadeInLeft;
+	animation-name: fadeInLeft;
 }
-
diff --git a/package.json b/package.json
@@ -23,8 +23,8 @@
     "build:package": "vite build",
     "lint": "eslint --ext .js,.vue src cypress",
     "lint:fix": "eslint --ext .js,.vue src cypress --fix",
-    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
-    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css --fix",
+    "stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss",
+    "stylelint:fix": "stylelint src/**/*.vue src/**/*.scss src/**/*.css css/*.scss --fix",
     "test": "NODE_ENV=test jest",
     "test:cypress": "cd cypress && ./runLocal.sh run",
     "test:cypress:open": "cd cypress && ./runLocal.sh open",