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
-const GlobalStyle = createGlobalStyle<{ theme: { currentTheme: string } }>`
+// wrapping it using css because prettier extension does not work well with styled-components
+// https://github.com/styled-components/vscode-styled-components/issues/175
+const globalStyle = css`
 	body {
 		overflow-x: hidden;
 		overflow-y: scroll;
 	}
 
-html, body, #root {
+	html,
+	body,
+	#root {
 		min-height: 100vh;
 		margin: 0;
 		display: flex;
@@ -145,7 +152,8 @@ table {
 		width: 100%;
 	}
 
-table td, table th {
+	table td,
+	table th {
 		border: ${(props) =>
 			theming.theme(props.theme.currentTheme, {
 				light: "1px solid #ddd",
@@ -229,6 +237,11 @@ blockquote {
 	}
 `
 
+// Theme that will be used throughout the website
+const GlobalStyle = createGlobalStyle<{
+	theme: { currentTheme: string }
+}>`${globalStyle}`
+
 const StyledP = styled.p`
 	margin: auto;
 	font-size: 2rem;