search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
389 stars 18 forks source link

[fix] Implement variant matching parity #111

Closed DiegoAndai closed 4 weeks ago

DiegoAndai commented 4 weeks ago

Follow up on https://github.com/mui/material-ui/pull/42358#pullrequestreview-2081441990

Merge props and ownerState the same way it's done in MUI System's createStyled

cc: @mnajdova

DiegoAndai commented 4 weeks ago

Before and after

Textfield demos with 0.0.10:

https://github.com/mui/pigment-css/assets/16889233/c0c4fe61-4451-4a55-8128-c6a6ff6077cd

Textfield demos with this PR's build:

https://github.com/mui/pigment-css/assets/16889233/58b05050-db8e-449c-b920-0c3bce9ed46a

@brijeshb42 when running the demos with this PR's build, the following code on one of the demos errored:

function RedBar() {
  return (
    <Box
      sx={{
        height: 20,
        backgroundColor: (theme) =>
          theme.palette.mode === 'light'
            ? 'rgba(255, 0, 0, 0.1)'
            : 'rgb(255 132 132 / 25%)',
      }}
    />
  );
}

With:

theme is not defined

This didn't happen when running with 0.0.10. Why might this be? I would expect it to fail on both versions, specially as this change is not related to the sx prop or theme handling.

brijeshb42 commented 4 weeks ago

I'll have to check. There was a change by @siriwatknp where he changed the callback argument from being ({theme}) => to (theme) => to be same as system. This might be the reason.