Specify panda config file for astro integration in monorepo

[lwhiteley]

Description

I want to be able to specify the panda config location for the atro integration

Problem Statement/Justification

I am creating my astro project in a monorepo where the astro project is not at the root and there could be potentially multiple astro projects.

i want to be able to specify exactly where to find these config files for each project while executing it from the root of the monorepo.

normally i can run my astro project like this:

pnpm exec astro --root apps/static-web dev

However panda doesnt respect the --root apps/static-web param of astro

and i get the following error:

 error   [postcss] Cannot find config file: panda.config.ts or panda.config.js/cjs/mjs/mts/cts. Did you forget to run `panda init`?
  File:

Proposed Solution or API

Try to respect the astro --root param if possible

Alternatives

allow to specify configFile for the astro integration

for eg.

import { defineConfig } from 'astro/config'
import pandacss from '@pandacss/astro'
 
export default defineConfig({
  // ...
  integrations: [pandacss({ configFile: '<absolute-or-relative-path-to-config>' })]
})

Additional Information

im using this with an nx monorepo

[anubra266]

@lwhiteley you can use the config flag in the cli to tell panda your config path
https://panda-css.com/docs/references/cli#--config--c

[lwhiteley]

Can you explain further how to do this while using astro cli ?
Im not sure i follow.

in the description the command stated is

pnpm exec astro --root apps/static-web dev

panda cli cannot be used to run the astro project..so how do I pipe the config path to panda?

I assume this can only be done using env vars or a direct in-code change..hence my suggestions.

If im missing some context, let me know in further detail what you mean

[anubra266]

@lwhiteley There are two steps. First you have to update the prepare script in package.json to use the cli config flag I posted earlier.
Then for when postcss runs your prokect, you can hook into the postcss config in what way you prefer, I think it's possible to do this in vite config. But I'll just explain with a more straight forward way.
I'd create a postcss.config.cjs or postcss.config.js file and update as such

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {
      // Path to config
      configPath: '/Users/anubra266/Dev/personal/chakra-ui/css-panda/sandbox/astro/panda.config.ts',
    },
  },
}

Panda's postcss config accepts configPath and cwd keys. Use accordingly

[lwhiteley]

the suggestion was helpful to understand more of how this works but unfortunately no change.

i suspect postcss isnt respecting the root either and is just looking for the config file from where the command is executed.

to give a better idea..the monorepo is setup like this.

package.json
libs /
   ...
apps /
   astro-project-1 /
       ...
       panda.config.ts
       postcss.config.cjs
   astro-project-2 /
       ...
       panda.config.ts
       postcss.config.cjs

ive setup everything so that the main package json runs the prepare script for each project..

the only issue is starting the projects now so that the correct config files are found even when starting the project from a working directory two levels up.

This multi-astro project setup works fine without panda but it would be nice if i could include pandacss to improve the DX for styling

if i move the panda config to the root beside the package.json then it works but this is not practical for many reasons

• building for production
• having multiple astro projects

[lwhiteley]

ive actually paused dev on the astro projects due to a switch in priorities, i havent actually gotten to set up the astro projects fully yet, unfortunately.

but good to know 😸 ..

ill see if i can do another spike in the near future

[astahmer]

thank you for your answer regarding nx, that will probably help a few people !
would you be open to contributing to Panda docs by creating a dedicated getting started page for nx ?

[lwhiteley]

hi @astahmer,

I could, but maybe in 2 weeks.

[plutotv-aaa]

@lwhiteley Thank you for answering.

I meant to get back to you a few days ago with good news. Once I read through this thread a few times, I realized that I could use --cwd to define the project context where panda init should execute. With this in mind, the task was simple, as you have demonstrated. I'm so happy right now to see that we are aligned on how we should go about setting up panda within an nx mono-repo project. Till now, I was still determining. The one thing I was missing was using --cwd in the project's target.

"pandacss-prepare": {
      "executor": "nx:run-commands",
      "options": {
        "commands": ["pnpm panda codegen --cwd apps/next"]
      }
    },

Thank you for this. I didn't have --cwd included in my project target

"dependsOn": ["prepare"],

This is key. In my case, I named my target "pandacss-prepare"

These are the documentation items I want to comment on. I ignored these configuration steps.

https://panda-css.com/docs/installation/nextjs#update-packagejson-scripts

[lwhiteley]

@astahmer
Sorry, 2 weeks turned into 50 but the promise is now resolved 😉

---

ive added a PR with Nx monorepo and Remix example specifically.
since Nx 18, things have changed quite a bit so i did the example for Remix since it was the current one I was working on.

Since there could be various examples, i named it quite specific on the website.

Please let me know if adjustments should be made

see: #2448

