Docusaurus Integration

[Amorim33]

Has anyone tryied to use PandaCSS with Docusaurus?

The layers are loaded, but the styles aren't getting applied.

[segunadebayo]

I created this sandbox just for you. Feel free to check it out: https://github.com/chakra-ui/panda/tree/main/sandbox/docusaurus-ts

I will probably add it to the docs, but here are the general steps:

• Install docusaurus using their CLI:
  npx create-docusaurus@latest my-website classic

• Install Panda CSS pnpm add -D @pandacss/dev

• Run panda init to generate the styled-system directory

• In the docusaurus.config.ts file, set up the Panda postcss plugin

  // ...
import pandaCss from '@pandacss/dev/postcss'

const config: Config = {
  plugins: [
    function () {
      return {
        name: 'docusaurus-plugin',
        configurePostCss(postcssOptions) {
          postcssOptions.plugins.push(pandaCss())
          return postcssOptions
        },
      }
    },
  ],
  /// ...
}

• In the generated panda.config.ts file, set importMap: @site/styled-system to match the import path docusaurus uses in its built-in tsconfig

• Change src/css/custom.css to include the layer css: @layer reset, base, tokens, recipes, utilities;

• Enjoy!