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

• Regex: /^mergeWith$/i
• The key property merges List values via concatenation if conflict otherwise List values are not merged
• mergeWith merges the Object reference key while merge does not
  • merge: {x: {a: 1, b: 2}} = {a: 1, b: 2}
  • mergeWith: {x: {a: 1, b: 2}} = {x: {a: 1, b: 2}}

Internal¶

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

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.

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

• Only works with Javascript

Multiple¶

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

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

• Merge does not overwrite the source or previous merged Object

Scoped¶

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

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

• If you adhered to the Don’t Repeat Yourself philosophy you can make your code as DRY as a bone

Set Variables¶

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

// 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$