feature request: flag props that don't need to be propagated with '$'

styled components is awesome, but one problem it has is that it propagates all props to the html elements . For example, if I have a prop specific to styling like "size", it will be propagated to HTML:

import { render } from "solid-js/web";
import { styled } from "solid-styled-components";

const MyComponent = styled("div")`
  background: black;
  width: ${(props: { size: number }) => props.size}px;
  height: ${(props) => props.size}px;
`;

render(() => <MyComponent size={40} />, document.getElementById("app")!);

sandbox link

I'd like to avoid this. This library solved this problem by marking all props that shouldn't be propagated with "$" symbol. So my "size" prop would become "$size". Same goes for $theme and $as props. IMO it's a clear and concise solution.

solidjs / solid-styled-components

feature request: flag props that don't need to be propagated with '$' #34