From 159cbc293af6275ffff57865836a2eff8602cd35 Mon Sep 17 00:00:00 2001 From: developomp Date: Fri, 13 Aug 2021 18:59:24 +0900 Subject: [PATCH] fixed global style auto formatting issue --- source/src/App.tsx | 411 +++++++++++++++++++++++---------------------- 1 file changed, 212 insertions(+), 199 deletions(-) diff --git a/source/src/App.tsx b/source/src/App.tsx index 086bc0c..31c80c1 100644 --- a/source/src/App.tsx +++ b/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,216 +23,225 @@ 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 } }>` -body { - overflow-x: hidden; - overflow-y: scroll; -} - -html, body, #root { - min-height: 100vh; - margin: 0; - display: flex; - flex-flow: column; - line-height: 1.5rem; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.backgroundColor1, - dark: theming.dark.backgroundColor1, - })}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.color1, - dark: theming.dark.color1, - })}; - font-size: ${theming.size.medium}; - font-family: ${theming.font.regular}; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; -} - -body::-webkit-scrollbar { - width: ${theming.size.x_small}; -} - -body::-webkit-scrollbar-track { - border-radius: ${theming.size.x2_small}; - background: rgba(0,0,0,0.06); - box-shadow: inset 0 0 5px rgb(0 0 0 / 10%); -} - -body::-webkit-scrollbar-thumb { - border-radius: ${theming.size.x2_small}; - background: rgba(0,0,0,0.1); - box-shadow: inset 0 0 10px rgb(0 0 0 / 20%); -} - -#content { - display:inline-block; - flex: 1 1 auto; - margin-bottom: 3rem; - margin-top: 3rem; -} - -code { - font-family: ${theming.font.code}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: theming.light.color1, - dark: theming.dark.color1, - })}; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#eee", - dark: "#555", - })}; - border-radius: 3px; - padding: 0 3px; -} - -/* https://stackoverflow.com/a/48694906/12979111 */ -pre > code { - font-family: ${theming.font.code}; - color: #adbac7; - background-color: #22272e; - border: 1px solid #555; - page-break-inside: avoid; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; - display: block; - word-wrap: break-word; -} - -/* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */ -kbd { - margin: 0px 0.1em; - padding: 0.1em 0.6em; - border-radius: 3px; - border: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "1px solid #CCCCCC", - dark: "1px solid #555555", - })}; - color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#333333", - dark: "white", - })}; - line-height: 1.4; - font-size: 10px; - display: inline-block; - box-shadow: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px white", - dark: "0px 1px 0px rgba(255,255,255,0.3), inset 0px 0px 0px 2px black", - })}; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#F7F7F7", - dark: "black", - })}; - text-shadow: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "0 1px 0 white", - dark: "0 1px 0 black", - })}; -} - -table { - border-collapse: collapse; - width: 100%; -} - -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){ - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "#f2f2f2", - dark: "#21272E", - })}; -} - -.white-link a { - text-decoration: none; - color: ${theming.color.linkColor}; - - &:visited { - color: ${theming.color.linkColor}; +// 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; } -} -blockquote { - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "rgba(0, 0, 0, 5%)", - dark: "rgba(255, 255, 255, 7%)", - })}; - - border-left: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "0.4rem solid rgba(0, 0, 0, 10%)", - dark: "0.4rem solid rgba(255, 255, 255, 30%)", - })}; - padding-top: 0.1rem; - padding-right: 1rem; - padding-bottom: 0.1rem; - padding-left: 1.5rem; - - @media screen and (max-width: ${theming.size.screen_size1}) { - margin: 0.5rem; + html, + body, + #root { + min-height: 100vh; + margin: 0; + display: flex; + flex-flow: column; + line-height: 1.5rem; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.backgroundColor1, + dark: theming.dark.backgroundColor1, + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color1, + dark: theming.dark.color1, + })}; + font-size: ${theming.size.medium}; + font-family: ${theming.font.regular}; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } -} -.card { - margin: auto; - background-color: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "white", - dark: "#2F3136", - })}; - padding: 2rem; - border-radius: 6px; - box-shadow: ${(props) => - theming.theme(props.theme.currentTheme, { - light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);", - dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);", - })}; - - @media screen and (max-width: ${theming.size.screen_size1}) { - padding: 1rem; + body::-webkit-scrollbar { + width: ${theming.size.x_small}; } -} -.main-content { - margin-top: 3rem; - width: 50%; + body::-webkit-scrollbar-track { + border-radius: ${theming.size.x2_small}; + background: rgba(0, 0, 0, 0.06); + box-shadow: inset 0 0 5px rgb(0 0 0 / 10%); + } - @media screen and (max-width: ${theming.size.screen_size1}) { - width: auto; - margin: 1rem; + body::-webkit-scrollbar-thumb { + border-radius: ${theming.size.x2_small}; + background: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 10px rgb(0 0 0 / 20%); + } + + #content { + display: inline-block; + flex: 1 1 auto; + margin-bottom: 3rem; margin-top: 3rem; } -} -* { - transition: color 0.1s linear; -} + code { + font-family: ${theming.font.code}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color1, + dark: theming.dark.color1, + })}; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#eee", + dark: "#555", + })}; + border-radius: 3px; + padding: 0 3px; + } + + /* https://stackoverflow.com/a/48694906/12979111 */ + pre > code { + font-family: ${theming.font.code}; + color: #adbac7; + background-color: #22272e; + border: 1px solid #555; + page-break-inside: avoid; + font-size: 15px; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1em 1.5em; + display: block; + word-wrap: break-word; + } + + /* https://www.rgagnon.com/jsdetails/js-nice-effect-the-KBD-tag.html */ + kbd { + margin: 0px 0.1em; + padding: 0.1em 0.6em; + border-radius: 3px; + border: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "1px solid #CCCCCC", + dark: "1px solid #555555", + })}; + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#333333", + dark: "white", + })}; + line-height: 1.4; + font-size: 10px; + display: inline-block; + box-shadow: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px white", + dark: "0px 1px 0px rgba(255,255,255,0.3), inset 0px 0px 0px 2px black", + })}; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#F7F7F7", + dark: "black", + })}; + text-shadow: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "0 1px 0 white", + dark: "0 1px 0 black", + })}; + } + + table { + border-collapse: collapse; + width: 100%; + } + + 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) { + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "#f2f2f2", + dark: "#21272E", + })}; + } + + .white-link a { + text-decoration: none; + color: ${theming.color.linkColor}; + + &:visited { + color: ${theming.color.linkColor}; + } + } + + blockquote { + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "rgba(0, 0, 0, 5%)", + dark: "rgba(255, 255, 255, 7%)", + })}; + + border-left: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "0.4rem solid rgba(0, 0, 0, 10%)", + dark: "0.4rem solid rgba(255, 255, 255, 30%)", + })}; + padding-top: 0.1rem; + padding-right: 1rem; + padding-bottom: 0.1rem; + padding-left: 1.5rem; + + @media screen and (max-width: ${theming.size.screen_size1}) { + margin: 0.5rem; + } + } + + .card { + margin: auto; + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "white", + dark: "#2F3136", + })}; + padding: 2rem; + border-radius: 6px; + box-shadow: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "0 4px 10px rgb(0 0 0 / 5%), 0 0 1px rgb(0 0 0 / 10%);", + dark: "0 4px 10px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);", + })}; + + @media screen and (max-width: ${theming.size.screen_size1}) { + padding: 1rem; + } + } + + .main-content { + margin-top: 3rem; + width: 50%; + + @media screen and (max-width: ${theming.size.screen_size1}) { + width: auto; + 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;