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);
}
}
}
function* getComponentJSONPreview(req: express.Request, res: express.Response, next) {
const state: ApplicationState = yield select();
const { componentId, previewName } = req.params;
const document = getLatestPreviewDocument(componentId, previewName, state);
if (!document) {
return next();
}
return res.send(compressRootNode(document));
}