Plumeria

https://plumeria.dev/docs
Admin
Plumeria is a compile-time CSS-in-JS library for React that transforms style objects into static...
Tokens:63,701
Snippets:582
Trust Score:6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install @plumeria/headlessui with pnpm

Source: https://plumeria.dev/docs/api-reference/components/headlessui.md

Install the package using pnpm. Requires configuration of @plumeria/core and your bundler as described in the Installation section.

```sh
pnpm i @plumeria/headlessui
```

--------------------------------

### Install @plumeria/headlessui with yarn

Source: https://plumeria.dev/docs/api-reference/components/headlessui.md

Install the package using yarn. Requires configuration of @plumeria/core and your bundler as described in the Installation section.

```sh
yarn add @plumeria/headlessui
```

--------------------------------

### Install @plumeria/headlessui with npm

Source: https://plumeria.dev/docs/api-reference/components/headlessui.md

Install the package using npm. Requires configuration of @plumeria/core and your bundler as described in the Installation section.

```sh
npm i @plumeria/headlessui
```

--------------------------------

### Minimum context

Source: https://plumeria.dev/docs/ai-agent-resources.md

Use this minimal context to provide an agent with the essential Plumeria documentation links when a shorter prompt is sufficient. It includes the installation guide, the AI rules, and the core documentation.

```text
https://plumeria.dev/docs/getting-started/installation.md
https://plumeria.dev/docs/ai.md
https://plumeria.dev/docs.md
```

--------------------------------

### Install Plumeria with yarn

Source: https://plumeria.dev/docs/getting-started

Install @plumeria/core as a dev dependency using yarn.

```bash
yarn add -D @plumeria/core
```

--------------------------------

### Install Plumeria with pnpm

Source: https://plumeria.dev/docs/getting-started

Install @plumeria/core as a dev dependency using pnpm.

```bash
pnpm add -D @plumeria/core
```

--------------------------------

### Install Plumeria with npm

Source: https://plumeria.dev/docs/getting-started

Install @plumeria/core as a dev dependency using npm.

```bash
npm install -D @plumeria/core
```

--------------------------------

### Configure @plumeria/unplugin

Source: https://plumeria.dev/docs/api-reference/plugins/unplugin.md

Basic configuration example for the Plumeria plugin within a bundler setup.

```ts
import plumeria from '@plumeria/unplugin';
export default {
  plugins: [
    plumeria.vite({
      include: ['**/*.{ts,tsx}'],
      exclude: ['**/node_modules/**'],
      devEmitToDisk: false,
      styleProp: 'sx',
    }),
  ],
};
```

--------------------------------

### Install @plumeria/inspector with yarn

Source: https://plumeria.dev/docs/api-reference/components/inspector.md

Install the package using the yarn package manager.

```sh
yarn add @plumeria/inspector
```

--------------------------------

### StaticStyles usage examples

Source: https://plumeria.dev/docs/api-reference/types/StaticStyles.md

Usage examples for the Chip component. Passing a static style is accepted, while passing a dynamic style results in a type error.

```tsx
<Chip classStyle={styles.tinted} />      // ok
<Chip classStyle={styles.sized(120)} />  // Type error
```

--------------------------------

### Install @plumeria/inspector with pnpm

Source: https://plumeria.dev/docs/api-reference/components/inspector.md

Install the package using the pnpm package manager.

```sh
pnpm i @plumeria/inspector
```

--------------------------------

### Configure withPlumeria options

Source: https://plumeria.dev/docs/api-reference/plugins/next-plugin.md

Example of passing options to withPlumeria, including include, exclude, and styleProp.

```ts
export default withPlumeria(nextConfig, {
  include: ['./src/**/*.{ts,tsx}'],
  exclude: ['**/node_modules/**', '**/.next/**'],
  styleProp: 'sx',
});
```

--------------------------------

### Install @plumeria/next-plugin with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/getting-started/installation.md

Install the Next.js plugin as a dev dependency using your preferred package manager.

```sh
npm i -D @plumeria/next-plugin
```

```sh
yarn add -D @plumeria/next-plugin
```

```sh
pnpm add -D @plumeria/next-plugin
```

--------------------------------

### Install oxlint and rimraf for plumerialint

Source: https://plumeria.dev/docs/getting-started/installation.md

Install `oxlint` and `rimraf` as dev dependencies. `oxlint` is required to run the `plumerialint` command, and `rimraf` is recommended for cleaning the cache in Next.js projects.

