Styled components 6 bump poc

packages/big-design-icons/package.json

@@ -39,7 +39,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -70,7 +70,8 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rimraf": "^5.0.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.8",
+    "stylis": "^4.3.1",
     "tiny-async-pool": "^2.0.1",
     "typescript": "^5.3.3",
     "typescript-styled-plugin": "^0.18.2"

packages/big-design-icons/src/base/index.tsx

@@ -5,7 +5,7 @@ import {
   ThemeInterface,
 } from '@bigcommerce/big-design-theme';
 import React, { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, SVGProps } from 'react';
-import styled from 'styled-components';
+import { IStyledComponent, styled } from 'styled-components';
 
 export interface IconProps extends SVGProps<SVGSVGElement> {
   className?: string;
@@ -20,9 +20,14 @@ export interface PrivateIconProps {
   titleId?: string;
 }
 
+type StyledIcon = IStyledComponent<
+  'web',
+  Omit<IconProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+>;
+
 export function createStyledIcon(
   Icon: ForwardRefExoticComponent<PropsWithoutRef<IconProps> & RefAttributes<SVGSVGElement>>,
-) {
+): StyledIcon {
   const StyledIcon = styled(Icon)`
     vertical-align: middle;
 

packages/big-design-icons/src/flags/base/index.tsx

@@ -1,18 +1,23 @@
 import { theme as defaultTheme, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme';
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, SVGProps } from 'react';
-import styled from 'styled-components';
+import { IStyledComponent, styled } from 'styled-components';
 
 export interface FlagIconProps extends SVGProps<SVGSVGElement> {
   size?: keyof Spacing | number;
   theme?: ThemeInterface;
   title?: string;
 }
 
+type StyledFlagIcon = IStyledComponent<
+  'web',
+  Omit<FlagIconProps, 'ref'> & RefAttributes<SVGSVGElement>
+>;
+
 export function createStyledFlagIcon(
   FlagIcon: ForwardRefExoticComponent<
     PropsWithoutRef<FlagIconProps> & RefAttributes<SVGSVGElement>
   >,
-) {
+): StyledFlagIcon {
   const StyledFlagIcon = styled(FlagIcon)`
     ${({ size, theme }) =>
       size && {

packages/big-design-theme/package.json

@@ -38,7 +38,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -60,7 +60,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.8",
+    "stylis": "^4.3.1",
     "typescript": "^5.3.3",
     "typescript-styled-plugin": "^0.18.2"
   }

packages/big-design-theme/src/helpers/helpers.ts

@@ -1,5 +1,5 @@
 import { em, hideVisually, math, rem, transparentize } from 'polished';
-import { css, FlattenSimpleInterpolation } from 'styled-components';
+import { css, RuleSet } from 'styled-components';
 
 import { themeOptions } from '../options';
 
@@ -8,7 +8,7 @@ export interface Helpers {
   createRGBA(color: string, alpha: number): string;
   remCalc(value: string | number): string;
   emCalc(value: string | number): string;
-  listReset: FlattenSimpleInterpolation;
+  listReset: RuleSet;
   hideVisually: typeof hideVisually;
 }
 

packages/big-design/package.json

@@ -35,6 +35,7 @@
     "@babel/runtime": "^7.15.4",
     "@bigcommerce/big-design-icons": "^0.25.1",
     "@bigcommerce/big-design-theme": "^0.20.1",
+    "@emotion/is-prop-valid": "^1.2.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-datepicker": "^4.4.2",
     "date-fns": "2.30.0",
@@ -49,7 +50,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -77,12 +78,13 @@
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.4.1",
     "jest-fail-on-console": "^3.1.1",
-    "jest-styled-components": "^7.1.1",
+    "jest-styled-components": "^7.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^5.0.0",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.8",
+    "stylis": "^4.3.1",
     "typescript": "^5.3.3",
     "typescript-styled-plugin": "^0.18.2"
   }

packages/big-design/src/components/AccordionPanel/Accordion/styled.tsx

@@ -1,5 +1,5 @@
 import { theme as defaultTheme, remCalc } from '@bigcommerce/big-design-theme';
-import styled, { css } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import { withTransition } from '../../../mixins/transitions';
 import { Box } from '../../Box';

packages/big-design/src/components/AccordionPanel/__snapshots__/spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`it renders accordion panel header 1`] = `
 <h2
-  class="styled__StyledH2-sc-tqnj75-2 styled__StyledH2-sc-1h6ef3q-1 ilmBBr iRmYTD"
+  class="styled__StyledH2-sc-tqnj75-2 styled__StyledH2-sc-1h6ef3q-1 ctTqqD htyVYX"
 >
   Accordion Panel Header
 </h2>

packages/big-design/src/components/AccordionPanel/styled.tsx

@@ -1,5 +1,5 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex } from '../Flex';
 

packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap

@@ -42,7 +42,6 @@ exports[`render default (success) Alert 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -149,7 +148,6 @@ exports[`render error Alert 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -252,7 +250,6 @@ exports[`render info Alert 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -359,7 +356,6 @@ exports[`render warning Alert 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -439,45 +435,26 @@ exports[`renders close button 1`] = `
 }
 
 .c8 {
-  -webkit-transition: all 150ms ease-out;
   transition: all 150ms ease-out;
-  -webkit-transition-property: background-color,border-color,box-shadow,color;
   transition-property: background-color,border-color,box-shadow,color;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   border: 1px solid #D9DCE9;
   border-radius: 0.25rem;
   color: #FFFFFF;
   cursor: pointer;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-flex: none;
-  -ms-flex: none;
   flex: none;
   font-size: 1rem;
   font-weight: 400;
   height: 2.25rem;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
   line-height: 2rem;
   outline: none;
   padding: 0 1rem;
   position: relative;
   text-align: center;
-  -webkit-text-decoration: none;
   text-decoration: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
@@ -496,7 +473,7 @@ exports[`renders close button 1`] = `
   pointer-events: none;
 }
 
-.c8 + .bd-button {
+.c8+.bd-button {
   margin-top: 0.5rem;
 }
 
@@ -517,12 +494,7 @@ exports[`renders close button 1`] = `
 }
 
 .c10 {
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
   align-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   display: inline-grid;
   grid-auto-flow: column;
@@ -584,7 +556,6 @@ exports[`renders close button 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -604,14 +575,14 @@ exports[`renders close button 1`] = `
   vertical-align: middle;
 }
 
-@media (min-width:720px) {
-  .c8 + .bd-button {
+@media (min-width: 720px) {
+  .c8+.bd-button {
     margin-top: 0;
     margin-left: 0.5rem;
   }
 }
 
-@media (min-width:720px) {
+@media (min-width: 720px) {
   .c8 {
     width: auto;
     padding: 0;
@@ -745,7 +716,6 @@ exports[`renders header 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -852,23 +822,14 @@ exports[`renders with external link 1`] = `
 }
 
 .c8 {
-  -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
-  -webkit-transition-property: color;
   transition-property: color;
   color: #3C64F4;
   cursor: pointer;
   font-size: 1rem;
   font-weight: 400;
-  -webkit-text-decoration: none;
   text-decoration: none;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
 }
 
@@ -881,8 +842,6 @@ exports[`renders with external link 1`] = `
 }
 
 .c8 svg {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
   flex-shrink: 0;
   margin-left: 0.25rem;
 }
@@ -904,7 +863,6 @@ exports[`renders with external link 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;
@@ -1027,15 +985,12 @@ exports[`renders with link 1`] = `
 }
 
 .c8 {
-  -webkit-transition: all 70ms ease-out;
   transition: all 70ms ease-out;
-  -webkit-transition-property: color;
   transition-property: color;
   color: #3C64F4;
   cursor: pointer;
   font-size: 1rem;
   font-weight: 400;
-  -webkit-text-decoration: none;
   text-decoration: none;
 }
 
@@ -1064,7 +1019,6 @@ exports[`renders with link 1`] = `
 .c2 {
   border-radius: 0.25rem;
   box-shadow: 0px 2px 12px rgba(49,52,64,0.2);
-  -webkit-animation: jBcSpD .5s ease-in-out;
   animation: jBcSpD .5s ease-in-out;
   background-color: #FFFFFF;
   grid-gap: 0.75rem;

packages/big-design/src/components/Alert/styled.ts

@@ -1,5 +1,5 @@
 import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
-import styled, { css, DefaultTheme, StyledComponent } from 'styled-components';
+import { css, IStyledComponent, styled } from 'styled-components';
 
 import { getBorderStyle } from '../../utils';
 import { Grid } from '../Grid';
@@ -42,7 +42,7 @@ export const StyledHeader = styled(StyleableH4)`
   margin-bottom: ${({ theme }) => theme.spacing.xxSmall};
 `;
 
-export const StyledMessageItem = styled<StyledComponent<'span', DefaultTheme, Partial<TextProps>>>(
+export const StyledMessageItem = styled<IStyledComponent<'web', Partial<TextProps>>>(
   StyleableSmall,
 ).attrs({ as: 'span' })`
   color: ${({ theme }) => theme.colors.secondary70};
@@ -55,6 +55,4 @@ export const StyledLink = styled(Link)`
 `;
 
 StyledAlert.defaultProps = { theme: defaultTheme };
-StyledHeader.defaultProps = { theme: defaultTheme };
-StyledMessageItem.defaultProps = { theme: defaultTheme };
 StyledLink.defaultProps = { theme: defaultTheme };

packages/big-design/src/components/Badge/Badge.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, memo } from 'react';
 
 import { MarginProps } from '../../mixins';
+import { withTransients } from '../../utils/withTransients';
 
 import { StyledBadge } from './styled';
 
@@ -10,7 +11,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, MarginProps
 }
 
 export const Badge: React.FC<BadgeProps> = memo(({ className, style, label, ...props }) =>
-  typeof label === 'string' ? <StyledBadge {...props}>{label}</StyledBadge> : null,
+  typeof label === 'string' ? <StyledBadge {...withTransients(props)}>{label}</StyledBadge> : null,
 );
 
 Badge.displayName = 'Badge';