[pigment-css] Using Proxies to enable dot notation

[joshwcomeau]

Summary

Right now, tags need to be referenced as strings:

const Link = styled('a')({ ... });

In other libraries like styled-components / Emotion, we can also render tags using dot notation syntax:

const Link = styled.a({ ... });

I think Pigment CSS should support both!

Examples

So, the way this works in styled-components, there's a big list of all valid HTML/SVG tags, and it creates methods for each one.

Rather than do that, I think it would be better to solve this the way Framer Motion: using Proxies.

With Framer Motion, there is no big list of valid HTML tags. Instead, we can use anything we want. motion.fdshfkjsd works jsut as well as motion.div.

I forget where I saw it, but I believe I saw that React is adding support for custom elements, which means that there is no longer a finite list of valid HTML tags that can be used as React elements. So I think this is sorta the only way, going forwards.

A less-complex implementation of this approach can be found here: https://github.com/joshwcomeau/dream-css-tool/pull/5/files#diff-e58cad2236fff5b12e1cd4b29096cb30bcb1e236a11452e0a253b2cf2ea4b695R16

Motivation

So the biggest thing is to make it easier to migrate from styled-components / Emotion / Linaria / whatever.

Even aside from migration, however, I think there's value in this. It's easier to type styled.div than styled('div'), and given how many styled components I tend to create, saving a few keystrokes is valuable!

Search keywords: pigment css

[oliviertassinari]

Browser support for Proxy looks good enough https://caniuse.com/?search=Proxy vs. our browser support target #40958.

It also looks better than https://github.com/emotion-js/emotion/blob/6e0e3880e2366dc4d14c293acac851fc73be730f/packages/styled/src/tags.js. I don't look forward to people asking: Where is <selectlist>, <model>, <search> 😅?

[joshwcomeau]

Ah, so dot notation is already supported, and I believe it even uses Proxies! Sorry, I should have actually tried this before creating an issue 😅

[oliviertassinari]

Oh, I didn't know as well, nice.

I dived a bit:

const Bubble = styled.span({
  height: 'var(--size, 100%)',
  aspectRatio: '1',
  background: 'radial-gradient(hsl(var(--h) 100% 70%) 25%, transparent 50%)',
  position: 'absolute',
  display: 'inline-block',
  left: 'var(--x, 0)',
  top: 'var(--y, 0)',
  scale: '0',
  translate: '-50% -50%',
  mixBlendMode: 'multiply',
  filter: 'blur(2px)',
  animation: `${scale} var(--s, 2s) var(--d, 0s) infinite alternate`,
});

is turned into this in the JavaScript bundle:

const Bubble = /*#__PURE__*/
(0,
_pigment_css_react__WEBPACK_IMPORTED_MODULE_2__.styled)("span")({
    classes: ["b1wnawl7"]
});
_c1 = Bubble;

by this logic:

material-ui/packages/pigment-react/src/processors/styled.ts

Lines 156 to 158 in b3e0b43

	if (callType === 'member') {
	this.component = componentArg;
	} else {

This is documented from https://github.com/Anber/wyw-in-js/blob/7cc243bb5c083d1fff0a44c5e0597374289d0684/apps/website/pages/how-to/custom-tagged-template.mdx#L40. So developers can use all future and past DOM elements.

cc @brijeshb42

[brijeshb42]

Yeah. This is supported though not through proxies but through static analysis.