fix(types): prevent prop bleed on styling properties

This branch will fix #4053
styled-components · Jun 25, 2023 · c0f8015 · c0f8015
1 parent 1f771fe
commit c0f8015
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 11 deletions.
diff --git a/packages/styled-components/src/test/types.tsx b/packages/styled-components/src/test/types.tsx
@@ -377,3 +377,29 @@ styled.div<CSSPropTestType>(p => ({
 
 // object styles
 styled.div({ color: 'red', '@media (min-width: 500px)': { fontSize: '11px' } });
+
+type TextProps = React.PropsWithChildren<{
+  color: 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+}>;
+
+const sizeMap = {
+  sm: '10px',
+  md: '14px',
+  lg: '16px',
+} as const;
+
+const Text2 = styled('span')<TextProps>(({ color, size }) => ({
+  color: color === 'primary' ? '#444' : color === 'secondary' ? 'maroon' : 'black',
+  fontSize: size && sizeMap[size],
+}));
+
+type ExtendingTextProps = React.PropsWithChildren<{ hasResult: boolean }>;
+const ExtendingText = styled(Text2)<ExtendingTextProps>(({ hasResult }) => ({
+  opacity: !hasResult ? '100%' : '50%',
+}));
+
+const StylingText = styled(Text2)({
+  display: 'block',
+  margin: '10px 0',
+});
diff --git a/packages/styled-components/src/types.ts b/packages/styled-components/src/types.ts
@@ -71,7 +71,7 @@ export interface ExecutionContext extends ExecutionProps {
 }
 
 export interface StyleFunction<Props extends object> {
-  (executionContext: ExecutionContext & Props): Interpolation<Props>;
+  (executionContext: ExecutionContext & Props): Interpolation<object>;
 }
 
 export type Interpolation<Props extends object> =
@@ -230,16 +230,15 @@ export interface IInlineStyle<Props extends object> {
   generateStyleObject(executionContext: Object): Object;
 }
 
-export type StyledObject<Props extends object> = Properties &
-  Props & {
-    [key: string]:
-      | string
-      | number
-      | StyleFunction<Props>
-      | StyledObject<Props>
-      | RuleSet<any>
-      | undefined;
-  };
+export type StyledObject<Props extends object> = Substitute<Props, Properties> & {
+  [key: string]:
+    | string
+    | number
+    | StyleFunction<Props>
+    | StyledObject<Props>
+    | RuleSet<any>
+    | undefined;
+};
 
 /**
  * The `css` prop is not declared by default in the types as it would cause `css` to be present