import { createGeneratorContext } from '@bamboocss/fixture'
import type { Dict } from '@bamboocss/types'
import { describe, expect, test } from 'vitest'
import { createRuleProcessor } from './fixture'

/* -----------------------------------------------------------------------------
 * Test Setup
 * -----------------------------------------------------------------------------*/

const css = (styles: Dict) => {
  const ctx = createGeneratorContext()
  ctx.encoder.processAtomic(styles)
  ctx.decoder.collect(ctx.encoder)
  return ctx.decoder.atomic
}

const recipe = (name: string, styles: Dict) => {
  const ctx = createGeneratorContext()
  ctx.encoder.processRecipe(name, styles)
  ctx.decoder.collect(ctx.encoder)
  return ctx.decoder.getRecipeResult(name)
}

const cva = (styles: Dict) => {
  const ctx = createGeneratorContext()
  ctx.encoder.processAtomicRecipe(styles)
  ctx.decoder.collect(ctx.encoder)
  return ctx.decoder.atomic
}

const sva = (styles: Dict) => {
  const ctx = createGeneratorContext()
  ctx.encoder.processAtomicSlotRecipe(styles)
  ctx.decoder.collect(ctx.encoder)
  return ctx.decoder.atomic
}

/* -----------------------------------------------------------------------------
 * Actual Tests
 * -----------------------------------------------------------------------------*/

