feat(transforms): adds 'px to rem' transform

[jbarreiros]

Issue #, if available: NA

Description of changes:

Adds a transform for converting a pixel value to rem.

// config.json
{
    ...
    "platforms": {
        "scss": {
            ...
            "basePxFontSize": 16  // optional, defaults to 16
        }
    }
}

// properties.json
{
    "size": {
        "font": {
            "heading-1": { "value": "18px" }
        },
        "spacing": {
            "small": { "value": "12px" }
        }
    }
}

I'm not thrilled with the config property name basePxFontSize, and open to suggestions.

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[dbanksdesign]

Love this PR! Just a few minor comments and questions. Your question about the name basePxFontSize, I'm fine with it. I can't think of a better name right now.

[dbanksdesign]

I like the spirit of this check, but no other transforms right now check for a unit, making this an outlier. What are your thoughts on removing this check in this transform, and then creating some more generic size transforms that look for units and apply the proper transform? I think it would be good to have these more intelligent transforms for people that want to specify borders in px but everything else in rem.

[jbarreiros]

Yeah, I can drop the check. Using parseFloat allows safely ignoring the unit if it is present.

I'm not entirely sure what you mean by "[create] some more generic size transforms that look for units and apply the proper transform"? Do you mean something like font/remToPx, where matcher: isFontSize? That's the only example that I can think of.

[dbanksdesign]

I'm thinking of a transform that would transform web-based values (in either px or rem) and covert them to dp/sp on Android and pts (CGFloats) on iOS. And it would do a check like above to tell whether the number should be directly translated (px are roughly equivalent to dp/sp/pt) or multiplied by the basePxFontSize for rem units. That way someone could define sizes in pixels and rems and not need 2 separate transforms. Does that make sense? Maybe I just need to write a PR with some example code...

[jbarreiros]

Something like this?

name	matcher	notes
size/webToSp	isFontSize()	if "px", replace "px" with "sp" if "rem", scale and append "sp"
size/webToDp	isNotFontSize()	if "px", replace "px" with "dp" if "rem", scale and append "dp"
size/webToPt	isSize()	if "px", replace "px" with "pt" if "rem", scale and append "pt"

The one thing I can't wrap my head around is from your original comment...

I think it would be good to have these more intelligent transforms for people that want to specify borders in px but everything else in rem.

Looking at existing transforms:

• *ToSp always uses isFontSize, so it is already specific to fonts.
• *ToDp always uses isNotFontSize, so, I think, it only applies to borders, spacing, etc.
• *ToPt aways uses isSize, so it applies to everything.

Android appears to already handle making a distinction between fonts and borders. Not entirely sure how the same can be done to ios, or the web for that matter?

Apologies, I have zero experience with andoid and ios development, which I think is causing me all kinds of confusion.

Sidenote, I dropped the "px" check.

[dbanksdesign]

Your table is exactly what I was imagining. Right now the existing transforms assume all sizes are either defined in rem or px, but could never be a combination of them. For example I could not define my borders in px and my font size and paddings in rem because the transforms assume all sizes are one or the other (using size/remToSp and size/remToDp or size/pxToSp and size/pxToDp). With the current transforms I could have fonts in rems, and paddings and borders in px, but I couldn't have font and padding in rem and borders in pixels. Hopefully that makes sense 🥴

[jbarreiros]

Hmm, I think I'm getting confused because I'm trying to apply the size/webTo* transforms to my scenario, when I think they might not actually apply.

In my scenario, the design system has everything in pixels. Our only target for now is the web (no mobile) and all values are to be converted to rems. Therefore, I want to use something like size/pxToRem to avoid manually performing the px-to-rem conversions.

If I'm understanding your comments, another scenario is a design system that defines mixed units. In that case, the expectation would be that any rem values would have been manually converted prior to being dropped into a property.json file? And, therefore, size/pxToRem would not be used at the same time as size/webTo*? Is that correct?

[jbarreiros]

I think what I'm ultimately trying to get at... is adding the size/webTo* transforms appropriate for this PR, or should they be the star of their own PR?

[dbanksdesign]

I think we should address it in a separate PR, I think this one is good enough as it is!

[chazzmoney]

LGTM!

[dbanksdesign]

LGTM!

[nhoizey]

Should this be added to https://github.com/amzn/style-dictionary/blob/3.0/docs/transforms.md ?

[dbanksdesign]

That file is generated by from JSDoc comments when we do a version bump. It should get updated in the next release candidate, which should be this week.

[nhoizey]

Ok, perfect! 👍

[jeff-young-deltatre]

this excellent transform doesn't seem to have been added to the list of the included transforms in the docs