diff --git a/.stylelintrc b/.stylelintrc
index 7227b89..374d08d 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,5 +1,4 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
   "extends": ["stylelint-config-standard", "stylelint-config-styled-components", "stylelint-prettier/recommended"],
   "rules": {
     "value-keyword-case": null
diff --git a/package.json b/package.json
index 37d5f15..785b3e4 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
         "stylelint-config-standard": "^20.0.0",
         "stylelint-config-styled-components": "^0.1.1",
         "stylelint-prettier": "^1.1.2",
-        "stylelint-processor-styled-components": "^1.10.0",
         "ts-jest": "^26.4.4",
         "ts-loader": "^8.0.12",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
diff --git a/src/design-system/atoms/button/Button.styled.ts b/src/design-system/atoms/button/Button.styled.ts
index db74490..d0e7b1c 100644
--- a/src/design-system/atoms/button/Button.styled.ts
+++ b/src/design-system/atoms/button/Button.styled.ts
@@ -10,6 +10,7 @@ export const IconContainer = styled.div`
 
 const base = css`
     ${fontCSS}
+
     appearance: none;
     display: block;
     background-color: ${palette.taupe300};
@@ -71,10 +72,12 @@ const colors = {
 const sizes = {
     small: css`
         ${text300}
+
         padding: 4px 8px;
     `,
     large: css`
         ${text400}
+
         padding: 12px 32px;
         width: 100%;
     `,
diff --git a/src/design-system/atoms/sparkle/Shapes.tsx b/src/design-system/atoms/sparkle/Shapes.tsx
index dd093f5..be77b89 100644
--- a/src/design-system/atoms/sparkle/Shapes.tsx
+++ b/src/design-system/atoms/sparkle/Shapes.tsx
@@ -110,6 +110,7 @@ export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
             height="20%"
             style={{
                 ...shapeMixin,
+
                 top: 0,
                 left: 0,
             }}
@@ -120,6 +121,7 @@ export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
             height="20%"
             style={{
                 ...shapeMixin,
+
                 top: '45%',
                 left: '15%',
             }}
@@ -130,6 +132,7 @@ export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
             height="10%"
             style={{
                 ...shapeMixin,
+
                 top: '30%',
                 left: '-15%',
                 transform: 'rotate(30deg)',
@@ -141,6 +144,7 @@ export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
             height="30%"
             style={{
                 ...shapeMixin,
+
                 bottom: '0%',
                 right: '10%',
             }}
@@ -156,6 +160,7 @@ export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
             height="15%"
             style={{
                 ...shapeMixin,
+
                 top: '60%',
                 left: '20%',
             }}
@@ -166,6 +171,7 @@ export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
             height="20%"
             style={{
                 ...shapeMixin,
+
                 top: 0,
                 right: 0,
             }}
@@ -176,6 +182,7 @@ export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
             height="15%"
             style={{
                 ...shapeMixin,
+
                 top: '80%',
                 right: 0,
             }}
@@ -186,6 +193,7 @@ export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
             height="30%"
             style={{
                 ...shapeMixin,
+
                 top: '20%',
                 left: '30%',
                 transform: 'rotate(30deg)',
diff --git a/src/design-system/atoms/typography/typography.tsx b/src/design-system/atoms/typography/typography.tsx
index 2180d63..efc7669 100644
--- a/src/design-system/atoms/typography/typography.tsx
+++ b/src/design-system/atoms/typography/typography.tsx
@@ -13,46 +13,55 @@ const reset = css`
 
 export const text900 = css`
     ${reset}
+
     font-size: 2.3rem;
 `;
 
 export const text800 = css`
     ${reset}
+
     font-size: 2rem;
 `;
 
 export const text700 = css`
     ${reset}
+
     font-size: 1.7rem;
 `;
 
 export const text600 = css`
     ${reset}
+
     font-size: 1.4rem;
 `;
 
 export const text500 = css`
     ${reset}
+
     font-size: 1.2rem;
 `;
 
 export const text400 = css`
     ${reset}
+
     font-size: 1rem;
 `;
 
 export const text300 = css`
     ${reset}
+
     font-size: 0.9rem;
 `;
 
 export const text200 = css`
     ${reset}
+
     font-size: 0.7rem;
 `;
 
 export const text100 = css`
     ${reset}
+
     font-size: 0.5rem;
 `;
 
diff --git a/src/design-system/molecules/error-banner/ErrorBanner.styled.ts b/src/design-system/molecules/error-banner/ErrorBanner.styled.ts
index 689d978..b697f5f 100644
--- a/src/design-system/molecules/error-banner/ErrorBanner.styled.ts
+++ b/src/design-system/molecules/error-banner/ErrorBanner.styled.ts
@@ -36,5 +36,6 @@ export const ErrorText = styled.div`
 
 export const ErrorTextLower = styled.div`
     ${text300}
+
     color: ${palette.taupe500};
 `;
diff --git a/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts b/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
index cd9e7df..8b7a994 100644
--- a/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
+++ b/src/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
@@ -28,6 +28,7 @@ export const MaxWidthTitle = styled.div`
 
 export const PermissionTagStyled = styled.div<{ hiddenOnSmall?: boolean }>`
     ${text200}
+
     display: inline-block;
     background-color: ${palette.taupe200};
     padding: 4px 6px;
@@ -54,6 +55,7 @@ export const PermissionTagStyled = styled.div<{ hiddenOnSmall?: boolean }>`
 
 export const CardBase = styled.div`
     ${text500}
+
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
index f49996e..2ee13bb 100644
--- a/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
+++ b/src/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
@@ -21,6 +21,10 @@ export const DiscordRole = styled.div<{
     discordRole: Role;
     isRoleypoly: boolean;
 }>`
+    /* stylelint-disable function-name-case, function-whitespace-after */
+
+    /* Disabled due to postcss bug parsing the below functions as CSS and not a JS interpolation */
+
     padding: 6px 10px;
     color: ${(props) => numberToChroma(props.discordRole.color).css()};
     border-radius: 3px;
diff --git a/src/design-system/organisms/landing/Landing.styled.ts b/src/design-system/organisms/landing/Landing.styled.ts
index 79a5659..eb72c48 100644
--- a/src/design-system/organisms/landing/Landing.styled.ts
+++ b/src/design-system/organisms/landing/Landing.styled.ts
@@ -10,6 +10,7 @@ export const HeroText = styled.div`
 
 export const DemoSubtitle = styled.p`
     ${text400}
+
     text-align: center;
     margin-top: 0.4em;
 `;
diff --git a/yarn.lock b/yarn.lock
index ca60770..4b8fbeb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -352,7 +352,7 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.12.7", "@babel/parser@^7.4.3", "@babel/parser@^7.8.3":
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.12.7", "@babel/parser@^7.4.3":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.7.tgz#fee7b39fe809d0e73e5b25eecaf5780ef3d73056"
   integrity sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==
@@ -1073,7 +1073,7 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.5":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f"
   integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==
@@ -13093,16 +13093,6 @@ stylelint-prettier@^1.1.2:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-stylelint-processor-styled-components@^1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.10.0.tgz#8082fc68779476aac411d3afffac0bc833d77a29"
-  integrity sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA==
-  dependencies:
-    "@babel/parser" "^7.8.3"
-    "@babel/traverse" "^7.8.3"
-    micromatch "^4.0.2"
-    postcss "^7.0.26"
-
 stylelint@^13.8.0:
   version "13.8.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.8.0.tgz#446765dbe25e3617f819a0165956faf2563ddc23"