Update the SizePX format for the “dimension” token when using the DTCG format with a unit specification. #1501
Description
Update the SizePX format for the “dimension” token when using the DTCG format with a unit specification.
{
"$value": {
"value": 16,
"unit": "px"
}
}My suggestion is to add a filter to prevent the conversion of the value if the unit is not a PX, allowing another transform to handle the other unit.
Below is a suggested update to the code of the sizePx transform function.
Please let me know your feedback. @jorenbroekema
I use the 5v branch.
/**
* Adds 'px' to the end of the number. Does not scale the number
*
* ```js
* // Matches: token.type === 'dimension'
* // Returns:
* "10px"
* ```
*
* @memberof Transforms
*/
[transforms.sizePx]: {
type: value,
filter: (token, options) => {
const rawValue = options.usesDtcg ? token.$value : token.value;
if (typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue && 'unit' in rawValue) {
return rawValue.unit === 'px' && (isDimension(token, options) || isFontSize(token, options));
}
return isDimension(token, options) || isFontSize(token, options);
},
transform: function (token, _, options) {
const rawValue = options.usesDtcg ? token.$value : token.value;
if (typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue && 'unit' in rawValue) {
const parsedVal = parseFloat(rawValue.value);
if (isNaN(parsedVal)) throwSizeError(token.name, rawValue.value, rawValue.unit || 'px');
return parsedVal + (rawValue.unit || 'px');
} else {
const parsedVal = parseFloat(rawValue);
if (isNaN(parsedVal)) throwSizeError(token.name, rawValue, 'px');
return parsedVal + 'px';
}
},
},
other issue about object and unit DTCG format : #1471