return diffs.map(diff => {
   switch(diff.type) {
     case CSS_INSERT_RULE:
     case INSERT_CHILD_NODE: {
       const { type, target, index, child } = diff as InsertChildMutation<any, any>;
       let unzippedChild = uncompressRootNode(child);
       if (idSeed) {
         unzippedChild = setVMObjectIds(unzippedChild, idSeed, refCount);
         refCount = getRefCount(unzippedChild, idSeed);
       }
       return createInsertChildMutation(type, target, unzippedChild, index)
     }
     case ATTACH_SHADOW: {
       const { type, target, newValue } = diff as SetValueMutation<any>;
       let unzippedChild = uncompressRootNode(newValue);
       if (idSeed) {
         unzippedChild = setVMObjectIds(unzippedChild, idSeed, refCount);
         refCount = getRefCount(unzippedChild, idSeed);
       }
       return createSetValueMutation(type, target, unzippedChild);
     }
     default: {
       return diff;
     }
   }
 });

const diffCSSGroupingRuleChildren = (oldRule: SlimCSSGroupingRule, newRule: SlimCSSGroupingRule, path: any[]) => {
  const diffs: Mutation<any[]>[] = [];

  eachArrayValueMutation(
    diffArray(oldRule.rules, newRule.rules, compareCSSRules),
    {
      insert({ index, value }) {
        diffs.push(createInsertChildMutation(CSS_INSERT_RULE, path, compressRootNode(value), index));
      },
      delete({ index }) {
        diffs.push(createRemoveChildMutation(CSS_DELETE_RULE, path, null, index));
      },
      update({ newValue, originalOldIndex, index, patchedOldIndex }) {
        if (index !== patchedOldIndex) {
          diffs.push(createMoveChildMutation(CSS_MOVE_RULE, path, null, index, patchedOldIndex));
        }
        diffs.push(
          ...diffCSSRule(
            oldRule.rules[originalOldIndex],
            newValue,
            [...path, index]
          )
        );
      }
    }
  );

  return diffs;
};

function* handleNewStyleRule() {
  while(1) {
    const { artboardId, elementScopeId }: CSSAddStyleRuleOptionClicked = yield take(CSS_ADD_STYLE_RULE_CLICKED);
    const state: ApplicationState = yield select();
    const workspace = getSelectedWorkspace(state);
    const artboard = getArtboardById(artboardId, workspace);
    const element = getWorkspaceVMObject(elementScopeId, workspace) as SlimElement;
    const host = getSlimNodeHost(element, artboard.document);

    for (const artboard of workspace.artboards) {
      const mutations: Mutation<any>[] = [];
      let scopedStyle = findScopedStyle(host.tagName, artboard.document);

      if (!scopedStyle) {
        mutations.push(createInsertChildMutation(INSERT_CHILD_NODE, [], compressRootNode({
          tagName: "style",
          type: SlimVMObjectType.ELEMENT,
          attributes: [{ name: "scope", value: host.tagName }],
          childNodes: [],
          sheet: {
            type: SlimVMObjectType.STYLE_SHEET,
            rules: [
              {
                type: SlimVMObjectType.STYLE_RULE,
                selectorText: element.tagName,
                style: []
              } as SlimCSSStyleRule
            ]
          } 
        } as SlimStyleElement)));
      } else {
        const path = getVMObjectPath(scopedStyle.sheet, getArtboardDocumentBody(artboard));

        mutations.push(createInsertChildMutation(CSS_INSERT_RULE, path, compressRootNode({
          type: SlimVMObjectType.STYLE_RULE,
          selectorText: element.tagName,
          style: []
        } as SlimCSSStyleRule), 0));
      }

      yield call(mutateArtboard, artboard, prepDiff(artboard.document, mutations), true);
    }

  }
}

export const createParentNodeInsertChildMutation = (parent: BasicParentNode, child: BasicNode, index: number, cloneChild: boolean = true) => {
  return createInsertChildMutation(INSERT_CHILD_NODE_EDIT, parent, child, index, cloneChild);
};

export const styleSheetInsertRule = (styleSheet: CSSStyleSheet, rule: CSSRule, newIndex: number) => createInsertChildMutation(STYLE_SHEET_MOVE_RULE, styleSheet, rule, newIndex);