Use Proxy() for styled.div

[franciscop]

Sorry if this has already been asked, but it's very difficult to search for this specifically. I love the size of goober! The only thing that I feel is missing would be the syntax of styled.div, which could be added with just a few extra bytes:

new Proxy(styled, { get: (t, k) => t[k] || t(k) });
// Or if we go a bit extra, just disable styled as an object
new Proxy(styled, { get: (t, k) => t(k) });

That way you can do this and they are equivalent:

styled('div')``;
styled.div``;

Now Proxy is not es5-friendly (es6-only), and this DOES add some bytes (estimated 20-50, depending on the actual implementation), but in exchange it's very little and would bring goober a step closer to styled-components syntax. So I'd like suggesting adding the dot-syntax into goober with Proxy().

PS, I'd be happy to open a PR with this.

[cristianbote]

There is a way of having this though, by using the babel plugin https://github.com/cristianbote/goober/tree/master/packages/babel-plugin-transform-goober#how-to-use. If you use something with a bundler should be quite easy to add.

Precisely about Proxy that's my main concern about ROI of adding 20-ish Bytes. For example there are entire features sets that are around ~6B so find the right balance somewhat in favour of both is pretty difficult. But in this case where you can use something else I don't think it's a must or a need for goober. But I am super opened and curious how you see it?

[franciscop]

I use normally Create-React-App, so going all with custom config/eject is not worth for a single line for me... I'd rather customize my code to have e.g. src/styled.js be like this:

import { styled, setup } from 'goober';
setup(React.createElement);
export default new Proxy(styled, {...});

So the reason I think it's useful is because it's much more legible and virtually a standard in all other libraries, while adding "only" ~20B. I know in a library where size is the main reason those bytes are really important, so def would understand if you are against this, but I thought it's the "main way" goober is not there with all other styled components so I wanted to at least suggest it.

Basically if this and the default export were present, migrating from styled-components to goober would virtually be changing "styled-components" for "goober" and adding a single setup() in index.js in most of my codebases (except the very, very few components that have an .attr()).