```sh
pnpm i -D oxlint rimraf
```

--------------------------------

### Install @plumeria/inspector with npm

Source: https://plumeria.dev/docs/api-reference/components/inspector.md

Install the package using the npm package manager.

```sh
npm i @plumeria/inspector
```

--------------------------------

### Install Plumeria ESLint plugin with npm

Source: https://plumeria.dev/docs/getting-started/editor-integration.md

Install the required ESLint plugin and oxlint using npm.

```sh
npm i --save-dev @plumeria/eslint-plugin oxlint
```

--------------------------------

### Install @plumeria/unplugin with yarn

Source: https://plumeria.dev/docs/api-reference/plugins/unplugin.md

Install the plugin using the yarn package manager.

```sh
yarn add -D @plumeria/unplugin
```

--------------------------------

### Install @plumeria/unplugin with npm

Source: https://plumeria.dev/docs/api-reference/plugins/unplugin.md

Install the plugin using the npm package manager.

```sh
npm i -D @plumeria/unplugin
```

--------------------------------

### Install @plumeria/eslint-plugin with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/api-reference/plugins/eslint-plugin.md

Install the @plumeria/eslint-plugin package using npm, yarn, or pnpm. Choose the command that matches your package manager.

```sh
npm i --save-dev @plumeria/eslint-plugin
```

```sh
yarn add -D @plumeria/eslint-plugin
```

```sh
pnpm i --save-dev @plumeria/eslint-plugin
```

--------------------------------

### Install @plumeria/unplugin with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/integration/rolldown.md

Install the @plumeria/unplugin package using npm, yarn, or pnpm. These are alternative package manager commands for the same installation step.

```sh
npm i -D @plumeria/unplugin
```

```sh
yarn add -D @plumeria/unplugin
```

```sh
pnpm i -D @plumeria/unplugin
```

--------------------------------

### Define physical and logical padding properties

Source: https://plumeria.dev/docs/reference/specificity.md

Example showing how paddingTop and paddingBlockStart are treated as the same property in horizontal writing modes.

```js
const styles = css.create({
  physical: { paddingTop: 4 },
  logical: { paddingBlockStart: 10 },
});
```

--------------------------------

### Install @plumeria/unplugin with pnpm

Source: https://plumeria.dev/docs/api-reference/plugins/unplugin.md

Install the plugin using the pnpm package manager.

```sh
pnpm i -D @plumeria/unplugin
```

--------------------------------

### Install Plumeria ESLint plugin with yarn

Source: https://plumeria.dev/docs/getting-started/editor-integration.md

Install the required ESLint plugin and oxlint using yarn.

```sh
yarn add -D @plumeria/eslint-plugin oxlint
```

--------------------------------

### Define static media query breakpoints with createStatic

Source: https://plumeria.dev/docs/api-reference/javascript/createStatic.md

Example from the '#example' section defining breakpoints for standard media queries using createStatic. These static values can be used inside create or createTheme as conditions.

```ts
import * as css from '@plumeria/core';

export const breakpoints = css.createStatic({
  xs: '@media (max-width: 480px)',
  sm: '@media (max-width: 640px)',
  md: '@media (max-width: 768px)',
  lg: '@media (max-width: 1024px)',
  xl: '@media (max-width: 1280px)',
});
```

--------------------------------

### Define and use keyframes

Source: https://plumeria.dev/docs/api-reference/javascript/keyframes.md

Example showing how to define an animation using css.keyframes and apply it within a css.create style object.

```ts
import * as css from '@plumeria/core'

const fadeIn = css.keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

const styles = css.create({
  box: {
    animationName: fadeIn,
    animationDuration: '1s',
    animationTimingFunction: 'ease-in-out',
  },
});
```

```css
@keyframes kf-x34h9adh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.xhc714s1:not(#\#) { animation-name: kf-x34h9adh; }
.xdm4omap:not(#\#) { animation-duration: 1s; }
.xvct32ng:not(#\#) { animation-timing-function: ease-in-out; }
```

--------------------------------

### Install @plumeria/unplugin with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/getting-started/installation.md

Install the Vite plugin as a dev dependency using your preferred package manager.

```sh
npm i -D @plumeria/unplugin
```

```sh
yarn add -D @plumeria/unplugin
```

```sh
pnpm add -D @plumeria/unplugin
```

--------------------------------

### Macro usage example

Source: https://plumeria.dev/docs/getting-started/editor-integration.md

