Key¶

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

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.

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

• Unfortunately, due to Stylus, if you want to use the comma <combinator> such as div, p you have to use a declarative instance of ctr

appendKey¶

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

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 must be defined in the option Object
• Similar to the target appendTo option, instead of appending to a specific <identifier>, appendKey appends the <identifier> to the parent <identifier>

appendKey Shorthand¶

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

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

• Hyphenated component notation uses a single hyphen while the appendKey shorthand notation uses two hyphens

appendKey Multiple¶

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

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.

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