Improved transient props type 🚀

src/components/design-system/atoms/overlay.tsx

@@ -1,14 +1,17 @@
-import styled from "styled-components";
+import styled, { TransientProps } from "styled-components";
 import { opacity } from "../utils-css/opacity-keyframes";
 import { FC } from "react";
 import { useLockBodyScroll } from "../hooks/use-lock-body-scroll";
 
 export interface OverlayProps {
   zIndex: number;
   delay: string;
+  onClick: () => void;
 }
 
-const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
+type Props = TransientProps<OverlayProps, "div">;
+
+const StyledOverlay = styled.div<Props>`
   position: fixed;
   top: 0;
   left: 0;
@@ -22,12 +25,15 @@ const StyledOverlay = styled.div<TransientProps<OverlayProps>>`
   backdrop-filter: blur(4px);
 `;
 
-export const Overlay: FC<OverlayProps & { onClick: () => void }> = ({
-  zIndex,
-  onClick,
-  delay,
-}) => {
+export const Overlay: FC<OverlayProps> = ({ zIndex, onClick, delay }) => {
   useLockBodyScroll();
 
-  return <StyledOverlay $zIndex={zIndex} onClick={onClick} $delay={delay} />;
+  return (
+    <StyledOverlay
+      $zIndex={zIndex}
+      onClick={onClick}
+      $delay={delay}
+      data-test={"ciaone"}
+    />
+  );
 };

src/components/design-system/molecules/post-card.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css, TransientProps } from "styled-components";
 import { Paragraph } from "../atoms/paragraph";
 import { tracking } from "../../../logic/tracking";
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image";

src/components/design-system/molecules/project.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { Heading3 } from "../atoms/heading3";
-import styled from "styled-components";
+import styled, { TransientProps } from "styled-components";
 import { Container } from "../atoms/container";
 import { CallToActionExternalWithTracking } from "../../tracking/call-to-action-external-with-tracking";
 import { mediaQuery } from "../utils-css/media-query";
@@ -15,9 +15,9 @@ interface ProjectContainerProps {
   reverse: boolean;
 }
 
-const ProjectContainer = styled(Container)<
-  TransientProps<ProjectContainerProps>
->`
+type Created = TransientProps<ProjectContainerProps>;
+
+const ProjectContainer = styled(Container)<Created>`
   display: flex;
   flex-direction: column;
   padding: 0;

src/components/design-system/molecules/search.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import styled, { css } from "styled-components";
+import styled, { css, TransientProps } from "styled-components";
 import { SearchAlt } from "@styled-icons/boxicons-regular";
 import { mediaQuery } from "../utils-css/media-query";
 import { Container } from "../atoms/container";

src/components/design-system/molecules/tabs.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css, TransientProps } from "styled-components";
 import { StandardExternalLink } from "../atoms/standard-external-link";
 import { trackWith } from "../../../logic/tracking";
 import { FC } from "react";

src/components/design-system/molecules/tag.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { css, TransientProps } from "styled-components";
 import { FC } from "react";
 import { StandardInternalLinkWithTracking } from "../../tracking/standard-internal-link-with-tracking";
 import { tracking } from "../../../logic/tracking";

src/components/design-system/organism/blog-header.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 import { StaticImage } from "gatsby-plugin-image";
-import styled from "styled-components";
+import styled, { TransientProps } from "styled-components";
 import { mediaQuery } from "../utils-css/media-query";
 import { gatsbyImagePlaceholderSelector } from "../utils-css/gatsby-image-selector";
 import { backgroundGradients } from "../atoms/gradients";

src/components/design-system/organism/modal-with-image.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { TransientProps } from "styled-components";
 import { CallToActionExternal } from "../atoms/call-to-action-external";
 import { FC } from "react";
 import { opacity } from "../utils-css/opacity-keyframes";

src/components/design-system/styled.d.ts

@@ -1,4 +1,5 @@
 import "styled-components";
+import React, { ComponentProps } from "react";
 
 interface Colors {
   primaryColor: string;
@@ -24,4 +25,23 @@ declare module "styled-components" {
     spacing: string[];
     lineHeight: number;
   }
+
+  type Stringify<PropName> = PropName extends string ? PropName : never;
+  type DomElement = keyof React.JSX.IntrinsicElements | false;
+  type OmitDomProps<
+    CustomProps,
+    Component extends DomElement,
+  > = Component extends false
+    ? keyof CustomProps
+    : keyof Omit<CustomProps, keyof ComponentProps<Component>>;
+
+  export type TransientProps<
+    CustomProps,
+    Component extends DomElement = false,
+  > = {
+    [Key in OmitDomProps<
+      CustomProps,
+      Component
+    > as `$${Stringify<Key>}`]: CustomProps[Key];
+  };
 }