style-dictionary-utils/dist/transformer/dimension-pixel-to-rem.js

Utilities to use in your style dictionary config

import { isDimension } from '../filter/isDimension.js';
import { getValue } from '../utilities/getValue.js';
/**
 * dimensionPixelToRem
 * @description convert all dimensions that use pixel value to rem, uses `platform.options.basePxFontSize`
 * as the base font, or `16` if not provided
 */
export const dimensionPixelToRem = {
    name: 'dimension/pixelToRem',
    type: `value`,
    transitive: true,
    filter: (token) => {
        const tokenValue = getValue(token);
        return isDimension(token) && tokenValue.substring(tokenValue.length - 2) === 'px';
    },
    transform: (token, platform) => {
        const tokenValue = getValue(token);
        const baseFont = (platform === null || platform === void 0 ? void 0 : platform.basePxFontSize) || 16;
        const floatVal = parseFloat(tokenValue);
        if (isNaN(floatVal)) {
            throw `Invalid Number: '${token.name}: ${tokenValue}' is not a valid number, cannot transform to rem \n`;
        }
        if (floatVal === 0) {
            return '0';
        }
        return `${floatVal / baseFont}rem`;
    },
};