The expected expansion behavior for the classStyle snippet in JSX.

```jsx
<div class /> -> Enter -> <div classStyle={|} />
```

--------------------------------

### Install @plumeria/codemod with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/api-reference/codemod.md

Install the codemod as a dev dependency using npm, yarn, or pnpm. The package depends on ESLint and its TypeScript parser, and on nothing from Plumeria.

```sh
npm i --save-dev @plumeria/codemod
```

```sh
yarn add -D @plumeria/codemod
```

```sh
pnpm i --save-dev @plumeria/codemod
```

--------------------------------

### Example compiled component output

Source: https://plumeria.dev/docs/testing.md

The resulting HTML after the Plumeria plugin compiles a component, showing generated class names.

```html
<h1 class="xvdv6o3r xggb8uiu xvazecna">Vite + React</h1>
```

--------------------------------

### Install @plumeria/core with npm, yarn, or pnpm

Source: https://plumeria.dev/docs/getting-started/installation.md

Install the core package as a dev dependency using your preferred package manager. The core package contains only type definitions; the bundle and runtime are not included.

```sh
npm i -D @plumeria/core
```

```sh
yarn add -D @plumeria/core
```

```sh
pnpm i -D @plumeria/core
```

--------------------------------

### Define styles with pseudo-classes

Source: https://plumeria.dev/docs/reference/specificity.md

Example of defining separate styles for :hover and :focus states using css.create.

```js
const styles = css.create({
  hovered: { ':hover': { color: 'red' } },
  focused: { ':focus': { color: 'blue' } },
});
```

--------------------------------

### TypeScript example using marker and extended

Source: https://plumeria.dev/docs/api-reference/javascript/marker.md

Complete TypeScript example showing how to use `css.marker` and `css.extended` to style a child element based on parent hover states. It defines keyframes, creates styles with markers on 'grand' and 'parent', and applies extended styles to the child.

```tsx
import * as css from '@plumeria/core';

const animation = css.keyframes({
  '0%': {
    scale: 1.2,
  },
  '50%': {
    scale: 1.3,
  },
  '100%': {
    scale: 1.2,
  },
});

const styles = css.create({
  grand: {
    display: 'flex',
    flexDirection: 'column',
    gap: 15,
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    minHeight: 250,
    padding: 20,
    border: '2px dashed #c4c4c466',
    borderRadius: 12,
    transition: 'all 0.3s',
    ...css.marker('grand', ':hover'),  // [!code highlight]
  },
  parent: {
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
    alignItems: 'center',
    justifyContent: 'center',
    width: '80%',
    minHeight: 120,
    padding: 10,
    backgroundColor: '#f5f5f7',
    border: '2px solid #c4c4c444',
    borderRadius: 8,
    transition: 'all 0.3s',
    ...css.marker('parent', ':hover'),  // [!code highlight]
  },
  child: {
    padding: '8px 16px',
    fontWeight: 'bold',
    color: '#86868b',
    background: '#e8e8ed',
    borderRadius: 6,
    transition: 'all 0.3s',
    [css.extended('grand', ':hover')]: { // [!code highlight]
      color: '#0066cc',
      background: '#e1f0ff',
    },
    [css.extended('parent', ':hover')]: {  // [!code highlight]
      color: '#ffffff',
      background: '#ff9500',
      scale: 1.2,
      ':hover': {
        background: 'skyblue',
        animationName: animation,
        animationDuration: '1.2s',
        animationTimingFunction: 'ease-in-out',
        animationIterationCount: 'infinite',
      },
    },
  },
  discription: {
    fontSize: '14px',
    color: '#86868b',
  },
});

const MarkerExtended = () => {
  return (
    <div classStyle={styles.grand}>
      <span classStyle={styles.discription}>Grand Container (Hover me)</span>
      <div classStyle={styles.parent}>
        <span classStyle={styles.discription}>Parent Container (Hover me too)</span>
        <div classStyle={styles.child}>Child Element</div>
      </div>
    </div>
  );
};
```

--------------------------------

### Spinner.module.css with keyframes

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example stylesheet with a `@keyframes` rule and an `animation` shorthand. The migration converts the keyframes into a `css.keyframes` binding and splits the shorthand into longhands.

```css
/* Spinner.module.css */
@keyframes spin { from { rotate: 0deg } to { rotate: 360deg } }
.icon { animation: spin 1s linear infinite }
```

--------------------------------

