Code Generation

The code generation can also be done programmatically. Consider the project with the structure:

shoreline.config.js
index.js
package.json

The configuration file is:

shoreline.config.js

import { defineConfig } from '@vtex/shoreline-theme'
 
export default defineConfig({
  preset: 'base',
  tokens: {
    color: {
      primary: 'oklch(54% 0.212 340.41)',
    },
  },
})

The main script should call the async function theme, with the return type Promise<void>.

index.js

import { theme } from '@vtex/shoreline-theme'
 
async function generate() {
  await theme()
}
 
generate()

The script runs on a node environment.

package.json

{
  "scripts": {
    "start": "node index.js"
  }
}

In the case of typescript, you can use ts-node (opens in a new tab).

package.json

{
  "scripts": {
    "start": "ts-node index.ts"
  }
}

The theme() generates the contents on the shoreline folder.

- styles.css
- types.d.ts
shoreline.config.js
index.js
package.json

Config Defining Tokens