| 28 | } |
| 29 | }, |
| 30 | OnceExit(root) { |
| 31 | if (Object.keys(keyframes).length) { |
| 32 | // If keyframes are found in this <style>, find and rewrite animation names |
| 33 | // in declarations. |
| 34 | // Caveat: this only works for keyframes and animation rules in the same |
| 35 | // <style> element. |
| 36 | // individual animation-name declaration |
| 37 | root.walkDecls(decl => { |
| 38 | if (animationNameRE.test(decl.prop)) { |
| 39 | decl.value = decl.value |
| 40 | .split(',') |
| 41 | .map(v => keyframes[v.trim()] || v.trim()) |
| 42 | .join(',') |
| 43 | } |
| 44 | // shorthand |
| 45 | if (animationRE.test(decl.prop)) { |
| 46 | decl.value = decl.value |
| 47 | .split(',') |
| 48 | .map(v => { |
| 49 | const vals = v.trim().split(/\s+/) |
| 50 | const i = vals.findIndex(val => keyframes[val]) |
| 51 | if (i !== -1) { |
| 52 | vals.splice(i, 1, keyframes[vals[i]]) |
| 53 | return vals.join(' ') |
| 54 | } else { |
| 55 | return v |
| 56 | } |
| 57 | }) |
| 58 | .join(',') |
| 59 | } |
| 60 | }) |
| 61 | } |
| 62 | }, |
| 63 | } |
| 64 | } |
| 65 | |