Type issue when using themes

[rtkaaho]

Version: "@vanilla-extract/css": "1.2.3"

Hi All,

Just playing around with this over the weekend and I am running into this interesting type error when trying to use one of the examples from the site:

export const contract = createThemeContract({
  color: {
    brand: null
  },
  font: {
    body: null
  }
});

export const themeA = createTheme(contract, {
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const themeB = createTheme(contract, {
  color: {
    brand: 'pink'
  },
  font: {
    body: 'comic sans ms'
  }
});

export const className = style({
  backgroundColor: contract.color.brand,
  color: contract.color.brand
});

It seems that typescript is complaining about the backgroundColor and color not matching the expected type. It seems the error is coming from a dep of ve/css csstype.

This is the error:

Type 'CSSVarFunction | MapLeafNodes<any, CSSVarFunction>' is not assignable to type 'CSSVarFunction | BackgroundColor | BackgroundColor[] | (CSSVarFunction | BackgroundColor)[]'.ts(2322)
index.d.ts(344, 3): The expected type comes from property 'backgroundColor' which is declared here on type 'StyleRule'

It seems the culprit here is the existence of MapLeafNodes<any, CSSVarFunction>'. Any ideas on how to fix this? Or should this be filed as a bug?

Thanks for your help in advance :)

Adam

[markdalgleish]

I tried this locally but couldn't reproduce it. Would you be able to reproduce this on CodeSandbox?

[rtkaaho]

For sure, I will give it a shot. It might be transient. Currently working within a large monorepo. Some wild things go on in there :P

[rtkaaho]

Here is a link: https://codesandbox.io/s/nifty-joliot-mlpvb?file=/src/global.css.ts:469-508

And a quick screen shot of the issue in codesandbox. I pretty much just copy and pasted the example above and added the imports.

[rtkaaho]

Any updates on this? Is there anything else you need from me for debugging ?

[mattcompiles]

Looking into this now mate.

[mattcompiles]

OK this was a strange one. It seems that using createThemeContract with null values doesn't work when strictNullChecks is not enabled. We may consider updating some examples to avoid this confusion.

Either way though you have two options:

• Enable strictNullChecks or strict in your tsconfig.json
• Instead of using null, use a string value e.g.

  export const contract = createThemeContract({
    color: {
      brand: ''
    },
    font: {
      body: ''
    }
  });
  

[rtkaaho]

Wonderful thanks for looking into this! Appreciate it :) Your solution worked perfectly!