Prettier for scss lint

.stylelintrc.json

@@ -1,6 +1,3 @@
 {
-	"extends": "stylelint-config-sass-guidelines",
-	"rules": {
-		"indentation": "tab"
-	}
+	"extends": ["stylelint-prettier/recommended"]
 }

package-lock.json

@@ -5651,6 +5651,12 @@
 			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
 			"dev": true
 		},
+		"fast-diff": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+			"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+			"dev": true
+		},
 		"fast-glob": {
 			"version": "3.2.4",
 			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -10490,6 +10496,15 @@
 			"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==",
 			"dev": true
 		},
+		"prettier-linter-helpers": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+			"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+			"dev": true,
+			"requires": {
+				"fast-diff": "^1.1.2"
+			}
+		},
 		"pretty-format": {
 			"version": "26.6.2",
 			"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
@@ -12750,6 +12765,12 @@
 				}
 			}
 		},
+		"stylelint-config-prettier": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz",
+			"integrity": "sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A==",
+			"dev": true
+		},
 		"stylelint-config-sass-guidelines": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-7.1.0.tgz",
@@ -12799,6 +12820,15 @@
 				}
 			}
 		},
+		"stylelint-prettier": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-1.1.2.tgz",
+			"integrity": "sha512-8QZ+EtBpMCXYB6cY0hNE3aCDKMySIx4Q8/malLaqgU/KXXa6Cj2KK8ulG1AJvUMD5XSSP8rOotqaCzR/BW6qAA==",
+			"dev": true,
+			"requires": {
+				"prettier-linter-helpers": "^1.0.0"
+			}
+		},
 		"stylelint-scss": {
 			"version": "3.18.0",
 			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.18.0.tgz",

package.json

@@ -56,14 +56,16 @@
 		"file-loader": "^6.2.0",
 		"jest": "^26.6.3",
 		"jest-junit": "^12.0.0",
-		"prettier": "2.2.1",
+		"prettier": "^2.2.1",
 		"react-test-renderer": "^17.0.1",
 		"resolve-url-loader": "^3.1.2",
 		"sass": "^1.32.5",
 		"sass-loader": "^10.1.1",
 		"style-loader": "^2.0.0",
 		"stylelint": "^13.9.0",
+		"stylelint-config-prettier": "^8.0.2",
 		"stylelint-config-sass-guidelines": "^7.1.0",
+		"stylelint-prettier": "^1.1.2",
 		"webpack": "^5.19.0",
 		"webpack-cli": "^4.3.1",
 		"webpack-dev-server": "^3.11.1"

src/common_styles/typography.scss

@@ -15,11 +15,19 @@
 // }
 
 @font-face {
-	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');
+	font-weight: 400 800;
+	src: url("fonts/TrilbyVariable-VF-Testing.woff2") format("woff2"),
+		url("fonts/TrilbyVariable-VF-Testing.woff") format("woff");
 }
 
-$stack: 14px 'Trilby', 'Century Gothic', Futura, sans-serif;
+@font-face {
+	font-family: "Trilby";
+	font-style: italic;
+	font-weight: 400 800;
+	src: url("fonts/TrilbyVariable-VF_Italic-Testing.woff2") format("woff2"),
+		url("fonts/TrilbyVariable-VF_Italic-Testing.woff") format("woff");
+}
+
+$stack: 18px "Trilby", "Century Gothic", Futura, sans-serif;