Merge branch 'dev' into layers

docs/getting-started.md

@@ -703,6 +703,19 @@ To complete our builder let's customize its color palette and to make it more vi
 }
 ```
 
+There is also a bunch of [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that you can use to customize the styles of the editor.
+
+For example, you could achieve the same result as above by doing this:
+```css
+:root {
+  --gjs-primary-color: #78366a;
+  --gjs-secondary-color: rgba(255, 255, 255, 0.7);
+  --gjs-tertiary-color: #ec5896;
+  --gjs-quaternary-color: #ec5896;
+}
+```
+
+
 And here is our final result:
 
 <Demo id="final-result">

src/canvas/model/Frame.ts

@@ -1,12 +1,13 @@
-import { forEach, isEmpty, isNumber, isString, result } from 'underscore';
+import { forEach, isEmpty, isNumber, isString, keys, result } from 'underscore';
 import CanvasModule from '..';
 import { ModuleModel } from '../../abstract';
-import { BoxRect } from '../../common';
+import { BoxRect, PrevToNewIdMap } from '../../common';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import Page from '../../pages/model/Page';
 import { createId, isComponent, isObject } from '../../utils/mixins';
 import FrameView from '../view/FrameView';
 import Frames from './Frames';
+import { CssRuleJSON } from '../../css_composer/model/CssRule';
 
 const keyAutoW = '__aw';
 const keyAutoH = '__ah';
@@ -63,7 +64,7 @@ export default class Frame extends ModuleModel<CanvasModule> {
     const domc = em.Components;
     const conf = domc.getConfig();
     const allRules = em.Css.getAll();
-    const idMap: any = {};
+    const idMap: PrevToNewIdMap = {};
     const modOpts = { em, config: conf, frame: this, idMap };
 
     if (!isComponent(component)) {
@@ -76,27 +77,15 @@ export default class Frame extends ModuleModel<CanvasModule> {
     if (!styles) {
       this.set('styles', allRules);
     } else if (!isObject(styles)) {
+      let newStyles = styles as string | CssRuleJSON[];
+
       // 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];
-            } else if (isString(sSel) && sSel[0] === '#') {
-              const prevId = sSel.substring(1);
-              if (prevId && idMap[prevId]) {
-                sel[0] = `#${idMap[prevId]}`;
-              }
-            }
-          }
-        });
+      if (keys(idMap).length) {
+        newStyles = isString(newStyles) ? em.Parser.parseCss(newStyles) : newStyles;
+        em.Css.checkId(newStyles, { idMap });
       }
 
-      allRules.add(styles);
+      allRules.add(newStyles);
       this.set('styles', allRules);
     }
 

src/commands/view/SelectComponent.ts

