Support props callback

[oliviertassinari]

Steps to reproduce

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

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: 'Arial';
`;

const Container = styled.div`
  font-size: 10px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

        <Container color="#333">
          <Title>Hello world</Title>
        </Container>

Current behavior

The color prop doesn't work.

Expected behavior

The color prop works in Linaria https://codesandbox.io/p/devbox/dreamy-danny-mqkftk?file=%2Fsrc%2FApp.tsx%3A1%2C1&workspaceId=836800c1-9711-491c-a89b-3ac24cbd8cd8

Context

I'm trying to migrate code from styled-components.

I believe that it's also something @jantimon asked for.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

[jantimon]

Here is how next-yak does it:

https://yak.js.org/how-does-it-work#transform-dynamic-styles

you can try it on the playground:
https://yak.js.org/playground

we extract the function to set an inline style css variable

your example from above would be compiled to the following code:

import { styled } from "next-yak";

// Write your styles in `styled` tag
import __styleYak from "./file.yak.module.css!=!./file?./file.yak.module.css";
const Title =
/*YAK Extracted CSS:
.Title {
  font-family: 'Arial';
}*/
/*#__PURE__*/
styled.h1(__styleYak.Title);
const Container =
/*YAK Extracted CSS:
.Container {
  font-size: 10px;
  color: var(--1sstj5p);
  border: 1px solid red;
  &:hover {
    border-color: blue;
  }
  .Title {
    margin-bottom: 24px;
  }
}*/
/*#__PURE__*/
styled.div(__styleYak.Container, {
  "style": {
    "--1sstj5p": props => props.color
  }
});

[oliviertassinari]

Oh, there is a playground, great! I love using those with Prettier, Babel, esbuild, etc. I think it's a must have anytime there is code transformation. Issue created: #84.