Peacock CSS

Vite

install dependencies

pnpm install @peacockcss/core @linaria/vite @linaria/core 

Create a system.css.ts, and set up your design system:

// system.css.ts

import { createSystem, defaultSystem } from "@peacockcss/core"

export const system = createSystem({
  ...defaultSystem,
  theme: {
    colors: {
      red: {
        500: "#5b1616"
      },
      slate: "#282c34",
      white: "#ffffff"
    },
    space: {
      large: "50px"
    }
  },
  transforms: {
    ...defaultSystem.transforms,
    mx: (v) => `margin-left: ${v}; margin-right: ${v}`,
    my: (v) => `margin-top: ${v}; margin-bottom: ${v}`
  }
})

export const {prefix, screens, transforms, theme, themeMap } = system

Set vite's configuration:

// vite.config.js

import { defineConfig } from "vite"
import linaria from "@linaria/vite"
import { peacock } from "@peacockcss/core"
import { system } from "./src/system.css"

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        ...peacock({ designSystem: system }),
      ],
    },
  },
  plugins: [
    linaria({
      classNameSlug: process.env.NODE_ENV === "production" ? `[hash]` : `[name]-[hash]`, // easier to debug classnames when developing
      preprocessor: "none", // this is important as postcss takes care of everything, instead of the default stylis
    }),
  ],
  build: {
    target: "esnext",
    cssMinify: false // since peacock is using lightningcss as an autoprefixer and minifier, we disable vite's default
  }
})