semanticTokens don't seem to generate in nx/monorepo/storybook context

[mayteio]

Description

I'm using nx to manage my project with an "integrated" setup (i.e. using @nx/next). I've got it set up so that;

1. Main Next.js app runs in apps/my-app
2. tokens, semantic tokens and recipes live in libs/theme and imported into the apps/my-app/panda.config.ts via @nx-integrated-monorepo/theme.
3. panda watches the next.js app/storybook and outputs are sent to libs/styled-system/src/__generated__/* and exported via @nx-integrated-monorepo/styled-system.

This works as expected for recipes and tokens, but not semantic tokens.

Here's my panda.config.ts:

import { defineConfig } from '@pandacss/dev';
import {
  recipes,
  semanticTokens,
  tokens,
  textStyles,
} from '@nx-integrated-monorepo/theme';

export default defineConfig({
  include: ['./app/**/*.{ts,tsx}', '../../libs/**/*.{ts,tsx}'],
  exclude: [],
  theme: {
    semanticTokens, // doesn't work
    extend: {
      recipes,
      textStyles,
      tokens,
      semanticTokens: { // also doesn't work
        colors: {
          heavy: { value: '#FF0000' },
        },
      },
    },
  },
  jsxFramework: 'react',
  outExtension: 'js', // needed for jest
  outdir: '../../libs/styled-system/src/__generated__',
});

This mostly works as expected - I can see tokens I've created via defineTokens in the output CSS, but the semantic tokens are not outputting (regardless of whether I inline them here or define them in the theme lib).

Link to Reproduction

Codesandbox

Steps to reproduce

1. Go to codesandbox
2. Run task called "Run storybook"
3. Check libs/styled-system/src/__generated__tokens/index.css for missing heavy semantic token
4. Verify in storybook that the token isn't found:

JS Framework

React, TS, next.js, storybook, nx (🥲)

Panda CSS Version

0.6.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[mayteio]

Hey @segunadebayo, so I know for future - what should be a bug and what should be a discussion?

FWIW I've gone a bit further and it appears the same issue happens for defineTextStyles too. It works as expected when running next.js:

But is missing some styles when run in storybook (semanticTokens and textStyles as far as I can tell):

Updated codesandbox

[mayteio]

FWIW they work in a regular next/storybook context:

Codesandbox without nx

[mayteio]

Alright, I've been able to solve this thanks to @thetiby here: #943 (comment)

1. panda.config.ts lives in lib/styled-system and looks like this:

export default defineConfig({
  include:
    process.env.NX_TASK_TARGET_TARGET === 'storybook'
      ? ['./apps/**/*.{ts,tsx}', './libs/**/*.{ts,tsx}']
      : ['../../apps/**/*.{ts,tsx}', '../../libs/**/*.{ts,tsx}'],
  outdir:
    process.env.NX_TASK_TARGET_TARGET === 'storybook'
      ? './libs/styled-system/src/__generated__'
      : '../../libs/styled-system/src/__generated__',

  // modify this to add to the theme
  theme: { ... },
  ...
});

2. postcss.config.cjs lives in apps/my-app/postcss.config.cjs and looks like this:

module.exports = {
  plugins: {
    '@pandacss/postcss': {
      configPath:
        process.env.NX_TASK_TARGET_TARGET === 'storybook'
          ? './libs/styled-system/panda.config.ts'
          : '../../libs/styled-system/panda.config.ts',
    },
  },
};

3. pnpm prepare in package.json looks like this:

    "prepare": "panda codegen --cwd=apps/my-app --config ../../libs/styled-system/panda.config.ts"

Note: storybook and next.js seem to run with a different working directory in nx. Due to this, I had to switch out various config options depending on the task being run.

[FranciscoKloganB]

@mayteio Can you explain your solution for dummies? I am new to NX and I really can't understand what's going on.

I was trying not to use native Tailwind for this project I am about to start, and decided to just use the emotion recipes provided with Nx since I was already familiar with emotion without having to worry about set up.

Then I heard about Panda CSS and I really wanted to try it out, since it provides the good parts of Tailwind, is React Server Component proof and can generate Framework agnostic styles, which is nice for a mono repo. However, since I do not really understand Nx and I do not know how to create my own generators, I am having trouble understanding what's going on and what would be considered an anti-pattern.

Aren't we supposed to respect module boundaries? If we are copying the output on prepare using codegen, aren't we going against this principle?

edit: if it would not be asking to much, could you repost your reproduction including the final solution?

[mayteio]

Sure thing! The way we've got it set up is with an @nx/next integrated repository (more on integrated repositories) - that is there's one package.json for the entire project and the libs folder is more of a code organization heuristic. Nx provides tooling for generating/moving code around as well as running tasks (nx affected is the point of this - big repositories with lots of tests take a long time in CI/CD, nx affected only runs tests/lints in "projects" (think apps or libs) based on code that has changed since main.

On to the module boundaries - you can do this (probably in both a package and integrated repo) with panda. How we've got it set up is keeping all panda-related code mostly in a lib. We've got a lib called styled-system that includes the panda config, theme tokens. The config is set to generate inside a __generated__ folder within the styled-system lib. When we run prepare, it generates the code into here. The postcss.config.cjs file sits in apps/your-app so that it can hook into the next.js and storybook compile steps and re-generate when we make changes there. Since the config knows to look both in app and in our libs, it generates whenever we make changes to any code in our project.

@your-repo/styled-system exports the things we need from the __generated__ folder, i.e. the css/cva util, tokens, and in our case jsx components as well like Box.

Other libs/the app can then import from the styled-system lib:

import {Box, css} from "@your-repo/styled-system"

This respects the module boundaries as we're just exposing the public API we want, i.e. all the things generated by panda.

Note - to get this working (esp with storybook), we had to do some odd config things (see libs/styled-system/panda.config.ts and apps/my-app/postcss.config.ts and the prepare script in package.json). Here's a pretty simple nx repository with that setup: https://github.com/mayteio/panda-nx-next-storybook

[FranciscoKloganB]

Thank you so much @mayteio. I will try to migrate from emotion to pandas, since I have barelly any code written at this point. :)

I'll ping this post if I fail miserably. 🗡️

[tyteen4a03]

I'm using this in a monorepo but currently haven't moved the styled system into its own package yet. Does anybody have a solution for this scenario?

[SimeonC]

Thought I'd share my panda.config.mjs here as we found that there's a couple of things I found that make life easier.

• emitPackage places the generated code into node_modules, this seems to work more reliably than the tsconfig aliases and you don't need to ../../ on the outdir.
• importMap is the "back mapping"
• workspaceRoot I found was easiest pulling in from NX as you won't need to do any switching based on where it's running from
• @local/styled-system is just my own convention, you could use any name that doesn't collide with an existing npm package. The outdir/importMap just becomes the name used to import for this; import { styled } from '@local/styled-system/jsx'

import { defineConfig } from '@pandacss/dev';
import { workspaceRoot } from 'nx/src/utils/workspace-root';
import path from 'path';

export default defineConfig({
  include: [path.join(workspaceRoot, './apps/appName/src/**/*.{js,jsx,ts,tsx}')],
  importMap: '@local/styled-system',
  outdir: '@local/styled-system',
  emitPackage: true,
});