[pigment-css] Add support for styled tagged-template literals

[brijeshb42]

This PR brings support for:

const cls1 = css`
  color: ${({ theme }) => theme.palette.primary.main};
  font-size: ${({ theme }) => theme.size.font.h1};
`;

import { styled } from '@pigment-css/react';

const SliderRail = styled('span')`
  display: block;
  position: absolute;
  border-radius: inherit;
  background-color: currentColor;
  opacity: 0.38;
  font-size: ${({ theme }) => theme.size.font.h1};
`;

[mui-bot]

Netlify deploy preview

https://deploy-preview-41268--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 596f2e3

[oliviertassinari]

@joshwcomeau One of the features you asking for in https://github.com/joshwcomeau/dream-css-tool.

---

@brijeshb42 I have started market research on the styling space today at https://mui-org.notion.site/system-Why-a-standalone-project-25205c31c8564e0daee6f79523de9b5c. Trying to get as much clarity as possible on what are each tool's strengths and weaknesses. Today we are building this to solve Material UI performance issues, we couldn't really find any other solution without having to impose a huge Breaking Change on our users. But depending on the conclusion of the market state, I think we should decide between:

1. Going all-in into this styling solution, a bit like we are doing with Base UI (growing to 4 people focused on it, which arguably a working styling engine is probably more important).
2. Once we solved that performance issue with Emotion with minimal BCs, figure out if we want to uniformize on StyleX
3. Or keep it as a back burner like it has been historically with JSS, it worked fine, what matters is having a great DX when you use CSS modules, Tailwind CSS, etc.

So far, my best guess is that if we stay anchored into the need to migration from styled-components and emotions, this could do a lot of good to the community: https://npm-stat.com/charts.html?package=%40stylexjs%2Fstylex&package=%40pandacss%2Fdev&package=styled-components&from=2023-02-25&to=2024-02-25, so 1. I don't see anyone trying to do this.

[siriwatknp]

👍