Problem render in turbo monorepo

[Ns2Kracy]

project sturcture

apps/
├─ web/
├─ desktop/src/
packages/
├─ ui/
├─ interface/
├─ styled-system/
├─ ...

I want to do most of the code in the interface so that I can easily use a single set of code to render both the web and the deskop, but the problem is that the components written in the interface don't render properly in the web and desktop, and when I move the same components to the web or deskop, they work again.

code in web:

import { Interface } from '@repo/interface';
import "./index.css";

const App = () => {
  return (
    <>
      <Interface />
    </>
  );
}

export default App;

code in interface:

import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { Button, Card, Input, Label } from "@repo/ui";
import { Divider, HStack, Stack, styled } from "@repo/styled-system/jsx";
import './index.css';

export const AuthenticationCard = () => {
  return (
    <Card.Root maxW="sm">
      <Card.Header>
        <Card.Title>Sign Up</Card.Title>
        <Card.Description>
          Create an account and discover the worlds' best UI component framework.
        </Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap="4">
          <Stack direction="row" gap="3">
            <Button variant="outline" width="full">
              Google
            </Button>
            <Button variant="outline" width="full">
              GitHub
            </Button>
          </Stack>
          <HStack gap="2">
            <Divider />
            <styled.p color="fg.subtle" textStyle="sm" whiteSpace="nowrap">
              or sign up with
            </styled.p>
            <Divider />
          </HStack>
          <Stack gap="1.5">
            <Label for="name">E-Mail</Label>
            <Input id="name" placeholder="Your E-Mail" />
          </Stack>
          <Stack gap="1.5">
            <Label for="password">Password</Label>
            <Input id="password" type="password" placeholder="Your Password" />
          </Stack>
        </Stack>
      </Card.Body>
      <Card.Footer>
        <Button width="full">Create Account</Button>
      </Card.Footer>
    </Card.Root>
  )
}


const App = () => {
  return (
    <div >
      <AuthenticationCard />
    </div>
  );
}

export const Interface = () => {
  return (
    <Router>
      <Suspense>
        <App />
      </Suspense>
    </Router>
  );
};

And the result is

[Ns2Kracy]

When putting the component like the

web:

import { Button, Card, Input, Label } from "@repo/ui";
import { Divider, HStack, Stack, styled } from "@repo/styled-system/jsx";
import './index.css';

export const AuthenticationCard = () => {
  return (
    <Card.Root maxW="sm">
      <Card.Header>
        <Card.Title>Sign Up</Card.Title>
        <Card.Description>
          Create an account and discover the worlds' best UI component framework.
        </Card.Description>
      </Card.Header>
      <Card.Body>
        <Stack gap="4">
          <Stack direction="row" gap="3">
            <Button variant="outline" width="full">
              Google
            </Button>
            <Button variant="outline" width="full">
              GitHub
            </Button>
          </Stack>
          <HStack gap="2">
            <Divider />
            <styled.p color="fg.subtle" textStyle="sm" whiteSpace="nowrap">
              or sign up with
            </styled.p>
            <Divider />
          </HStack>
          <Stack gap="1.5">
            <Label for="name">E-Mail</Label>
            <Input id="name" placeholder="Your E-Mail" />
          </Stack>
          <Stack gap="1.5">
            <Label for="password">Password</Label>
            <Input id="password" type="password" placeholder="Your Password" />
          </Stack>
        </Stack>
      </Card.Body>
      <Card.Footer>
        <Button width="full">Create Account</Button>
      </Card.Footer>
    </Card.Root>
  )
}

const App = () => {
  return (
    <>
      <AuthenticationCard />
    </>
  );
}

export default App;

it will work like this

Strangely, when a component written in the interface repo also appears in the web repo, the web repo can render the component written in the interface normally, even if the component in the web repo is not called, and it cannot be rendered when the component is deleted in the web repo

[Ns2Kracy]

@segunadebayo

2023-12-08.13-09-08.mp4

Components in an interface repo only affect content, and the same component in a web or desktop repo can only affect style

[astahmer]

hey

the issue seems to be that there's no CSS at all, right ?
so I'm guessing you're either missing:

• a CSS import if using the CLI
• (if using) the postcss plugin itself and/or the @layer reset, base, tokens, recipes, utilities;
• a shared preset wasn't being imported in both panda.config
• your config.include doesn't include your source files

if none of this solves the issue, can you make a minimal reproduction on github ?

[Ns2Kracy]

https://github.com/Ns2Kracy/rakuen/tree/issue, could you please checkout this branch?

[Ns2Kracy]

Acturally it does have the css when i check the console in broswer

This image is when the component is commented in the web repo, and the style not exists.

This image is when the component not commented in the web repo, and the style are applied though the component is not exported and used in the render entry.