### Card.module.css before migration

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example `Card.module.css` stylesheet that the migration converts. It shows a base class, a `composes` rule, a hover state, and a descendant selector.

```css
.base { font-size: 12px }
.card { composes: base; padding: 16px }
.card:hover { background: teal }
.card .card-title { color: red }
```

--------------------------------

### Configure property rejection options

Source: https://plumeria.dev/docs/api-reference/plugins/unplugin.md

Examples of using withoutPhysicalProperties to enforce property naming conventions.

```ts
plumeria.vite({ withoutPhysicalProperties: true });
```

```ts
plumeria.vite({ withoutPhysicalProperties: { sizes: true } });
```

--------------------------------

### Trigger animations on hover

Source: https://plumeria.dev/docs/api-reference/javascript/keyframes.md

Example demonstrating how to apply keyframes within pseudo-selectors like :hover.

```ts
const styles = css.create({
  card: {
    transition: 'transform 0.3s ease',
    ':hover': {
      animationName: fadeIn,
      animationDuration: '0.5s',
    },
  },
});
```

--------------------------------

### Run rename-prop with npx

Source: https://plumeria.dev/docs/api-reference/codemod.md

Runs the codemod without installing it locally. Use this to apply the rename-prop transform directly via npx.

```sh
npx @plumeria/codemod rename-prop classStyle sx
```

--------------------------------

### User integration example (app.tsx)

Source: https://plumeria.dev/docs/integration/component-library.md

Shows the entire integration from a user's perspective: import the component and use it. The component brings its own stylesheet, so no bundler configuration or `@plumeria/*` dependency is needed.

```tsx
import { Card } from 'your-lib';

export const App = () => <Card title="Hello" />;
```

--------------------------------

### css.use() usage example

Source: https://plumeria.dev/docs/api-reference/javascript/use.md

Shows how to use css.use() to get a class name string for external components. Both classStyle and css.use() are compiled at build time with zero runtime overhead.

```ts
import * as css from '@plumeria/core';

const styles = css.create({
  text: { fontSize: '16px' }
});

// Get the class name as a string
const className = css.use(styles.text);

// Apply to an external component
<ExternalComponent className={css.use(styles.text)} />
```

--------------------------------

### Migrate from CSS Modules

Source: https://plumeria.dev/docs/why-plumeria.md

Run this command to convert each `*.module.css` file to a `*.styles.ts` file and update consumers. Unconvertible descendant rules become markers with extended styles.

```sh
npx @plumeria/codemod migrate --from css-modules
```

--------------------------------

### Migrate from Plumeria back to CSS Modules

Source: https://plumeria.dev/docs/why-plumeria.md

Run this command to convert `*.styles.ts` files back to `*.module.css`, moving theme tokens and animations to global CSS and call sites to `className`. This is an export, not a round trip.

```sh
npx @plumeria/codemod migrate --from plumeria
```

--------------------------------

### Migrating Tailwind Variants to Plumeria css.create

Source: https://plumeria.dev/docs/ai.md

Comparison showing the transition from a dynamic tv() configuration to a static css.create() implementation. Note that external overrides are handled via the classStyle array rather than twMerge.

```tsx
// --- Before ---
const button = tv({
  base: 'inline-flex rounded font-medium',
  variants: {
    size: { sm: 'h-8 px-3 text-sm', lg: 'h-12 px-6 text-lg' },
    tone: { primary: 'bg-blue-500 text-white', danger: 'bg-red-500 text-white' },
  },
  compoundVariants: [{ size: 'lg', tone: 'primary', class: 'shadow-lg' }],
  defaultVariants: { size: 'sm', tone: 'primary' },
});

<button className={twMerge(button({ size, tone }), className)} />;

// --- After (values resolved from the project's compiled CSS, not recalled) ---
const styles = css.create({
  base: { display: 'inline-flex', borderRadius: '4px', fontWeight: 500 },
  lgPrimary: { boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1)' },
});

const sizeStyles = css.create({
  sm: { height: '32px', paddingInline: '12px', fontSize: '14px' },
  lg: { height: '48px', paddingInline: '24px', fontSize: '18px' },
});

const toneStyles = css.create({
  primary: { backgroundColor: '#3b82f6', color: '#fff' },
  danger: { backgroundColor: '#ef4444', color: '#fff' },
});

type ButtonProps = {
  size?: keyof typeof sizeStyles;
  tone?: keyof typeof toneStyles;
  styleArray?: css.Style;
};

export const Button = ({ size = 'sm', tone = 'primary', styleArray }: ButtonProps) => (
  <button
    classStyle={[
      styles.base,
      sizeStyles[size],
      toneStyles[tone],
      size === 'lg' && tone === 'primary' && styles.lgPrimary,
      styleArray,
    ]}
  />
);
```

