support multiple value for one style in UIDLElementNode?

[MurakamiKennzo]

Hi, thanks for the project, I'm happy to using it in my project, but currently, I find some problems.

I wanna generate css varibles, but there are some limits for me.

like this:

{
  "name": "Token Simple",
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "style": {
        "margin": {
          "type": "dynamic",
          "content": {
            "referenceType": "token",
            "id": "space-2"
          }
        }
      },
      "children": []
    }
  }
}

the uidl will generate a style like this:

.container {
  margin: var(--space-2);
}

It's great!😀

But, I wanna a style like this:

.container {
  margin: var(--space-2) var(--space-4);
}

what should I do? currently it may not support.

help wanted, Thanks!🥰

[JayaKrishnaNamburu]

Hey, that's a very interesting requirement. I think we can work our way around this with static nodes. But, with tokens maybe we should change the referenceType to array to make styles refer to multiple dynamic values. Will look into this. Is this blocking any of your requirements currently ?

[MurakamiKennzo]

No, It's not urgent. I just find a problem when i using css shorthand. Currently I split it and solved.

Maybe like this:

{
  "name": "Token Simple",
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "style": {
        "margin": {
          "type": "list",
          "content": [
            {
              "type": "dynamic",
              "content": {
                "referenceType": "token",
                "id": "space-2"
              }
            },
            {
              "type": "dynamic",
              "content": {
                "referenceType": "token",
                "id": "space-4"
              }
            },
            // {
            //   "type": "static",
            //   "content": 16
            // }
          ]
        }
      },
      "children": []
    }
  }
}

Hopes your solution here.

[JayaKrishnaNamburu]

cool, i will look into this in the coming days then. It should definitely doable 👍