Adds stylelint and related changes

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+	"extends": "stylelint-config-sass-guidelines",
+	"rules": {
+		"indentation": "tab"
+	}
+}

Jenkinsfile

@@ -26,6 +26,12 @@ pipeline {
 						sh './do.sh _lint'
 					}
 				}
+				stage('stylelint') {
+					steps {
+						echo 'Running stylelint'
+						sh './do.sh _stylelint'
+					}
+				}
 				stage('test') {
 					steps {
 						echo 'Running test'

do.sh

@@ -22,6 +22,10 @@ _lint() {
 	npx eslint src --ext .js,.jsx
 }
 
+_stylelint() {
+	npx stylelint "src/**/*.{css,scss,sass}"
+}
+
 _jest() {
 	npx jest --ci --coverage
 }
@@ -32,7 +36,7 @@ _jestUpdateSnaps() {
 
 test() {
 	echo "I am ${FUNCNAME[0]}ing"
-	_lint && _jest
+	_lint && _stylelint && _jest
 }
 
 "$@" # <- execute the task

package.json

@@ -62,6 +62,8 @@
 		"sass": "^1.32.5",
 		"sass-loader": "^10.1.1",
 		"style-loader": "^2.0.0",
+		"stylelint": "^13.9.0",
+		"stylelint-config-sass-guidelines": "^7.1.0",
 		"webpack": "^5.19.0",
 		"webpack-cli": "^4.3.1",
 		"webpack-dev-server": "^3.11.1"

src/App.jsx

@@ -9,7 +9,7 @@ function App() {
 	const { user } = useAuth();
 	console.log(user);
 	return (
-		<div className="App">
+		<div className="app">
 			<h1>Frontend</h1>
 			{user ? <AuthenticatedApp /> : <UnauthenticatedApp />}
 		</div>

src/App.scss

@@ -1,15 +1,10 @@
-@use "./common_styles/typography" as t;
-@use "./common_styles/colours";
+@use './common_styles/typography' as t;
+@use './common_styles/colours';
 
-.App {
+.app {
 	font: t.$stack;
-	margin: 1rem;
 	line-height: 1.5;
-}
-
-.mainContent {
-	width: 80%;
-	margin: auto;
+	margin: 1rem;
 }
 
 body {

src/common_styles/typography.scss

@@ -15,11 +15,11 @@
 // }
 
 @font-face {
-	src: url("fonts/Trilby-Regular-Testing.woff2") format("woff2"),
-		url("fonts/Trilby-Regular-Testing.woff") format("woff");
-	font-family: "Trilby";
+	font-family: 'Trilby';
 	font-style: normal;
 	font-weight: normal;
+	src: url('fonts/Trilby-Regular-Testing.woff2') format('woff2'),
+		url('fonts/Trilby-Regular-Testing.woff') format('woff');
 }
 
-$stack: 14px "Trilby", "Century Gothic", Futura, sans-serif;
+$stack: 14px 'Trilby', 'Century Gothic', Futura, sans-serif;

src/components/UnauthenticatedApp.jsx

@@ -15,19 +15,19 @@ function UnauthenticatedApp() {
 		<Login login={login} />
 	);
 	return (
-		<div className="UnauthenticatedApp">
-			<div className="loginRegisterButtonsWrapper">
+		<div className="unauthenticated-app">
+			<div className="button-wrapper">
 				<button
 					type="submit"
 					onClick={() => setShowRegister(false)}
-					className="chooseLogin"
+					className="choose-login"
 				>
 					Login
 				</button>
 				<button
 					type="submit"
 					onClick={() => setShowRegister(true)}
-					className="chooseRegister"
+					className="choose-register"
 				>
 					Register
 				</button>

src/components/UnauthenticatedApp.scss

@@ -1,19 +1,16 @@
-@use "../common_styles/colours";
-@use "../common_styles/typography";
+@use '../common_styles/colours';
+@use '../common_styles/typography';
 
-.UnauthenticatedApp button {
-	padding: 10px 15px;
-	border: 0px;
-	margin: 10px;
+.unauthenticated-app button {
 	background-color: colours.$accent-color;
+	border: 0;
 	color: colours.$inverted-text-color;
 	font: typography.$stack;
+	margin: 10px;
+	padding: 10px 15px;
 }
 
-.UnauthenticatedApp .chooseLogin {
-}
-
-.UnauthenticatedApp .chooseRegister {
+.unauthenticated-app .choose-register {
 	background-color: colours.$dimmed-color;
 	color: colours.$text-color;
 }