@@ -89,11 +89,7 @@ export default {
     methods[method](listenToEl, 'scroll', this.onContainerChange);
     em[method]('component:toggled component:update undo redo', this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
-    em[method](
-      'component:resize styleable:change component:input', // component:styleUpdate
-      this.updateGlobalPos,
-      this
-    );
+    em[method]('component:resize styleable:change component:input', this.updateGlobalPos, this);
     em[method]('component:update:toolbar', this._upToolbar, this);
     em[method]('change:canvasOffset', this.updateAttached, this);
     em[method]('frame:updated', this.onFrameUpdated, this);

src/common/index.ts

@@ -79,3 +79,5 @@ export const DEFAULT_BOXRECT: BoxRect = {
   width: 0,
   height: 0,
 };
+
+export type PrevToNewIdMap = Record<string, string>;

src/css_composer/index.ts

@@ -38,7 +38,7 @@ import CssRulesView from './view/CssRulesView';
 import { ItemManagerModule } from '../abstract/Module';
 import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
-import { ObjectAny } from '../common';
+import { ObjectAny, PrevToNewIdMap } from '../common';
 
 /** @private */
 interface RuleOptions {
@@ -518,6 +518,41 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     return this.rulesView.render().el;
   }
 
+  checkId(rule: CssRuleJSON | CssRuleJSON[], opts: { idMap?: PrevToNewIdMap } = {}) {
+    const { idMap = {} } = opts;
+    const changed: CssRuleJSON[] = [];
+
+    if (!Object.keys(idMap).length) return changed;
+
+    const rules = Array.isArray(rule) ? rule : [rule];
+    rules.forEach(rule => {
+      const sel = rule.selectors;
+
+      if (sel && sel.length == 1) {
+        const sSel = sel[0];
+
+        if (isString(sSel)) {
+          if (sSel[0] === '#') {
+            const prevId = sSel.substring(1);
+            const newId = idMap[prevId];
+            if (prevId && newId) {
+              sel[0] = `#${newId}`;
+              changed.push(rule);
+            }
+          }
+        } else if (sSel.name && sSel.type === Selector.TYPE_ID) {
+          const newId = idMap[sSel.name];
+          if (newId) {
+            sSel.name = newId;
+            changed.push(rule);
+          }
+        }
+      }
+    });
+
+    return changed;
+  }
+
   destroy() {
     this.rules.reset();
     this.rules.stopListening();

src/dom_components/model/Component.ts

@@ -32,7 +32,7 @@ import {
 import Frame from '../../canvas/model/Frame';
 import { DomComponentsConfig } from '../config/config';
 import ComponentView from '../view/ComponentView';
-import { AddOptions, ExtractMethods, ObjectAny, ObjectStrings, SetOptions } from '../../common';
+import { AddOptions, ExtractMethods, ObjectAny, PrevToNewIdMap, SetOptions } from '../../common';
 import CssRule, { CssRuleJSON } from '../../css_composer/model/CssRule';
 import Trait, { TraitProperties } from '../../trait_manager/model/Trait';
 import { ToolbarButtonProps } from './ToolbarButton';
@@ -318,6 +318,18 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
   }
 
+  __onStyleChange(newStyles: StyleProps) {
+    const { em } = this;
+    if (!em) return;
+
+    const event = 'component:styleUpdate';
+    const styleKeys = keys(newStyles);
+    const pros = { style: newStyles };
+
+    em.trigger(event, this, pros);
+    styleKeys.forEach(key => em.trigger(`${event}:${key}`, this, pros));
+  }
+
   __changesUp(opts: any) {
     const { em, frame } = this;
     [frame, em].forEach(md => md && md.changesUp(opts));
@@ -619,6 +631,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
       prop = super.setStyle.apply(this, arguments as any);
     }
 
+    if (!opt.temporary) {
+      this.__onStyleChange(opts.addStyle || prop);
+    }
+
     return prop;
   }
 
@@ -659,8 +675,14 @@ export default class Component extends StyleableModel<ComponentProperties> {
         addId = !!sm?.get(id, sm.Selector.TYPE_ID);
       }
 
-      // Symbols should always have an id
-      if (this.__getSymbol() || this.__getSymbols()) {
+      if (
+        // Symbols should always have an id
+        this.__getSymbol() ||
+        this.__getSymbols() ||
+        // Components with script should always have an id
+        this.get('script-export') ||
+        this.get('script')
+      ) {
         addId = true;
       }
 
@@ -2080,10 +2102,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
     components: ComponentDefinitionDefined | ComponentDefinitionDefined[],
     styles: CssRuleJSON[] = [],
     list: ObjectAny = {},
-    opts: { keepIds?: string[] } = {}
+    opts: { keepIds?: string[]; idMap?: PrevToNewIdMap } = {}
   ) {
     const comps = isArray(components) ? components : [components];
-    const { keepIds = [] } = opts;
+    const { keepIds = [], idMap = {} } = opts;
     comps.forEach(comp => {
       comp.attributes;
       const { attributes = {}, components } = comp;
@@ -2092,6 +2114,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
       // Check if we have collisions with current components
       if (id && list[id] && keepIds.indexOf(id) < 0) {
         const newId = Component.getIncrementId(id, list);
+        idMap[id] = newId;
         attributes.id = newId;
         // Update passed styles
         isArray(styles) &&

src/domain_abstract/model/StyleableModel.ts

@@ -8,6 +8,7 @@ export type StyleProps = Record<string, string | string[]>;
 
 export type UpdateStyleOptions = ObjectAny & {
   partial?: boolean;
+  addStyle?: StyleProps;
 };
 
 const parserHtml = ParserHtml();
@@ -109,6 +110,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
       opts = value || {};
     }
 
+    opts.addStyle = prop;
     prop = this.extendStyle(prop);
     this.setStyle(prop, opts);
   }

src/pages/index.ts

@@ -182,7 +182,7 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
       return page;
     };
     !opts.silent && em.trigger(evPageAddBefore, props, add, opts);
-    return !opts.abort && add();
+    return !opts.abort ? add() : undefined;
   }
 
   /**

src/selector_manager/view/ClassTagsView.ts

@@ -88,7 +88,7 @@ export default class ClassTagsView extends View<Selector> {
     this.listenTo(em, toList, this.componentChanged);
     this.listenTo(em, 'styleManager:update', this.componentChanged);
     this.listenTo(em, toListCls, this.__handleStateChange);
-    this.listenTo(em, 'styleable:change change:device', this.checkSync); // component:styleUpdate
+    this.listenTo(em, 'styleable:change change:device', this.checkSync);
     this.listenTo(coll, 'add', this.addNew);
     this.listenTo(coll, 'reset', this.renderClasses);
     this.listenTo(coll, 'remove', this.tagRemoved);

src/style_manager/index.ts

@@ -725,21 +725,20 @@ export default class StyleManager extends ItemManagerModule<
 
   __emitCmpStyleUpdate(style: StyleProps, opts: { components?: Component | Component[] } = {}) {
     const { em } = this;
-    const event = 'component:styleUpdate';
 
     // Ignore partial updates
     if (!style.__p) {
+      const allSel = this.getSelectedAll();
       const cmp = opts.components || em.getSelectedAll();
       const cmps = Array.isArray(cmp) ? cmp : [cmp];
-      const newStyle = { ...style };
-      delete newStyle.__p;
-      const styleKeys = Object.keys(newStyle);
-      const optsToPass = { style: newStyle };
-
-      cmps.forEach(component => {
-        em.trigger(event, component, optsToPass);
-        styleKeys.forEach(key => em.trigger(`${event}:${key}`, component, optsToPass));
-      });
+      const newStyles = { ...style };
+      delete newStyles.__p;
+
+      cmps.forEach(
+        cmp =>
+          // if cmp is part of selected, the event should already been triggered
+          !allSel.includes(cmp as any) && cmp.__onStyleChange(newStyles)
+      );
     }
   }
 

src/styles/scss/_gjs_assets.scss

@@ -48,7 +48,7 @@
   position: relative;
   height: 70px;
   width: 30%;
-  background-color: $mainColor;
+  background-color: var(--gjs-main-color);
   border-radius: 2px;
   float: left;
   overflow: hidden;
@@ -102,7 +102,7 @@
 }
 
 .#{$am-prefix}asset {
-  border-bottom: 1px solid darken($mainDkColor, 3%);
+  border-bottom: 1px solid darken-color(var(--gjs-main-dark-color), 3%);
   padding: 5px;
   cursor: pointer;
   position: relative;
@@ -115,11 +115,11 @@
 }
 
 .#{$am-prefix}highlight {
-  background-color: $mainLhColor;
+  background-color: var(--gjs-main-light-color);
 }
 
 .#{$am-prefix}assets-cont {
-  background-color: $mainDklColor;
+  background-color: var(--gjs-secondary-dark-color);
   border-radius: 3px;
   box-sizing: border-box;
   padding: 10px;

src/styles/scss/_gjs_canvas.scss

@@ -1,5 +1,4 @@
 $frameAnimation: 0.35s ease !default;
-$canvasTop: 40px !default;
 $guide_pad: 5px !default;
 
 .#{$prefix} {
@@ -193,14 +192,14 @@ $guide_pad: 5px !default;
 
 .#{$cv-prefix}canvas {
   box-sizing: border-box;
-  width: (100% - $leftWidth);
-  height: calc(100% - #{$canvasTop});
+  width: calc(100% - var(--gjs-left-width));
+  height: calc(100% - var(--gjs-canvas-top));
   bottom: 0;
   overflow: hidden;
   z-index: 1;
   position: absolute;
   left: 0;
-  top: $canvasTop;
+  top: var(--gjs-canvas-top);
 
   &-bg {
     background-color: rgba(0, 0, 0, 0.15);
@@ -247,7 +246,7 @@ $guide_pad: 5px !default;
   .#{$app-prefix}highlighter,
   .#{$app-prefix}highlighter-sel {
     position: absolute;
-    outline: 1px solid $colorBlue;
+    outline: 1px solid var(--gjs-color-blue);
     outline-offset: -1px;
     pointer-events: none;
     width: 100%;
@@ -255,11 +254,11 @@ $guide_pad: 5px !default;
   }
 
   .#{$app-prefix}highlighter-warning {
-    outline: 3px solid $colorYell;
+    outline: 3px solid var(--gjs-color-yellow);
   }
 
   .#{$app-prefix}highlighter-sel {
-    outline: 2px solid $colorBlue;
+    outline: 2px solid var(--gjs-color-blue);
     outline-offset: -2px;
   }
 
@@ -304,7 +303,7 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}toolbar {
   position: absolute;
-  background-color: $colorBlue;
+  background-color: var(--gjs-color-blue);
   white-space: nowrap;
   color: white;
   z-index: 10;
@@ -335,10 +334,6 @@ $guide_pad: 5px !default;
   z-index: 9;
 }
 
-.#{$app-prefix}margin-v {
-
-}
-
 .#{$app-prefix}margin-v-el,
 .#{$app-prefix}padding-v-el,
 .#{$app-prefix}fixedmargin-v-el,
@@ -364,11 +359,11 @@ $guide_pad: 5px !default;
 .#{$app-prefix}resizer-h {
   pointer-events: all;
   position: absolute;
-  border: 3px solid $colorBlue;
+  border: 3px solid var(--gjs-color-blue);
   width: 10px;
   height: 10px;
   background-color: #fff;
-  margin: $hndlMargin;
+  margin: var(--gjs-handle-margin);
 }
 
 .#{$app-prefix}resizer-h-tl {
@@ -385,7 +380,7 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}resizer-h-tc {
   top: 0;
-  margin: $hndlMargin auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;
@@ -393,14 +388,14 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}resizer-h-cl {
   left: 0;
-  margin: auto $hndlMargin;
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   cursor: ew-resize;
 }
 
 .#{$app-prefix}resizer-h-cr {
-  margin: auto $hndlMargin;
+  margin: auto var(--gjs-handle-margin);
   top: 0;
   bottom: 0;
   right: 0;
@@ -415,7 +410,7 @@ $guide_pad: 5px !default;
 
 .#{$app-prefix}resizer-h-bc {
   bottom: 0;
-  margin: $hndlMargin auto;
+  margin: var(--gjs-handle-margin) auto;
   left: 0;
   right: 0;
   cursor: ns-resize;

src/styles/scss/_gjs_inputs.scss

@@ -3,14 +3,14 @@
 @mixin rangeThumbStyle() {
   height: 10px;
   width: 10px;
-  border: 1px solid $mainDkColor;
+  border: 1px solid var(--gjs-main-dark-color);
   border-radius: 100%;
-  background-color: $fontColor;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
 }
 
 @mixin rangeTrackStyle() {
-  background-color: $mainDkColor;
+  background-color: var(--gjs-main-dark-color);
   border-radius: 1px;
   margin-top: 3px;
   height: 3px;
@@ -37,7 +37,7 @@
   &select:-moz-focusring,
   &select select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 $mainLhlColor;
+    text-shadow: 0 0 0 var(--gjs-secondary-light-color);
   }
 
   &input:focus,
@@ -60,7 +60,7 @@
       box-sizing: border-box;
       width: 100%;
       position: relative;
-      padding: $inputPadding;
+      padding: var(--gjs-input-padding);
       z-index: 1;
 
       &:focus {
@@ -96,12 +96,12 @@
 .#{$sm-prefix}select option,
 .#{$app-prefix}fields option,
 .#{$sm-prefix}unit option {
-  background-color: $mainColor;
-  color: $fontColor;
+  background-color: var(--gjs-main-color);
+  color: var(--gjs-font-color);
 }
 
 .#{$app-prefix}field {
-  background-color: $mainDkColor;
+  background-color: var(--gjs-main-dark-color);
   border: none;
   box-shadow: none;
   border-radius: 2px;
@@ -126,8 +126,8 @@
     bottom: 0;
     top: 0;
     margin: auto;
-    right: $inputPadding;
-    border-top: 4px solid $arrowColor;
+    right: var(--gjs-input-padding);
+    border-top: 4px solid var(--gjs-arrow-color);
     position: absolute;
     height: 0;
     width: 0;
@@ -144,7 +144,7 @@
     width: 9px;
     z-index: 10;
     bottom: 0;
-    right: $inputPadding - 2px;
+    right: calc(var(--gjs-input-padding) - 2px);
     top: 0;
   }
 
@@ -156,20 +156,20 @@
 
 .#{$app-prefix}field-color {
   input {
-    padding-right: $colorpSize;
+    padding-right: var(--gjs-color-input-padding);
     box-sizing: border-box;
   }
 }
 
 .#{$app-prefix}field-colorp {
-  border-left: 1px solid $mainDkColor;
+  border-left: 1px solid var(--gjs-main-dark-color);
   box-sizing: border-box;
   height: 100%;
   padding: 2px;
   position: absolute;
   right: 0;
   top: 0;
-  width: $colorpSize;
+  width: var(--gjs-color-input-padding);
   z-index: 10;
 
   .#{$app-prefix}checker-bg {
@@ -188,11 +188,11 @@
 }
 
 .#{$app-prefix}field-color-picker {
-  background-color: $fontColor;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 100%;
   width: 100%;
-  box-shadow: 0 0 1px $mainDkColor;
+  box-shadow: 0 0 1px var(--gjs-main-dark-color);
   border-radius: 1px;
   position: absolute;
   top: 0;
@@ -220,14 +220,14 @@
 .#{$app-prefix}radio-item {
   flex: 1 1 auto;
   text-align: center;
-  border-left: 1px solid $darkTextShadow;
+  border-left: 1px solid var(--gjs-dark-text-shadow);
 
   &:first-child {
     border: none;
   }
 
   &:hover {
-    background: $mainDkColor;
+    background: var(--gjs-main-dark-color);
   }
 
   input {
@@ -246,7 +246,7 @@
 .#{$app-prefix}radio-item-label {
   cursor: pointer;
   display: block;
-  padding: $inputPadding;
+  padding: var(--gjs-input-padding);
 }
 
 .#{$app-prefix}field-units {
@@ -262,7 +262,7 @@
   right: 10px;
   top: 3px;
   font-size: 10px;
-  color: $arrowColor;
+  color: var(--gjs-arrow-color);
   cursor: pointer;
 }
 
@@ -277,13 +277,13 @@
   width: 0;
   border-left: 3px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid $arrowColor;
+  border-top: 4px solid var(--gjs-arrow-color);
   bottom: 4px;
   cursor: pointer;
 }
 
 .#{$app-prefix}field-arrow-u {
-  border-bottom: 4px solid $arrowColor;
+  border-bottom: 4px solid var(--gjs-arrow-color);
   border-top: none;
   top: 4px;
 }
@@ -339,15 +339,15 @@
 .#{$app-prefix}btn {
   &-prim {
     color: inherit;
-    background-color: $mainLhColor;
+    background-color: var(--gjs-main-light-color);
     border-radius: 2px;
     padding: 3px 6px;
-    padding: $inputPadding;
+    padding: var(--gjs-input-padding);
     cursor: pointer;
     border: none;
 
     &:active {
-      background-color: $mainLhColor;
+      background-color: var(--gjs-main-light-color);
     }
   }
 
@@ -369,7 +369,7 @@
 .#{$app-prefix}add-trasp {
   background: none;
   border: none;
-  color: $fontColor;
+  color: var(--gjs-font-color);
   cursor: pointer;
   font-size: 1em;
   border-radius: 2px;

src/styles/scss/_gjs_layers.scss

@@ -2,7 +2,7 @@ $layerIconSize: 15px !default;
 
 .#{$nv-prefix} {
   &selected-parent {
-    border: 1px solid $colorYell;
+    border: 1px solid var(--gjs-color-yellow);
   }
 
   &opac50 {
@@ -14,7 +14,7 @@ $layerIconSize: 15px !default;
     text-align: left;
     position: relative;
     background-color: rgba(0, 0, 0, 0.1);
-    font-size: $fontSizeS;
+    font-size: var(--gjs-font-size);
     display: grid;
 
     &-item {
@@ -165,7 +165,7 @@ $layerIconSize: 15px !default;
       padding: 1px;
 
       &.#{$nv-prefix}insert {
-        background-color: $colorGreen;
+        background-color: var(--gjs-color-green);
       }
     }
   }

src/styles/scss/_gjs_modal.scss

@@ -1,6 +1,6 @@
 .#{$mdl-prefix} {
   &container {
-    font-family: $mainFont;
+    font-family: var(--gjs-main-font);
     overflow-y: auto;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.5);
@@ -48,7 +48,7 @@
 
   &header {
     position: relative;
-    border-bottom: 1px solid $mainDkColor;
+    border-bottom: 1px solid var(--gjs-main-dark-color);
     padding: 15px 15px 7px;
   }
 }

src/styles/scss/_gjs_panels.scss

@@ -16,30 +16,30 @@
   }
 
   &commands {
-    width: (100% - $leftWidth);
+    width: calc(100% - var(--gjs-left-width));
     left: 0;
     top: 0;
-    box-shadow: 0 0 5px $mainDkColor;
+    box-shadow: 0 0 5px var(--gjs-main-dark-color);
   }
 
   &options {
-    right: $leftWidth;
+    right: var(--gjs-left-width);
     top: 0;
   }
 
   &views {
-    border-bottom: 2px solid $mainDkColor;
+    border-bottom: 2px solid var(--gjs-main-dark-color);
     right: 0;
-    width: $leftWidth;
+    width: var(--gjs-left-width);
     z-index: 4;
 
     &-container {
       height: 100%;
       padding: 42px 0 0;
       right: 0;
-      width: $leftWidth;
+      width: var(--gjs-left-width);
       overflow: auto;
-      box-shadow: 0 0 5px $mainDkColor;
+      box-shadow: 0 0 5px var(--gjs-main-dark-color);
     }
   }
 

src/styles/scss/_gjs_rte.scss

@@ -7,7 +7,7 @@
   }
 
   &toolbar-ui {
-    border: 1px solid $mainDkColor;
+    border: 1px solid var(--gjs-main-dark-color);
     border-radius: 3px;
   }
 
@@ -21,7 +21,7 @@
     justify-content: center;
     padding: 5px;
     width: 25px;
-    border-right: 1px solid $mainDkColor;
+    border-right: 1px solid var(--gjs-main-dark-color);
     text-align: center;
     cursor: pointer;
     outline: none;
@@ -31,15 +31,15 @@
     }
 
     &:hover {
-      background-color: $mainLhColor;
+      background-color: var(--gjs-main-light-color);
     }
   }
 
   &active {
-    background-color: $mainLhColor;
+    background-color: var(--gjs-main-light-color);
   }
   &disabled {
-    color: $mainLhColor;
+    color: var(--gjs-main-light-color);
     cursor: not-allowed;
     &:hover {
       background-color: unset;

src/styles/scss/_gjs_selectors.scss

@@ -75,7 +75,7 @@
 }
 
 .#{$clm-prefix}tags {
-  font-size: $fontSizeS;
+  font-size: var(--gjs-font-size);
   padding: 10px 5px;
 
   ##{$clm-prefix}sel {
@@ -106,8 +106,8 @@
   ##{$clm-prefix}new {
     @extend  .#{$app-prefix}invis-invis;
 
-    color: $fontColor;
-    padding: $paddElClm;
+    color: var(--gjs-font-color);
+    padding: var(--gjs-padding-elem-classmanager);
     display: none;
   }
 

src/styles/scss/_gjs_style_manager.scss

@@ -46,7 +46,7 @@
   }
 
   &properties {
-    font-size: $fontSizeS;
+    font-size: var(--gjs-font-size);
     padding: 10px 5px;
     display: flex;
     flex-wrap: wrap;
@@ -109,7 +109,7 @@
 
   select:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 $mainLhlColor;
+    text-shadow: 0 0 0 var(--gjs-secondary-light-color);
   }
 
   input:focus,
@@ -122,7 +122,7 @@
     right: 10px;
     top: 3px;
     font-size: 10px;
-    color: $mainLhlColor;
+    color: var(--gjs-secondary-light-color);
     cursor: pointer;
   }
 
@@ -154,14 +154,14 @@
   }
 
   .#{$sm-prefix}u-arrow {
-    border-bottom: 4px solid $mainLhlColor;
+    border-bottom: 4px solid var(--gjs-secondary-light-color);
     top: 4px;
   }
 
   .#{$clm-prefix}d-s-arrow,
   .#{$sm-prefix}d-arrow,
   .#{$sm-prefix}d-s-arrow {
-    border-top: 4px solid $mainLhlColor;
+    border-top: 4px solid var(--gjs-secondary-light-color);
     bottom: 4px;
   }
 
@@ -175,10 +175,10 @@
   &.#{$sm-prefix}integer,
   &.#{$sm-prefix}list,
   &.#{$sm-prefix}select {
-    background-color: $mainDkColor;
+    background-color: var(--gjs-main-dark-color);
     border: 1px solid rgba(0, 0, 0, 0.1);
-    box-shadow: 1px 1px 0 $mainLhColor;
-    color: $mainLhlColor;
+    box-shadow: 1px 1px 0 var(--gjs-main-light-color);
+    color: var(--gjs-secondary-light-color);
     border-radius: 2px;
     box-sizing: border-box;
     padding: 0 5px;
@@ -201,7 +201,7 @@
   }
 
   &.#{$sm-prefix}composite {
-    background-color: $mainDklColor;
+    background-color: var(--gjs-secondary-dark-color);
     border: 1px solid rgba(0, 0, 0, 0.25);
   }
 
@@ -244,14 +244,14 @@
 
 .#{$sm-prefix}list .#{$sm-prefix}el {
   float: left;
-  border-left: 1px solid $mainDkColor;
+  border-left: 1px solid var(--gjs-main-dark-color);
 
   &:first-child {
     border: none;
   }
 
   &:hover {
-    background: $mainDkColor;
+    background: var(--gjs-main-dark-color);
   }
 }
 
@@ -283,18 +283,18 @@
   }
 
   .#{$sm-prefix}btn {
-    background-color: lighten($mainDkColor, 13%);
+    background-color: lighten-color(var(--gjs-main-dark-color), 13%);
     border-radius: 2px;
-    box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
+    box-shadow: 1px 1px 0 lighten-color(var(--gjs-main-dark-color), 2%), 1px 1px 0 lighten-color(var(--gjs-main-dark-color), 17%) inset;
     padding: 5px;
     position: relative;
     text-align: center;
     height: auto;
     width: 100%;
     cursor: pointer;
-    color: $fontColor;
+    color: var(--gjs-font-color);
     box-sizing: border-box;
-    text-shadow: -1px -1px 0 $mainDkColor;
+    text-shadow: -1px -1px 0 var(--gjs-main-dark-color);
     border: none;
 
     @include opacity(0.85);
@@ -316,12 +316,12 @@
 }
 
 .#{$sm-prefix}preview-file {
-  background-color: $lightBorder;
+  background-color: var(--gjs-light-border);
   border-radius: 2px;
   margin-top: 5px;
   position: relative;
   overflow: hidden;
-  border: 1px solid darken($lightBorder, 1%);
+  border: 1px solid darken-color(var(--gjs-light-border), 1%);
   padding: 3px 20px;
 
   &-cnt {
@@ -458,12 +458,12 @@
 }
 
 .#{$sm-prefix}color-picker {
-  background-color: $fontColor;
+  background-color: var(--gjs-font-color);
   cursor: pointer;
   height: 16px;
   width: 100%;
   margin-top: -16px;
-  box-shadow: 0 0 1px $mainDkColor;
+  box-shadow: 0 0 1px var(--gjs-main-dark-color);
   border-radius: 1px;
 }
 

src/styles/scss/_gjs_traits.scss

@@ -1,6 +1,6 @@
 .#{$app-prefix} {
   &traits-label {
-    border-bottom: 1px solid $mainDkColor;
+    border-bottom: 1px solid var(--gjs-main-dark-color);
     font-weight: lighter;
     margin-bottom: 5px;
     padding: 10px;
@@ -37,7 +37,7 @@
   text-align: left;
 
   &s {
-    font-size: $fontSizeS;
+    font-size: var(--gjs-font-size);
   }
 
   .#{$app-prefix}label {

src/styles/scss/_gjs_variables.scss

@@ -12,7 +12,7 @@ $sm-prefix:         $app-prefix + 'sm-' !default;
 $cv-prefix:         $app-prefix + 'cv-' !default;
 $clm-prefix:        $app-prefix + 'clm-' !default;
 $trt-prefix:        $app-prefix + 'trt-' !default;
-$cui-cls:        $app-prefix + 'cui' !default;
+$cui-cls:           $app-prefix + 'cui' !default;
 
 /*
   New Pattern Color System
@@ -33,14 +33,10 @@ $mainDkColor:       rgba(0, 0, 0, 0.2) !default;/* darken($mainColor, 4%) - #383
 $mainDklColor:      rgba(0, 0, 0, 0.1) !default;
 $mainLhColor:       rgba(255, 255, 255, 0.1) !default; /* #515151 */
 $mainLhlColor:      rgba(255, 255, 255, 0.7) !default;
-$fontColorDk:       #777 !default;
 $colorBlue:         #3b97e3 !default;
 $colorRed:          #dd3636 !default;
 $colorYell:         #ffca6f !default;
 $colorGreen:        #62c462 !default;
-$tagBg:             #804f7b !default;
-$secColor:          $tagBg !default;
-$imageCompDim:      50px !default;
 $leftWidth:         15% !default;
 
 /* Color Helpers */
@@ -49,18 +45,16 @@ $colorWarn:         #ffca6f !default;
 
 /* Canvas */
 $hndlMargin:        -5px !default;
+$canvasTop:         40px !default;
 
 /* Components / Inputs */
 $lightBorder:       rgba(255, 255, 255, 0.05) !default;
-$inputFontColor:    $mainLhlColor !default; /* #d5d5d5 */
 $arrowColor:        $mainLhlColor !default; /* b1b1b1 */
 $darkTextShadow:    $mainDkColor !default; /* #252525 */
-$darkBorder:        rgba(0, 0, 0, 0.15) !default; /* 303030 */
 $colorpSize:        22px !default;
 $inputPadding:      5px !default; // Has to be a single value
 
 /* Class manager */
-$addBtnBg:          lighten($mainDkColor, 10%) !default;
 $paddElClm:         5px 6px !default;
 
 /* File uploader */
@@ -71,8 +65,7 @@ $animSpeed:         0.2s !default;
 
 /* Fonts */
 $mainFont:          Helvetica, sans-serif !default;
-$fontSize:           0.7rem !default;
-$fontSizeS:          0.75rem !default;
+$fontSize:          0.75rem !default;
 
 /* Tools */
-$placeholderColor:   $colorGreen !default;
+$placeholderColor:   var(--gjs-color-green) !default;

src/styles/scss/main.scss

@@ -5,6 +5,14 @@
 @import "spectrum.scss";
 @import "gjs_variables.scss";
 
+@function darken-color($color, $percentage) {
+  @return color-mix(in srgb, $color, black $percentage)
+}
+
+@function lighten-color($color, $percentage) {
+  @return color-mix(in srgb, $color, white $percentage)
+}
+
 @mixin user-select($v) {
   -moz-user-select: $v;
   -khtml-user-select: $v;
@@ -36,11 +44,11 @@ $prefix: $app-prefix;
 
 @import "gjs_status";
 
-$colorsAll: (one, $primaryColor),
-  (two, $secondaryColor),
-  (three, $tertiaryColor),
-  (four, $quaternaryColor),
-  (danger, $colorRed);
+$colorsAll: (one, var(--gjs-primary-color)),
+  (two, var(--gjs-secondary-color)),
+  (three, var(--gjs-tertiary-color)),
+  (four, var(--gjs-quaternary-color)),
+  (danger, var(--gjs-color-red));
 
 .#{$prefix} {
   @each $cnum, $ccol in $colorsAll {
@@ -63,29 +71,29 @@ $colorsAll: (one, $primaryColor),
 
 .#{$app-prefix}bg {
   &-main {
-    background-color: $mainColor;
+    background-color: var(--gjs-main-color);
   }
 }
 
 .#{$app-prefix}color {
   &-main {
-    color: $fontColor;
-    fill: $fontColor;
+    color: var(--gjs-font-color);
+    fill: var(--gjs-font-color);
   }
 
   &-active {
-    color: $fontColorActive;
-    fill: $fontColorActive;
+    color: var(--gjs-font-color-active);
+    fill: var(--gjs-font-color-active);
   }
 
   &-warn {
-    color: $colorWarn;
-    fill: $colorWarn;
+    color: var(--gjs-color-warn);
+    fill: var(--gjs-color-warn);
   }
 
   &-hl {
-    color: $colorHighlight;
-    fill: $colorHighlight;
+    color: var(--gjs-color-highlight);
+    fill: var(--gjs-color-highlight);
   }
 }
 
@@ -130,7 +138,7 @@ $colorsAll: (one, $primaryColor),
 }
 
 .#{$app-prefix}drag-helper {
-  background-color: $colorBlue !important;
+  background-color: var(--gjs-color-blue) !important;
   pointer-events: none !important;
   position: absolute !important;
   z-index: 10 !important;
@@ -165,7 +173,7 @@ $colorsAll: (one, $primaryColor),
 
 // Custom scrollbars for Chrome
 .#{$app-prefix}editor-cont ::-webkit-scrollbar-track {
-  background: $mainDklColor;
+  background: var(--gjs-secondary-dark-color);
 }
 
 .#{$app-prefix}editor-cont ::-webkit-scrollbar-thumb {
