fixed global style auto formatting issue

source/src/App.tsx

@@ -1,6 +1,10 @@
 import React from "react"
 import { Switch, Route } from "react-router-dom"
-import styled, { ThemeProvider, createGlobalStyle } from "styled-components"
+import styled, {
+	ThemeProvider,
+	createGlobalStyle,
+	css,
+} from "styled-components"
 import { HelmetProvider, Helmet } from "react-helmet-async"
 import storage from "local-storage-fallback"
 import { isIE } from "react-device-detect"
@@ -19,14 +23,17 @@ import Search from "./pages/Search"
 import Page from "./pages/Page"
 import NotFound from "./pages/NotFound"
 
-// Theme that will be used throughout the website
+// wrapping it using css because prettier extension does not work well with styled-components
-const GlobalStyle = createGlobalStyle<{ theme: { currentTheme: string } }>`
+// https://github.com/styled-components/vscode-styled-components/issues/175
-body {
+const globalStyle = css`
+	body {
 		overflow-x: hidden;
 		overflow-y: scroll;
-}
+	}
 
-html, body, #root {
+	html,
+	body,
+	#root {
 		min-height: 100vh;
 		margin: 0;
 		display: flex;
@@ -47,32 +54,32 @@ html, body, #root {
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		text-rendering: optimizeLegibility;
-}
+	}
 
-body::-webkit-scrollbar {
+	body::-webkit-scrollbar {
 		width: ${theming.size.x_small};
-}
+	}
 
-body::-webkit-scrollbar-track {
+	body::-webkit-scrollbar-track {
 		border-radius: ${theming.size.x2_small};
-    background: rgba(0,0,0,0.06);
+		background: rgba(0, 0, 0, 0.06);
 		box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
-}
+	}
 
-body::-webkit-scrollbar-thumb {
+	body::-webkit-scrollbar-thumb {
 		border-radius: ${theming.size.x2_small};
-    background: rgba(0,0,0,0.1);
+		background: rgba(0, 0, 0, 0.1);
 		box-shadow: inset 0 0 10px rgb(0 0 0 / 20%);
-}
+	}
 
-#content {
+	#content {
-	display:inline-block;
+		display: inline-block;
 		flex: 1 1 auto;
 		margin-bottom: 3rem;
 		margin-top: 3rem;
-}
+	}
 
-code {
+	code {
 		font-family: ${theming.font.code};
 		color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
@@ -86,10 +93,10 @@ code {
 			})};
 		border-radius: 3px;
 		padding: 0 3px;
-}
+	}
 
-/* https://stackoverflow.com/a/48694906/12979111 */
+	/* https://stackoverflow.com/a/48694906/12979111 */
-pre > code {
+	pre > code {
 		font-family: ${theming.font.code};
 		color: #adbac7;
 		background-color: #22272e;
@@ -103,10 +110,10 @@ pre > code {
 		padding: 1em 1.5em;
 		display: block;
 		word-wrap: break-word;
-}
+	}
 
-/* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */
+	/* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */
-kbd {
+	kbd {
 		margin: 0px 0.1em;
 		padding: 0.1em 0.6em;
 		border-radius: 3px;
@@ -138,40 +145,41 @@ kbd {
 				light: "0 1px 0 white",
 				dark: "0 1px 0 black",
 			})};
-}
+	}
 
-table {
+	table {
 		border-collapse: collapse;
 		width: 100%;
-}
+	}
 
-table td, table th {
+	table td,
+	table th {
 		border: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "1px solid #ddd",
 				dark: "1px solid #777777",
 			})};
 		padding: 8px;
-}
+	}
 
-table tr:nth-child(even){
+	table tr:nth-child(even) {
 		background-color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "#f2f2f2",
 				dark: "#21272E",
 			})};
-}
+	}
 
-.white-link a {
+	.white-link a {
 		text-decoration: none;
 		color: ${theming.color.linkColor};
 
 		&:visited {
 			color: ${theming.color.linkColor};
 		}
-}
+	}
 
-blockquote {
+	blockquote {
 		background-color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "rgba(0, 0, 0, 5%)",
@@ -191,9 +199,9 @@ blockquote {
 		@media screen and (max-width: ${theming.size.screen_size1}) {
 			margin: 0.5rem;
 		}
-}
+	}
 
-.card {
+	.card {
 		margin: auto;
 		background-color: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
@@ -211,9 +219,9 @@ blockquote {
 		@media screen and (max-width: ${theming.size.screen_size1}) {
 			padding: 1rem;
 		}
-}
+	}
 
-.main-content {
+	.main-content {
 		margin-top: 3rem;
 		width: 50%;
 
@@ -222,13 +230,18 @@ blockquote {
 			margin: 1rem;
 			margin-top: 3rem;
 		}
-}
+	}
 
-* {
+	* {
 		transition: color 0.1s linear;
-}
+	}
 `
 
+// Theme that will be used throughout the website
+const GlobalStyle = createGlobalStyle<{
+	theme: { currentTheme: string }
+}>`${globalStyle}`
+
 const StyledP = styled.p`
 	margin: auto;
 	font-size: 2rem;