Panda CSS doesn't style components

,
1

I am using Rescript 11 RC 4 and using Panda CSS for styling.
To create styles, I am using Panda’s CSS function that I imported via interop. I tried to create style using ReactDOM.Style.make and normal Object. And even compiled JS looks fine. But my style aren’t rendered.

I have tried both these methods.

  1. Panda CLI - Panda CSS
  2. Using Next.js - Panda CSS

But my styles are not coming up. OTOH, I tried Tailwind CLI, and it worked.

Does anyone know what’s the issue.

2

Can you share the bindings you are using, and the JS it outputs?

3 
@module("../../styled-system/css") external css: ReactDOM.Style.t => string = "css"
@module("../../styled-system/css") external css1: {..} => string = "css"
@module("../../styled-system/css") external cx: ('a, 'b) => string = "cx"
@module("../../styled-system/patterns") external flex: {..} => string = "flex"


// Generated by ReScript, PLEASE EDIT WITH CARE

import * as Css from "../../styled-system/css";
import * as Patterns from "../../styled-system/patterns";

function css(prim) {
  return Css.css(prim);
}

function css1(prim) {
  return Css.css(prim);
}

function cx(prim0, prim1) {
  return Css.cx(prim0, prim1);
}

function flex(prim) {
  return Patterns.flex(prim);
}

export {
  css ,
  css1 ,
  cx ,
  flex ,
}
/* ../../styled-system/css Not a pure module */
4

Bindings are generating wrappers that import panda modules indirectly instead of direct imports. Adding an importMap in panda.config.js can help, but bindings still need to be created for each component, function, or utility. I’m working on early-stage codegen support for PandaCSS with ReScript, which will rely on the panda.config.js/ts file. You can check a preview here: