@amandaguthrie/panda-plugin-add-export

A Panda CSS plugin that allows you to change internal structures, like tokens into exports.

The plugin uses the codegen:prepare hook to modify generated files before they are written to disk.

This was originally created to aid in generating documentation for preset tokens, but may be expanded in the future.

Contents

• Install
• Configure
• Examples
• License

Install

Tested with Panda CSS version 0.36.0.

npm

npm install -D @amandaguthrie/panda-plugin-add-export

pnpm

pnpm install -D @amandaguthrie/panda-plugin-add-export

yarn

yarn add -D @amandaguthrie/panda-plugin-add-export

bun

bun add -D @amandaguthrie/panda-plugin-add-export

> Back to Contents

Configure

In your panda.config.{ts,js} file, import the plugin and include it in your plugins list.

import { defineConfig } from '@pandacss/dev';
import { addExports } from '@amandaguthrie/panda-plugin-add-export';

export default defineConfig({
  // ...
  plugins: [
    // ... Other plugins
    addExports({exportTokens: true, outExtension: "mjs"})
  ],
  // ...
});

Function addExports

The function addExports is the default export which accepts configuration options and returns a Panda plugin. The types for the pluginOptions are exproted as AddExportsPluginOptions.

Parameters

• pluginOptions (AddExportsPluginOptions, Optional)
  • exportTokens (boolean, Optional)
    • Whether to export const tokens in tokens\index.{mjs|js} and add the export declaration to tokens\index.d.ts
    • false makes no changes to the tokens constant. true exports the tokens constant.
    • Default: false
  • outExtension ("mjs" | "js", Optional)
    • Whether to search for .js or .mjs files from the artifacts. This should match your panda.config.
    • Default: "mjs"

Return

Panda CSS Plugin

> Back to Contents

Examples

• Add tokens to export

Add tokens export

While the Panda CSS team is settling on which properties to include in this type, the plugin can help extend it with the types you specify to avoid TypeScript errors in the meantime.

Panda CSS tokens/index.{mjs|js} example

const tokens = {
  "colors.red": {
    // all the tokens
  }
}

tokens/index.d.ts example

// more content
export * from './tokens'

Plugin configuration

import { defineConfig } from '@pandacss/dev';
import addExports from '@amandaguthrie/panda-plugin-add-export';

export default defineConfig({
  // ...
  plugins: [
    // ... Other plugins
    addExports({extendTokens: true, outExtension: "mjs"})
  ],
  // ...
});

Panda CSS type generated in tokens/index.{mjs|js} with plugin:

// export is added
export const tokens = {
  "colors.red": {
     // all the tokens
  },
  // more tokens
}

tokens/index.d.ts with plugin example

// more content

// tokens const is added
export declare const tokens;

export * from './tokens'

> Back to examples

> Back to Contents

License

MIT © 2024 Amanda Guthrie

> Back to Contents