0.10.0

Big update! 🎉

Three new options for chaining styles together

1. concat: z.concat(z`c green`, 'hello', cond && z`bc white`)
2. chained z: z`c orange`.z`fs 200%`
3. chained concat: z`c orange`.concat('some-class', cond && z`c blue`)

z chaining allows you to extend an existing zaftig style directly, and is an alternative to $compose.
It is especially useful when used on a cached style:

const tagStyle = z`padding 5; border-radius 4; background black; color white`
const errorTagStyle = tagStyle.z`color red`

Concat is useful when you want to combine a zaftig style with other zaftig styles or CSS classes:

const textBoxStyle = z`padding 5; width 100%`
const errorStyle = z`c red`
const successStyle = z`c green`
//...
<input className={textBoxStyle.concat(error && errorStyle, success && successStyle)} />

New config option dot

Controls whether zaftig adds a dot to the className when valueOf() is called on Style objects:

z.setDot(true)
'' + z`c orange` // .z23423 <-- dot

z.setDot(false)
'' + z`c orange` // z23423 <-- no dot

This is mostly useful when using React, since it calls valueOf() on component props:

This snippet only works in React with dot set to false:

<div className={z`c orange`}>Hello World</div>

Support for @supports (...) {}

Could arguably be considered a bug fix, but starting now Zaftig supports @supports blocks, including nesting them:

z`
  @supports (display: flex) {
    display flex
    @supports (justify-content: center) {
      justify-content center
    }
  }
`

Output:

@supports (display: flex) {
  .z34j42k3 {
    display: flex;
  }

  @supports (justify-content: center) {
    .z34j42k3 {
      justify-content: center;
    }
  }
}

Output nested @media and @supports queries

In previous versions zaftig would try to generate a combined selector for media queries when they were nested:

z`
  @media screen {
    @media (min-width: 500px) {
      c green
    }
  }
`

Would generate:

@media screen and (min-width: 500px) {
  .z32423 {
    color: green;
  }
}

Since all browsers (apart from IE which Zaftig doesn't support) support nested media queries from now on zaftig will output them nested instead of generating a combined query:

@media screen {
  @media (min-width: 500px) {
    .z3423 {
      color: green;
    }
  }
}

This should not result in a visible difference in behavior except in cases where zaftig was incorrectly generating the combined query.

The main advantage of this change is simpler/smaller code for appending styles, and more consistent behavior since complex boolean media queries would not work in previous versions.

Enhancement: skip appending rules with no selector

Previously when a block didn't have a selector the styles would get applied to the parent. Now they will simply be ignored.
In debug mode zaftig will warn about this.

z`
  {
    color green
  }
`
// ⚠️ zaftig: missing selector ...