Vue components css styles not applied

[outofthisworld]

I went through the recommended set up for a vue app (although I am using Nuxt, but given that panda is statically compiled I don't think that'd be an issue)

Inside a page, the css() function seems to work correctly, and applies styles.

However, when I created a component inside the components folder:

<script setup lang="ts">
import { css } from "~/styled-system/css";
</script>

<template>
  <div :class="css({ background: 'blue' })">Button</div>
</template>

Although the bg_blue class gets generated and applied to the div - no class definition can be found in the app.css output.

Any ideas? Tried regenerating styled-system, clearing .nuxt cache, hard reloading browser, clearing site app data and incognito. No luck.

[astahmer]

I think it's probably due to the tsconfig path alias, could use the config.importMap to tell Panda where to look for imports ?

"importMap": {
    "css": "~/styled-system/css",
    "recipes": "~/styled-system/recipes",
    "patterns": "~/styled-system/patterns",
    "jsx": "~/styled-system/jsx"
  }

[outofthisworld]

Ah yes genius! Thank you @astahmer , /src folder was added by default but Nuxt doesn't have src.

Since Iv'e got you one other thing I noticed is that I can't seem to get a class to forward through to a styled() component?

<script setup>
import { styled } from "~/styled-system/jsx";

const StyledButton = styled("button", {
  base: {
    bgColor: "black",
  },
  variants: {
    vColor: {
      default: {
        bgColor: "pink",
      },
      error: {
        bgColor: "red",
      },
      warning: {
        bgColor: "yellow",
      },
      info: {
        bgColor: "cyan",
      },
      secondary: {
        bgColor: "green",
      },
    },
  },
});
</script>
<template>

  <StyledButton id="test" class="test">
    <slot></slot>
  </StyledButton>

</template>

If I use this button in a page.. the attributes get applied to the button and according to vue the classes should get merged, but I can only see panda generated classes - not test?

Example instantiation:
<Button mt="10px" ml="50px" vColor="error">Hello button</Button>

[astahmer]

This was a mistake from us, thank you for catching it !
We didnt include the logic to merge the class attribute, only className, so here's a PR to fix that #1753
You can use className in the meantime