cubic-bezier and seconds resolves to NaNs and 0.00s in .css and .scss

[siiron]

In my time.tokens.json I have the following defined:

{
  "time": {
    "curve": {
      "in": {
        "value": "cubic-bezier(0, 0, 0.2, 1)"
      },
      "out": {
        "value": "cubic-bezier(0.4, 0, 0.2, 1)"
      },
      "move": {
        "value": "cubic-bezier(0.4, 0, 1, 1)"
      }
    },
    "duration": {
      "quickly": {
        "value": "0.1s"
      },
      "promptly": {
        "value": "0.2s"
      },
      "easily": {
        "value": "0.3s"
      },
      "calmly": {
        "value": "0.36"
      },
      "slowly": {
        "value": "1.2s"
      }
    }
  }
}

I have the following config.json:

{
  "source": [
    "**/*.tokens.json"
  ],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "prefix": "sd",
      "buildPath": "build/css/",
      "files": [
        {
          "destination": "_variables.css",
          "format": "css/variables"
        }
      ]
    },
    "scssMapDeep": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "options": {
        "outputReferences": true,
        "themeable": true
      },
      "files": [
        {
          "destination": "_map.scss",
          "format": "scss/map-deep"
        }
      ]
    },
    "js": {
      "transformGroup": "js",
      "buildPath": "build/js/",
      "files": [
        {
          "destination": "variables.js",
          "format": "javascript/es6"
        }
      ]
    }
  }
}

Nothing special really. But when transforming to .css and .scss all values containing a cubic-bezier resolves to "NaNs," and values containing seconds resolves to "0.00s". Still, they transform correctly to .js.

Here is a playground showing this behaviour:

https://www.style-dictionary-play.dev/#project=rVNNT4NAEP0rZE/aIFg1HjybeDIxXq0xWzroIrDrzm79aPjv7rCFQmspRkkDw8yb13mP2RVLZJmK5yhDWbIrtpqVQTBjKK1OYMauggdKUGoyiSeRka9QYg2eMao8hr5B5dykUhdIPaumJ8HuO2WM5iUS8EZLq6i4RoUbjNKQig9fw0WvNLciX9xx8+Kr9Wvs+uMeKhU5YGd4ulabkCALQCNKbgQJIaqnJdeCz11j1J9nTelG5qadN27R3gZ/VU346IMqbIxA13PL1TWAGmEIbjvyo2zc0S0V6elbXuetUdbcQwoaysRbY7SFsAsyL1AASWqqTbH6q7MFVxEeMrVW45Ani9qjMaZmY5YrG+Fk9g/7s1mfbFhoxpccEy2UiQEvB5XSw90qFjIjCojp1j2C9XnV/gBSzduh29Nn9bKfo6wot1JBPX1uYb3ddi6Skzl8CdBHp2FAv+gsDKbHblbdWYoOp1uw35BGF+NoC7kz/xje6Q5rE27o3Re0uv18PYPerEhe88/hPz6Nprh/cKVlocxhjrMBDuAoDjOcDzAkPC9GMFzuZ8Bcvh9imG6raM32Qf2oWPUN

[siiron]

Update: If I change "time" to "timing" on the top level in time.tokens.json it transforms correctly in css and scss as well 🤔. Strange:

:root {
  --sd-time-curve-in: NaNs; /* fails */
  --sd-time-curve-out: NaNs; /* fails */
  --sd-time-curve-move: NaNs; /* fails */
  --sd-time-duration-quickly: 0.00s; /* fails */
  --sd-time-duration-promptly: 0.00s; /* fails */
  --sd-time-duration-easily: 0.00s; /* fails */
  --sd-time-duration-calmly: 0.00s; /* fails */
  --sd-time-duration-slowly: 0.00s; /* fails */
  --sd-timing-curve-in: cubic-bezier(0, 0, 0.2, 1);
  --sd-timing-curve-out: cubic-bezier(0.4, 0, 0.2, 1);
  --sd-timing-curve-move: cubic-bezier(0.4, 0, 1, 1);
  --sd-timing-duration-quickly: 0.1s;
  --sd-timing-duration-promptly: 0.2s;
  --sd-timing-duration-easily: 0.3s;
  --sd-timing-duration-calmly: 0.36;
  --sd-timing-duration-slowly: 1.2s;
}

https://www.style-dictionary-play.dev/#project=7VNNb6MwEP0ryKfdiELTXfXQ80p7Wmm1101VOWRoTcF2PXb6EfHf68GBQNISqvbQQ1EEw3y8zHs8b1imZC6ukwKVZBdss5BRtGConMlgwS6i/5Sg1GyWzhKrbkFi07xgVLmMw4Auuc2VqZBmNu1Mhv13yljDJVLjb6OcpuK2K971aAO5eAg1XA1KSyfK1V9ub0K1eU39fDroykUJ2Fuers0upJYVoBWSW0FECOpqzY3gSz+YDPfZQvqVue32TbvuIEO46ja8DEEdt0Kgn/nD9S8APUEQ3FfkRdp4wFtp4jOUvMk7q539BzkYkFmQxhoHcb/J3kAFRKmttsX6vcpWXCd4TNSGje88WTUaTRG1mGKuYoKSxQf4Z2efYpxowdccMyO0TQHPR5nSw99qFjMrKkjp1j+CzXk14QBSLchhutPnzHqYo6yQe6mo2b50sHW3W4rsZAlPAsy30ziiX3IWR/PvflfTM0UP0xvsLaDJz2mwlTrYfwru/AC1DXfw/gs6032+gUB3TmS35eP4H58mc3x9cW1Upe1xjLMRDOAojiP8GEHIeFlNQDh/HQFLdX8MYb7PohM7BC1iY1Ehr79M+mXSz2dSetSsfgY=