@@ -177,6 +185,46 @@ $colorsAll: (one, $primaryColor),
 }
 
 /********************* MAIN ************************/
+// @property --input-padding {
+//   syntax: "<length>";
+//   inherits: false;
+//   initial-value: #{$inputPadding};
+// }
+
+:root {
+  --gjs-main-color: #{$mainColor};
+  --gjs-primary-color: #{$primaryColor};
+  --gjs-secondary-color: #{$secondaryColor};
+  --gjs-tertiary-color: #{$tertiaryColor};
+  --gjs-quaternary-color: #{$quaternaryColor};
+  --gjs-font-color: #{$fontColor};
+  --gjs-font-color-active: #{$fontColorActive};
+  --gjs-main-dark-color: #{$mainDkColor};
+  --gjs-secondary-dark-color: #{$mainDklColor};
+  --gjs-main-light-color: #{$mainLhColor};
+  --gjs-secondary-light-color: #{$mainLhlColor};
+  --gjs-color-blue: #{$colorBlue};
+  --gjs-color-red: #{$colorRed};
+  --gjs-color-yellow: #{$colorYell};
+  --gjs-color-green: #{$colorGreen};
+  --gjs-left-width: #{$leftWidth};
+  --gjs-color-highlight: #{$colorHighlight};
+  --gjs-color-warn: #{$colorWarn};
+  --gjs-handle-margin: #{$hndlMargin};
+  --gjs-light-border: #{$lightBorder};
+  --gjs-arrow-color: #{$arrowColor};
+  --gjs-dark-text-shadow: #{$darkTextShadow};
+  --gjs-color-input-padding: #{$colorpSize};
+  --gjs-input-padding: #{$inputPadding}; // Has to be a single value
+  --gjs-padding-elem-classmanager: #{$paddElClm};
+  --gjs-upload-padding: #{$uploadPadding};
+  --gjs-animation-duration: #{$animSpeed};
+  --gjs-main-font: #{$mainFont};
+  --gjs-font-size: #{$fontSize};
+  --gjs-placeholder-background-color: #{$placeholderColor};
+  --gjs-canvas-top: #{$canvasTop};
+}
+
 .clear{ clear:both }
 
 .no-select{
@@ -194,8 +242,8 @@ $colorsAll: (one, $primaryColor),
   }
 
   &editor {
-    font-family: $mainFont;
-    font-size: $fontSizeS;
+    font-family: var(--gjs-main-font);
+    font-size: var(--gjs-font-size);
     position: relative;
     box-sizing: border-box;
     height: 100%;
@@ -227,7 +275,7 @@ $colorsAll: (one, $primaryColor),
 
 .#{$com-prefix}badge, .#{$app-prefix}badge{
 	pointer-events: none;
-	background-color: $colorBlue;
+	background-color: var(--gjs-color-blue);
 	color: #fff;
 	padding: 2px 5px;
 	position: absolute; z-index: 1;
@@ -236,7 +284,7 @@ $colorsAll: (one, $primaryColor),
   display: none;
 }
 .#{$app-prefix}badge-warning{
