style-dictionary-utils/dist/transformer/duration-css.js

Utilities to use in your style dictionary config

import { isDurationFilter } from '../filter/isDuration.js';
import { getValue } from '../utilities/getValue.js';
export const durationValueTransformer = (tokenValue) => {
    if (typeof tokenValue === 'string') {
        return tokenValue;
    }
    const { value, unit } = tokenValue;
    // Validate that the unit is supported
    if (unit !== 'ms' && unit !== 's') {
        throw new Error(`Invalid unit: '${unit}', expected 'ms' or 's'`);
    }
    // Handle zero values - always return "0s" for consistency with CSS
    if (value === 0) {
        return '0s';
    }
    // Return the value with its original unit preserved
    return `${value}${unit}`;
};
/**
 * durationToCss
 * @description convert duration tokens to CSS-compatible format, preserving original units
 */
export const durationCss = {
    name: 'duration/css',
    type: `value`,
    transitive: true,
    filter: isDurationFilter,
    transform: (token) => {
        try {
            const durationTokenValue = getValue(token);
            return durationValueTransformer(durationTokenValue);
            // catch errors and rethrow with token name
        }
        catch (error) {
            throw new Error(`Error transforming duration token '${token.name}': ${error}`);
        }
    },
};