Add conditional properties to Stencil via modifiers and values

[NicholasBoll]

We combined modifiers and variables to provide flexibility in Stencils to support hard-coded modifier values as well as dynamic input:

const myStencil = createStencil({
  vars: {
    padding: '',
  },
  base: ({ padding }) => ({
    padding,
  }),
  modifiers: {
    padding: {
      large: { padding: 30 },
      small: { padding: 10 }
    }
  }
})

myStencil() // { padding: var(--padding); }
myStencil({ padding: 'large' }) // { padding: var(--padding); padding: 30px; }
myStencil({ padding: '35px' }) // { --padding: 35px; padding: var(--padding); }

But there's a problem. What if you do not want to define padding if not provided to the Stencil. According to the CSS custom property specification, the var() will always return a value. This means the padding property is always defined, even if the value is invalid. If the var(--padding) is not defined, it will return unset. If padding was defined elsewhere (maybe we're extending a Stencil), we've overridden the padding!

What if we could define a fall through so that we don't need to define padding in the base styles?

const myStencil = createStencil({
  vars: {
    padding: '',
  },
  base: {
    // other base styles
  },
  modifiers: {
    padding: {
      large: { padding: 30 },
      small: { padding: 10 },
      _: ({ padding }) => ({ padding }),
    }
  }
})

myStencil() // { }
myStencil({ padding: 'large' }) // { padding: 30px; }
myStencil({ padding: '35px' }) // { --padding: 35px; padding: var(--padding); }

Now if padding is not provided to the Stencil, the padding style property will not be defined and will not override any other styles that already define padding