-	background-color: $colorYell;
+	background-color: var(--gjs-color-yellow);
 }
 .#{$app-prefix}placeholder,
 .#{$com-prefix}placeholder,
@@ -252,14 +300,14 @@ $colorsAll: (one, $primaryColor),
   border-style: solid !important;
   outline: none;
   box-sizing: border-box;
-  transition: top $animSpeed, left $animSpeed,
-    width $animSpeed, height $animSpeed;
+  transition: top var(--gjs-animation-duration), left var(--gjs-animation-duration),
+    width var(--gjs-animation-duration), height var(--gjs-animation-duration);
 }
 
 .#{$app-prefix}placeholder.horizontal,
 .#{$com-prefix}placeholder.horizontal,
 .#{$nv-prefix}placeholder.horizontal {
-  border-color: transparent $placeholderColor;
+  border-color: transparent var(--gjs-placeholder-background-color);
   border-width: 3px 5px;
   margin: -3px 0 0;
 }
@@ -267,7 +315,7 @@ $colorsAll: (one, $primaryColor),
 .#{$app-prefix}placeholder.vertical,
 .#{$com-prefix}placeholder.vertical,
 .#{$nv-prefix}placeholder.vertical {
-  border-color: $placeholderColor transparent;
+  border-color: var(--gjs-placeholder-background-color) transparent;
   border-width: 5px 3px;
   margin: 0 0 0 -3px;
 }
