💡

This package is intended to be used by Shoreline contributors and library authors.

Introduction

The @vtex/shoreline-csx package transforms Shoreline tokens and utilities to an object that CSS-in-TS libraries can understand.

Install

npm i @shoreline/csx

Quick start

import { csx } from '@vtex/shoreline-csx'
 
const styles = csx({
  backgroundColor: 'black',
})

Make it reusable

The csx function does not transform the CSS-Object into classNames. Its best use is combining the result with a CSS-in-JS library.

import { csx as _csx, CSXObject } from '@shoreline/csx'
import { style } from '@vanilla-extract/css'
 
export function csx(csxObject: CSXObject = {}): string {
  const cssObject = _csx(csxObject)
  return style(cssObject)
}

Commands Design Tokens