[pigment-css] Using Proxies to enable dot notation about material-ui HOT 4 CLOSED

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> 😅?

from material-ui.

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 😅

from material-ui.

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:

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

from material-ui.

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

from material-ui.