@@ -275,7 +323,7 @@ $colorsAll: (one, $primaryColor),
 .#{$app-prefix}placeholder-int,
 .#{$com-prefix}placeholder-int,
 .#{$nv-prefix}placeholder-int {
-	background-color: $placeholderColor;
+	background-color: var(--gjs-placeholder-background-color);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
 	height: 100%; width: 100%;
 	pointer-events: none;
@@ -302,7 +350,7 @@ $colorsAll: (one, $primaryColor),
   @extend .no-select;
 
   font-weight: lighter;
-  background-color: $mainDklColor;
+  background-color: var(--gjs-secondary-dark-color);
   letter-spacing: 1px;
   padding: 9px 10px 9px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.25);
@@ -325,7 +373,7 @@ $colorsAll: (one, $primaryColor),
 	float:left;
 
 	> form {
-	  background-color: $mainDklColor;
+	  background-color: var(--gjs-secondary-dark-color);
 	  border: 2px dashed;
 	  border-radius: 3px;
 	  position: relative;
@@ -333,8 +381,8 @@ $colorsAll: (one, $primaryColor),
 	  margin-bottom: 15px;
 
 	  	&.#{$am-prefix}hover {
-			border: 2px solid $colorGreen;
-			color: lighten($colorGreen, 5%); /*#7ee07e*/
+			border: 2px solid var(--gjs-color-green);
+			color: lighten-color(var(--gjs-color-green), 5%);
 		}
 
 		&.#{$am-prefix}disabled{
