Hyphenated Attribute¶

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

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

• Regex match: /^attribute-|^attr-/i
• For reference, the attribute- or attr- part of the Object key is removed and what is remaining will be used as the <identifier>
• A key value supersedes the hyphenated value

Custom Attribute¶

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

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

• Regex match: /^customAttr/i
• This syntax requires you to define a key property to specify the <identifier>

Multiple Key¶

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

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.

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