Возможно ли используя style-dictionary создать переменную для @keyframe?

Question

[qwerty123321123]

Добрый день! Есть JSON приведенный ниже, необходимо собрать переменную с помощью style-dictionary которую можно будет применять в animation без создания @keyframe

{
  "animation": {
      "keyframe": { "value": "@keyframes test { 0% { background-position: 0 } 100% { background-position: 100px } }" }
  }
}

Вопрос следующий, возможно ли вообще такое?)

Answer 1

[Михаил Р.]

Пример styleDictionary конфигурации, которая определяет animationKeyframe переменную на основе Вашего JSON-объекта:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "build/",
      "files": [
        {
          "destination": "animation.css",
          "format": "css/variables",
          "filter": {
            "type": "animation",
            "property": "keyframe"
          },
          "options": {
            "outputReferences": true
          }
        }
      ]
    }
  },
  "properties": {
    "animation": {
      "keyframe": {
        "type": "animation",
        "category": "asset",
        "value": "@keyframes test { 0% { background-position: 0 } 100% { background-position: 100px } }"
      }
    }
  },
  "types": {
    "animation": {
      "type": "object",
      "properties": {
        "keyframe": {
          "type": "string",
          "transform": {
            "type": "name",
            "value": "animationKeyframe"
          }
        }
      }
    }
  }
}

out:

.my-animation {
  animation-name: animationKeyframe;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}