@tokens-studio/sd-transforms/dist/transformDimension.js

Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio

function transformDimensionValue(value) {
    return splitMultiValues(value).map(ensurePxSuffix).join(' ');
}
function ensurePxSuffix(dim) {
    if (!isNaN(dim) && dim !== '' && parseFloat(dim) !== 0) {
        return `${dim}px`;
    }
    return `${dim}`;
}
function splitMultiValues(dim) {
    if (typeof dim === 'string' && dim.includes(' ')) {
        return dim.split(' ');
    }
    return [`${dim}`];
}
function transformDimensionProp(val, prop) {
    if (val[prop] !== undefined) {
        val[prop] = transformDimensionValue(val[prop]);
    }
    return val;
}
/**
 * Helper: Transforms dimensions to px
 */
export function transformDimension(token) {
    const val = (token.$value ?? token.value);
    const type = token.$type ?? token.type;
    if (val === undefined)
        return undefined;
    let transformed = val;
    switch (type) {
        case 'typography': {
            transformed = transformDimensionProp(val, 'fontSize');
            break;
        }
        case 'shadow': {
            const transformShadow = (shadowVal) => {
                ['offsetX', 'offsetY', 'blur', 'spread'].forEach(prop => transformDimensionProp(shadowVal, prop));
                return shadowVal;
            };
            if (Array.isArray(transformed)) {
                transformed = transformed.map(transformShadow);
            }
            else {
                transformed = transformShadow(transformed);
            }
            break;
        }
        case 'border': {
            transformed = transformDimensionProp(val, 'width');
            break;
        }
        default: {
            transformed = transformDimensionValue(val);
        }
    }
    return transformed;
}