Responsive fontSize in "default" styles not resolved

[ftes]

Input

// theme.js
export default {

  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
  },

  heading: {
    h1: {
      fontSize: "5xl|6xl",
    },
    h2: {
      fontSize: "3xl",
    },
  },

  styles: {
    h1: {
      variant: "heading.h1"
    },
    h2: {
      variant: "heading.h2"
    }
  }
}

// component.js
export default function MyComponent() {
  return (
    <div>
      <h1>Responsive style not "resolved"</h1>
      <h2>Works</h2>
    </div>
  )
}

Output

<div>
  <h1 class="css-1uh37n5">Responsive style not "resolved"</h2>
  <h2 class="css-72c57t">Works</h2>
</div>

/* not ok: h1 */
.css-1uh37n5 {
    font-size: 5xl|6xl;
}

/* ok: h2 */
.css-72c57t {
    font-size: 1.875rem;
}

Expected output

Multiple CSS definitions with media queries for the h1 .
The *xl font sizes should be translated into the correct rem sizes.

[shadcn]

The theme.styles object is the primarily use to style MDX. If you want the global h1 to use variants you can do so like this:

export default {
  fontSizes: {
    xl: "1.25rem",
  },

  styles: {
    root: {
      h1: {
        variant: "heading.h1",
      },
    },
  },

  heading: {
    h1: {
      color: "red",
      fontSize: "xl",
    },
  },
}