prevent dollars to be passed to another function

packages/next-yak/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var F=Object.create;var T=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var s in e)T(t,s,{get:e[s],enumerable:!0})},d=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of O(e))!j.call(t,n)&&n!==s&&T(t,n,{get:()=>e[n],enumerable:!(o=w(e,n))||o.enumerable});return t};var E=(t,e,s)=>(s=t!=null?F(R(t)):{},d(e||!t||!t.__esModule?T(s,"default",{value:t,enumerable:!0}):s,t)),_=t=>d(T({},"__esModule",{value:!0}),t);var $={};v($,{YakThemeProvider:()=>y.YakThemeProvider,atoms:()=>h,css:()=>l,keyframes:()=>b,styled:()=>x,useTheme:()=>y.useTheme});module.exports=_($);var B=(...t)=>{let e=[],s=[],o={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let r in n.style){let c=n.style[r];typeof c=="function"?s.push(a=>({style:{[r]:String(A(a,c))}})):o[r]=c}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:o})}return n=>{let r=[...e],c={...o};for(let a=0;a<s.length;a++)M(n,s[a],r,c);return{className:r.join(" "),style:c}}},M=(t,e,s,o)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let r in n.style)o[r]=n.style[r];break}},A=(t,e)=>{let s=e(t);if(typeof s=="function")return A(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s},l=B;var p=E(require("react"),1),C=require("next-yak/context"),Y={},J=t=>Object.assign(p.default.forwardRef(t),{component:t}),X=t=>Object.assign(P(t),{attrs:e=>P(t,e)}),P=(t,e)=>(s,...o)=>{let n=l(s,...o),r=a=>K(a,typeof e=="function"?e(a):e);return J((a,S)=>{let f=e||n.length?(0,C.useTheme)():Y,m=r({theme:f,...a}),u=n(m),{theme:N,...g}=m,i=typeof t=="string"?H(g):N===f?g:m;return i.className=I(i.className,u.className),i.style="style"in i?{...i.style,...u.style}:u.style,typeof t!="string"&&"yak"in t?t.yak(i,S):(i.ref=S,p.default.createElement(t,{...i}))})},x=new Proxy(X,{get(t,e){return t(e)}});function H(t){let e={};for(let s in t)s.startsWith("$")||(e[s]=t[s]);return e}var I=(t,e)=>t?e?t+" "+e:t:e,k=t=>{let e={};for(let s in t)t[s]!==void 0&&(e[s]=t[s]);return e},K=(t,e)=>e?{..."$__attrs"in t?{...k(e),...t}:{...t,...k(e)},className:I(t.className,e.className),style:{...t.style||{},...e.style||{}},$__attrs:!0}:t;var h=(...t)=>{let e=t.join(" ");return()=>({className:e})};var b=(t,...e)=>t;var y=require("next-yak/context");0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
+"use strict";var O=Object.create;var T=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var s in e)T(t,s,{get:e[s],enumerable:!0})},A=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of j(e))!E.call(t,n)&&n!==s&&T(t,n,{get:()=>e[n],enumerable:!(o=R(e,n))||o.enumerable});return t};var B=(t,e,s)=>(s=t!=null?O(v(t)):{},A(e||!t||!t.__esModule?T(s,"default",{value:t,enumerable:!0}):s,t)),Y=t=>A(T({},"__esModule",{value:!0}),t);var U={};_(U,{YakThemeProvider:()=>y.YakThemeProvider,atoms:()=>b,css:()=>l,keyframes:()=>N,styled:()=>I,useTheme:()=>y.useTheme});module.exports=Y(U);var M=(...t)=>{let e=[],s=[],o={};for(let n of t)if(typeof n=="string")e.push(n);else if(typeof n=="function")s.push(n);else if(typeof n=="object"&&"style"in n)for(let r in n.style){let c=n.style[r];typeof c=="function"?s.push(a=>({style:{[r]:String(P(a,c))}})):o[r]=c}if(s.length===0){let n=e.join(" ");return()=>({className:n,style:o})}return n=>{let r=[...e],c={...o};for(let a=0;a<s.length;a++)J(n,s[a],r,c);return{className:r.join(" "),style:c}}},J=(t,e,s,o)=>{let n=e(t);for(;n;){if(typeof n=="function"){n=n(t);continue}else if(typeof n=="object"&&("className"in n&&n.className&&s.push(n.className),"style"in n&&n.style))for(let r in n.style)o[r]=n.style[r];break}},P=(t,e)=>{let s=e(t);if(typeof s=="function")return P(t,s);if(process.env.NODE_ENV==="development"&&typeof s!="string"&&typeof s!="number"&&!(s instanceof String))throw new Error(`Dynamic CSS functions must return a string or number but returned ${JSON.stringify(s)}`);return s},l=M;var p=B(require("react"),1),x=require("next-yak/context"),X={},H=t=>Object.assign(p.default.forwardRef(t),{yak:t}),K=t=>Object.assign(k(t),{attrs:e=>k(t,e)}),k=(t,e)=>(s,...o)=>{let n=l(s,...o),r=a=>L(a,typeof e=="function"?e(a):e);return H((a,S)=>{let f=e||n.length?(0,x.useTheme)():X,m=r({theme:f,...a}),u=n(m),{theme:F,...w}=m,g=F===f?w:m,d=typeof t!="string"&&"yak"in t,i=d?g:$(g);return i.className=h(i.className,u.className),i.style="style"in i?{...i.style,...u.style}:u.style,d?t.yak(i,S):(i.ref=S,p.default.createElement(t,{...i}))})},I=new Proxy(K,{get(t,e){return t(e)}});function $(t){let e={};for(let s in t)s.startsWith("$")||(e[s]=t[s]);return e}var h=(t,e)=>t?e?t+" "+e:t:e,C=t=>{let e={};for(let s in t)t[s]!==void 0&&(e[s]=t[s]);return e},L=(t,e)=>e?{..."$__attrs"in t?{...C(e),...t}:{...t,...C(e)},className:h(t.className,e.className),style:{...t.style||{},...e.style||{}},$__attrs:!0}:t;var b=(...t)=>{let e=t.join(" ");return()=>({className:e})};var N=(t,...e)=>t;var y=require("next-yak/context");0&&(module.exports={YakThemeProvider,atoms,css,keyframes,styled,useTheme});
 //# sourceMappingURL=index.cjs.map

