chore: remove stylelint processor

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%;
     `,

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)',

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;
 `;
 

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};
 `;

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;

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;

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;
 `;