Theemo / @theemo/style-dictionary / cssPropertiesFormater
Variable: cssPropertiesFormater
ts
const cssPropertiesFormater: Format;
Defined in: formats/css-properties.ts:89
Creates CSS @property
tokens with a registered type
so CSS knows what to do with your value. CSS @property
's represent the raw value and as such cannot contain references. For this the isCSSProperty()
filter is available to verify only those tokens suitable for use as @property
will pass.
Examples
Usage:
js
import StyleDictionary from 'style-dictionary';
import { isCSSProperty, cssPropertiesFormater } from '@theemo/style-dictionary';
StyleDictionary.registerFormat(cssPropertiesFormater);
export default {
source: ['tokens/**/*.json'],
platforms: {
css: {
files: [
{
format: 'css/properties',
destination: 'properties.css',
filter: isCSSProperty
}
]
}
}
};
Output:
css
@property --palette-negative-500 {
syntax: "<color>";
inherits: true;
initial-value: #a517e8;
}
@property --sizing-base {
syntax: "<length>";
inherits: true;
initial-value: 1em;
}
@property --sizing-ratio {
syntax: "<number>";
inherits: true;
initial-value: 1.3;
}