fix stylelint

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-recommended",
+    "stylelint-config-standard",
     "stylelint-config-styled-components"
   ],
   "syntax": "css"

package-lock.json

@@ -53,7 +53,7 @@
         "next-sitemap": "^1.6.99",
         "npm-run-all": "^4.1.5",
         "stylelint": "^13.13.1",
-        "stylelint-config-recommended": "^5.0.0",
+        "stylelint-config-standard": "^22.0.0",
         "stylelint-config-styled-components": "^0.1.1",
         "testcafe": "^1.14.2",
         "typescript": "^4.3.2"
@@ -11748,6 +11748,18 @@
         "stylelint": "^13.13.0"
       }
     },
+    "node_modules/stylelint-config-standard": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-22.0.0.tgz",
+      "integrity": "sha512-uQVNi87SHjqTm8+4NIP5NMAyY/arXrBgimaaT7skvRfE9u3JKXRK9KBkbr4pVmeciuCcs64kAdjlxfq6Rur7Hw==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^5.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^13.13.0"
+      }
+    },
     "node_modules/stylelint-config-styled-components": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz",
@@ -23419,6 +23431,15 @@
       "dev": true,
       "requires": {}
     },
+    "stylelint-config-standard": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-22.0.0.tgz",
+      "integrity": "sha512-uQVNi87SHjqTm8+4NIP5NMAyY/arXrBgimaaT7skvRfE9u3JKXRK9KBkbr4pVmeciuCcs64kAdjlxfq6Rur7Hw==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended": "^5.0.0"
+      }
+    },
     "stylelint-config-styled-components": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz",

package.json

@@ -54,7 +54,7 @@
     "next-sitemap": "^1.6.99",
     "npm-run-all": "^4.1.5",
     "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^5.0.0",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "testcafe": "^1.14.2",
     "typescript": "^4.3.2"

src/components/Accordion/Accordion.tsx

@@ -30,7 +30,6 @@ const Container = styled.div`
       font-size: 1.125rem;
       margin: auto;
     }
-
   }
 
   & > div {

src/components/Card.tsx

@@ -42,7 +42,6 @@ const StyledCard = styled.article`
     }
   }
 
-
   h3 {
     padding: 0.5rem;
     font-size: 1.5rem;
@@ -54,7 +53,6 @@ const StyledCard = styled.article`
 
     button {
       cursor: pointer;
-
       padding: 0.8rem 2rem;
       margin: 0.5rem;
       font-size: 0.8rem;
@@ -74,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
 }) => (
   <StyledCard {...props}>
     {image && (
-    <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
+      <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
     )}
     <p>{startTime}</p>
     <h3>{title}</h3>

src/components/CrossFadeImages.tsx

@@ -45,21 +45,22 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
 
   const animation = keyframes`
     0% {
-      opacity:1;
+      opacity: 1;
     }
     ${(presentationTime / TOTAL_TIME) * 100}% {
-      opacity:1;
+      opacity: 1;
     }
     ${(1 / len) * 100}% {
-      opacity:0;
+      opacity: 0;
     }
     ${100 - ((fadeTime / TOTAL_TIME) * 100)}% {
-      opacity:0;
+      opacity: 0;
     }
+
     100% {
-      opacity:1;
+      opacity: 1;
     }
-  `;
+`;
 
   const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
 

src/components/Footer/FooterContent.tsx

@@ -7,6 +7,7 @@ import breakpoints from "@theme/breakpoints";
 const Columns = styled.div`
   display: flex;
   justify-content: space-between;
+
   & > div > div {
     margin-bottom: 1rem;
   }
@@ -56,9 +57,11 @@ const MarginSpace = styled.div`
 
 const Map = styled.div`
   flex: 1;
+
   @media screen and (max-width: ${breakpoints.mobile}) {
     display: none;
   }
+
   iframe {
     border: none;
   }

src/components/Header.tsx

@@ -11,6 +11,7 @@ import BlockScroll from "./BlockScroll";
 const StyledHeader = styled.header`
   display: flex;
   flex-flow: row nowrap;
+
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column nowrap;
   }
@@ -20,11 +21,9 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>`
   position: sticky;
   top: 0;
   z-index: 10;
-
   padding: 0 1rem;
   background-color: ${colors.darkBlue};
   transition: all 200ms ease-out;
-
   height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")};
 
   ${(p) => (p.$isHidden ? (`

src/components/Hero/Hero.tsx

