[docs] Migrating from emotion or styled-components

[AbbasMohammadi6]

Summary

We are currently using Emotion in our project and have numerous styled components that rely on dynamic styling based on props, similar to the examples below. As we plan to migrate to Pigment CSS, we encountered an issue since template literals in Pigment CSS don’t seem to support callback functions for props—a feature we rely on extensively.

For instance, in the following components:

export const StyledListItemButton = styled(ListItemButton)<{ active: boolean }>`
  background: ${(props) => (props.active ? 'red' : 'inherit')};
  border-radius: 1rem;
`;

const StyledButton = styled(MuiButton)<{ is_tona: string }>`
  padding: 1rem 2rem;
  min-width: ${(props) => (props.fullWidth ? 'inherit' : '6rem')};
  font-weight: 500;

  ${(props) => {
    if (props.is_tona === 'true')
      return css`
        background-color: ${props.theme.base[props.color]}20;
        border: 1px solid ${props.theme.base[props.color]};
        color: ${props.theme.base[props.color]};
      `;
  }}
`;

As Pigment CSS currently doesn't allow for this dynamic handling of props, it would require substantial refactoring of our styled components.

Do you have any plans to support this feature in future releases? Adding support for prop-based dynamic styling would significantly simplify the migration process for teams like ours.

Examples

Example of css function in emotion with template literals:

import { css } from '@emotion/css'

const myStyle = css`
  color: rebeccapurple;
`

https://styled-components.com/docs/api#css-prop
https://emotion.sh/docs/@emotion/css

Motivation

No response

Search keywords: migration emotion

[NickanBagherpour]

Pigment CSS has done a great job so far, but it's not feasible for me to migrate to it because I would need to modify a huge number of files and styles. However, if it could support these features, it would be fantastic.

[yoohahn]

The active prop is something you can do today.

export const StyledListItemButton = styled(ListItemButton)<{ active: boolean }>`
  background: ${(props) => (props.active ? 'red' : 'inherit')};
  border-radius: 1rem;
`;

// TO

const StyledListItemButton = styled(ListItemButton, {
  shouldForwardProp: prop => prop !== 'active',
})<{ active: boolean }>(({ theme }) => {
  return {
    color: 'inherit',
    variants: [
      {
        props: { active: true },
        style: {
          color: 'red',
        },
      },
    ],
  };
});

[NickanBagherpour]

I've reviewed the migration path from Emotion or Styled-components to PigmentCSS, and I believe it would be highly challenging due to the extensive changes required throughout the entire project.

In my opinion, the current approach with Emotion/Styled-components is cleaner and more readable. Using template literals allows us to write styles in basic CSS or SCSS syntax, which feels more intuitive and familiar. Converting this style structure to an object-based syntax, as required by PigmentCSS, could compromise both readability and maintainability.

I would appreciate reconsidering this migration, or at least exploring ways to make the transition smoother and less disruptive.

[oliviertassinari]

Those API are available with Linaria https://github.com/callstack/linaria?tab=readme-ov-file#syntax and yak https://github.com/jantimon/next-yak/tree/main?tab=readme-ov-file#dynamic-styles, so it's technically possible to execute. They are implemented with CSS variables. This seems practical. So I think we should expect those API to be supported in Pigment CSS. We track this with #82.

We also miss a comprehensive docs about how to migrate from Emotion or Styled-components. Which I think what we should keep this open for (otherwise, the ask seems to be a duplicate of #82)

[brijeshb42]

If it helps, we do have codemods in @mui/codemod, particularly this one that we used internally to migrate Material UI components to use the Pigment CSS API.

[siriwatknp]

If it helps, we do have codemods in @mui/codemod, particularly this one that we used internally to migrate Material UI components to use the Pigment CSS API.

FYI, the codemod does not support styles with literal template.