style-dictionary-utils
Version:
Utilities to use in your style dictionary config
29 lines (28 loc) • 1.09 kB
JavaScript
import { isDimension } from '../filter/isDimension.js';
import { getValue } from '../utilities/getValue.js';
/**
* dimensionRemToPixel
* @description convert all dimensions that use rem value to pixels, uses `platform.options.basePxFontSize`
* as the base font, or `16` if not provided
*/
export const dimensionRemToPixel = {
name: 'dimension/remToPixel',
type: `value`,
transitive: true,
filter: (token) => {
const tokenValue = getValue(token);
return isDimension(token) && tokenValue.substring(tokenValue.length - 3) === 'rem';
},
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 `${baseFont * floatVal}px`;
},
};