describe('style decoder', () => {
  test('should resolve references', () => {
    const result = css({
      border: '2px solid token(colors.red.300)',
    })

    expect(result).toMatchInlineSnapshot(`
      Set {
        {
          "className": "bd_2px_solid_token\\(colors\\.red\\.300\\)",
          "conditions": undefined,
          "entry": {
            "prop": "border",
            "value": "2px solid token(colors.red.300)",
          },
          "hash": "border]___[value:2px solid token(colors.red.300)",
          "layer": undefined,
          "result": {
            ".bd_2px_solid_token\\(colors\\.red\\.300\\)": {
              "border": "2px solid var(--colors-red-300)",
            },
          },
          "scoped": false,
        },
      }
    `)
  })

  test('css with base', () => {
    const result = css({
      base: { color: 'blue' },
      md: { color: 'red' },
    })

    expect(result).toMatchInlineSnapshot(`
      Set {
        {
          "className": "c_blue",
          "conditions": undefined,
          "entry": {
            "prop": "color",
            "value": "blue",
          },
          "hash": "color]___[value:blue",
          "layer": undefined,
          "result": {
            ".c_blue": {
              "color": "blue",
            },
          },
          "scoped": false,
        },
        {
          "className": "md\\:c_red",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
          ],
          "entry": {
            "cond": "md",
            "prop": "color",
            "value": "red",
          },
          "hash": "color]___[value:red]___[cond:md",
          "layer": undefined,
          "result": {
            ".md\\:c_red": {
              "@media (width >= 48rem)": {
                "color": "red",
              },
            },
          },
          "scoped": false,
        },
      }
    `)
  })

  test('css', () => {
    const result = css({
      color: 'red !important',
      border: '1px solid token(colors.red.100)',
      bg: 'blue.300',
      textStyle: 'headline.h1',
      w: { base: 1, sm: 2, xl: 3 },
      fontSize: {
        base: 'xs',
        sm: 'sm',
        _hover: {
          base: 'md',
          md: 'lg',
          _focus: 'xl',
        },
        _dark: '2xl',
      },
      sm: {
        color: 'yellow',
        backgroundColor: {
          base: 'red',
          _hover: 'green',
        },
      },
      "&[data-attr='test']": {
        color: 'green',
        _expanded: {
          color: 'purple',
          '.target &': {
            color: {
              base: 'cyan',
              _open: 'orange',
              xl: 'pink',
            },
          },
        },
      },
    })

    expect(result).toMatchInlineSnapshot(
      `
      Set {
        {
          "className": "bd_1px_solid_token\\(colors\\.red\\.100\\)",
          "conditions": undefined,
          "entry": {
            "prop": "border",
            "value": "1px solid token(colors.red.100)",
          },
          "hash": "border]___[value:1px solid token(colors.red.100)",
          "layer": undefined,
          "result": {
            ".bd_1px_solid_token\\(colors\\.red\\.100\\)": {
              "border": "1px solid var(--colors-red-100)",
            },
          },
          "scoped": false,
        },
        {
          "className": "bg_blue\\.300",
          "conditions": undefined,
          "entry": {
            "prop": "background",
            "value": "blue.300",
          },
          "hash": "background]___[value:blue.300",
          "layer": undefined,
          "result": {
            ".bg_blue\\.300": {
              "background": "var(--colors-blue-300)",
            },
          },
          "scoped": false,
        },
        {
          "className": "c_red",
          "conditions": undefined,
          "entry": {
            "prop": "color",
            "value": "red !important",
          },
          "hash": "color]___[value:red !important",
          "layer": undefined,
          "result": {
            ".c_red\\!": {
              "color": "red !important",
            },
          },
          "scoped": false,
        },
        {
          "className": "text-style_headline\\.h1",
          "conditions": undefined,
          "entry": {
            "prop": "textStyle",
            "value": "headline.h1",
          },
          "hash": "textStyle]___[value:headline.h1",
          "layer": undefined,
          "result": {
            ".text-style_headline\\.h1": {
              "textStyle": "headline.h1",
            },
          },
          "scoped": false,
        },
        {
          "className": "fs_xs",
          "conditions": undefined,
          "entry": {
            "prop": "fontSize",
            "value": "xs",
          },
          "hash": "fontSize]___[value:xs",
          "layer": undefined,
          "result": {
            ".fs_xs": {
              "fontSize": "var(--font-sizes-xs)",
            },
          },
          "scoped": false,
        },
        {
          "className": "w_1",
          "conditions": undefined,
          "entry": {
            "prop": "width",
            "value": 1,
          },
          "hash": "width]___[value:1",
          "layer": undefined,
          "result": {
            ".w_1": {
              "width": "var(--sizes-1)",
            },
          },
          "scoped": false,
        },
        {
          "className": "dark\\:fs_2xl",
          "conditions": [
            {
              "raw": "[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]",
              "type": "combinator-nesting",
              "value": "[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]",
            },
          ],
          "entry": {
            "cond": "_dark",
            "prop": "fontSize",
            "value": "2xl",
          },
          "hash": "fontSize]___[value:2xl]___[cond:_dark",
          "layer": undefined,
          "result": {
            ".dark\\:fs_2xl": {
              "[data-theme=dark] &, .dark &, &.dark, &[data-theme=dark]": {
                "fontSize": "var(--font-sizes-2xl)",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:c_green",
          "conditions": [
            {
              "raw": "&[data-attr='test']",
              "type": "self-nesting",
              "value": "&[data-attr='test']",
            },
          ],
          "entry": {
            "cond": "&[data-attr='test']",
            "prop": "color",
            "value": "green",
          },
          "hash": "color]___[value:green]___[cond:&[data-attr='test']",
          "layer": undefined,
          "result": {
            ".\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:c_green": {
              "&[data-attr='test']": {
                "color": "green",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "hover\\:fs_md",
          "conditions": [
            {
              "raw": "&:is(:hover, [data-hover])",
              "type": "self-nesting",
              "value": "&:is(:hover, [data-hover])",
            },
          ],
          "entry": {
            "cond": "_hover",
            "prop": "fontSize",
            "value": "md",
          },
          "hash": "fontSize]___[value:md]___[cond:_hover",
          "layer": undefined,
          "result": {
            ".hover\\:fs_md": {
              "&:is(:hover, [data-hover])": {
                "fontSize": "var(--font-sizes-md)",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:c_purple",
          "conditions": [
            {
              "raw": "&[data-attr='test']",
              "type": "self-nesting",
              "value": "&[data-attr='test']",
            },
            {
              "raw": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
              "type": "self-nesting",
              "value": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
            },
          ],
          "entry": {
            "cond": "&[data-attr='test']<___>_expanded",
            "prop": "color",
            "value": "purple",
          },
          "hash": "color]___[value:purple]___[cond:&[data-attr='test']<___>_expanded",
          "layer": undefined,
          "result": {
            ".\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:c_purple": {
              "&[data-attr='test']": {
                "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])": {
                  "color": "purple",
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "hover\\:focus\\:fs_xl",
          "conditions": [
            {
              "raw": "&:is(:hover, [data-hover])",
              "type": "self-nesting",
              "value": "&:is(:hover, [data-hover])",
            },
            {
              "raw": "&:is(:focus, [data-focus])",
              "type": "self-nesting",
              "value": "&:is(:focus, [data-focus])",
            },
          ],
          "entry": {
            "cond": "_hover<___>_focus",
            "prop": "fontSize",
            "value": "xl",
          },
          "hash": "fontSize]___[value:xl]___[cond:_hover<___>_focus",
          "layer": undefined,
          "result": {
            ".hover\\:focus\\:fs_xl": {
              "&:is(:hover, [data-hover])": {
                "&:is(:focus, [data-focus])": {
                  "fontSize": "var(--font-sizes-xl)",
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:c_cyan",
          "conditions": [
            {
              "raw": "&[data-attr='test']",
              "type": "self-nesting",
              "value": "&[data-attr='test']",
            },
            {
              "raw": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
              "type": "self-nesting",
              "value": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
            },
            {
              "raw": ".target &",
              "type": "parent-nesting",
              "value": ".target &",
            },
          ],
          "entry": {
            "cond": "&[data-attr='test']<___>_expanded<___>.target &",
            "prop": "color",
            "value": "cyan",
          },
          "hash": "color]___[value:cyan]___[cond:&[data-attr='test']<___>_expanded<___>.target &",
          "layer": undefined,
          "result": {
            ".\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:c_cyan": {
              "&[data-attr='test']": {
                "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])": {
                  ".target &": {
                    "color": "cyan",
                  },
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:open\\:c_orange",
          "conditions": [
            {
              "raw": "&[data-attr='test']",
              "type": "self-nesting",
              "value": "&[data-attr='test']",
            },
            {
              "raw": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
              "type": "self-nesting",
              "value": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
            },
            {
              "raw": ".target &",
              "type": "parent-nesting",
              "value": ".target &",
            },
            {
              "raw": "&:is([open], [data-open], [data-state="open"], :popover-open)",
              "type": "self-nesting",
              "value": "&:is([open], [data-open], [data-state="open"], :popover-open)",
            },
          ],
          "entry": {
            "cond": "&[data-attr='test']<___>_expanded<___>.target &<___>_open",
            "prop": "color",
            "value": "orange",
          },
          "hash": "color]___[value:orange]___[cond:&[data-attr='test']<___>_expanded<___>.target &<___>_open",
          "layer": undefined,
          "result": {
            ".\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:open\\:c_orange": {
              "&[data-attr='test']": {
                "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])": {
                  ".target &": {
                    "&:is([open], [data-open], [data-state="open"], :popover-open)": {
                      "color": "orange",
                    },
                  },
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "sm\\:fs_sm",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 40rem)",
              "raw": "@media (width >= 40rem)",
              "type": "at-rule",
              "value": "sm",
            },
          ],
          "entry": {
            "cond": "sm",
            "prop": "fontSize",
            "value": "sm",
          },
          "hash": "fontSize]___[value:sm]___[cond:sm",
          "layer": undefined,
          "result": {
            ".sm\\:fs_sm": {
              "@media (width >= 40rem)": {
                "fontSize": "var(--font-sizes-sm)",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "sm\\:c_yellow",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 40rem)",
              "raw": "@media (width >= 40rem)",
              "type": "at-rule",
              "value": "sm",
            },
          ],
          "entry": {
            "cond": "sm",
            "prop": "color",
            "value": "yellow",
          },
          "hash": "color]___[value:yellow]___[cond:sm",
          "layer": undefined,
          "result": {
            ".sm\\:c_yellow": {
              "@media (width >= 40rem)": {
                "color": "yellow",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "sm\\:bg-c_red",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 40rem)",
              "raw": "@media (width >= 40rem)",
              "type": "at-rule",
              "value": "sm",
            },
          ],
          "entry": {
            "cond": "sm",
            "prop": "backgroundColor",
            "value": "red",
          },
          "hash": "backgroundColor]___[value:red]___[cond:sm",
          "layer": undefined,
          "result": {
            ".sm\\:bg-c_red": {
              "@media (width >= 40rem)": {
                "backgroundColor": "red",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "sm\\:w_2",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 40rem)",
              "raw": "@media (width >= 40rem)",
              "type": "at-rule",
              "value": "sm",
            },
          ],
          "entry": {
            "cond": "sm",
            "prop": "width",
            "value": 2,
          },
          "hash": "width]___[value:2]___[cond:sm",
          "layer": undefined,
          "result": {
            ".sm\\:w_2": {
              "@media (width >= 40rem)": {
                "width": "var(--sizes-2)",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "sm\\:hover\\:bg-c_green",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 40rem)",
              "raw": "@media (width >= 40rem)",
              "type": "at-rule",
              "value": "sm",
            },
            {
              "raw": "&:is(:hover, [data-hover])",
              "type": "self-nesting",
              "value": "&:is(:hover, [data-hover])",
            },
          ],
          "entry": {
            "cond": "sm<___>_hover",
            "prop": "backgroundColor",
            "value": "green",
          },
          "hash": "backgroundColor]___[value:green]___[cond:sm<___>_hover",
          "layer": undefined,
          "result": {
            ".sm\\:hover\\:bg-c_green": {
              "@media (width >= 40rem)": {
                "&:is(:hover, [data-hover])": {
                  "backgroundColor": "green",
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "hover\\:md\\:fs_lg",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
            {
              "raw": "&:is(:hover, [data-hover])",
              "type": "self-nesting",
              "value": "&:is(:hover, [data-hover])",
            },
          ],
          "entry": {
            "cond": "_hover<___>md",
            "prop": "fontSize",
            "value": "lg",
          },
          "hash": "fontSize]___[value:lg]___[cond:_hover<___>md",
          "layer": undefined,
          "result": {
            ".hover\\:md\\:fs_lg": {
              "@media (width >= 48rem)": {
                "&:is(:hover, [data-hover])": {
                  "fontSize": "var(--font-sizes-lg)",
                },
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "xl\\:w_3",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 80rem)",
              "raw": "@media (width >= 80rem)",
              "type": "at-rule",
              "value": "xl",
            },
          ],
          "entry": {
            "cond": "xl",
            "prop": "width",
            "value": 3,
          },
          "hash": "width]___[value:3]___[cond:xl",
          "layer": undefined,
          "result": {
            ".xl\\:w_3": {
              "@media (width >= 80rem)": {
                "width": "var(--sizes-3)",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:xl\\:c_pink",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 80rem)",
              "raw": "@media (width >= 80rem)",
              "type": "at-rule",
              "value": "xl",
            },
            {
              "raw": "&[data-attr='test']",
              "type": "self-nesting",
              "value": "&[data-attr='test']",
            },
            {
              "raw": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
              "type": "self-nesting",
              "value": "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])",
            },
            {
              "raw": ".target &",
              "type": "parent-nesting",
              "value": ".target &",
            },
          ],
          "entry": {
            "cond": "&[data-attr='test']<___>_expanded<___>.target &<___>xl",
            "prop": "color",
            "value": "pink",
          },
          "hash": "color]___[value:pink]___[cond:&[data-attr='test']<___>_expanded<___>.target &<___>xl",
          "layer": undefined,
          "result": {
            ".\\[\\&\\[data-attr\\=\\'test\\'\\]\\]\\:expanded\\:\\[\\.target_\\&\\]\\:xl\\:c_pink": {
              "@media (width >= 80rem)": {
                "&[data-attr='test']": {
                  "&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])": {
                    ".target &": {
                      "color": "pink",
                    },
                  },
                },
              },
            },
          },
          "scoped": false,
        },
      }
    `,
    )
  })

  test('recipe', () => {
    const result = recipe('buttonStyle', { size: { base: 'sm', md: 'md' } })

    expect(result.base).toMatchInlineSnapshot(`
      Set {
        {
          "className": "buttonStyle",
          "details": [
            {
              "conditions": undefined,
              "entry": {
                "prop": "display",
                "recipe": "buttonStyle",
                "value": "inline-flex",
              },
              "hash": "display]___[value:inline-flex]___[recipe:buttonStyle",
              "result": {
                "display": "inline-flex",
              },
            },
            {
              "conditions": undefined,
              "entry": {
                "prop": "alignItems",
                "recipe": "buttonStyle",
                "value": "center",
              },
              "hash": "alignItems]___[value:center]___[recipe:buttonStyle",
              "result": {
                "alignItems": "center",
              },
            },
            {
              "conditions": undefined,
              "entry": {
                "prop": "justifyContent",
                "recipe": "buttonStyle",
                "value": "center",
              },
              "hash": "justifyContent]___[value:center]___[recipe:buttonStyle",
              "result": {
                "justifyContent": "center",
              },
            },
            {
              "conditions": [
                {
                  "raw": "&:is(:hover, [data-hover])",
                  "type": "self-nesting",
                  "value": "&:is(:hover, [data-hover])",
                },
              ],
              "entry": {
                "cond": "_hover",
                "prop": "backgroundColor",
                "recipe": "buttonStyle",
                "value": "red.200",
              },
              "hash": "backgroundColor]___[value:red.200]___[cond:_hover]___[recipe:buttonStyle",
              "result": {
                "backgroundColor": "var(--colors-red-200)",
              },
            },
            {
              "conditions": [
                {
                  "raw": "&:is(:hover, [data-hover])",
                  "type": "self-nesting",
                  "value": "&:is(:hover, [data-hover])",
                },
              ],
              "entry": {
                "cond": "_hover",
                "prop": "fontSize",
                "recipe": "buttonStyle",
                "value": "3xl",
              },
              "hash": "fontSize]___[value:3xl]___[cond:_hover]___[recipe:buttonStyle",
              "result": {
                "fontSize": "var(--font-sizes-3xl)",
              },
            },
            {
              "conditions": [
                {
                  "raw": "&:is(:hover, [data-hover])",
                  "type": "self-nesting",
                  "value": "&:is(:hover, [data-hover])",
                },
              ],
              "entry": {
                "cond": "_hover",
                "prop": "color",
                "recipe": "buttonStyle",
                "value": "white",
              },
              "hash": "color]___[value:white]___[cond:_hover]___[recipe:buttonStyle",
              "result": {
                "color": "var(--colors-white)",
              },
            },
          ],
          "hashSet": Set {
            "display]___[value:inline-flex]___[recipe:buttonStyle",
            "alignItems]___[value:center]___[recipe:buttonStyle",
            "justifyContent]___[value:center]___[recipe:buttonStyle",
            "backgroundColor]___[value:red.200]___[cond:_hover]___[recipe:buttonStyle",
            "fontSize]___[value:3xl]___[cond:_hover]___[recipe:buttonStyle",
            "color]___[value:white]___[cond:_hover]___[recipe:buttonStyle",
          },
          "recipe": "buttonStyle",
          "result": {
            ".buttonStyle": {
              "&:is(:hover, [data-hover])": {
                "backgroundColor": "var(--colors-red-200)",
                "color": "var(--colors-white)",
                "fontSize": "var(--font-sizes-3xl)",
              },
              "alignItems": "center",
              "display": "inline-flex",
              "justifyContent": "center",
            },
          },
          "slot": undefined,
        },
      }
    `)

    expect(result.variants).toMatchInlineSnapshot(`
      Set {
        {
          "className": "buttonStyle--size_sm",
          "conditions": undefined,
          "entry": {
            "prop": "size",
            "recipe": "buttonStyle",
            "value": "sm",
          },
          "hash": "size]___[value:sm]___[recipe:buttonStyle",
          "layer": undefined,
          "result": {
            ".buttonStyle--size_sm": {
              "height": "2.5rem",
              "minWidth": "2.5rem",
              "padding": "0 0.5rem",
            },
          },
          "scoped": false,
        },
        {
          "className": "md\\:buttonStyle--size_md",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
          ],
          "entry": {
            "cond": "md",
            "prop": "size",
            "recipe": "buttonStyle",
            "value": "md",
          },
          "hash": "size]___[value:md]___[cond:md]___[recipe:buttonStyle",
          "layer": undefined,
          "result": {
            ".md\\:buttonStyle--size_md": {
              "@media (width >= 48rem)": {
                "height": "3rem",
                "minWidth": "3rem",
                "padding": "0 0.75rem",
              },
            },
          },
          "scoped": false,
        },
        {
          "className": "buttonStyle--variant_solid",
          "conditions": undefined,
          "entry": {
            "prop": "variant",
            "recipe": "buttonStyle",
            "value": "solid",
          },
          "hash": "variant]___[value:solid]___[recipe:buttonStyle",
          "layer": undefined,
          "result": {
            ".buttonStyle--variant_solid": {
              "&:is(:hover, [data-hover])": {
                "backgroundColor": "darkblue",
              },
              "&[data-disabled]": {
                "backgroundColor": "gray",
                "color": "var(--colors-black)",
                "fontSize": "var(--font-sizes-2xl)",
              },
              "backgroundColor": "blue",
              "color": "var(--colors-white)",
            },
          },
          "scoped": false,
        },
      }
    `)
  })

  test('cva', () => {
    // packages/fixture/src/recipes.ts
    const buttonStyle = cva({
      base: {
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
      },
      variants: {
        size: {
          sm: {
            textStyle: 'headline.h1',
            height: '2.5rem',
            minWidth: '2.5rem',
            padding: '0 0.5rem',
          },
          md: {
            height: '3rem',
            minWidth: '3rem',
            padding: '0 0.75rem',
          },
        },
        variant: {
          solid: {
            backgroundColor: 'blue',
            color: 'white',
            _hover: {
              backgroundColor: 'darkblue',
            },
            '&[data-disabled]': {
              backgroundColor: 'gray',
              color: 'black',
            },
          },
          outline: {
            backgroundColor: 'transparent',
            border: '1px solid blue',
            color: 'blue',
            _hover: {
              backgroundColor: 'blue',
              color: 'white',
            },
            '&[data-disabled]': {
              backgroundColor: 'transparent',
              border: '1px solid gray',
              color: 'gray',
            },
          },
        },
      },
      defaultVariants: {
        size: 'md',
        variant: 'solid',
      },
    })

    expect(buttonStyle).toMatchInlineSnapshot(`Set {}`)
  })

  test('slot recipe', () => {
    const result = recipe('checkbox', { size: { base: 'sm', md: 'md' } })

    expect(result.base).toMatchInlineSnapshot(`
      {
        "control": Set {
          {
            "className": "checkbox__control",
            "details": [
              {
                "conditions": undefined,
                "entry": {
                  "prop": "borderWidth",
                  "recipe": "checkbox",
                  "slot": "control",
                  "value": "1px",
                },
                "hash": "borderWidth]___[value:1px]___[recipe:checkbox]___[slot:control",
                "result": {
                  "borderWidth": "1px",
                },
              },
              {
                "conditions": undefined,
                "entry": {
                  "prop": "borderRadius",
                  "recipe": "checkbox",
                  "slot": "control",
                  "value": "sm",
                },
                "hash": "borderRadius]___[value:sm]___[recipe:checkbox]___[slot:control",
                "result": {
                  "borderRadius": "var(--radii-sm)",
                },
              },
            ],
            "hashSet": Set {
              "borderWidth]___[value:1px]___[recipe:checkbox]___[slot:control",
              "borderRadius]___[value:sm]___[recipe:checkbox]___[slot:control",
            },
            "recipe": "checkbox",
            "result": {
              ".checkbox__control": {
                "borderRadius": "var(--radii-sm)",
                "borderWidth": "1px",
              },
            },
            "slot": "control",
          },
        },
        "label": Set {
          {
            "className": "checkbox__label",
            "details": [
              {
                "conditions": undefined,
                "entry": {
                  "prop": "marginInlineStart",
                  "recipe": "checkbox",
                  "slot": "label",
                  "value": 2,
                },
                "hash": "marginInlineStart]___[value:2]___[recipe:checkbox]___[slot:label",
                "result": {
                  "marginInlineStart": "var(--spacing-2)",
                },
              },
            ],
            "hashSet": Set {
              "marginInlineStart]___[value:2]___[recipe:checkbox]___[slot:label",
            },
            "recipe": "checkbox",
            "result": {
              ".checkbox__label": {
                "marginInlineStart": "var(--spacing-2)",
              },
            },
            "slot": "label",
          },
        },
        "root": Set {
          {
            "className": "checkbox__root",
            "details": [
              {
                "conditions": undefined,
                "entry": {
                  "prop": "display",
                  "recipe": "checkbox",
                  "slot": "root",
                  "value": "flex",
                },
                "hash": "display]___[value:flex]___[recipe:checkbox]___[slot:root",
                "result": {
                  "display": "flex",
                },
              },
              {
                "conditions": undefined,
                "entry": {
                  "prop": "alignItems",
                  "recipe": "checkbox",
                  "slot": "root",
                  "value": "center",
                },
                "hash": "alignItems]___[value:center]___[recipe:checkbox]___[slot:root",
                "result": {
                  "alignItems": "center",
                },
              },
              {
                "conditions": undefined,
                "entry": {
                  "prop": "gap",
                  "recipe": "checkbox",
                  "slot": "root",
                  "value": 2,
                },
                "hash": "gap]___[value:2]___[recipe:checkbox]___[slot:root",
                "result": {
                  "gap": "var(--spacing-2)",
                },
              },
            ],
            "hashSet": Set {
              "display]___[value:flex]___[recipe:checkbox]___[slot:root",
              "alignItems]___[value:center]___[recipe:checkbox]___[slot:root",
              "gap]___[value:2]___[recipe:checkbox]___[slot:root",
            },
            "recipe": "checkbox",
            "result": {
              ".checkbox__root": {
                "alignItems": "center",
                "display": "flex",
                "gap": "var(--spacing-2)",
              },
            },
            "slot": "root",
          },
        },
      }
    `)
    expect(result.variants).toMatchInlineSnapshot(`
      Set {
        {
          "className": "checkbox__root--size_sm",
          "conditions": undefined,
          "entry": {
            "prop": "size",
            "recipe": "checkbox",
            "slot": "root",
            "value": "sm",
          },
          "hash": "size]___[value:sm]___[recipe:checkbox]___[slot:root",
          "layer": undefined,
          "result": {
            ".checkbox__root--size_sm": {},
          },
          "scoped": false,
        },
        {
          "className": "checkbox__control--size_sm",
          "conditions": undefined,
          "entry": {
            "prop": "size",
            "recipe": "checkbox",
            "slot": "control",
            "value": "sm",
          },
          "hash": "size]___[value:sm]___[recipe:checkbox]___[slot:control",
          "layer": undefined,
          "result": {
            "@scope (.checkbox__root--size_sm) to (.checkbox__root)": {
              ".checkbox__control": {
                "height": "var(--sizes-8)",
                "textStyle": "headline.h1",
                "width": "var(--sizes-8)",
              },
            },
          },
          "scoped": true,
        },
        {
          "className": "checkbox__label--size_sm",
          "conditions": undefined,
          "entry": {
            "prop": "size",
            "recipe": "checkbox",
            "slot": "label",
            "value": "sm",
          },
          "hash": "size]___[value:sm]___[recipe:checkbox]___[slot:label",
          "layer": undefined,
          "result": {
            "@scope (.checkbox__root--size_sm) to (.checkbox__root)": {
              ".checkbox__label": {
                "fontSize": "var(--font-sizes-sm)",
              },
            },
          },
          "scoped": true,
        },
        {
          "className": "md\\:checkbox__root--size_md",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
          ],
          "entry": {
            "cond": "md",
            "prop": "size",
            "recipe": "checkbox",
            "slot": "root",
            "value": "md",
          },
          "hash": "size]___[value:md]___[cond:md]___[recipe:checkbox]___[slot:root",
          "layer": undefined,
          "result": {
            ".md\\:checkbox__root--size_md": {
              "@media (width >= 48rem)": {},
            },
          },
          "scoped": false,
        },
        {
          "className": "md\\:checkbox__control--size_md",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
          ],
          "entry": {
            "cond": "md",
            "prop": "size",
            "recipe": "checkbox",
            "slot": "control",
            "value": "md",
          },
          "hash": "size]___[value:md]___[cond:md]___[recipe:checkbox]___[slot:control",
          "layer": undefined,
          "result": {
            "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
              ".checkbox__control": {
                "@media (width >= 48rem)": {
                  "height": "var(--sizes-10)",
                  "width": "var(--sizes-10)",
                },
              },
            },
          },
          "scoped": true,
        },
        {
          "className": "md\\:checkbox__label--size_md",
          "conditions": [
            {
              "name": "breakpoint",
              "params": "(width >= 48rem)",
              "raw": "@media (width >= 48rem)",
              "type": "at-rule",
              "value": "md",
            },
          ],
          "entry": {
            "cond": "md",
            "prop": "size",
            "recipe": "checkbox",
            "slot": "label",
            "value": "md",
          },
          "hash": "size]___[value:md]___[cond:md]___[recipe:checkbox]___[slot:label",
          "layer": undefined,
          "result": {
            "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
              ".checkbox__label": {
                "@media (width >= 48rem)": {
                  "fontSize": "var(--font-sizes-md)",
                },
              },
            },
          },
          "scoped": true,
        },
      }
    `)
  })

  test('sva', () => {
    // packages/fixture/src/slot-recipes.ts
    const checkbox = sva({
      slots: ['root', 'control', 'label'],
      base: {
        root: { display: 'flex', alignItems: 'center', gap: '2' },
        control: { borderWidth: '1px', borderRadius: 'sm' },
        label: { marginStart: '2' },
      },
      variants: {
        size: {
          sm: {
            control: { width: '8', height: '8' },
            label: { fontSize: 'sm' },
          },
          md: {
            control: { width: '10', height: '10' },
            label: { fontSize: 'md' },
          },
          lg: {
            control: { width: '12', height: '12' },
            label: { fontSize: 'lg' },
          },
        },
      },
      defaultVariants: {
        size: 'sm',
      },
    })

    expect(checkbox).toMatchInlineSnapshot(`Set {}`)
  })

  test('simple recipe with alterning no-condition/condition props', () => {
    const processor = createRuleProcessor({
      theme: {
        extend: {
          recipes: {
            button: {
              className: 'btn',
              base: {
                lineHeight: '1.2',
                _focusVisible: {
                  boxShadow: 'outline',
                },
                _disabled: {
                  opacity: 0.4,
                },
                _hover: {
                  _disabled: { bg: 'initial' },
                },
                display: 'inline-flex',
                outline: 'none',
                _focus: {
                  zIndex: 1,
                },
              },
            },
          },
        },
      },
    })

    const result = processor.recipe('button', {})!
    expect(result.getClassNames()).toMatchInlineSnapshot(`
      [
        "btn",
      ]
    `)
  })

  test('fromJSON', () => {
    const ctx = createGeneratorContext()
    const encoder = ctx.encoder
    const decoder = ctx.decoder

    encoder.fromJSON({
      schemaVersion: 'x',
      styles: { atomic: ['color]___[value:red', 'color]___[value:blue'] },
    })

    expect(decoder.collect(encoder).atomic).toMatchInlineSnapshot(`
      Set {
        {
          "className": "c_red",
          "conditions": undefined,
          "entry": {
            "prop": "color",
            "value": "red",
          },
          "hash": "color]___[value:red",
          "layer": undefined,
          "result": {
            ".c_red": {
              "color": "red",
            },
          },
          "scoped": false,
        },
        {
          "className": "c_blue",
          "conditions": undefined,
          "entry": {
            "prop": "color",
            "value": "blue",
          },
          "hash": "color]___[value:blue",
          "layer": undefined,
          "result": {
            ".c_blue": {
              "color": "blue",
            },
          },
          "scoped": false,
        },
      }
    `)

    encoder.fromJSON({
      schemaVersion: 'x',
      styles: { recipes: { buttonStyle: ['variant]___[value:solid'] } },
    })

    expect(decoder.collect(encoder).recipes).toMatchInlineSnapshot(`
      Map {
        "buttonStyle" => Set {
          {
            "className": "variant_solid",
            "conditions": undefined,
            "entry": {
              "prop": "variant",
              "value": "solid",
            },
            "hash": "variant]___[value:solid",
            "layer": undefined,
            "result": {
              ".variant_solid": {
                "variant": "solid",
              },
            },
            "scoped": false,
          },
        },
      }
    `)

    expect(decoder.collect(encoder).recipes_base).toMatchInlineSnapshot(`
      Map {
        "buttonStyle" => Set {
          {
            "className": "buttonStyle",
            "details": [
              {
                "conditions": undefined,
                "entry": {
                  "prop": "display",
                  "recipe": "buttonStyle",
                  "value": "inline-flex",
                },
                "hash": "display]___[value:inline-flex]___[recipe:buttonStyle",
                "result": {
                  "display": "inline-flex",
                },
              },
              {
                "conditions": undefined,
                "entry": {
                  "prop": "alignItems",
                  "recipe": "buttonStyle",
                  "value": "center",
                },
                "hash": "alignItems]___[value:center]___[recipe:buttonStyle",
                "result": {
                  "alignItems": "center",
                },
              },
              {
                "conditions": undefined,
                "entry": {
                  "prop": "justifyContent",
                  "recipe": "buttonStyle",
                  "value": "center",
                },
                "hash": "justifyContent]___[value:center]___[recipe:buttonStyle",
                "result": {
                  "justifyContent": "center",
                },
              },
              {
                "conditions": [
                  {
                    "raw": "&:is(:hover, [data-hover])",
                    "type": "self-nesting",
                    "value": "&:is(:hover, [data-hover])",
                  },
                ],
                "entry": {
                  "cond": "_hover",
                  "prop": "backgroundColor",
                  "recipe": "buttonStyle",
                  "value": "red.200",
                },
                "hash": "backgroundColor]___[value:red.200]___[cond:_hover]___[recipe:buttonStyle",
                "result": {
                  "backgroundColor": "var(--colors-red-200)",
                },
              },
              {
                "conditions": [
                  {
                    "raw": "&:is(:hover, [data-hover])",
                    "type": "self-nesting",
                    "value": "&:is(:hover, [data-hover])",
                  },
                ],
                "entry": {
                  "cond": "_hover",
                  "prop": "fontSize",
                  "recipe": "buttonStyle",
                  "value": "3xl",
                },
                "hash": "fontSize]___[value:3xl]___[cond:_hover]___[recipe:buttonStyle",
                "result": {
                  "fontSize": "var(--font-sizes-3xl)",
                },
              },
              {
                "conditions": [
                  {
                    "raw": "&:is(:hover, [data-hover])",
                    "type": "self-nesting",
                    "value": "&:is(:hover, [data-hover])",
                  },
                ],
                "entry": {
                  "cond": "_hover",
                  "prop": "color",
                  "recipe": "buttonStyle",
                  "value": "white",
                },
                "hash": "color]___[value:white]___[cond:_hover]___[recipe:buttonStyle",
                "result": {
                  "color": "var(--colors-white)",
                },
              },
            ],
            "hashSet": Set {
              "display]___[value:inline-flex]___[recipe:buttonStyle",
              "alignItems]___[value:center]___[recipe:buttonStyle",
              "justifyContent]___[value:center]___[recipe:buttonStyle",
              "backgroundColor]___[value:red.200]___[cond:_hover]___[recipe:buttonStyle",
              "fontSize]___[value:3xl]___[cond:_hover]___[recipe:buttonStyle",
              "color]___[value:white]___[cond:_hover]___[recipe:buttonStyle",
            },
            "recipe": "buttonStyle",
            "result": {
              ".buttonStyle": {
                "&:is(:hover, [data-hover])": {
                  "backgroundColor": "var(--colors-red-200)",
                  "color": "var(--colors-white)",
                  "fontSize": "var(--font-sizes-3xl)",
                },
                "alignItems": "center",
                "display": "inline-flex",
                "justifyContent": "center",
              },
            },
            "slot": undefined,
          },
        },
      }
    `)

    const _encoder = encoder.clone().fromJSON({
      schemaVersion: 'x',
      styles: {
        atomic: [
          'display]___[value:none',
          'height]___[value:100%',
          'transition]___[value:all .3s ease-in-out',
          'opacity]___[value:0 !important',
          'opacity]___[value:1',
          'height]___[value:10px',
          'backgroundGradient]___[value:to-b',
          'gradientFrom]___[value:rgb(200 200 200 / .4)',
        ],
        recipes: {
          checkbox: [
            'size]___[value:md]___[recipe:checkbox]___[slot:container',
            'size]___[value:md]___[recipe:checkbox]___[slot:control',
            'size]___[value:md]___[recipe:checkbox]___[slot:label',
          ],
        },
      },
    })

    const { results } = decoder.clone().collect(_encoder)
    expect(results).toMatchInlineSnapshot(`
      {
        "atomic": Set {
          {
            "className": "trs_all_\\.3s_ease-in-out",
            "conditions": undefined,
            "entry": {
              "prop": "transition",
              "value": "all .3s ease-in-out",
            },
            "hash": "transition]___[value:all .3s ease-in-out",
            "layer": undefined,
            "result": {
              ".trs_all_\\.3s_ease-in-out": {
                "transition": "all .3s ease-in-out",
              },
            },
            "scoped": false,
          },
          {
            "className": "d_none",
            "conditions": undefined,
            "entry": {
              "prop": "display",
              "value": "none",
            },
            "hash": "display]___[value:none",
            "layer": undefined,
            "result": {
              ".d_none": {
                "display": "none",
              },
            },
            "scoped": false,
          },
          {
            "className": "op_0",
            "conditions": undefined,
            "entry": {
              "prop": "opacity",
              "value": "0 !important",
            },
            "hash": "opacity]___[value:0 !important",
            "layer": undefined,
            "result": {
              ".op_0\\!": {
                "opacity": "0 !important",
              },
            },
            "scoped": false,
          },
          {
            "className": "op_1",
            "conditions": undefined,
            "entry": {
              "prop": "opacity",
              "value": 1,
            },
            "hash": "opacity]___[value:1",
            "layer": undefined,
            "result": {
              ".op_1": {
                "opacity": 1,
              },
            },
            "scoped": false,
          },
          {
            "className": "bg-grad_to-b",
            "conditions": undefined,
            "entry": {
              "prop": "backgroundGradient",
              "value": "to-b",
            },
            "hash": "backgroundGradient]___[value:to-b",
            "layer": undefined,
            "result": {
              ".bg-grad_to-b": {
                "--gradient-position": "to bottom",
                "--gradient-stops": "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position, ), var(--gradient-to) var(--gradient-to-position, ))",
                "backgroundImage": "linear-gradient(var(--gradient-stops))",
              },
            },
            "scoped": false,
          },
          {
            "className": "grad-from_rgb\\(200_200_200_\\/_\\.4\\)",
            "conditions": undefined,
            "entry": {
              "prop": "gradientFrom",
              "value": "rgb(200 200 200 / .4)",
            },
            "hash": "gradientFrom]___[value:rgb(200 200 200 / .4)",
            "layer": undefined,
            "result": {
              ".grad-from_rgb\\(200_200_200_\\/_\\.4\\)": {
                "--gradient-from": "rgb(200 200 200 / .4)",
              },
            },
            "scoped": false,
          },
          {
            "className": "h_100\\%",
            "conditions": undefined,
            "entry": {
              "prop": "height",
              "value": "100%",
            },
            "hash": "height]___[value:100%",
            "layer": undefined,
            "result": {
              ".h_100\\%": {
                "height": "100%",
              },
            },
            "scoped": false,
          },
          {
            "className": "h_10px",
            "conditions": undefined,
            "entry": {
              "prop": "height",
              "value": "10px",
            },
            "hash": "height]___[value:10px",
            "layer": undefined,
            "result": {
              ".h_10px": {
                "height": "10px",
              },
            },
            "scoped": false,
          },
        },
        "recipes": Map {
          "checkbox" => Set {
            {
              "className": "checkbox__root--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "root",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:container]___[slot:root",
              "layer": undefined,
              "result": {
                ".checkbox__root--size_md": {},
              },
              "scoped": false,
            },
            {
              "className": "checkbox__control--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "control",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:container]___[slot:control",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__control": {
                    "height": "var(--sizes-10)",
                    "width": "var(--sizes-10)",
                  },
                },
              },
              "scoped": true,
            },
            {
              "className": "checkbox__label--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "label",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:container]___[slot:label",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__label": {
                    "fontSize": "var(--font-sizes-md)",
                  },
                },
              },
              "scoped": true,
            },
            {
              "className": "checkbox__root--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "root",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:control]___[slot:root",
              "layer": undefined,
              "result": {
                ".checkbox__root--size_md": {},
              },
              "scoped": false,
            },
            {
              "className": "checkbox__control--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "control",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:control]___[slot:control",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__control": {
                    "height": "var(--sizes-10)",
                    "width": "var(--sizes-10)",
                  },
                },
              },
              "scoped": true,
            },
            {
              "className": "checkbox__label--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "label",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:control]___[slot:label",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__label": {
                    "fontSize": "var(--font-sizes-md)",
                  },
                },
              },
              "scoped": true,
            },
            {
              "className": "checkbox__root--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "root",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:label]___[slot:root",
              "layer": undefined,
              "result": {
                ".checkbox__root--size_md": {},
              },
              "scoped": false,
            },
            {
              "className": "checkbox__control--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "control",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:label]___[slot:control",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__control": {
                    "height": "var(--sizes-10)",
                    "width": "var(--sizes-10)",
                  },
                },
              },
              "scoped": true,
            },
            {
              "className": "checkbox__label--size_md",
              "conditions": undefined,
              "entry": {
                "prop": "size",
                "recipe": "checkbox",
                "slot": "label",
                "value": "md",
              },
              "hash": "size]___[value:md]___[recipe:checkbox]___[slot:label]___[slot:label",
              "layer": undefined,
              "result": {
                "@scope (.checkbox__root--size_md) to (.checkbox__root)": {
                  ".checkbox__label": {
                    "fontSize": "var(--font-sizes-md)",
                  },
                },
              },
              "scoped": true,
            },
          },
        },
        "recipes_base": Map {
          "checkbox__root" => Set {
            {
              "className": "checkbox__root",
              "details": [
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "display",
                    "recipe": "checkbox",
                    "slot": "root",
                    "value": "flex",
                  },
                  "hash": "display]___[value:flex]___[recipe:checkbox]___[slot:root",
                  "result": {
                    "display": "flex",
                  },
                },
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "alignItems",
                    "recipe": "checkbox",
                    "slot": "root",
                    "value": "center",
                  },
                  "hash": "alignItems]___[value:center]___[recipe:checkbox]___[slot:root",
                  "result": {
                    "alignItems": "center",
                  },
                },
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "gap",
                    "recipe": "checkbox",
                    "slot": "root",
                    "value": 2,
                  },
                  "hash": "gap]___[value:2]___[recipe:checkbox]___[slot:root",
                  "result": {
                    "gap": "var(--spacing-2)",
                  },
                },
              ],
              "hashSet": Set {
                "display]___[value:flex]___[recipe:checkbox]___[slot:root",
                "alignItems]___[value:center]___[recipe:checkbox]___[slot:root",
                "gap]___[value:2]___[recipe:checkbox]___[slot:root",
              },
              "recipe": "checkbox",
              "result": {
                ".checkbox__root": {
                  "alignItems": "center",
                  "display": "flex",
                  "gap": "var(--spacing-2)",
                },
              },
              "slot": "root",
            },
          },
          "checkbox__control" => Set {
            {
              "className": "checkbox__control",
              "details": [
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "borderWidth",
                    "recipe": "checkbox",
                    "slot": "control",
                    "value": "1px",
                  },
                  "hash": "borderWidth]___[value:1px]___[recipe:checkbox]___[slot:control",
                  "result": {
                    "borderWidth": "1px",
                  },
                },
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "borderRadius",
                    "recipe": "checkbox",
                    "slot": "control",
                    "value": "sm",
                  },
                  "hash": "borderRadius]___[value:sm]___[recipe:checkbox]___[slot:control",
                  "result": {
                    "borderRadius": "var(--radii-sm)",
                  },
                },
              ],
              "hashSet": Set {
                "borderWidth]___[value:1px]___[recipe:checkbox]___[slot:control",
                "borderRadius]___[value:sm]___[recipe:checkbox]___[slot:control",
              },
              "recipe": "checkbox",
              "result": {
                ".checkbox__control": {
                  "borderRadius": "var(--radii-sm)",
                  "borderWidth": "1px",
                },
              },
              "slot": "control",
            },
          },
          "checkbox__label" => Set {
            {
              "className": "checkbox__label",
              "details": [
                {
                  "conditions": undefined,
                  "entry": {
                    "prop": "marginInlineStart",
                    "recipe": "checkbox",
                    "slot": "label",
                    "value": 2,
                  },
                  "hash": "marginInlineStart]___[value:2]___[recipe:checkbox]___[slot:label",
                  "result": {
                    "marginInlineStart": "var(--spacing-2)",
                  },
                },
              ],
              "hashSet": Set {
                "marginInlineStart]___[value:2]___[recipe:checkbox]___[slot:label",
              },
              "recipe": "checkbox",
              "result": {
                ".checkbox__label": {
                  "marginInlineStart": "var(--spacing-2)",
                },
              },
              "slot": "label",
            },
          },
        },
        "view_transitions": Set {},
      }
    `)
  })

  test('css - boolean utility', () => {
    const result = css({ truncate: false })
    expect(result).toMatchInlineSnapshot(`
      Set {
        {
          "className": "trunc_false",
          "conditions": undefined,
          "entry": {
            "prop": "truncate",
            "value": false,
          },
          "hash": "truncate]___[value:false",
          "layer": undefined,
          "result": {
            ".trunc_false": {},
          },
          "scoped": false,
        },
      }
    `)

    const result2 = css({ truncate: true })
    expect(result2).toMatchInlineSnapshot(`
      Set {
        {
          "className": "trunc_true",
          "conditions": undefined,
          "entry": {
            "prop": "truncate",
            "value": true,
          },
          "hash": "truncate]___[value:true",
          "layer": undefined,
          "result": {
            ".trunc_true": {
              "overflow": "hidden",
              "textOverflow": "ellipsis",
              "whiteSpace": "nowrap",
            },
          },
          "scoped": false,
        },
      }
    `)
  })

  test('cva - boolean variant', () => {
    const result = cva({
      base: {
        color: '#fff',
      },
      variants: {
        checked: {
          true: {
            display: 'block',
          },
          false: {
            display: 'none',
          },
        },
      },
    })

    expect(result).toMatchInlineSnapshot(`Set {}`)
  })
})
