css function properties autocompletion not working

[agenordebriat]

Hey!

Just watched @Tahul's talk at Vuejs Amsterdam 2023, and noticed he could autocomplete every CSS property in the css function.
This is not working for me, and I suspect it's because the typing is wrong:

function css(declaration: CSSFunctionType<PinceauProps>): {
    declaration: any;
}

In the talk, when the cursor is hovering on the css function we can see that declaration should be typed as CSSFunctionType<PinceauProps>, and not any.

I followed the installation guide, and even noticed something else, see #98.

Would love for this last piece to work properly before I start using Pinceau in my projects.
I didn't know where to look at in the code to fix this, but I'd gladly be of some help if I can.

[blinpete]

yep, having the same problem right now.

That's bcoz of the missing utils field in defineTheme({}) config. Passing an empty object utils: {} doesn't work either.

Why it happens

Seems like Pinceau generates wrong node_modules/.vite/pinceau/utils.ts file in this case:

import { PinceauTheme, PropertyValue } from 'pinceau'

export const utils = undefined

export type GeneratedPinceauUtils = typeof utils

export default utils

And then CssFunctionType takes GeneratedPinceauUtils as a generic and returns never.

Workaround

You can set a padding utility or anything else:

defineTheme({
  ...,

  utils: {
    px: (value: PropertyValue<"padding">) => ({
      paddingLeft: value,
      paddingRight: value,
    }),
  },
})

Make sure to restart your dev server (to trigger pinceau rebuild) and Vue/TS server after this.

[Tahul]

Hello @agenordebriat and @blinpete ;

Thank you so much for your interest in Pinceau, I'm really glad to hear that.

I'm currently working on #95 ; that will greatly improve the situation concerning typing support.

As for now, I can confirm the bug you mention is fixed in my current workspace.

I will close this issue once the PR gets merged, happy to get your feedpack on upcoming 1.0 release!