@@ -343,7 +391,7 @@ $colorsAll: (one, $primaryColor),
 
 	  	##{$am-prefix}uploadFile{
 	  		@include opacity(0);
-	  		padding: $uploadPadding;
+	  		padding: var(--gjs-upload-padding);
 		  	width: 100%;
 		  	box-sizing: border-box;
 		}
@@ -351,7 +399,7 @@ $colorsAll: (one, $primaryColor),
 
 	##{$am-prefix}title {
 		position: absolute;
-		padding: $uploadPadding;
+		padding: var(--gjs-upload-padding);
 		width: 100%;
 	}
 }
@@ -373,7 +421,7 @@ $colorsAll: (one, $primaryColor),
 
 	&##{$cm-prefix}htmlmixed {
 		padding-right: 10px;
-		border-right: 1px solid $mainDkColor;
+		border-right: 1px solid var(--gjs-main-dark-color);
 		##{$cm-prefix}title { color: #a97d44;}
 	}
 	&##{$cm-prefix}css {
@@ -381,7 +429,7 @@ $colorsAll: (one, $primaryColor),
 		##{$cm-prefix}title { color: #ddca7e;}
 	}
 	##{$cm-prefix}title {
-	  background-color: $mainDkColor;
+	  background-color: var(--gjs-main-dark-color);
 	  font-size: 12px;
 	  padding: 5px 10px 3px;
 	  text-align: right;
