Introduction

Install the Shoreline CLI

npm i @vtex/shoreline-cli @vtex/shoreline-theme

The @vtex/shoreline-theme is a peer dependency.

Create the shoreline.config.ts file

import { defineConfig } from '@vtex/shoreline-theme'
export default defineConfig({
  preset: 'base',
})

Your project's folder structure would become something similar to:

Update package.json scripts

The prepare (opens in a new tab) script runs after every installation, or before any publish.

{
  "scripts": {
+    "prepare": "shorelinecss theme",
  }
}

Integrate the CSS on the application root

import '../shoreline/styles.css'
export function App() {
  return <div>Page</div>
}

Update tsconfig.json (Optional)

{
  // ...
  "include": ["src", "shoreline"]
}

Update gitignore (Optional)

Since we added the code generation in the prepare script, the /shoreline folder can be added to the .gitignore.

/shoreline