packages/next-yak/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-yak",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "type": "module",
   "types": "./dist/",
   "exports": {

packages/next-yak/runtime/__tests__/attrs.test.tsx

@@ -256,18 +256,6 @@ it("should work with data and aria attributes", () => {
   `);
 });
 
-// it("merge attrs", () => {
-//   const Comp = styled.button
-//     .attrs(() => ({
-//       type: "button",
-//       tabIndex: 0,
-//     }))
-//     .attrs(() => ({
-//       type: "submit",
-//     }))``;
-//   expect(TestRenderer.create(<Comp />).toJSON()).toMatchInlineSnapshot();
-// });
-
 it("merge attrs when inheriting SC", () => {
   const Parent = styled.button.attrs(() => ({
     type: "button",
@@ -506,7 +494,6 @@ it("should have access to theme", () => {
     ).toJSON(),
   ).toMatchInlineSnapshot(`
     <pre
-      $__attrs={true}
       className=""
       data-color="red"
       style={{}}
@@ -530,7 +517,6 @@ it("should pass theme if theme is overwritten", () => {
     ).toJSON(),
   ).toMatchInlineSnapshot(`
     <pre
-      $__attrs={true}
       className=""
       style={{}}
     >

packages/next-yak/runtime/__tests__/styled.test.tsx

@@ -88,6 +88,35 @@ it("should filter out properties starting with $", () => {
   `);
 });
 
+it("should filter out properties starting with $ when passing to custom", () => {
+  let forwardedProps = null;
+  const Component = ({ className, style, ...props }) => {
+    forwardedProps = props;
+    return null;
+  };
+  const StyledComponent = styled(Component)``;
+  render(<StyledComponent $forwardedProp="notForwarded" />);
+
+  expect(forwardedProps).toEqual({});
+});
+
+it("should forward properties to the next yak component", () => {
+  const Component = styled.input.attrs(({ $text }) => ({
+    "aria-label": $text,
+  }))``;
+  const StyledComponent = styled(Component)``;
+  const { container } = render(<StyledComponent $text="hello world" />);
+
+  expect(container).toMatchInlineSnapshot(`
+    <div>
+      <input
+        aria-label="hello world"
+        class=""
+      />
+    </div>
+  `);
+});
+
 it("should concatenate classNames", () => {
   const Component = styled.input("className1");
 
@@ -242,7 +271,7 @@ it("should remove theme if styled element", () => {
   `);
 });
 
-it("should not remove theme if theme is passed to element", () => {
+it("should keep theme if theme is passed to element", () => {
   const ThemePrinter = ({ theme, ...props }: { theme?: unknown }) => (
     <pre {...props}>{JSON.stringify(theme)}</pre>
   );

packages/next-yak/runtime/styled.tsx

@@ -22,7 +22,7 @@ const yakForwardRef: <TProps>(
   // warning: `__yak` is undefined during runtime
   __yak: true;
 } = (component) =>
-  Object.assign(React.forwardRef(component), { component }) as any;
+  Object.assign(React.forwardRef(component), { yak: component }) as any;
 
 /**
  * All valid html tags
@@ -116,15 +116,17 @@ const yakStyled = <
       // prevents passing the theme prop to the DOM element of a styled component
       const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =
         combinedProps as { theme?: unknown };
+      const propsBeforeFiltering =
+        themeAfterAttr === theme ? combinedPropsWithoutTheme : combinedProps;
+
+      const isYakComponent =
+        typeof Component !== "string" && "yak" in Component;
 
       // remove all props that start with a $ sign for string components e.g. "button" or "div"
       // so that they are not passed to the DOM element
-      const filteredProps =
-        typeof Component === "string"
-          ? removePrefixedProperties(combinedPropsWithoutTheme)
-          : themeAfterAttr === theme
-          ? combinedPropsWithoutTheme
-          : combinedProps;
+      const filteredProps = !isYakComponent
+        ? removePrefixedProperties(propsBeforeFiltering)
+        : propsBeforeFiltering;
 
       // yak provides a className and style prop that needs to be merged with the
       // user provided className and style prop
@@ -142,14 +144,13 @@ const yakStyled = <
       // if the styled(Component) syntax is used and the component is a yak component
       // we can call the yak function directly to avoid an unnecessary wrapper with an additional
       // forwardRef call
-      if (typeof Component !== "string" && "yak" in Component) {
+      if (isYakComponent) {
         return (
           Component as typeof Component & {
             yak: FunctionComponent<typeof filteredProps>;
           }
         ).yak(filteredProps, ref);
       }
-
       (filteredProps as { ref?: unknown }).ref = ref;
       return <Component {...(filteredProps as any)} />;
     };