Syntax

Description: mergeWith is defined as a utility that merges internal Objects into a ctr instance.

ctr('<#selector>', {
mergeWith: <object>
<...>: <...>
})
<#selector>
mergeWith: <object>
<...>: <...>
<#selector> {
<object:properties>: <object:values>;
<...>: <...>;
}

Notes

Internal

Description: The mergeWith property can merge internal Local Varibles ($$).

Edit
ctr('.test', {
$$: {
component: {
key: 'span'
color: red
font-size: 1em
}
}
width: 200px
mergeWith: '$component$'
})
.test:
$$:
component:
key: span
color: red
font-size: 1em
width: 200px
mergeWith: $component$
.test {
width: 200px;
}
.test > span {
color: #f00;
font-size: 1em;
}
ctr('.test', {
  $$: {
    component: {
      key: 'span'
      color: red
      font-size: 1em
    }
  }
  width: 200px
  mergeWith: '$component$'
})
.test {
  width: 200px;
}
.test > span {
  color: #f00;
  font-size: 1em;
}
.test:
  $$:
    component:
      key: span
      color: red
      font-size: 1em
  width: 200px
  mergeWith: $component$

External

Description: The mergeWith property can merge external Objects.

Edit
const component = {
key: 'span',
color 'red',
'font-size': '1em',
};
ctr.create('.test', {
width: '200px',
merge: component
});
const component = {
key: 'span',
color 'red',
'font-size': '1em',
};
ctr.create('.test', {
width: '200px',
merge: component
});
.test {
width: 200px;
}
.test > span {
color: #f00;
font-size: 1em;
}

Notes

Multiple

Description: A List value of Objects for the mergeWith property merges the Objects in the order it is received.

Edit
ctr('.test', {
$$: {
customStateOpacity: {
key: 'hover'
on: {
opacity: 1
}
}
customStateColor: {
key: 'hover'
on: {
color: red
}
}
}
width: 200px
mergeWith: '$customStateOpacity$' '$customStateColor$'
})
.test:
$$:
customStateOpacity:
key: hover
on:
opacity: 1
customStateColor:
key: hover
on:
color: red
width: 200px
mergeWith: [$customStateOpacity$, $customStateColor$]
.test {
width: 200px;
}
.test:hover {
opacity: 1;
color: #f00;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  $$: {
    customStateOpacity: {
      key: 'hover'
      on: {
        opacity: 1
      }
    }
    customStateColor: {
      key: 'hover'
      on: {
        color: red
      }
    }
  }
  width: 200px
  mergeWith: '$customStateOpacity$' '$customStateColor$'
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  color: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  $$:
    customStateOpacity:
      key: hover
      on:
        opacity: 1
    customStateColor:
      key: hover
      on:
        color: red
  width: 200px
  mergeWith: [$customStateOpacity$, $customStateColor$]

Notes

Scoped

Description: The mergeWith property can be used at any scoped level.

Edit
ctr('.test', {
$$: {
component: {
key: 'span'
color: red
font-size: 1em
}
}
width: 200px
components: {
h1: {
mergeWith: '$component$'
}
h2: {
mergeWith: '$component$'
}
}
})
.test:
$$:
component:
key: span
color: red
font-size: 1em
width: 200px
components:
h1:
mergeWith: $component$
h2:
mergeWith: $component$
.test {
width: 200px;
}
.test > h1 > span {
color: #f00;
font-size: 1em;
}
.test > h2 > span {
color: #f00;
font-size: 1em;
}
ctr('.test', {
  $$: {
    component: {
      key: 'span'
      color: red
      font-size: 1em
    }
  }
  width: 200px
  components: {
    h1: {
      mergeWith: '$component$'
    }
    h2: {
      mergeWith: '$component$'
    }
  }
})
.test {
  width: 200px;
}
.test > h1 > span {
  color: #f00;
  font-size: 1em;
}
.test > h2 > span {
  color: #f00;
  font-size: 1em;
}
.test:
  $$:
    component:
      key: span
      color: red
      font-size: 1em
  width: 200px
  components:
    h1:
      mergeWith: $component$
    h2:
      mergeWith: $component$

Notes

Set Variables

Description:The mergeWith property can reffrance reference internal global variable Objets set in ctrSetVariable or in the .ctrrc.yml.

Edit
// sets internal ctr global variable
ctrSetVariable({
component: {
key: 'span'
font-size: 1em
background: red
}
})
ctr('.test', {
width: 200px
mergeWith: '$component$'
})
# sets internal ctr global variable
ctr:::setVariable:
component:
key: span
font-size: 1em
background: red
.test:
width: 200px
mergeWith: $component$
.test {
width: 200px;
}
.test > span {
font-size: 1em;
background: #f00;
}
// sets internal ctr global variable 
ctrSetVariable({
  component: {
    key: 'span'
    font-size: 1em
    background: red
  }
})

ctr('.test', {
  width: 200px
  mergeWith: '$component$'
})
.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
  background: #f00;
}
# sets internal ctr global variable 
ctr:::setVariable:
  component:
    key: span
    font-size: 1em
    background: red

.test:
  width: 200px
  mergeWith: $component$