Upgrade styled-components to V6

package.json

@@ -126,7 +126,7 @@
         "rollup-plugin-typescript2": "^0.36.0",
         "storybook": "^8.6.12",
         "style-loader": "^2.0.0",
-        "styled-components": "^5.3.5",
+        "styled-components": "^6.1.19",
         "typescript": "^4.8.2"
     },
     "peerDependencies": {
@@ -135,7 +135,7 @@
         "@lifesg/react-icons": "^1.5.0",
         "react": "^17.0.2 || ^18.0.0",
         "react-dom": "^17.0.2 || ^18.0.0",
-        "styled-components": "^5.3.5"
+        "styled-components": "^6.1.19"
     },
     "lint-staged": {
         "*.{tsx,ts}": [

src/button/button.style.tsx

@@ -73,9 +73,9 @@ export const Main = styled.button<MainStyleProps>`
                     color: ${props.$buttonIsDanger
                         ? DesignToken.Button.Danger.Primary
                         : Color.Primary};
-                    :hover,
-                    :active,
-                    :focus {
+                    &:hover,
+                    &:active,
+                    &:focus {
                         color: ${props.$buttonIsDanger
                             ? DesignToken.Button.Danger.Hover
                             : Color.Secondary};

src/data-table/data-table.styles.tsx

@@ -58,7 +58,7 @@ export const TableWrapper = styled.div`
     border-radius: 0.5rem;
 
     // Hide scrollbar
-    ::-webkit-scrollbar {
+    &::-webkit-scrollbar {
         display: none;
     }
     * {

src/date-navigator/date-navigator.style.tsx

@@ -15,10 +15,10 @@ export const HeaderArrowButton = styled(ClickableIcon)`
     border-radius: 0.25rem;
     border: 1px solid ${Color.Neutral[5]};
     background-color: ${Color.Neutral[8]};
-    :hover {
+    &:hover {
         background-color: ${Color.Neutral[7]};
     }
-    :disabled {
+    &:disabled {
         cursor: not-allowed;
         background-color: ${Color.Neutral[6]};
     }
@@ -45,7 +45,7 @@ export const StyledDateTextButton = styled(Button.Default)<StyledDateTextProps>`
     ${(props) => {
         if (props.$enableDateClick) {
             return css`
-                :hover {
+                &:hover {
                     cursor: pointer;
                     text-decoration: underline;
                     text-underline-position: under;
@@ -54,7 +54,7 @@ export const StyledDateTextButton = styled(Button.Default)<StyledDateTextProps>`
         }
         return css`
             background-color: ${Color.Neutral[7]};
-            :hover {
+            &:hover {
                 cursor: default;
             }
         `;

src/design-token/types.ts

@@ -1,6 +1,11 @@
-import { SimpleInterpolation, css } from "styled-components";
+import { CSSKeyframes, CSSObject, css } from "styled-components";
 
-export type CssValue = SimpleInterpolation | ReturnType<typeof css>;
+export type CssValue =
+    | CSSObject
+    | string
+    | number
+    | CSSKeyframes
+    | ReturnType<typeof css>;
 
 export interface DesignTokenSet {
     InputBoxShadow: CssValue;

src/divider/divider.style.tsx

@@ -14,7 +14,7 @@ interface StyleProps {
 // =============================================================================
 // STYLING
 // =============================================================================
-const dashedLineStyle = () => (props: StyleProps) => {
+const dashedLineStyle = (props: StyleProps) => {
     let color;
 
     if (props.$color && typeof props.$color === "function") {
@@ -42,9 +42,7 @@ export const Line = styled.hr<StyleProps>`
     ${(props) => {
         switch (props.$lineStyle) {
             case "dashed":
-                return css`
-                    ${dashedLineStyle}
-                `;
+                return dashedLineStyle(props);
             case "solid":
                 return css`
                     height: ${props.$thickness}px;

src/drawer/drawer.styles.tsx

@@ -87,8 +87,8 @@ export const CloseButton = styled(ClickableIcon)`
     padding: 0;
     order: -1; // show button on the left of the header
 
-    :active,
-    :focus {
+    &:active,
+    &:focus {
         color: ${Color.Primary};
     }
 

src/error-display/error-display.style.tsx

@@ -60,9 +60,9 @@ export const DescriptionContainer = styled.div`
         ${TextStyleHelper.getTextStyle("Body", "semibold")}
         color: ${Color.Primary};
 
-        :hover,
-        :active,
-        :focus {
+        &:hover,
+        &:active,
+        &:focus {
             color: ${Color.Secondary};
         }
     }

src/file-download/file-list-card/file-list-card.styles.tsx

@@ -24,7 +24,7 @@ export const Item = styled.li`
     width: 100%;
     border: none;
 
-    :not(:last-child) {
+    &:not(:last-child) {
         margin-bottom: 1rem;
     }
 `;
@@ -41,7 +41,7 @@ export const Box = styled.div`
     ${MediaQuery.MaxWidth.mobileL} {
         padding: 1rem;
     }
-    :hover {
+    &:hover {
         background: ${Color.Accent.Light[5]};
     }
 `;
@@ -184,7 +184,7 @@ export const ActionContainer = styled.div`
 export const IconButton = styled(DSIconButton)`
     min-width: unset;
 
-    :not(:last-child) {
+    &:not(:last-child) {
         margin-right: 1rem;
     }
 `;

src/file-upload/file-item-edit.styles.tsx

@@ -20,7 +20,7 @@ export const Item = styled.li`
     padding: 2rem 0;
     background: transparent;
 
-    :not(:last-child) {
+    &:not(:last-child) {
         border-bottom: 1px solid ${Color.Neutral[5]};
     }
 `;
@@ -84,13 +84,13 @@ export const ActionButtonsSection = styled.div<ActionButtonSectionStyleProps>`
 
 export const ActionButton = styled(Button.Small)`
     width: 7.5rem;
-    :not(:last-of-type) {
+    &:not(:last-of-type) {
         margin-right: 1rem;
     }
 
     ${MediaQuery.MaxWidth.mobileL} {
         width: 100%;
-        :not(:last-of-type) {
+        &:not(:last-of-type) {
             margin-bottom: 1rem;
         }
     }