is there way to convert measurement to rem?

[toy-crane]

  "repository": "@onthelook/design-system",
  "head": "specify",
  "base": "main",
  "rules": [
    {
      "name": "Design Tokens / Text Styles",
      "path": "textStyles.json",
      "filter": {
        "types": ["textStyle", "measurement"]
      },
      "parsers": [
        {
          "name": "px-to-rem",
          "options": {
            "keys": ["fontSize", "lineHeight", "measurement"]
          }
        }
      ]
    }
]

My config file is this.

{
    "id": "96d7a902-4f16-4a3d-823f-c45e90e89cc6",
    "createdAt": "2023-05-12T05:15:40.148Z",
    "updatedAt": "2023-05-12T05:15:40.148Z",
    "name": "base-space-13",
    "value": {
      "unit": "px",
      "measure": 120
    },
    "meta": {
      "source": "frames",
      "sourceFile": "https://www.figma.com/file/xjXyLPJ0qv378fbUL78C5c",
      "originFrameName": "Measurements"
    },
    "type": "measurement",
    "originId": "768:600",
    "description": null,
    "sourceId": "c2c792f4-ca9b-43db-80b3-eea49c90996b",
    "repositoryId": "d354e776-b824-4922-8f15-b7e4cbd2bb86"
  }

maybe origin measurement values is different with fontSize.
so "px-to-rem" doesn`t work

is there any way to apply px-to-rem parser?

[ChucKN0risK]

Hi @toy-crane 👋

Thanks for your patience.

Yes you can convert your text styles and your measurement tokens in rem with the px-to-rem parser.

Your config currently asks Specify to generate both your text styles and your measurement tokens in a textStyles.json file.

However, the px-to-rem parser can only convert one token type at a time.

Here's your updated configuration:

{
  "repository": "@onthelook/design-system",
  "head": "specify",
  "base": "main",
  "rules": [
    {
      "name": "Design Tokens / Text Styles",
      "path": "textStyles.json",
      "filter": {
        "types": [
          "textStyle"
        ]
      },
      "parsers": [
        {
          "name": "px-to-rem",
          "options": {
            "keys": ["fontSize", "lineHeight"]
          }
        }
      ]
    },
    {
      "name": "Design Tokens / Measurements",
      "path": "measurements.json",
      "filter": {
        "types": [
          "measurement"
        ]
      },
      "parsers": [
        {
          "name": "px-to-rem",
          "options": {
            "keys": ["value"]
          }
        }
      ]
    }
  ]
}

This config file generates 2 files: textStyles.json and measurements.json:

• Your text styles now have their fontSize and their lineHeight set in rem.
• Your measurement are now set in rem

Please let me know if things are working well on your side ;)