Key

Description: The key property can be defined in the option Object.

Edit
ctr('.test', {
width: 200px
component: {
option: {
key: 'span'
}
font-size: 1em
}
})
.test:
width: 200px
component:
option:
key: span
font-size: 1em
.test {
width: 200px;
}
.test > span {
font-size: 1em;
}
ctr('.test', {
  width: 200px
  component: {
    option: {
      key: 'span'
    }
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}
.test:
  width: 200px
  component:
    option:
      key: span
    font-size: 1em

Selector Combinator

Description: The selector <combinator> property can be defined in the option Object.

Edit
ctr('.test', {
width: 200px
'component-.erins': {
option: {
selector: '+'
}
font-size: 1em
}
})
.test:
width: 200px
component-.erins:
option:
selector: +
font-size: 1em
.test {
width: 200px;
}
.test + .erins {
font-size: 1em;
}
ctr('.test', {
  width: 200px
  'component-.erins': {
    option: {
      selector: '+'
    }
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test + .erins {
  font-size: 1em;
}
.test:
  width: 200px
  component-.erins:
    option:
      selector: +
    font-size: 1em

Notes

appendKey

Description: The value of true for the appendKey option property appends the <identifier> to the parent <identifier>.

Edit
ctr('.test', {
width: 200px
component: {
option: {
key: '.appendMe'
appendKey: true
}
font-size: 1em
}
})
.test:
width: 200px
component:
option:
key: .appendMe
appendKey: true
font-size: 1em
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
ctr('.test', {
  width: 200px
  component: {
    option: {
      key: '.appendMe'
      appendKey: true
    }
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test.appendMe {
  font-size: 1em;
}
.test:
  width: 200px
  component:
    option:
      key: .appendMe
      appendKey: true
    font-size: 1em

Notes

appendKey Shorthand

Description: The appendKey option can be applied using the shorthand hyphenated notation of component--<identifier> or comp--<identifier>.

Edit
ctr('.test', {
width: 200px
'component--.appendMe': {
font-size: 1em
}
})
.test:
width: 200px
component--.appendMe:
font-size: 1em
.test {
width: 200px;
}
.test.appendMe {
font-size: 1em;
}
ctr('.test', {
  width: 200px
  'component--.appendMe': {
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test.appendMe {
  font-size: 1em;
}
.test:
  width: 200px
  component--.appendMe:
    font-size: 1em

Notes

appendKey Multiple

Description: The appendKey option property can be used in conjunction with a List of key values.

Edit
ctr('.test', {
width: 200px
component: {
option: {
appendKey: true
key: '.appendMe' '.please' '#beebes'
}
font-size: 2em
}
})
.test:
width: 200px
component:
option:
appendKey: true
key: [.appendMe, .please, '#beebes']
font-size: 2em
.test {
width: 200px;
}
.test.appendMe {
font-size: 2em;
}
.test.please {
font-size: 2em;
}
.test#beebes {
font-size: 2em;
}
ctr('.test', {
  width: 200px
  component: {
    option: {
      appendKey: true
      key: '.appendMe' '.please' '#beebes'
    }
    font-size: 2em
  }
})
.test {
  width: 200px;
}
.test.appendMe {
  font-size: 2em;
}
.test.please {
  font-size: 2em;
}
.test#beebes {
  font-size: 2em;
}
.test:
  width: 200px
  component:
    option:
      appendKey: true
      key: [.appendMe, .please, '#beebes']
    font-size: 2em

appendKey Chain

Description: appendKey can be chained.

Edit
ctr('.test', {
width: 200px
components: {
'.one': {
font-size: 1em
'component-.two': {
option: {
appendKey: true
}
font-size: 2em
}
}
'.three': {
option: {
appendKey: true
}
font-size: 3em
'component-.four': {
option: {
appendKey: true
}
font-size: 4em
}
}
}
})
.test:
width: 200px
components:
.one:
font-size: 1em
component-.two:
option:
appendKey: true
font-size: 2em
.three:
option:
appendKey: true
font-size: 3em
component-.four:
option:
appendKey: true
font-size: 4em
.test {
width: 200px;
}
.test > .one {
font-size: 1em;
}
.test.three {
font-size: 3em;
}
.test > .one.two {
font-size: 2em;
}
.test.three.four {
font-size: 4em;
}
ctr('.test', {
  width: 200px
  components: {
    '.one': {
      font-size: 1em
      'component-.two': {
        option: {
          appendKey: true
        }
        font-size: 2em
      }
    }
    '.three': {
      option: {
        appendKey: true
      }
      font-size: 3em
      'component-.four': {
        option: {
          appendKey: true
        }
        font-size: 4em
      }
    }
  }
})
.test {
  width: 200px;
}
.test > .one {
  font-size: 1em;
}
.test.three {
  font-size: 3em;
}
.test > .one.two {
  font-size: 2em;
}
.test.three.four {
  font-size: 4em;
}
.test:
  width: 200px
  components:
    .one:
      font-size: 1em
      component-.two:
        option:
          appendKey: true
        font-size: 2em
    .three:
      option:
        appendKey: true
      font-size: 3em
      component-.four:
        option:
          appendKey: true
        font-size: 4em