--------------------------------

### Use static breakpoints in create for responsive styles

Source: https://plumeria.dev/docs/api-reference/javascript/createStatic.md

Usage example showing how to use static values defined by createStatic (like breakpoints.sm and breakpoints.lg) as keys in the create function to apply conditional styles.

```ts
import * as css from "@plumeria/core";
import { breakpoints } from "lib/mediaQuery";

export const styles = css.create({
  container: {
    [breakpoints.sm]: {
      padding: 16,
    },
    [breakpoints.lg]: {
      padding: 32,
    },
  },
});
```

--------------------------------

### Nested blocks are covered - type error example

Source: https://plumeria.dev/docs/api-reference/types/StyleProps.md

Shows that StyleProps checks properties inside nested blocks (like pseudo-classes). This example causes a type error because 'position' is not enumerated in the StyleProps.

```tsx
// Type error, position is not enumerated
<Text classStyle={styles.hoverPinned} />
```

--------------------------------

### Example usage of AtomicClassNameFor with @plumeria/core

Source: https://plumeria.dev/docs/api-reference/types/AtomicClassNameFor.md

Shows how to use AtomicClassNameFor to type a variable that holds an atomic class name. The example demonstrates that assigning a class name for a different property causes a type error.

```typescript
import * as css from '@plumeria/core';

const styles = css.create({
  text: {
    color: 'red',
    fontSize: '12px',
  },
});

const color: css.AtomicClassNameFor<'color', 'red'> = styles.text.color; // ok
const wrong: css.AtomicClassNameFor<'color', 'red'> = styles.text.fontSize; // Type error
```

--------------------------------

### Generated CSS from marker and extended example

Source: https://plumeria.dev/docs/api-reference/javascript/marker.md

The CSS output generated from the TypeScript example. It shows how `marker` sets CSS variables on hover and `extended` uses `@container style()` queries to apply styles to child elements.

```css
.xtkxh191:hover {
  --xl0a2l54-grand-hover: 1;
}

.xhcsnlrf:hover {
  --xmlppxj5-parent-hover: 1;
}

@container style(--xl0a2l54-grand-hover: 1) {
  .x84muc4x:not(#\#) {
    color: #06c;
  }

  .x2x6k4j2:not(#\#):not(#\#) {
    background-color: #e1f0ff;
  }
}

@container style(--xmlppxj5-parent-hover: 1) {
  .xr8ck8y9:not(#\#) {
    color: #fff;
  }

  .xb1yp2w2:not(#\#):not(#\#) {
    background-color: #ff9500;
  }

  .xewf73ay:not(#\#) {
    scale: 1.3;
  }

  .x8odz1r5:not(#\#):not(#\#) {
    animation-name: kf-xmortmuw;
  }

  .x0guwijo:not(#\#):not(#\#) {
    animation-duration: 1.2s;
  }

  .xek6euru:not(#\#):not(#\#) {
    animation-timing-function: ease-in-out;
  }

  .xwdc6dqv:not(#\#):not(#\#) {
    animation-iteration-count: infinite;
  }

  .xd9yj17o:not(#\#):hover {
    color: #0ff;
  }
}
```

--------------------------------

### Rename JSX attribute

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example of the transformation applied to JSX attributes.

```diff
- <div classStyle={styles.card} />
+ <div sx={styles.card} />
```

--------------------------------

### Rename property signature

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example of the transformation applied to property signatures annotated with Style.

```diff
  interface CardProps {
-   classStyle?: Style;
+   sx?: Style;
  }
```

--------------------------------

### Functional pseudo-classes usage

Source: https://plumeria.dev/docs/api-reference/javascript/marker.md

Example of using functional pseudo-classes like :has() with marker and extended.

```ts
const styles = css.create({
  wrap: {
    ...css.marker('wrap', ':has(a:hover)'),
  },
  child: {
    [css.extended('wrap', ':has(a:hover)')]: { color: 'red' },
  },
});
```

```css
.xwpr9f08:has(a:hover) {
  --xg204awn-wrap-has: 1;
}

@container style(--xg204awn-wrap-has: 1) {
  .xof70rr5:not(#\#) {
    color: red;
  }
}
```

