Hyphenated Component

Description: A component <identifier> can be defined through a hyphenated Object key that matches component-<identifier> or comp-<identifier>.

Edit
ctr('.test', {
width: 200px
'component-span': {
font-size: 1em
}
'component-.class': {
font-size: 2em
}
'comp-p': {
font-size: 3em
}
'comp-#id': {
font-size: 4em
}
'comp-h1': {
// key overrides hyphenated value
key: '.override'
font-size: 5em
}
})
.test:
width: 200px
component-span:
font-size: 1em
component-.class:
font-size: 2em
comp-p:
font-size: 3em
comp-#id:
font-size: 4em
comp-h1:
# key overrides hyphenated value
key: .override
font-size: 5em
.test {
width: 200px;
}
.test > span {
font-size: 1em;
}
.test > .class {
font-size: 2em;
}
.test > p {
font-size: 3em;
}
.test > #id {
font-size: 4em;
}
.test > .override {
font-size: 5em;
}
ctr('.test', {
  width: 200px
  'component-span': {
    font-size: 1em
  }
  'component-.class': {
    font-size: 2em
  }
  'comp-p': {
    font-size: 3em
  }
  'comp-#id': {
    font-size: 4em
  }
  'comp-h1': {
    // key overrides hyphenated value
    key: '.override'
    font-size: 5em
  }
})
.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}
.test > .class {
  font-size: 2em;
}
.test > p {
  font-size: 3em;
}
.test > #id {
  font-size: 4em;
}
.test > .override {
  font-size: 5em;
}
.test:
  width: 200px
  component-span:
    font-size: 1em
  component-.class:
    font-size: 2em
  comp-p:
    font-size: 3em
  comp-#id:
    font-size: 4em
  comp-h1:
    # key overrides hyphenated value
    key: .override
    font-size: 5em

Notes

Custom Component

Description: A component can be defined through an Object key that matches customComp.

Edit
ctr('.test', {
width: 200px
customCompOne: {
key: '.one'
font-size: 1em
}
customCompTwo: {
key: '#two'
font-size: 2em
}
})
.test:
width: 200px
customCompOne:
key: .one
font-size: 1em
customCompTwo:
key: '#two'
font-size: 2em
.test {
width: 200px;
}
.test > .one {
font-size: 1em;
}
.test > #two {
font-size: 2em;
}
ctr('.test', {
  width: 200px
  customCompOne: {
    key: '.one'
    font-size: 1em
  }
  customCompTwo: {
    key: '#two'
    font-size: 2em
  }
})
.test {
  width: 200px;
}
.test > .one {
  font-size: 1em;
}
.test > #two {
  font-size: 2em;
}
.test:
  width: 200px
  customCompOne:
    key: .one
    font-size: 1em
  customCompTwo:
    key: '#two'
    font-size: 2em

Notes

Multiple Key

Description: A List value for the key property generates an output for each <identifier> in the List.

Edit
ctr('.test', {
width: 200px
component: {
key: '#beerMe' '.please'
font-size: 1em
}
})
.test:
width: 200px
component:
key: ['#beerMe', .please]
font-size: 1em
.test {
width: 200px;
}
.test > #beerMe {
font-size: 1em;
}
.test > .please {
font-size: 1em;
}
ctr('.test', {
  width: 200px
  component: {
    key: '#beerMe' '.please'
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test > #beerMe {
  font-size: 1em;
}
.test > .please {
  font-size: 1em;
}
.test:
  width: 200px
  component:
    key: ['#beerMe', .please]
    font-size: 1em

Multiple Key Merge

Description: Like component, Objects with the same <identifier> and <combinator> in the same scope are merged.

Edit
ctr('.test', {
width: 200px
customComp: {
key: '#thanksFor' '.the' '.beer'
font-size: 1em
}
'comp-#thanksFor': {
color: red
}
'comp-.beer': {
color: blue
}
})
.test:
width: 200px
customComp:
key: ['#thanksFor', .the, .beer]
font-size: 1em
comp-#thanksFor:
color: red
comp-.beer:
color: blue
.test {
width: 200px;
}
.test > #thanksFor {
color: #f00;
font-size: 1em;
}
.test > .the {
font-size: 1em;
}
.test > .beer {
color: #00f;
font-size: 1em;
}
ctr('.test', {
  width: 200px
  customComp: {
    key: '#thanksFor' '.the' '.beer'
    font-size: 1em
  }
  'comp-#thanksFor': {
    color: red
  }
  'comp-.beer': {
    color: blue
  }
})
.test {
  width: 200px;
}
.test > #thanksFor {
  color: #f00;
  font-size: 1em;
}
.test > .the {
  font-size: 1em;
}
.test > .beer {
  color: #00f;
  font-size: 1em;
}
.test:
  width: 200px
  customComp:
    key: ['#thanksFor', .the, .beer]
    font-size: 1em
  comp-#thanksFor:
    color: red
  comp-.beer:
    color: blue