This compose() function allows users of the module to take advantage of components key in tokens.config to create style presets to be used in their components.
This is particularly handy when trying to create components that are both self-configurable (via props), but also globally, via tokens.config.
Compose feature comes in with everything that is needed for the user to create components with ease:
[X] Typings provided by css-type on all keys, meaning you get full auto-complete of CSS properties when using it
[X] Unwrap helpers, to be used anywhere in <style> attributes: @component('block')
[X] Props helpers, to be used in <script>, to generate props for variants:
[X] defineProps({ ...$componentProps('block') })
[X] Support for all :pseudo selectors, with proper CSS generated
[X] variants support, making it super-easy to create components variants
[ ] Support variant combinations (rounded + outline = border-width: 2px for example)
[ ] Autocomplete from global pre-defined keys (see #13)
This
compose()function allows users of the module to take advantage ofcomponentskey intokens.configto create style presets to be used in their components.This is particularly handy when trying to create components that are both self-configurable (via props), but also globally, via
tokens.config.Compose feature comes in with everything that is needed for the user to create components with ease:
css-typeon all keys, meaning you get full auto-complete of CSS properties when using it<style>attributes:@component('block')<script>, to generate props for variants:defineProps({ ...$componentProps('block') }):pseudoselectors, with proper CSS generatedvariantssupport, making it super-easy to create components variantsrounded+outline=border-width: 2pxfor example)