--------------------------------

### Configure Vite for Qwik integration

Source: https://plumeria.dev/docs/integration/frameworks.md

Place plumeria.vite() before qwikVite() in the plugins array to ensure proper compilation order.

```ts
import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import plumeria from '@plumeria/unplugin';

export default defineConfig({
  plugins: [plumeria.vite(), qwikVite({ csr: true })],
});
```

--------------------------------

### Type-only module definition

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example of a module declaring only style prop types, which is not reached by the codemod.

```ts
import type { StyleProps } from '@plumeria/core';

export type CardProps = {
  classStyle?: StyleProps<'color'>;
};
```

--------------------------------

### Create plumeria.d.ts with @plumeria/core/class-style reference

Source: https://plumeria.dev/docs/getting-started/installation.md

Create a `plumeria.d.ts` file at the application root. This reference is required because `@plumeria/core` does not ship its own prop declaration; it names the styling prop your project compiles with.

```ts
/* application root */
/// <reference types="@plumeria/core/class-style" />
```

--------------------------------

### Build script with esbuild and @plumeria/unplugin (build.js)

Source: https://plumeria.dev/docs/integration/component-library.md

Build script for a library using esbuild and the Plumeria unplugin. It bundles the component, externalizes React, and prepends the stylesheet import to the output because build tools do not wire the CSS automatically.

```js
import esbuild from 'esbuild';
import fs from 'node:fs';
import plumeria from '@plumeria/unplugin';

await esbuild.build({
  entryPoints: ['src/index.tsx'],
  bundle: true,
  outfile: 'dist/index.js',
  external: ['react', 'react/jsx-runtime'],
  plugins: [plumeria.esbuild({ include: /\.[jt]sx?$/ })],
  loader: { '.tsx': 'tsx', '.ts': 'ts' },
  format: 'esm',
  jsx: 'automatic',
});

fs.writeFileSync(
  'dist/index.js',
  `import './index.css';\n${fs.readFileSync('dist/index.js', 'utf-8')}`,
);
```

--------------------------------

### Component source and build output (src/index.tsx, dist/index.js, dist/index.css)

Source: https://plumeria.dev/docs/integration/component-library.md

Shows the source component, the emitted JavaScript, and the extracted CSS. The build removes the `css.create` call and `@plumeria/core` import, leaving string literals and a flat rule list.

```tsx
import * as css from '@plumeria/core';

const styles = css.create({
  card: { display: 'flex', padding: '16px', borderRadius: '8px' },
  title: { fontSize: '18px', fontWeight: 'bold' },
});

export const Card = ({ title }: { title: string }) => (
  <div classStyle={styles.card}>
    <h2 classStyle={styles.title}>{title}</h2>
  </div>
);
```

```js
import './index.css';
import { jsx } from 'react/jsx-runtime';
var Card = ({ title }) =>
  jsx('div', {
    className: 'xxp6epoh xqqbxt1d xyqr9vb7',
    children: jsx('h2', { className: 'xpdfgu2b xybc5i37', children: title }),
  });
export { Card };
```

```css
.xxp6epoh { display: flex; }
.xqqbxt1d { padding: 16px; }
.xyqr9vb7 { border-radius: 8px; }
.xpdfgu2b:not(#\#) { font-size: 18px; }
.xybc5i37:not(#\#) { font-weight: 700; }
```

--------------------------------

### Reported conversion issues

Source: https://plumeria.dev/docs/api-reference/codemod.md

Example of the diagnostic output generated when Plumeria constructs cannot be statically resolved or exported.

```text
src/Card.tsx
  8:5  dynamic-value
        The value of `color` cannot be represented statically.
  12:3  spread-create
        Top-level spreads cannot name a CSS Module class.
  19:16  style-type-reference
        `css.StaticStyles` has no CSS Modules equivalent, and the import that
        declares it does not survive the export of Card.tsx.
```

--------------------------------

### Basic usage of css.create

Source: https://plumeria.dev/docs/api-reference/javascript/create.md

Defines styles for a container and text using plain objects, then applies them via `classStyle` in a React component. The bundler cleans up the call.

```tsx
import * as css from '@plumeria/core'

const styles = css.create({
  container: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  text: {
    fontSize: '14px',
    textDecoration: 'none',
  },
})

export default function App() {
  return (
    <div
      classStyle={[
        styles.container,
        styles.text
      ]}
    />
  );
}
```
Tokens:
Raw