@@ -401,12 +449,12 @@ $colorsAll: (one, $primaryColor),
   .sp-hue{ left: 90%; }
   .sp-color{right: 15%;}
   .sp-container {
-    border: 1px solid $mainDkColor;
-    box-shadow: 0 0 7px $mainDkColor;
+    border: 1px solid var(--gjs-main-dark-color);
+    box-shadow: 0 0 7px var(--gjs-main-dark-color);
     border-radius: 3px;
   }
   .sp-picker-container{border:none;}
-  .colpick_dark .colpick_color {  outline: 1px solid $mainDkColor;}
+  .colpick_dark .colpick_color {  outline: 1px solid var(--gjs-main-dark-color);}
   .sp-cancel, .sp-cancel:hover {
     bottom: -8px;
     color: #777 !important;
@@ -436,9 +484,9 @@ $colorsAll: (one, $primaryColor),
   	text-align: right;
   }
   .sp-container button, .sp-container button:hover, .sp-container button:active{
-  	background: $mainDkColor;
-    border-color: $mainDkColor;
-    color: $fontColor;
+  	background: var(--gjs-main-dark-color);
+    border-color: var(--gjs-main-dark-color);
+    color: var(--gjs-font-color);
     text-shadow: none;
     box-shadow: none;
     padding: 3px 5px;

test/specs/pages/index.js → test/specs/pages/index.ts

@@ -1,31 +1,27 @@
-import Editor from 'editor';
+import { ComponentDefinition } from '../../../src/dom_components/model/types';
+import Editor from '../../../src/editor';
+import EditorModel from '../../../src/editor/model/Editor';
 
 describe('Pages', () => {
-  let editor;
-  let em;
-  let domc;
-  let initCmpLen;
-  let pm;
+  let editor: Editor;
+  let em: EditorModel;
+  let domc: Editor['Components'];
+  let initCmpLen = 0;
+  let pm: Editor['Pages'];
 
   beforeAll(() => {
-    editor = new Editor({ pageManager: true });
+    editor = new Editor({ pageManager: {} });
     em = editor.getModel();
-    domc = em.get('DomComponents');
-    pm = em.get('PageManager');
+    domc = em.Components;
+    pm = em.Pages;
     pm.onLoad();
     initCmpLen = Object.keys(domc.allById()).length;
   });
 
   afterAll(() => {
     editor.destroy();
-    pm = 0;
-    em = 0;
-    domc = 0;
   });
 
-  beforeEach(() => {});
-  afterEach(() => {});
-
   test('Pages module exists', () => {
     expect(pm).toBeTruthy();
   });
@@ -58,7 +54,7 @@ describe('Pages', () => {
 
   test('Adding new page with selection', () => {
     const name = 'Test page';
-    const page = pm.add({ name }, { select: 1 });
+    const page = pm.add({ name }, { select: true })!;
     expect(page.id).toBeTruthy();
     expect(page.get('name')).toBe(name);
     expect(pm.getSelected()).toBe(page);
@@ -69,8 +65,15 @@ describe('Pages', () => {
   });
 
   describe('Init with pages', () => {
-    let idPage1, idComp1, idComp2, comp1, comp2, initPages, allbyId;
-    const createCompDef = id => ({
+    let idPage1 = 'page-1';
+    let idComp1 = 'comp1';
+    let idComp2 = 'comp2';
+    let comp1: ComponentDefinition;
+    let comp2: ComponentDefinition;
+    let initPages;
+    let allbyId: ReturnType<Editor['Components']['allById']>;
+
+    const createCompDef = (id: string): ComponentDefinition => ({
       attributes: {
         id,
         class: id,
@@ -78,10 +81,8 @@ describe('Pages', () => {
       },
       components: `Component ${id}`,
     });
+
     beforeAll(() => {
-      idPage1 = 'page-1';
-      idComp1 = 'comp1';
-      idComp2 = 'comp2';
       comp1 = createCompDef(idComp1);
       comp2 = createCompDef(idComp2);
       initPages = [
@@ -124,9 +125,6 @@ describe('Pages', () => {
 
     afterAll(() => {
       editor.destroy();
-      pm = 0;
-      em = 0;
-      domc = 0;
     });
 
     test('Pages are created correctly', () => {
@@ -153,26 +151,23 @@ describe('Pages', () => {
 });
 
 describe('Managing pages', () => {
-  let editor;
-  let em;
-  let domc;
-  let initCmpLen;
-  let pm;
+  let editor: Editor;
+  let em: EditorModel;
+  let domc: Editor['Components'];
+  let initCmpLen = 0;
+  let pm: Editor['Pages'];
 
   beforeEach(() => {
-    editor = new Editor({ pageManager: true });
+    editor = new Editor({ pageManager: {} });
     em = editor.getModel();
-    domc = em.get('DomComponents');
-    pm = em.get('PageManager');
+    domc = em.Components;
+    pm = em.Pages;
     editor.getModel().loadOnStart();
     initCmpLen = Object.keys(domc.allById()).length;
   });
 
   afterEach(() => {
     editor.destroy();
-    pm = 0;
-    em = 0;
-    domc = 0;
   });
 
   test('Add page', () => {
@@ -203,8 +198,8 @@ describe('Managing pages', () => {
   test('Remove page', () => {
     const eventRm = jest.fn();
     em.on(pm.events.remove, eventRm);
-    const page = pm.add({});
-    pm.remove(page.id);
+    const page = pm.add({})!;
+    pm.remove(`${page.id}`);
     expect(pm.getAll().length).toBe(1);
     expect(eventRm).toBeCalledTimes(1);
   });
@@ -213,8 +208,8 @@ describe('Managing pages', () => {
     em.on(pm.events.removeBefore, (p, c, opts) => {
       opts.abort = 1;
     });
-    const page = pm.add({});
-    pm.remove(page.id);
+    const page = pm.add({})!;
+    pm.remove(`${page.id}`);
     expect(pm.getAll().length).toBe(2);
   });
 
@@ -223,19 +218,50 @@ describe('Managing pages', () => {
       opts.abort = 1;
       complete();
     });
-    const page = pm.add({});
-    pm.remove(page.id);
+    const page = pm.add({})!;
+    pm.remove(`${page.id}`);
     expect(pm.getAll().length).toBe(1);
   });
 
   test('Change page', () => {
     const event = jest.fn();
     em.on(pm.events.update, event);
-    const page = pm.add({});
+    const page = pm.add({})!;
     const up = { name: 'Test' };
     const opts = { myopts: 1 };
     page.set(up, opts);
     expect(event).toBeCalledTimes(1);
     expect(event).toBeCalledWith(page, up, opts);
   });
+
+  test('Prevent duplicate ids in components and styles', () => {
+    const id = 'myid';
+    const idSel = `#${id}`;
+    pm.add({
+      component: `<div id="${id}">My Page</div>`,
+      styles: `${idSel} { color: red }`,
+    })!;
+    pm.add({
+      component: `<div id="${id}">My Page</div>`,
+      styles: `${idSel} { color: blue }`,
+    })!;
+
+    expect(pm.getAll().length).toBe(3);
+
+    // Check component/rule from the first page
+    const cmp1 = domc.allById()[id];
+    const rule1 = em.Css.getRule(idSel)!;
+    expect(cmp1.getId()).toBe(id);
+    expect(rule1.getSelectorsString()).toBe(idSel);
+    expect(rule1.getStyle()).toEqual({ color: 'red' });
+
+    // Check component/rule from the second page
+    const id2 = 'myid-2';
+    const idSel2 = `#${id2}`;
+    const cmp2 = domc.allById()[id2];
+    const rule2 = em.Css.getRule(idSel2)!;
+    expect(cmp2.getId()).toBe(id2);
+    expect(rule2.getSelectorsString()).toBe(idSel2);
+    expect(rule2.getStyle()).toEqual({ color: 'blue' });
+  });
 });