How to create CSS keyframe rule in Dart

Question

I need to create @keyframe rules dynamically in Dart and add them to document stylesheet. Here is an example in JS of what I'm trying to do:

var styleSheet = document.styleSheets[0];
var rule = '@-webkit-keyframes { ... }';
styleSheet.insertRule(rule, 0);

It raises two questions:

1. How do i create @keyframe rule in Dart? There is a CSSKeyframesRule in API docs, but latest Dart editor says there is no such type and Dartium throws an exception when i try to use it (was it deprecated?). I suppose it's not just a string like in JS, as Dart should take care of vendor prefixes?

2. If I create a rule, how can I insert it into stylesheet. StyleSheet class doesn't seem to have any method like insertRule. I could of course just crete style node and set its innerHTML, but I don't feel like creating separate node for every keyframe rule.

Thanks in advance.

Answer 1

The following code seems to work.

void main() {
  final styleSheet = document.styleSheets[0] as CssStyleSheet;
  final rule = '@-webkit-keyframes mymove { from {top:0px;} to {top:200px;} }';
  styleSheet.insertRule(rule, 0);
}