Hyphenated Attribute

Description: An attribute <identifier> can be defined through a hyphenated Object key that matches attribute-<identifier> or attr-<identifier>.

Edit
ctr('.test > div', {
width: 200px
'attribute-class*="coffee"': {
background: red
font-size: 1.5em
}
})
.test > div:
width: 200px
attribute-class*="coffee":
background: red
font-size: 1.5em
.test > div {
width: 200px;
}
.test > div[class*="coffee"] {
background: #f00;
font-size: 1.5em;
}
ctr('.test > div', {
  width: 200px
  'attribute-class*="coffee"': {
    background: red
    font-size: 1.5em
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="coffee"] {
  background: #f00;
  font-size: 1.5em;
}
.test > div:
  width: 200px
  attribute-class*="coffee":
    background: red
    font-size: 1.5em

Notes

Custom Attribute

Description: An attribute can be defined through an Object key that matches customAttr.

Edit
ctr('.test > div', {
width: 200px
customAttrForArtClass: {
key: '[class*="art"]'
font-size: 1em
}
customAttrForIsIn: {
key: '[id*="isin"]'
font-size: 2em
}
})
.test > div:
width: 200px
customAttrForArtClass:
key: '[class*="art"]'
font-size: 1em
customAttrForIsIn:
key: '[id*="isin"]'
font-size: 2em
.test > div {
width: 200px;
}
.test > div[class*="art"] {
font-size: 1em;
}
.test > div[id*="isin"] {
font-size: 2em;
}
ctr('.test > div', {
  width: 200px
  customAttrForArtClass: {
    key: '[class*="art"]'
    font-size: 1em
  }
  customAttrForIsIn: {
    key: '[id*="isin"]'
    font-size: 2em
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="art"] {
  font-size: 1em;
}
.test > div[id*="isin"] {
  font-size: 2em;
}
.test > div:
  width: 200px
  customAttrForArtClass:
    key: '[class*="art"]'
    font-size: 1em
  customAttrForIsIn:
    key: '[id*="isin"]'
    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 > div', {
width: 200px
attribute: {
key: '[class*="kool"]' 'class*="te"'
font-size: 1em
}
})
.test > div:
width: 200px
attribute:
key: ['[class*="kool"]', class*="te"]
font-size: 1em
.test > div {
width: 200px;
}
.test > div[class*="kool"] {
font-size: 1em;
}
.test > div[class*="te"] {
font-size: 1em;
}
ctr('.test > div', {
  width: 200px
  attribute: {
    key: '[class*="kool"]' 'class*="te"'
    font-size: 1em
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="kool"] {
  font-size: 1em;
}
.test > div[class*="te"] {
  font-size: 1em;
}
.test > div:
  width: 200px
  attribute:
    key: ['[class*="kool"]', class*="te"]
    font-size: 1em

Multiple Key Merge

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

Edit
ctr('.test > div', {
width: 200px
customAttr: {
key: '[class*="bathtub"]' '[class^="gin"]' '[title~="isin"]'
font-size: 2em
}
'attr-class*="bathtub"': {
color: red
}
'attr-class^="gin"': {
color: black
}
})
.test > div:
width: 200px
customAttr:
key: ['[class*="bathtub"]', '[class^="gin"]', '[title~="isin"]']
font-size: 2em
attr-class*="bathtub":
color: red
attr-class^="gin":
color: black
.test > div {
width: 200px;
}
.test > div[class*="bathtub"] {
color: #f00;
font-size: 2em;
}
.test > div[class^="gin"] {
color: #000;
font-size: 2em;
}
.test > div[title~="isin"] {
font-size: 2em;
}
ctr('.test > div', {
  width: 200px
  customAttr: {
    key: '[class*="bathtub"]' '[class^="gin"]' '[title~="isin"]'
    font-size: 2em
  }
  'attr-class*="bathtub"': {
    color: red
  }
  'attr-class^="gin"': {
    color: black
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="bathtub"] {
  color: #f00;
  font-size: 2em;
}
.test > div[class^="gin"] {
  color: #000;
  font-size: 2em;
}
.test > div[title~="isin"] {
  font-size: 2em;
}
.test > div:
  width: 200px
  customAttr:
    key: ['[class*="bathtub"]', '[class^="gin"]', '[title~="isin"]']
    font-size: 2em
  attr-class*="bathtub":
    color: red
  attr-class^="gin":
    color: black