CSS Function
The css() function makes you write styling in the same language as your <script>.
The most important thing to understand about this function is that it acts as a build-time feature.
- Resolves your theme tokens to their variables values
- Puts your Utils properties at the same level as the other CSS properties
- Compile static styling to
postcssand ship it as<style lang="postcss"> - Optimizes and split runtime features to
<script>
Theme usage
In any place of your css() function, you will be able to use your theme tokens.
These tokens will be resolved to their CSS variable value in your theme stylesheet.
css({
'.my-button': {
backgroundColor: '{color.primary.100}'
}
})
Utils properties usage
Pinceau puts your Utils properties at the same level as the rest of the CSS attributes.
When you define a property in your theme like this:
defineTheme({
utils: {
mx: (value) => ({ marginRight: v, marginLeft: v })
}
})
It will be in the autocomplete type here (*), as any other CSS property:
css({
'.my-button': {
// Will suggest `mx`
'*': ''
}
})
The typings from your utils properties will be preseved in the css() function.
Utils properties can also return nested CSS, this will unwrap with the key position as root.
Local tokens
The css() context provides shortcuts to use CSS custom properties.
css({
'.my-button': {
// This is a local token
'--button-primary': '{color.primary.100}',
// Local tokens also supports Computed Styles
'--button-secondary': (props) => `{color.${props.color}.100}`,
// Local tokens are used like theme tokens
backgroundColor: '{button.primary}',
color: '{button.secondary}'
}
})
These custom properties will be detected by the compiler, which leads to these features:
-
Usage with regular tokens syntax:{button.primary}css({ div: { color: '{button.primary}' } })
- Added to the CSS Prop type for this component, making parent customization type-safe
<MyButton :css="{ '--button-primary': 'red' }" />
- Will be autocompleted by the VSCode extension in that component context