{
(p) => ({
type: p.$submit ? "submit" : "button",
$primary: p.primary,
- })
+ }),
)<{ $primary?: boolean }>``;
expect(TestRenderer.create(
).toJSON()).toMatchInlineSnapshot(`
diff --git a/packages/next-yak/runtime/__tests__/styled.test.tsx b/packages/next-yak/runtime/__tests__/styled.test.tsx
index 5444146d..b129ec82 100644
--- a/packages/next-yak/runtime/__tests__/styled.test.tsx
+++ b/packages/next-yak/runtime/__tests__/styled.test.tsx
@@ -58,7 +58,7 @@ it("should forward children", () => {
const { container } = render(
-
+ ,
);
expect(container).toMatchInlineSnapshot(`
@@ -153,7 +153,7 @@ it("should allow falsy values", () => {
-
+ ,
);
expect(container).toMatchInlineSnapshot(`
@@ -178,8 +178,8 @@ it("should execute runtime styles recursively", () => {
css(
({ $testProp }) =>
$testProp &&
- css(({ $testProp }) => $testProp && css("recursive-test-class"))
- )
+ css(({ $testProp }) => $testProp && css("recursive-test-class")),
+ ),
);
const { container } = render(
);
@@ -202,7 +202,7 @@ it("should allow using refs", () => {
ref={(element) => {
elementFromRef = element;
}}
- />
+ />,
);
expect(elementFromRef).toBeInstanceOf(HTMLInputElement);
@@ -218,7 +218,7 @@ it("should allow using nested refs", () => {
ref={(element) => {
elementFromRef = element;
}}
- />
+ />,
);
expect(elementFromRef).toBeInstanceOf(HTMLInputElement);
diff --git a/packages/next-yak/runtime/atoms.tsx b/packages/next-yak/runtime/atoms.tsx
index 3edd607e..f0ffd45d 100644
--- a/packages/next-yak/runtime/atoms.tsx
+++ b/packages/next-yak/runtime/atoms.tsx
@@ -1,11 +1,11 @@
/**
* Allows to use atomic CSS classes in a styled or css block
- *
+ *
* @usage
- *
+ *
* ```tsx
* import { styled, atoms } from "next-yak";
- *
+ *
* const Button = styled.button<{ $primary?: boolean }>`
* ${atoms("text-teal-600", "text-base", "rounded-md")}
* ${props => props.$primary && atoms("shadow-md")}
@@ -13,6 +13,6 @@
* ```
*/
export const atoms = (...atoms: string[]) => {
- const className = atoms.join(" ");
- return () => ({ className });
-};
\ No newline at end of file
+ const className = atoms.join(" ");
+ return () => ({ className });
+};
diff --git a/packages/next-yak/runtime/context/index.tsx b/packages/next-yak/runtime/context/index.tsx
index 3b11d604..323d2786 100644
--- a/packages/next-yak/runtime/context/index.tsx
+++ b/packages/next-yak/runtime/context/index.tsx
@@ -2,30 +2,26 @@
//
// This file is the client component (browser & ssr) version of index.server.tsx
//
-import React, {
- ReactNode,
- createContext,
- useContext,
-} from "react";
+import React, { ReactNode, createContext, useContext } from "react";
-export interface YakTheme { }
+export interface YakTheme {}
-/**
+/**
* The yak theme context
* @see https://github.com/jantimon/next-yak/blob/main/packages/next-yak/runtime/context/README.md
*/
const YakContext = createContext
({});
-/**
+/**
* Returns the current yak theme context
- *
+ *
* @see https://github.com/jantimon/next-yak/blob/main/packages/next-yak/runtime/context/README.md
*/
export const useTheme = (): YakTheme => useContext(YakContext);
-/**
+/**
* Yak theme context provider
- *
+ *
* @see https://github.com/jantimon/next-yak/blob/main/packages/next-yak/runtime/context/README.md
*/
export const YakThemeProvider = ({
diff --git a/packages/next-yak/runtime/cssLiteral.tsx b/packages/next-yak/runtime/cssLiteral.tsx
index 6c0de051..e057b65a 100644
--- a/packages/next-yak/runtime/cssLiteral.tsx
+++ b/packages/next-yak/runtime/cssLiteral.tsx
@@ -27,14 +27,14 @@ type CSSFunction = (
/**
* css() runtime factory of css``
- *
+ *
* /!\ next-yak transpiles css`` and styled``
- *
+ *
* This changes the typings of the css`` and styled`` functions.
* During development the user of next-yak wants to work with the
* typings BEFORE compilation.
- *
- * Therefore this is only an internal function only and it must be cast to any
+ *
+ * Therefore this is only an internal function only and it must be cast to any
* before exported to the user.
*/
const internalCssFactory = (
@@ -78,7 +78,7 @@ const internalCssFactory = (
props: unknown,
fn: PropsToClassNameFn,
classNames: string[],
- style: Record
+ style: Record,
) => {
const result = fn(props);
if (typeof result === "function") {
@@ -111,7 +111,7 @@ const internalCssFactory = (
const recursivePropExecution = (
props: unknown,
- fn: (props: unknown) => any
+ fn: (props: unknown) => any,
): string | number => {
const result = fn(props);
if (typeof result === "function") {
@@ -125,8 +125,8 @@ const recursivePropExecution = (
) {
throw new Error(
`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(
- result
- )}`
+ result,
+ )}`,
);
}
}
diff --git a/packages/next-yak/runtime/index.ts b/packages/next-yak/runtime/index.ts
index 4cb95762..559a9e2c 100644
--- a/packages/next-yak/runtime/index.ts
+++ b/packages/next-yak/runtime/index.ts
@@ -6,6 +6,6 @@ export { keyframes } from "./keyframes.js";
// the following export is not relative as "next-yak/context"
// links to one file for react server components and
// to another file for classic react components
-export { useTheme, YakThemeProvider} from "next-yak/context"
+export { useTheme, YakThemeProvider } from "next-yak/context";
-export type { YakTheme } from "./context/index.d.ts";
\ No newline at end of file
+export type { YakTheme } from "./context/index.d.ts";
diff --git a/packages/next-yak/runtime/keyframes.tsx b/packages/next-yak/runtime/keyframes.tsx
index 55429403..04fa4b2b 100644
--- a/packages/next-yak/runtime/keyframes.tsx
+++ b/packages/next-yak/runtime/keyframes.tsx
@@ -1,11 +1,11 @@
/**
* Allows to use CSS keyframe animations in a styled or css block
- *
+ *
* @usage
- *
+ *
* ```tsx
* import { styled, keyframes } from "next-yak";
- *
+ *
* const rotate = keyframes`
* from {
* transform: rotate(0deg);
@@ -14,16 +14,17 @@
* transform: rotate(360deg);
* }
* `;
- *
+ *
* const Spinner = styled.div`
* animation: ${rotate} 1s linear infinite;
* `;
* ```
*/
-export const keyframes = (styles: TemplateStringsArray,
- ...dynamic: never[]
- ): string => {
- // during compilation all args of keyframe are compiled
- // to a string which references the animation name
- return styles as any as string;
-};
\ No newline at end of file
+export const keyframes = (
+ styles: TemplateStringsArray,
+ ...dynamic: never[]
+): string => {
+ // during compilation all args of keyframe are compiled
+ // to a string which references the animation name
+ return styles as any as string;
+};
diff --git a/packages/next-yak/runtime/styled.tsx b/packages/next-yak/runtime/styled.tsx
index 328044f9..dbaeebc8 100644
--- a/packages/next-yak/runtime/styled.tsx
+++ b/packages/next-yak/runtime/styled.tsx
@@ -12,7 +12,7 @@ import type { YakTheme } from "./context/index.d.ts";
* Hack to hide .yak from the type definition and to deal with ExoticComponents
*/
const yakForwardRef: (
- component: ForwardRefRenderFunction
+ component: ForwardRefRenderFunction,
) => FunctionComponent = (component) =>
Object.assign(React.forwardRef(component), { component }) as any;
@@ -38,7 +38,7 @@ type AttrsMerged = Substitute<
type Attrs<
TBaseProps,
TIn extends object = {},
- TOut extends AttrsMerged = AttrsMerged
+ TOut extends AttrsMerged = AttrsMerged,
> =
| Partial
| ((p: Substitute) => Partial);
@@ -55,19 +55,19 @@ const StyledFactory = (Component: HtmlTags | FunctionComponent) =>
Object.assign(yakStyled(Component), {
attrs: <
TAttrsIn extends object = {},
- TAttrsOut extends AttrsMerged = AttrsMerged
+ TAttrsOut extends AttrsMerged = AttrsMerged,
>(
- attrs: Attrs
+ attrs: Attrs,
) => yakStyled(Component, attrs),
});
const yakStyled = <
T,
TAttrsIn extends object = {},
- TAttrsOut extends AttrsMerged = AttrsMerged
+ TAttrsOut extends AttrsMerged = AttrsMerged,
>(
Component: FunctionComponent | HtmlTags,
- attrs?: Attrs
+ attrs?: Attrs,
) => {
return = {}>(
styles: TemplateStringsArray,
@@ -77,7 +77,7 @@ const yakStyled = <
const processAttrs = (props: Substitute) =>
combineProps(
props,
- typeof attrs === "function" ? (attrs as Function)(props) : attrs
+ typeof attrs === "function" ? (attrs as Function)(props) : attrs,
);
const yak = (props: Substitute, ref: unknown) => {
/** The combined props are passed into the styled`` literal functions */
@@ -97,7 +97,7 @@ const yakStyled = <
// ^ must be have acces to theme
(attrs || getRuntimeStyles.length
? { ...props, theme: useTheme() }
- : props) as Substitute
+ : props) as Substitute,
);
// execute all functions inside the style literal
// e.g. styled.button`color: ${props => props.color};`
@@ -121,7 +121,7 @@ const yakStyled = <
},
className: mergeClassNames(
(combinedProps as { className?: string }).className,
- runtimeStyles.className as string
+ runtimeStyles.className as string,
),
};
@@ -173,9 +173,9 @@ export const styled = new Proxy(
TAttrsOut extends AttrsMerged<
JSX.IntrinsicElements[Tag],
TAttrsIn
- > = AttrsMerged
+ > = AttrsMerged,
>(
- attrs: Attrs
+ attrs: Attrs,
) => StyledLiteral>;
};
},
@@ -183,7 +183,7 @@ export const styled = new Proxy(
get(target, TagName: keyof JSX.IntrinsicElements) {
return target(TagName);
},
- }
+ },
);
// Remove all entries that start with a $ sign
@@ -217,10 +217,10 @@ const combineProps = <
T extends {
className?: string;
style?: React.CSSProperties;
- }
+ },
>(
props: T,
- newProps: T
+ newProps: T,
) => {
if (!newProps) return props;
const combinedProps: T =
@@ -238,7 +238,7 @@ const combineProps = <
...combinedProps,
className: mergeClassNames(
props.className as string,
- newProps.className as string
+ newProps.className as string,
),
style: { ...(props.style || {}), ...(newProps.style || {}) },
$__attrs: true,