Hyphenated Component¶

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

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

• Regex match: /^component-|^comp-/i
• For reference, the component- or comp- 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 Component¶

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

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

• Regex match: /^customComp/i
• This syntax requires you 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', {
  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.

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