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 w=Object.create;var T=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var E=(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 R(e))!v.call(t,n)&&n!==s&&T(t,n,{get:()=>e[n],enumerable:!(o=O(e,n))||o.enumerable});return t};var _=(t,e,s)=>(s=t!=null?w(j(t)):{},A(e||!t||!t.__esModule?T(s,"default",{value:t,enumerable:!0}):s,t)),Y=t=>A(T({},"__esModule",{value:!0}),t);var L={};E(L,{YakThemeProvider:()=>y.YakThemeProvider,atoms:()=>b,css:()=>l,keyframes:()=>N,styled:()=>I,useTheme:()=>y.useTheme});module.exports=Y(L);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(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++)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}},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=B;var p=_(require("react"),1),x=require("next-yak/context"),J={},X=t=>Object.assign(p.default.forwardRef(t),{component:t}),H=t=>Object.assign(k(t),{attrs:e=>k(t,e)}),k=(t,e)=>(s,...o)=>{let n=l(s,...o),r=a=>$(a,typeof e=="function"?e(a):e);return X((a,S)=>{let f=e||n.length?(0,x.useTheme)():J,m=r({theme:f,...a}),u=n(m),{theme:F,...g}=m,d=typeof t!="string"&&"yak"in t,i=d?F===f?g:m:K(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(H,{get(t,e){return t(e)}});function K(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},$=(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.35",
   "type": "module",
   "types": "./dist/",
   "exports": {

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

@@ -281,7 +281,7 @@ it("merge attrs when inheriting SC", () => {
       className=""
       style={{}}
       tabIndex={0}
-      type="submit"
+      type="button"
     />
   `);
 });
@@ -506,7 +506,6 @@ it("should have access to theme", () => {
     ).toJSON(),
   ).toMatchInlineSnapshot(`
     <pre
-      $__attrs={true}
       className=""
       data-color="red"
       style={{}}
@@ -530,11 +529,8 @@ it("should pass theme if theme is overwritten", () => {
     ).toJSON(),
   ).toMatchInlineSnapshot(`
     <pre
-      $__attrs={true}
       className=""
       style={{}}
-    >
-      {"color":"blue"}
-    </pre>
+    />
   `);
 });

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

@@ -88,6 +88,20 @@ 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)``;
+  const { container } = render(
+    <StyledComponent $forwardedProp="notForwarded" />,
+  );
+
+  expect(forwardedProps).toEqual({});
+});
+
 it("should concatenate classNames", () => {
   const Component = styled.input("className1");
 
@@ -258,9 +272,7 @@ it("should not remove theme if theme is passed to element", () => {
     <div>
       <pre
         class="test"
-      >
-        {"anything":"test"}
-      </pre>
+      />
     </div>
   `);
 });
@@ -302,9 +314,7 @@ it("should not remove theme if theme is passed to wrapped element", () => {
     <div>
       <pre
         class="test-wrapper test"
-      >
-        {"anything":"test"}
-      </pre>
+      />
     </div>
   `);
 });

packages/next-yak/runtime/styled.tsx

@@ -117,14 +117,16 @@ const yakStyled = <
       const { theme: themeAfterAttr, ...combinedPropsWithoutTheme } =
         combinedProps as { theme?: unknown };
 
+      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(combinedPropsWithoutTheme)
+        : themeAfterAttr === theme
+        ? combinedPropsWithoutTheme
+        : combinedProps;
 
       // 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)} />;
     };