Class TokensConverter

This class is used to convert a tokens object into CSS variables.

Constructors

constructor

Properties

options

Methods

formatCategoryComment formatCssWithPrettier formatValue formatVariable processKey processKeys processNonObjectValue processObjectValue sanitizeKey toCssVariables tokensToCssModule

Constructors

constructor

  • new TokensConverter(options?): TokensConverter

  • Parameters

    • options: Options = {}

      This is an optional object that can be used to customize the output

    Returns TokensConverter

    Example

    const options = {
      unit: 'px',
      transform: (key, value) => {
      *   // Skip tokens with unknown CSS properties
      *   if (key.includes('unknown-css-property')) {
      *     return null;
      *   }
      * 
      *   // Change the value of all font-family tokens to Roboto
      *   if (key.includes('font-family')) {
      *     return { key, value: 'Roboto' };
      *   }
      * 
      *   // Return the original token
      *   return { key, value };
      },
    };

    const tokensConverter = new TokensConverter(options);
    const result = tokensConverter.toCssVariables(tokensObj);

Properties

Private options

options: Options

Methods

Private formatCategoryComment

  • formatCategoryComment(key, output): string

  • Parameters

    • key: string
    • output: string

    Returns string

Private formatCssWithPrettier

  • formatCssWithPrettier(css): string

  • Parameters

    • css: string

    Returns string

Private formatValue

  • formatValue(value, unit): string

  • Parameters

    • value: any
    • unit: string

    Returns string

Private formatVariable

  • formatVariable(key, value, prefix): string

  • Parameters

    • key: string
    • value: any
    • prefix: string

    Returns string

Private processKey

  • processKey(key, tokensObj, prefix, output): string

  • Parameters

    • key: string
    • tokensObj: Record<string, any>
    • prefix: string
    • output: string

    Returns string

Private processKeys

  • processKeys(tokensObj, prefix): string

  • Parameters

    • tokensObj: Record<string, any>
    • prefix: string

    Returns string

Private processNonObjectValue

  • processNonObjectValue(key, value, prefix): string

  • Parameters

    • key: string
    • value: any
    • prefix: string

    Returns string

Private processObjectValue

  • processObjectValue(key, value, prefix, output): string

  • Parameters

    • key: string
    • value: any
    • prefix: string
    • output: string

    Returns string

Private sanitizeKey

  • sanitizeKey(key): string

  • Parameters

    • key: string

    Returns string

toCssVariables

  • toCssVariables(tokensObj): string

  • Parameters

    • tokensObj: Record<string, any>

      The object (key and value) containing the tokens

      Example

      const tokensObj = {
       colors: {
         primary: '#000',
         secondary: '#fff',
       },
       fontSizes: {
         small: '12px',
         medium: '16px',
         large: '20px',
       },
       spacing: {
         small: '8px',
         medium: '16px',
         large: '24px',
       },
      };

    Returns string

Private tokensToCssModule

  • tokensToCssModule(tokensObj, prefix?): string

  • Parameters

    • tokensObj: Record<string, any>
    • prefix: string = ''

    Returns string

Settings

Member Visibility

Theme

On This Page