Theemo / @theemo/style-dictionary / cssPropertiesFormater

Variable: cssPropertiesFormater

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:

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:

@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;
}