# @css-panda/node

> The core css panda library

Latest version **0.0.0-dev-20220907182407** (published 2022-09-07) · 0 weekly downloads

## Install

```sh
npm install @css-panda/node
pnpm add @css-panda/node
yarn add @css-panda/node
bun add @css-panda/node
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0-dev-20220907182407 |
| Published | 2022-09-07 |
| First published | 2022-09-07 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 20 |
| Unpacked size | 73.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Segun Adebayo |
| Maintainers | segunadebayo |

## Links

- npm: https://www.npmjs.com/package/@css-panda/node
- npm.io page: https://npm.io/package/@css-panda/node

## Dependencies (20)

- [esbuild](https://npm.io/package/esbuild.md) 0.15.7
- [filespy](https://npm.io/package/filespy.md) 1.2.4
- [outdent](https://npm.io/package/outdent.md)  ^0.8.0
- [postcss](https://npm.io/package/postcss.md) 8.4.16
- [recrawl](https://npm.io/package/recrawl.md) 2.2.1
- [fs-extra](https://npm.io/package/fs-extra.md) 10.1.0
- [hookable](https://npm.io/package/hookable.md) 5.3.0
- [pkg-types](https://npm.io/package/pkg-types.md) 0.3.5
- [pluralize](https://npm.io/package/pluralize.md) 8.0.0
- [look-it-up](https://npm.io/package/look-it-up.md) 2.1.0
- [ts-pattern](https://npm.io/package/ts-pattern.md) 4.0.5
- [lodash.merge](https://npm.io/package/lodash.merge.md) 4.6.2
- [@css-panda/ast](https://npm.io/package/@css-panda/ast.md) 0.0.0-dev-20220907182407
- [@css-panda/core](https://npm.io/package/@css-panda/core.md) 0.0.0-dev-20220907182407
- [@css-panda/error](https://npm.io/package/@css-panda/error.md) 0.0.0-dev-20220907182407
- [@css-panda/types](https://npm.io/package/@css-panda/types.md) 0.0.0-dev-20220907182407
- [@css-panda/config](https://npm.io/package/@css-panda/config.md) 0.0.0-dev-20220907182407
- [@css-panda/logger](https://npm.io/package/@css-panda/logger.md) 0.0.0-dev-20220907182407
- [@css-panda/shared](https://npm.io/package/@css-panda/shared.md) 0.0.0-dev-20220907182407
- [@css-panda/tokens](https://npm.io/package/@css-panda/tokens.md) 0.0.0-dev-20220907182407

## Recent versions

- 0.0.0-dev-20220907182407 (latest) — 2022-09-07
- 0.0.0-dev-20221121144047 (dev) — 2022-11-21
- 0.0.0-dev-20221121124619 — 2022-11-21
- 0.0.0-dev-20221121101851 — 2022-11-21
- 0.0.0-dev-20221121101518 — 2022-11-21
- 0.0.0-dev-20221121101447 — 2022-11-21
- 0.0.0-dev-20221121101321 — 2022-11-21
- 0.0.0-dev-20221121101254 — 2022-11-21
- 0.0.0-dev-20221121100135 — 2022-11-21
- 0.0.0-dev-20221121091310 — 2022-11-21
- 0.0.0-dev-20221113213436 — 2022-11-13
- 0.0.0-dev-20221113205841 — 2022-11-13
- 0.0.0-dev-20221113185306 — 2022-11-13
- 0.0.0-dev-20221113131253 — 2022-11-13
- 0.0.0-dev-20221113105251 — 2022-11-13
- … 156 more at https://npm.io/package/@css-panda/node/versions

## README

## Folder structure

- `.panda`
  - `design-tokens` (index.js, index.d.ts, index.css)
  - `styled-system` (index.js, index.d.ts)
  - `package.json`

```js
const tokens = {
  'colors.red.400': { value: '...', variable: '...' },
}

const tokenMap = {
  colors: [{ group: 'red', key: 'red.400', value: '...' }],
  fonts: [],
}