[lwhiteley]

i got even more curious to look at the code.

panda is using a package look-it-up which only searches upwards not downwards

// src/config.ts
var configs = [".ts", ".js", ".mts", ".mjs", ".cts", ".cjs"];
function findConfig() {
  for (const config of configs) {
    const result = (0, import_look_it_up.lookItUpSync)(`panda.config${config}`);
    if (result) {
      return result;
    }
  }
}

it accepts an optional directory as second parameter but it is not specified, so i assume it is defaultig to cwd and is producing the results im getting now.

https://www.npmjs.com/package/look-it-up

[lwhiteley]

ive confirmed that specifying the second parameter allows astro to start properly now..i manually added it in the node_modules folder. like so

// src/config.ts
var configs = [".ts", ".js", ".mts", ".mjs", ".cts", ".cjs"];
function findConfig() {
  for (const config of configs) {
    const result = (0, import_look_it_up.lookItUpSync)(`panda.config${config}`, '/home/lwhiteley/dev/astro-mono-repo-poc/apps/static-web');
    if (result) {
      return result;
    }
  }
}

---

i now have another issue,

the class names are generated but the css isnt injected/applied for some reason..

ive imported a main.css file with the layers

[anubra266]

@lwhiteley Since your setup is complicated. You might want to use CLI instead
https://panda-css.com/docs/installation/cli

[lwhiteley]

the class names are generated but the css isnt injected/applied for some reason..

ok i figured out this part

in panda config

  // Where to look for your css declarations
  include: [
    `${__dirname}/src/**/*.{js,jsx,ts,tsx,astro}`,
    `${__dirname}/pages/**/*.{js,jsx,ts,tsx,astro}`,
  ],

---

Since your setup is complicated. You might want to use CLI instead
https://panda-css.com/docs/installation/cli

Im new to panda but i still dont see how the suggestion to use the cli will help with astro or even allow multiple configurations to be run from a single location..rather than just providing an optional way to allow the root context to be changed like above per Astro config

I also dont consider the setup complicated. i mean monorepos are not a new concept.. panda itself is built in a moorepo.

apps can also be built in a monorepo..

Ive built monorepos with multiple webpack builds all using their own postcss config without issues

---

currently im only missing one piece as mentioned here:
#1733 (comment)

[anubra266]

@lwhiteley I suggested the CLI way because if you're not using astro/postcss config, you can just pass the config path as a flag to all used cli commands. Happy you've got the astro way working though.

What's currently missing?

[lwhiteley]

What's currently missing?

based on the signature of findConfig() function, it seems the process to find the config is very dependent on the current working directory as it doesnt even try to configure the starting directory for look-it-up as an option

if there was a way to provide a root directory to this interface from the astro config that is just responsible for specifying the starting directory from where to resolve any given path then that would solve the issue.

im not sure of the impact though.

currently from my limited view i see three/four things that could be affected

• finding the postcss config
• finding the panda config
• within the panda config
  • include patterns
  • exclude patterns

[anubra266]

@lwhiteley Are you sure you've added the config flag to your prepare script?

[lwhiteley]

correction:

it is before

 setup = async (options = {}) => {
    import_logger5.logger.debug("builder", "\u{1F6A7} Setup");
    const configPath = options.configPath ?? this.getConfigPath();

so yes, if astro can specify the options for this somehow then it should work

[lwhiteley]

ok i did a few more things and made progress after reading a bit more

so first step:

specify postcss root directory for astro

import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; 

const _dirname =
  typeof __dirname !== 'undefined'
    ? __dirname
    : dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  outDir: './dist',
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  integrations: [react(), pandacss()],
  vite: {
    css: {
      postcss: `${_dirname}`,
    },
  },
});

this now picks up the postcss config. but still same error..

so i logged out the options and saw interesting results

setup is called two times but only the first one is populated 😿

this.getConfigPath is called when the options are not set the second time and then throws the error

{
  configPath: '/home/lwhiteley/dev/poc/apps/static-web/panda.config.ts',
  cwd: undefined
}
{ configPath: undefined, cwd: undefined }

[lwhiteley]

the only way i got it to work reliably was to do something like this

 setup = async (options = {}) => {
    import_logger5.logger.debug("builder", "\u{1F6A7} Setup");
    const configPath = process.env.PANDA_CONFIG_PATH ?? options.configPath ?? this.getConfigPath();

i.e introducing an env variable => process.env.PANDA_CONFIG_PATH

i still cant figure out why its called twice and empty on the second time.. may be a vite thing 🤷🏾‍♂️

[astahmer]

this should help
#1751

[lwhiteley]

That's great!

Thanks for your time and patience with addressing the issue 💪🏾

cc: @anubra266 & @astahmer