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

Missing type export? #77

Open oliviertassinari opened 1 month ago

oliviertassinari commented 1 month ago

Steps to reproduce

I'm trying to type:

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

const mystye = css({
  color: '#fff',
  // position: 'initial' works
  position: 'initial !important',
  backgroundColor: '#000',
});

export default function Home() {
  return <main className={mystye}>mystye</main>;
}

https://stackblitz.com/edit/github-vfcqdf?file=src%2FApp.tsx

but I struggle to. I have tried React.CSSProperties but it doesn't work, which makes sense, this type is meant for the style prop.

Current behavior

I see 3 distinct things:

  1. I can't find reexported types from Pigment CSS that I can use.
SCR-20240511-uerp

Should types around here be exported?

https://github.com/mui/pigment-css/blob/87ef64ba105b0650b2fe8fd17f6c3ffbcbfd5ba1/packages/pigment-css-react/src/base.d.ts#L29

  1. Should !important work outside of the box? Like it does with @mui/system. Proof: https://codesandbox.io/p/sandbox/patient-cloud-xykphn?file=%2Fsrc%2FDemo.tsx%3A5%2C3.

  2. Shouldn't the error be flagged on the property that is wrong and not the first property?

Expected behavior

No response

Context

No response

Your environment

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

Search keywords: -

brijeshb42 commented 3 weeks ago

I've found issues with TS support in Stackblitz. Is this also an issue when you are working locally ? I have anyways exported the types in a PR and should be published with the new release.