Reuse internal type definitions (#216)

DigitecGalaxus · Nov 26, 2024 · 94354f3 · 94354f3
1 parent fb2b2ca
commit 94354f3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 64 deletions.
diff --git a/.changeset/silent-vans-vanish.md b/.changeset/silent-vans-vanish.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/next-yak/runtime/cssLiteral.tsx b/packages/next-yak/runtime/cssLiteral.tsx
@@ -39,7 +39,7 @@ type CSSFunction = <TProps = {}>(
   ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]
 ) => ComponentStyles<TProps>;
 
-type PropsToClassNameFn = (props: unknown) =>
+export type PropsToClassNameFn = (props: unknown) =>
   | {
       className?: string;
       style?: Record<string, string>;

diff --git a/packages/next-yak/runtime/keyframes.tsx b/packages/next-yak/runtime/keyframes.tsx
@@ -20,9 +20,9 @@
  * `;
  * ```
  */
-export const keyframes = (
+export const keyframes = <T extends (string | number | bigint)[] = never>(
   styles: TemplateStringsArray,
-  ...dynamic: never[]
+  ...dynamic: T
 ): string => {
   // during compilation all args of keyframe are compiled
   // to a string which references the animation name

diff --git a/packages/next-yak/runtime/mocks/cssLiteral.ts b/packages/next-yak/runtime/mocks/cssLiteral.ts
@@ -1,49 +1,6 @@
-import { CSSProperties } from "react";
-import type { YakTheme } from "../index.d.ts";
-import { yakComponentSymbol } from "../cssLiteral.js";
+import type { css as cssInternal, PropsToClassNameFn } from "../cssLiteral.js";
 
-type ComponentStyles<TProps> = (props: TProps) => {
-  className: string;
-  style?: {
-    [key: string]: string;
-  };
-};
-
-export type StaticCSSProp = {
-  className: string;
-  style?: CSSProperties;
-};
-
-export type CSSInterpolation<TProps> =
-  | string
-  | number
-  | undefined
-  | null
-  | false
-  | ComponentStyles<TProps>
-  | StaticCSSProp
-  | {
-      // type only identifier to allow targeting components
-      // e.g. styled.svg`${Button}:hover & { fill: red; }`
-      [yakComponentSymbol]: any;
-    }
-  | ((props: TProps) => CSSInterpolation<TProps>);
-
-type CSSStyles<TProps = {}> = {
-  style: { [key: string]: string | ((props: TProps) => string) };
-};
-
-type CSSFunction = <TProps = {}>(
-  styles: TemplateStringsArray,
-  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]
-) => ComponentStyles<TProps>;
-
-type PropsToClassNameFn = (props: unknown) =>
-  | {
-      className?: string;
-      style?: Record<string, string>;
-    }
-  | PropsToClassNameFn;
+export type { StaticCSSProp, CSSInterpolation } from "../cssLiteral.js";
 
 /**
  * Allows to use CSS styles in a styled or css block
@@ -57,17 +14,12 @@ type PropsToClassNameFn = (props: unknown) =>
  * `;
  * ```
  */
-export function css(styles: TemplateStringsArray, ...values: []): StaticCSSProp;
-export function css<TProps = {}>(
+export const css: typeof cssInternal = (
   styles: TemplateStringsArray,
-  ...values: CSSInterpolation<TProps & { theme: YakTheme }>[]
-): ComponentStyles<TProps>;
-export function css<TProps>(
-  styles: TemplateStringsArray,
-  ...args: CSSInterpolation<TProps & { theme: YakTheme }>[]
-): StaticCSSProp | ComponentStyles<TProps> {
+  ...args: unknown[]
+) => {
   const dynamicCssFunctions: PropsToClassNameFn[] = [];
-  for (const arg of args as Array<string | CSSFunction | CSSStyles<any>>) {
+  for (const arg of args as Array<string | Function | object>) {
     // Dynamic CSS e.g.
     // css`${props => props.active && css`color: red;`}`
     // compiled -> css((props: { active: boolean }) => props.active && css("yak31e4"))
@@ -81,7 +33,7 @@ export function css<TProps>(
       style: undefined,
     };
   }
-  return (<T>(props: T) => {
+  return ((props: unknown) => {
     for (let i = 0; i < dynamicCssFunctions.length; i++) {
       // run the dynamic expressions and ignore the return value
       // the execution is important to ensure that the user code is executed
@@ -92,8 +44,8 @@ export function css<TProps>(
       className: "",
       style: undefined,
     };
-  }) as ComponentStyles<TProps>;
-}
+  }) as any;
+};
 
 function executeDynamicExpressionRecursively(
   props: unknown,

diff --git a/packages/next-yak/runtime/mocks/keyframes.ts b/packages/next-yak/runtime/mocks/keyframes.ts
@@ -1,3 +1,5 @@
+import type { keyframes as keyframesInternal } from "../keyframes.js";
+
 /**
  * Allows to use CSS keyframe animations in a styled or css block
  *
@@ -20,10 +22,7 @@
  * `;
  * ```
  */
-export const keyframes = <T extends (string | number | bigint)[] = never>(
-  styles: TemplateStringsArray,
-  ...dynamic: T
-): string => {
+export const keyframes: typeof keyframesInternal = (styles, ...dynamic) => {
   // the keyframes function is a no-op in the mock
   // as it has no dynamic runtime behavior but only css
   return "";