Vanilla Extract Integration

Usage

npm i @vtex/shoreline-vanilla-extract @vanilla-extract/css

Vanilla Extract is a built-time solution. This means that the configuration changes depending on the project structure. Check the docs and install the correct version for your app (opens in a new tab).

example.css.ts

import { csx } from '@vtex/shoreline-vanilla-extract'
 
export const example = csx({
  bg: '$bg-primary',
  fg: '$fg-primary',
})

example.tsx

import { example } from './example.css.ts'
 
function Example() {
  return <div className={example}>{/** ... */}</div>
}