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
396 stars 19 forks source link

Props types do not work when using tagged string literal #151

Open mnajdova opened 1 week ago

mnajdova commented 1 week ago

Steps to reproduce

Try adding props types to the tagged string literal, e.g.:

const Div = syled.div<{ $active: boolean; }>`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

Current behavior

Throws TS error:

Argument of type 'TemplateStringsArray' is not assignable to parameter of type 'StyledArgument<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>'.
  Type 'TemplateStringsArray' is not assignable to type 'CSSOthersObject<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>> & { ...; }'.
    Type 'TemplateStringsArray' is not assignable to type 'CSSOthersObject<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>>'.
      Index signature for type 'string' is missing in type 'TemplateStringsArray'.ts(2345)

Expected behavior

It should accept props definition.

Context

It makes sense to be fixed once https://github.com/mui/pigment-css/issues/82 is fixed.

Your environment

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

Search keywords: typescript, props, tagged string template