@@ -9,11 +9,11 @@ const Container = styled.div`
   justify-content: space-between;
   position: relative;
   padding: 0;
-
   min-height: 75vh;
 
   section {
     padding: 2rem 6rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding: 1rem;
     }
@@ -40,6 +40,7 @@ const Container = styled.div`
 
   color: ${colors.white};
   background-color: ${colors.darkBlue};
+
   a:hover {
     color: ${colors.white};
   }

src/components/Hero/HeroAside.tsx

@@ -39,6 +39,7 @@ interface HeroAsideProps {
 // TODO: Color combos
 const Aside = styled.aside<{ colors: string }>`
   ${(p) => p.colors}
+
   flex: 4;
   display: flex;
   flex-direction: column;
@@ -58,7 +59,6 @@ const Aside = styled.aside<{ colors: string }>`
       line-height: 2rem;
     }
 
-
     & > p {
       font-weight: 600;
       margin-bottom: 2rem;

src/components/Hero/HeroPrimaryButtons.tsx

@@ -20,7 +20,7 @@ const Buttons = styled.div<{ row?: boolean }>`
     margin: 0.5rem;
     font-size: 0.8rem;
     font-weight: 800;
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid ${colors.lightTurquoise};
 

src/components/Hero/HeroPrimarySection.tsx

@@ -29,7 +29,7 @@ const Section = styled.section`
 
     &:hover {
       color: ${colors.white};
-      text-decoration: none
+      text-decoration: none;
     }
   }
 `;

src/components/Loader.tsx

@@ -15,9 +15,9 @@ const Loader = styled((props) => (
   height: 1em;
 
   @keyframes rotation {
-    0% { transform: rotate(0deg) }
-    50% { transform: rotate(180deg) }
-    100% { transform: rotate(360deg) }
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(180deg); }
+    100% { transform: rotate(360deg); }
   }
 
   & > div {

src/components/Navigation.tsx

@@ -30,7 +30,6 @@ const Nav = styled.div`
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
-
   font-size: 0.8rem;
   color: ${colors.lightBlue};
   margin-left: 5rem;
@@ -53,7 +52,6 @@ const Nav = styled.div`
   svg {
     width: 1.5rem;
     height: 1.5rem;
-
     fill: ${colors.white};
     color: ${colors.white};
   }

src/components/PageLink.tsx

@@ -32,8 +32,8 @@ const StyledPageLink = styled.div`
     margin-left: 1rem;
     text-decoration: none;
     font-weight: normal;
-
     color: ${colors.blue1};
+
     &:hover {
       color: ${colors.darkBlue};
     }

src/components/Sections/CTASection.tsx

@@ -3,15 +3,73 @@ import styled from "styled-components";
 import colors from "@theme/colors";
 import { Link } from "@components/index";
 
-const Section = styled.section<{ colors: string }>`
-  ${(p) => p.colors}
+type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
+
+const textColors = (bgColor: Colors) => {
+  switch (bgColor) {
+    case "orange1": return (
+      `
+        color: ${colors.white};
+        background-color: ${colors[bgColor]};
+        a:hover {
+          color: ${colors.darkBlue};
+        }
+      `
+    );
+    case "sik100Blue": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.sik100Gold};
+      `
+    );
+    case "darkBlue": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.white};
+      `
+    );
+
+    case "lightBlue": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.darkBlue};
+        a:hover {
+          color: ${colors.white};
+        }
+      `
+    );
+
+    case "lightTurquoise": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.darkBlue};
+        a:hover {
+          color: ${colors.white};
+        }
+      `
+    );
+    case "blue1": return (
+      `
+        background-color: ${colors[bgColor]};
+        color: ${colors.white};
+        a:hover {
+          color: ${colors.darkBlue};
+        }
+      `
+    );
+    default: return "";
+  }
+};
+
+const Section = styled.section<{ bgColor: Colors }>`
+  ${({ bgColor }) => textColors(bgColor)}
 
   display: flex;
   justify-content: center;
   text-align: center;
   align-items: baseline;
   padding: 2rem 0;
