diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js index 469decfe5..36eadfa0e 100644 --- a/src/canvas/model/Frame.js +++ b/src/canvas/model/Frame.js @@ -27,8 +27,9 @@ export default Model.extend({ const domc = em.get('DomComponents'); const conf = domc.getConfig(); const allRules = em.get('CssComposer').getAll(); + const idMap = {}; this.em = em; - const modOpts = { em, config: conf, frame: this }; + const modOpts = { em, config: conf, frame: this, idMap }; if (!isComponent(component)) { const wrp = isObject(component) ? component : { components: component }; @@ -40,6 +41,20 @@ export default Model.extend({ if (!styles) { this.set('styles', allRules); } else if (!isObject(styles)) { + // Avoid losing styles on remapped components + const idMapKeys = Object.keys(idMap); + if (idMapKeys.length && Array.isArray(styles)) { + styles.forEach(style => { + const sel = style.selectors; + if (sel && sel.length == 1) { + const sSel = sel[0]; + const idSel = sSel.name && sSel.type === 2 && sSel; + if (idSel && idMap[idSel.name]) { + idSel.name = idMap[idSel.name]; + } + } + }); + } allRules.add(styles); this.set('styles', allRules); } diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 110e982a9..6cf4a09d7 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -1791,12 +1791,14 @@ const Component = Backbone.Model.extend(Styleable).extend( */ createId(model, opts = {}) { const list = Component.getList(model); + const { idMap = {} } = opts; let { id } = model.get('attributes'); let nextId; if (id) { nextId = Component.getIncrementId(id, list, opts); model.setId(nextId); + if (id !== nextId) idMap[id] = nextId; } else { nextId = Component.getNewId(list); }