Basic

Description: The components Object groups component instances together in which each child Object is treated as a separate component instance. If the key property is not defined in the component instance, its Object key is used as the <identifier>.

Edit
ctr('.test', {
width: 200px
components: {
'span': {
font-size: 1em
}
'#for': {
font-size: 2em
}
'.linus': {
selector: '+'
font-size: 3em
}
random: {
// specified key
key: 'li'
font-size: 4em
}
}
})
.test:
width: 200px
components:
span:
font-size: 1em
'#for':
font-size: 2em
.linus:
selector: +
font-size: 3em
random:
# specified key
key: li
font-size: 4em
.test {
width: 200px;
}
.test > span {
font-size: 1em;
}
.test > #for {
font-size: 2em;
}
.test + .linus {
font-size: 3em;
}
.test > li {
font-size: 4em;
}
ctr('.test', {
  width: 200px
  components: {
    'span': {
      font-size: 1em
    }
    '#for': {
      font-size: 2em
    }
    '.linus': {
      selector: '+'
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li'
      font-size: 4em
    }
  }
})
.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}
.test > #for {
  font-size: 2em;
}
.test + .linus {
  font-size: 3em;
}
.test > li {
  font-size: 4em;
}
.test:
  width: 200px
  components:
    span:
      font-size: 1em
    '#for':
      font-size: 2em
    .linus:
      selector: +
      font-size: 3em
    random:
      # specified key
      key: li
      font-size: 4em

Notes

Common Key

Description: A common Object can be defined in the components Object to specify common values used by all component instances.

Edit
ctr('.test', {
width: 200px
components: {
// merged into each component
common: {
selector: '~'
background: red
}
'.99Bottles': {
font-size: 1em
}
'#ofBeer': {
font-size: 2em
}
'.onTheWall': {
font-size: 3em
}
random: {
// specified key
key: 'li + .takeOneDown'
font-size: 4em
}
}
})
'.test':
width: 200px
components:
# merged into each component
common:
selector: '~'
background: red
'.99Bottles':
font-size: 1em
'#ofBeer':
font-size: 2em
'.onTheWall':
font-size: 3em
random:
# specified key
key: 'li + .takeOneDown'
font-size: 4em
.test {
width: 200px;
}
.test ~ .99Bottles {
font-size: 1em;
background: #f00;
}
.test ~ #ofBeer {
font-size: 2em;
background: #f00;
}
.test ~ .onTheWall {
font-size: 3em;
background: #f00;
}
.test ~ li + .takeOneDown {
font-size: 4em;
background: #f00;
}
ctr('.test', {
  width: 200px
  components: {
    // merged into each component
    common: {
      selector: '~'
      background: red
    }
    '.99Bottles': {
      font-size: 1em
    }
    '#ofBeer': {
      font-size: 2em
    }
    '.onTheWall': {
      font-size: 3em
    }
    random: {
      // specified key
      key: 'li + .takeOneDown'
      font-size: 4em
    }
  }
})
.test {
  width: 200px;
}
.test ~ .99Bottles {
  font-size: 1em;
  background: #f00;
}
.test ~ #ofBeer {
  font-size: 2em;
  background: #f00;
}
.test ~ .onTheWall {
  font-size: 3em;
  background: #f00;
}
.test ~ li + .takeOneDown {
  font-size: 4em;
  background: #f00;
}
'.test':
  width: 200px
  components:
    # merged into each component
    common:
      selector: '~'
      background: red
    '.99Bottles':
      font-size: 1em
    '#ofBeer':
      font-size: 2em
    '.onTheWall':
      font-size: 3em
    random:
      # specified key
      key: 'li + .takeOneDown'
      font-size: 4em

Notes

Omit

Description: A List value for the omit option property in an Object component instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
components: {
common: {
font-size: 2em
height: 400px
}
'.one': {
opacity: 1
}
'.two': {
option: {
// omits font-size
omit: 'font-size'
}
opacity: 0.5
}
}
})
.test:
width: 200px
components:
common:
font-size: 2em
height: 400px
.one:
opacity: 1
.two:
option:
# omits font-size
omit: font-size
opacity: 0.5
.test {
width: 200px;
}
.test > .one {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > .two {
opacity: 0.5;
height: 400px;
}
ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // omits font-size
        omit: 'font-size'
      }
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}
.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # omits font-size
        omit: font-size
      opacity: 0.5

Notes

Pick

Description: A List value for the pick option property in an Object component instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
components: {
common: {
font-size: 2em
height: 400px
}
'.one': {
opacity: 1
}
'.two': {
option: {
// only picks height
pick: 'height'
}
opacity: 0.5
}
}
})
.test:
width: 200px
components:
common:
font-size: 2em
height: 400px
.one:
opacity: 1
.two:
option:
# only picks height
pick: height
opacity: 0.5
.test {
width: 200px;
}
.test > .one {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > .two {
opacity: 0.5;
height: 400px;
}
ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      option: {
        // only picks height
        pick: 'height'
      }
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
}
.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      option:
        # only picks height
        pick: height
      opacity: 0.5

Notes

Target

Description: A List value for the target option property in the common Object specifies specific component instances to merge with.

Edit
ctr('.test', {
width: 200px
components: {
common: {
option: {
// only merges with "two"
target: '.two'
}
font-size: 2em
height: 400px
}
'.one': {
opacity: 1
}
'.two': {
opacity: 0.5
}
}
})
.test:
width: 200px
components:
common:
option:
# only merges with "two"
target: .two
font-size: 2em
height: 400px
.one:
opacity: 1
.two:
opacity: 0.5
.test {
width: 200px;
}
.test > .one {
opacity: 1;
}
.test > .two {
opacity: 0.5;
height: 400px;
font-size: 2em;
}
ctr('.test', {
  width: 200px
  components: {
    common: {
      option: {
        // only merges with "two"
        target: '.two'
      }
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    '.two': {
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
}
.test > .two {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}
.test:
  width: 200px
  components:
    common:
      option:
        # only merges with "two"
        target: .two
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    .two:
      opacity: 0.5

Notes

True Value

Description: A true Boolean value for an Object component instance inherits the common Object value.

Edit
ctr('.test', {
width: 200px
components: {
common: {
font-size: 2em
height: 400px
}
'.one': {
opacity: 1
}
// inherits common
'.two': true
}
})
.test:
width: 200px
components:
common:
font-size: 2em
height: 400px
.one:
opacity: 1
# inherits common
.two: true
.test {
width: 200px;
}
.test > .one {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > .two {
height: 400px;
font-size: 2em;
}
ctr('.test', {
  width: 200px
  components: {
    common: {
      font-size: 2em
      height: 400px
    }
    '.one': {
      opacity: 1
    }
    // inherits common
    '.two': true
  }
})
.test {
  width: 200px;
}
.test > .one {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > .two {
  height: 400px;
  font-size: 2em;
}
.test:
  width: 200px
  components:
    common:
      font-size: 2em
      height: 400px
    .one:
      opacity: 1
    # inherits common
    .two: true