-  border: 0.5rem colors.sik100Gold;
+  border: 0.5rem ${colors.sik100Gold};
   flex-flow: row wrap;
 
   a {
@@ -29,71 +87,25 @@ const Section = styled.section<{ colors: string }>`
 
   & > h1 {
     a {
-     
-    text-decoration: underline;
+      text-decoration: underline;
     }
+
     a:hover {
       text-decoration: none;
     }
   }
 `;
 
-type Colors = "orange1" | "lightBlue" | "darkBlue" | "blue1" | "lightTurquoise" | "sik100Blue";
-
 interface CTASectionProps extends React.HTMLAttributes<HTMLDivElement> {
   bgColor?: Colors;
   link?: string;
   linkText?: string;
 }
 
-const textColors = (bgColor: Colors) => {
-  switch (bgColor) {
-    case "orange1": return `
-color: ${colors.white};
-background-color: ${colors[bgColor]};
-a:hover {
-  color: ${colors.darkBlue};
-}
-`;
-    case "sik100Blue": return `
-background-color: ${colors[bgColor]};
-color: ${colors.sik100Gold};
-  `;
-    case "darkBlue": return `
-background-color: ${colors[bgColor]};
-color: ${colors.white};
-  `;
-
-    case "lightBlue": return `
-background-color: ${colors[bgColor]};
-color: ${colors.darkBlue};
-a:hover {
-  color: ${colors.white};
-}
-  `;
-
-    case "lightTurquoise": return `
-background-color: ${colors[bgColor]};
-color: ${colors.darkBlue};
-a:hover {
-  color: ${colors.white};
-}
-  `;
-    case "blue1": return `
-background-color: ${colors[bgColor]};
-color: ${colors.white};
-a:hover {
-  color: ${colors.darkBlue};
-}
-  `;
-    default: return "";
-  }
-};
-
 const CTASection: React.FC<CTASectionProps> = ({
   bgColor = "orange1", link, linkText, children, ...props
 }) => (
-  <Section colors={textColors(bgColor)} {...props}>
+  <Section bgColor={bgColor} {...props}>
     <h1>{children}</h1>
     {link && (
       <Link to={link}>

src/components/Sections/CardSection.tsx

@@ -3,7 +3,6 @@ import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
 const CardSection = styled.section`
-
   h6 {
     color: ${colors.orange1};
   }

src/components/Sections/FullWidthSection.tsx

@@ -4,7 +4,6 @@ import styled from "styled-components";
 const StyledSection = styled.section`
   display: block;
   padding: 1.5rem;
-
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   grid-template-areas:

src/components/Sections/TextSection.tsx

@@ -6,10 +6,8 @@ import breakpoints from "@theme/breakpoints";
 const StyledSection = styled.section`
   display: grid;
   padding: 1.5rem;
-
   word-break: break-word;
   hyphens: auto;
-
   grid-template-columns: 1fr 2fr 1fr;
   grid-template-rows: 1fr auto;
   grid-template-areas:
@@ -45,7 +43,8 @@ const StyledSection = styled.section`
     margin-top: 0;
   }
 
-  & > div, p {
+  & > div,
+  p {
     grid-area: content;
   }
 
@@ -69,13 +68,16 @@ const StyledSection = styled.section`
   & > aside:first-of-type {
     grid-area: rightaside;
     padding-left: 1.5rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }
   }
+
   & > aside:nth-of-type(2) {
     grid-area: leftaside;
     padding-right: 1.5rem;
+
     @media screen and (max-width: ${breakpoints.mobile}) {
       padding-left: 0;
     }

src/components/Widgets/Checkbox/Checkbox.tsx

@@ -34,7 +34,7 @@ const CustomCBoxElement = styled.span<{ checked?: boolean }>`
   width: 1em;
   background-color: ${(props) => (props.checked ? colors.blue1 : colors.grey2)};
 
-  &:focus &:before {
+  &:focus &::before {
     transition: box-shadow 150ms ease;
     content: '';
     display: block;

src/components/Widgets/RadioButton/RadioButton.tsx

@@ -28,7 +28,9 @@ const CustomRadioElement = styled.span<{ checked?: boolean }>`
   left: 0;
   height: 1em;
   width: 1em;
-  background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")}; /* blue1 or grey2 */
+
+  /* blue1 or grey2 */
+  background-color: ${(props) => (props.checked ? "#57b2df" : "#efece4")};
   border-radius: 50%;
 `;
 

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -12,7 +12,6 @@ const Widget = styled.div`
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-
     background: none;
     padding: 0;
     margin: 1rem 0;
@@ -21,7 +20,6 @@ const Widget = styled.div`
       margin-right: 8px !important;
       margin-top: -2px !important;
     }
-
   }
 `;
 

src/pages/404.tsx

@@ -9,6 +9,7 @@ const NotFound = styled.main`
   display: flex;
   justify-content: center;
   align-items: center;
+
   p {
     text-align: center;
     font-size: 4rem;

src/pages/_app.tsx

@@ -21,6 +21,7 @@ const GlobalCommonStyles = createGlobalStyle`
 
 html {
   font-family: ${fontFamily};
+
   /* 12px */
   font-size: ${fontSize * 0.75}pt;
   line-height: ${lineHeight};
@@ -106,7 +107,6 @@ li {
   font-weight: 600;
 }
 
-
 a {
   text-decoration: underline;
   color: ${colors.blue1};

src/views/ActualPage/ActualPageView.tsx

@@ -22,6 +22,7 @@ const Gallery = styled.div`
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column;
+
     & > div {
       min-height: 100vw;
     }

src/views/CorporatePage/JobAdList.tsx

@@ -12,6 +12,7 @@ interface JobAdListProps {
 
 const List = styled.ul`
   padding: 0;
+
   li {
     margin: 1rem 0;
     list-style: none;

src/views/EventPage/EventPageView.tsx

@@ -22,6 +22,7 @@ const StyledTextSection = styled(TextSection)`
 
   & > h1 {
     color: ${colors.darkBlue};
+
     p {
       color: ${colors.orange1};
     }

src/views/FeedPage/FeedPageView.tsx

@@ -19,6 +19,7 @@ const StyledTextSection = styled(TextSection)`
 
   & > h1 {
     color: ${colors.darkBlue};
+
     p {
       color: ${colors.orange1};
     }

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -14,7 +14,7 @@ const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 
 const ImageContainer = styled.div`
   width: 100%;
-  display: block
+  display: block;
 `;
 
 const FreshmenPageView: React.FC = () => (

src/views/FrontPage/FrontPageView.tsx

@@ -42,6 +42,7 @@ const cardTimeOpts: Intl.DateTimeFormatOptions = {
 
 const SponsorReel = styled.div`
   text-align: center;
+
   & > div {
     display: flex;
     flex-flow: row wrap;
@@ -54,6 +55,7 @@ const SponsorReel = styled.div`
       min-width: 200px;
     }
   }
+
   a {
     color: ${colors.blue1};
     text-decoration: underline;

src/views/GuildPage/GuildPageView.tsx

@@ -30,16 +30,18 @@ const Column = styled.div`
 
   section:last-of-type {
     background-color: ${colors.lightBlue};
+
     p {
       a {
         font-weight: normal;
       }
     }
   }
+
   ul {
     list-style: none;
 
-    li:before {
+    li::before {
       content: attr(data-icon);
       margin-right: 4px;
     }

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -22,6 +22,7 @@ const Gallery = styled.div`
 
   @media screen and (max-width: ${breakpoints.mobile}) {
     flex-flow: column;
+
     & > div {
       min-height: 100vw;
     }

src/views/SignUpPage/SignUpPageView.tsx

@@ -32,6 +32,7 @@ const StyledSection = styled(TextSection)`
 
   & > aside {
     justify-content: start;
+
     li {
       padding-bottom: 0.3rem;
     }

src/views/common/FormWrapper.tsx

@@ -53,8 +53,7 @@ const FormStyleWrapper = styled(Form)`
   input[type="email"],
   input[type="number"],
   textarea,
-  select
-  {
+  select {
     display: block;
     width: 100%;
   }

src/views/common/LoadingView.tsx

@@ -22,10 +22,13 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 9984px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 9984px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 9984px 0 0 -5px ${colors.white};
     }
   }
@@ -34,10 +37,13 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 9999px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 9999px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 9999px 0 0 -5px ${colors.white};
     }
   }
@@ -46,17 +52,19 @@ const DotPulse = styled.div`
     0% {
       box-shadow: 10014px 0 0 -5px ${colors.white};
     }
+
     30% {
       box-shadow: 10014px 0 0 2px ${colors.white};
     }
-    60%, 100% {
+
+    60%,
+    100% {
       box-shadow: 10014px 0 0 -5px ${colors.white};
     }
   }
 
   display: inline-block;
   margin-left: 1.5rem;
-
   position: relative;
   left: -9999px;
   width: 10px;
@@ -66,9 +74,10 @@ const DotPulse = styled.div`
   color: ${colors.white};
   box-shadow: 9999px 0 0 -5px ${colors.white};
   animation: dotPulse 1.5s infinite linear;
-  animation-delay: .25s;
+  animation-delay: 0.25s;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     content: '';
     display: inline-block;
     position: absolute;
@@ -89,7 +98,7 @@ const DotPulse = styled.div`
   &::after {
     box-shadow: 10014px 0 0 -5px ${colors.white};
     animation: dotPulseAfter 1.5s infinite linear;
-    animation-delay: .5s;
+    animation-delay: 0.5s;
   }
 `;
 

src/views/common/MarkdownStyles.tsx

@@ -7,7 +7,8 @@ const MarkdownStyles = styled(ReactMarkdown)`
     color: ${colors.black};
   }
 
-  h1, h3 {
+  h1,
+  h3 {
     color: ${colors.orange2};
   }