function getToken(path) {
  const { value } = tokens[path] || {}
  return value
}

function getTokenVar(path) {
  const { variable } = tokens[path] || {}
  return variable
}
```

```js
import { generateCssVar, generateDts, generateJs } from '@css-panda/generator'
import { createTokenMap } from '@css-panda/tokens'

const conf = new Conf()

const dict = createTokenMap(config)

const cssVars = generateCssVar(dict, { root: ':root' })
const dts = generateDts(dict)
const files = generateJs(dict, { formats: ['esm', 'cjs'] })
```

```json
{
  "name": "dot-panda",
  "description": "...",
  "exports": {
    "./design-tokens": {
      "import": "./generated/design-tokens/index.mjs"
    },
    "./css": {
      "import": "./generated/css/index.mjs"
    }
  },
  "typeVersions": {
    "*": {
      "design-tokens": ["./generated/design-tokens"],
      "css": ["./generated/css"]
    }
  }
}
```

```js
import { definePackage, writePackage } from '@css-panda/generators'

const pkg = setupPackage({
  name: 'dot-panda',
  description: '...',
  dir: 'generated',
  exports: ['design-tokens', 'css'],
})

writePackage(pkg)

updateTsConfig({
  compilerOptions: {
    paths: {
      'design-system': ['./.panda'],
    },
  },
})

updateGitIgnore({ comment: '# Panda', path: '.css-panda' })
```

```ts
type ConditionType =
  | 'color-scheme'
  | 'resolution'
  | 'writing-mode'
  | 'pseudo'
  | 'selector'
  | 'viewport'
  | 'interaction-media'
  | 'reduced-motion'
  | 'reduced-data'
  | 'reduced-transparent'
  | 'contrast'

const conditions = {
  dark: {
    type: 'color-scheme',
    value: '[data-theme=dark]',
    colorScheme: 'dark',
  },
  darkDimmed: {
    type: 'color-scheme',
    value: '[data-theme=dark_dimmed]',
    colorScheme: 'dark',
  },
  ltr: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  rtl: {
    type: 'dir',
    value: '[dir=rtl]',
  },
  hover: {
    type: 'pseudo',
    value: '&:hover',
  },
  focus: {
    type: 'pseudo',
    value: '&:focus',
  },
  sm: {
    type: 'viewport',
    value: '@media (min-width: 480px)',
  },
}
```

```ts
const defaults = {
  className: ({ prop, value }) => `${prop}-${esc(value)}`,
}

const tt = defineConfig({
  utilities: [
    {
      properties: {
        display: {
          className: ({ value }) => `d-${value}`,
          transform(value) {
            return { display: value }
          },
          values: {
            fl: 'flex',
            ib: 'inline-block',
          },
        },
        background: {
          className: ({ prop, value }) => `bg-${value}`,
          values: ({ tokens }) => ({
            ...tokens.colors,
            inherit: 'inherit',
          }),
        },
        color: {
          className: ({ prop, value }) => `text-${value}`,
          values: (tokens) => ({ ...tokens.colors }),
        },
        fill: { values: 'colors' },
        lineClamp: {
          className: ({ prop, value }) => `clamp-${value}`,
          values: {
            '1': {
              '--line-clamp': '1',
            },
          },
        },
      },
      shorthands: {
        bg: 'background',
      },
    },

    {
      properties: {
        strokeWidth: {
          values: { '1': '1px', 2: '2px' },
        },
      },
    },

    {
      properties: {
        paddingLeft: { values: 'space', className: 'pl' },
        paddingRight: { values: 'space', className: 'pr' },
        paddingX: {
          className: 'px',
          values({ theme, map }) {
            return map(theme.space, (value) => ({
              paddingLeft: value,
              paddingRight: value,
            }))
          },
        },
      },
      shorthands: {
        pl: 'paddingLeft',
        px: 'paddingX',
      },
    },
  ],
})
```

---
_Source: https://npm.io/package/@css-panda/node · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._