[shoreline-css] Generate javascript object from css variables

[matheusps]

Problem

We have multiple files to manage the same theme: tokens.css and preset.ts. The css file is the actual theme, preset is only used for the documentation site.

The main problem of the current solution is having two sources of truth for theming - creating the necessity of changing both for a successful theme change.

Solution

Generate the javascript version from css tokens. For example, the css code:

@theme sunrise {
  :root {
    --color-blue: #0000FF
  }
}

Becomes:

export default {
  colorBlue: '#0000FF'
}

Usage examples

No response

Dependencies

No response

References

• https://lightningcss.dev/
• https://github.com/vtex/shoreline/pull/1613

[matheusps]

https://github.com/vtex/shoreline/issues/1765