Allow assignInlineVars and setElementVars to accept potentially null or undefined values when a theme contract is not provided

[youngkyo0504]

Fixes #536

It works!

type DeepPartial<Obj> = { [Prop in keyof Obj]?: Obj[Prop] extends Primitive ? Obj[Prop] : DeepPartial<Obj[Prop]> }

export const vars = createThemeContract({
  color: null,

  hover: {
    containerPadding: null,
    radius: null,
  },
})

 style={assignInlineVars<DeepPartial<type of vars>>({ 
   hover: { radius: '15px' }
 })}

EDIT: The code snippet above is not a reflection of the feature implemented in this PR. See the linked issue or the comment below for more details.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4961d76

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@vanilla-extract/dynamic	Minor
@fixtures/features	Patch
@fixtures/themed	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[askoufis]

Thanks for the PR @youngkyo0504! This doesn't quite address the issue though, as you still can't actually assign undefined to a property in assignInlineVars. You'll see that it doesn't work if you try it in the test cases.

The other issue that needs to be addressed is what to actually do with the undefined value. Do we unset the style, or drop it from the style object entirely? Additionally, should null also be treated the same?

[youngkyo0504]

@askoufis Thanks for the reply! I think the issue have difference with my case. In my case DeepPartial does not work. I wrote test case wrong by mistake. It is correct test case in my case.

const style = assignInlineVars<DeepPartial<S>>(vars,{
  color: 'red'
})

but It have somthing in common with that issue. But it doesn't work in the test cases in issue. could I do additional work again?

If undefined or null comes as an argument , dropping it from the style object entirely is better than setting unset

[youngkyo0504]

I add additional work in 9c89553.

[askoufis]

@youngkyo0504 I've added some changes on top of your work.

I've narrowed the scope of the PR to only address the case where a theme contract is not passed. This is the issue specified in #536. You have a separate use case that may require further work, but that should be addressed in a separate PR. Please raise an issue if you are still interested in this use case.

There was no need to modify MapLeafNodes as that's only used when passing in a theme contract. It doesn't really make sense to allow undefined or null values if you're providing a theme contract as the entire point is to provide all values in the contract.

This feature really only applies to the first overload of assignInlineVars, so that's what I changed.

Additionally, I added the same functionality to setElementVars as it has a similar API. Also added some tests for it while I was there.

Finally I added some docs for this feature.