Nested condition in "base" not working as expected

[ejhammond]

Description

I'm playing with nested conditions in my token configuration.

This works as expected:

'text': {
  value: {
    base: 'purple',
    _onYellowBackground: 'blue',
    _onRedBackground: 'green',
  }
}

Next, let's nest a hover condition for each case so that the text gets lighter when you hover it:

'text-nest': {
  value: {
    base: { base: 'purple', _hover: 'pink" }
    _onYellowBackground: { base: 'blue',  _hover: 'lightblue' }
    _onRedBackground: { base: 'orange', _hover: 'yellow' }
  }
}

With this code, the yellow and red bg cases work great. But the base case breaks--the text is no longer purple.

This is illustrated in the stackblitz.

Upon investigation, you'll find the CSS:

 :where(:root, :host) {
   /* ... a bunch of stuff */
   --colors-text: purple;
 }
 
 /* this is the issue */
  --colors-text-nest {
    base: purple;
    hover: pink;
}

  [data-bg="yellow"] {
    --colors-text: blue;
    --colors-text-nest: blue
}

  [data-bg="red"] {
    --colors-text: green;
    --colors-text-nest: green
}

 :is(:hover, [data-hover]) {
    --colors-text-nest: pink
}

[data-bg="yellow"]:is(:hover, [data-hover]) {
    --colors-text-nest: lightblue
}

[data-bg="red"]:is(:hover, [data-hover]) {
    --colors-text-nest: lightgreen
}

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-xve3ql?file=panda.config.ts

Steps to reproduce

Visit the stackblitz https://stackblitz.com/edit/vitejs-vite-xve3ql?file=panda.config.ts

JS Framework

React TS

Panda CSS Version

0.30.2

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[astahmer]

I don't think there's an issue, you don't need to nest things under base
https://play.panda-css.com/QslFQphNso

'text-nest': {
  value: {
-   base: { base: 'purple', _hover: 'pink' },
+   base: 'purple',
+   _hover: 'pink',
    _onYellowBackground: { base: 'blue', _hover: 'lightblue' },
    _onRedBackground: { base: 'green', _hover: 'lightgreen' },
  },
},

[ejhammond]

Hm, yeah I could make that work by manually flattening "base" types up to the top level. But it seems weird to me that base should be treated any differently from other conditions.

base._hover could be interpreted just fine. And something deeply nested like base._dark.base._hover.base._focus.base could work as well.

In my case, I have some utility functions like:

function withColorMode({dark: string, light: string}) {
  return {
    base: light,
    _dark: dark,
    _osDark: dark
  }
}

And

withSurfaceColor({ default, brand }) {
  return {
    base: default,
    _brand: brand
 }
}

These functions compose nicely regardless of the order:

text: withSurfaceColor({
  default: withColorMode({ dark: 'white', light: 'black' }),
  brand: 'white',
}); // { base: { base: 'black', _dark: 'white', _osDark: 'white' }, _brand: 'white' }

or

text: withColorMode({
  dark: 'white',
  light: withSurfaceColor({ default: 'black', brand: 'white' }),
}); // { base: { base: 'black', _brand: 'white' }, _dark: 'white', _osDark: 'white' }

So, in my case, I'd need to flatten the "base" case after all of the operations are finished which would result in a consistent output of: { base: 'black', _brand: 'white', _dark: 'white, _osDark: 'white' }

Would be nice if panda would just flatten this for me. There should be no ambiguity in the notation and it's nice that it just works the same as all other conditions.

[astahmer]

Would be nice if panda would just flatten this for me.

totally understand the convenient argument, but as you already noticed with the withColorMode / withSurfaceColor, you're totally free to create another abstraction that does just that and solves your use-case in userland

something like

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  theme: {
    semanticTokens: flattenBase({
      ... 
    }),
  },
});

or you could also do it in hooks:

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // ...
  hooks: {
    'config:resolved': ({ config, utils }) => {
       config.tokens = flattenBase(config.tokens)
       config.semanticTokens = flattenBase(config.semanticTokens)
    },
  },
})

---

that being said, since this nesting works in the style usage in app code, I think it makes sense to make that work in config as well

css({
  color: {
    base: {
      base: "green",
      _hover: {
        base: "red",
      },
    },
  },
});

[lawnzapper]

Whenever you hover the document, every base with _hover specified in semantic tokens are triggered, is it the normal behaviour?
I think it should be triggered only when the element with the applied semantic token is hovered

'text-nest': {
          value: {
            // the hover below is triggered on document hover, why not only when the element with text-nest applied is hovered?
            base: { base: 'purple', _hover: 'pink' },
            _onYellowBackground: { base: 'blue', _hover: 'lightblue' },
            _onRedBackground: { base: 'green', _hover: 'lightgreen' },
          },
        },

Referring to the main example in the discussion
https://stackblitz.com/edit/vitejs-vite-xve3ql?file=panda.config.ts