styled-components · quantizor · Jul 3, 2023 · Jun 29, 2023 · Jul 3, 2023 · Jul 3, 2023
diff --git a/packages/styled-components/src/models/StyledComponent.ts b/packages/styled-components/src/models/StyledComponent.ts
@@ -110,8 +110,7 @@ let seenUnknownProps = new Set();
 function useStyledComponentImpl<Props extends object>(
   forwardedComponent: IStyledComponent<'web', Props>,
   props: ExecutionProps & Props,
-  forwardedRef: Ref<Element>,
-  isStatic: boolean
+  forwardedRef: Ref<Element>
 ) {
   const {
     attrs: componentAttrs,
@@ -164,7 +163,7 @@ function useStyledComponentImpl<Props extends object>(
 
   const generatedClassName = useInjectedStyle(componentStyle, context);
 
-  if (process.env.NODE_ENV !== 'production' && !isStatic && forwardedComponent.warnTooManyClasses) {
+  if (process.env.NODE_ENV !== 'production' && forwardedComponent.warnTooManyClasses) {
     forwardedComponent.warnTooManyClasses(generatedClassName);
   }
 
@@ -242,22 +241,19 @@ function createStyledComponent<
     isTargetStyledComp ? (styledComponentTarget.componentStyle as ComponentStyle) : undefined
   );
 
-  // statically styled-components don't need to build an execution context object,
-  // and shouldn't be increasing the number of class names
-  const isStatic = componentStyle.isStatic && attrs.length === 0;
-  function forwardRef(props: ExecutionProps & OuterProps, ref: Ref<Element>) {
-    return useStyledComponentImpl<OuterProps>(WrappedStyledComponent, props, ref, isStatic);
+  function forwardRefRender(props: ExecutionProps & OuterProps, ref: Ref<Element>) {
+    return useStyledComponentImpl<OuterProps>(WrappedStyledComponent, props, ref);
   }
 
-  forwardRef.displayName = displayName;
+  forwardRefRender.displayName = displayName;
 
   /**
    * forwardRef creates a new interim component, which we'll take advantage of
    * instead of extending ParentComponent to create _another_ interim class
    */
-  let WrappedStyledComponent = React.forwardRef(forwardRef) as unknown as IStyledComponent<
+  let WrappedStyledComponent = React.forwardRef(forwardRefRender) as unknown as IStyledComponent<
     'web',
-    OuterProps
+    any
   > &
     Statics;
   WrappedStyledComponent.attrs = finalAttrs;

diff --git a/packages/styled-components/src/models/StyledNativeComponent.ts b/packages/styled-components/src/models/StyledNativeComponent.ts
@@ -155,7 +155,7 @@ export default (InlineStyle: IInlineStyleConstructor<any>) => {
      */
     let WrappedStyledComponent = React.forwardRef(forwardRef) as unknown as IStyledComponent<
       'native',
-      OuterProps
+      any
     > &
       Statics;
 

diff --git a/packages/styled-components/src/sheet/dom.ts b/packages/styled-components/src/sheet/dom.ts
@@ -4,7 +4,9 @@ import getNonce from '../utils/nonce';
 
 /** Find last style element if any inside target */
 const findLastStyleTag = (target: HTMLElement): void | HTMLStyleElement => {
-  return Array.from(target.querySelectorAll<HTMLStyleElement>(`style[${SC_ATTR}]`)).at(-1);
+  const arr = Array.from(target.querySelectorAll<HTMLStyleElement>(`style[${SC_ATTR}]`));
+
+  return arr[arr.length - 1];
 };
 
 /** Create a style element inside `target` or <head> after the last */

diff --git a/packages/styled-components/src/types.ts b/packages/styled-components/src/types.ts
@@ -6,7 +6,7 @@ import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
 
 export { CSS, DefaultTheme };
 
-interface ExoticComponentWithDisplayName<P = any> extends React.ExoticComponent<P> {
+interface ExoticComponentWithDisplayName<P extends object = {}> extends React.ExoticComponent<P> {
   defaultProps?: Partial<P>;
   displayName?: string;
 }
@@ -22,9 +22,15 @@ export type BaseObject = {};
 // from https://stackoverflow.com/a/69852402
 export type OmitNever<T> = { [K in keyof T as T[K] extends never ? never : K]: T[K] };
 
+type FastOmit<T extends object, U extends string | number | symbol> = {
+  [K in keyof T as K extends U ? never : K]: T[K];
+};
+
 export type Runtime = 'web' | 'native';
 
-export type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
+export type AnyComponent<P extends object = any> =
+  | ExoticComponentWithDisplayName<P>
+  | React.ComponentType<P>;
 
 export type KnownTarget = Exclude<keyof JSX.IntrinsicElements, 'symbol' | 'object'> | AnyComponent;
 
@@ -161,15 +167,15 @@ export type PolymorphicComponentProps<
   ForwardedAsTargetProps extends object = ForwardedAsTarget extends KnownTarget
     ? React.ComponentPropsWithoutRef<ForwardedAsTarget>
     : {}
-> = Omit<
+> = FastOmit<
   Substitute<
     BaseProps,
     // "as" wins over "forwardedAs" when it comes to prop interface
     Substitute<ForwardedAsTargetProps, AsTargetProps>
   >,
   keyof ExecutionProps
 > &
-  Omit<ExecutionProps, 'as' | 'forwardedAs'> & {
+  FastOmit<ExecutionProps, 'as' | 'forwardedAs'> & {
     as?: AsTarget;
     forwardedAs?: ForwardedAsTarget;
   };
@@ -195,7 +201,7 @@ export interface IStyledComponent<R extends Runtime, Props extends object = Base
   extends PolymorphicComponent<R, Props>,
     IStyledStatics<R, Props>,
     StyledComponentBrand {
-  defaultProps?: Partial<Substitute<ExecutionProps, Props>>;
+  defaultProps?: ExecutionProps & Partial<Props>;
   toString: () => string;
 }
 
@@ -259,4 +265,4 @@ export type CSSProp = Interpolation<any>;
 // Prevents TypeScript from inferring generic argument
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 
-export type Substitute<A extends object, B extends object> = Omit<A, keyof B> & B;
+export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;