Syntax¶

Description: component is defined as a <combinator> selector that targets the <identifier> node and/or nodes.

ctr('<#selector>', {
  component: {
    key: '<identifier>'
    selector: '<combinator>'
    <...>: <...>
  }
})

<#selector>:
  component:
    key: <identifier>
    selector: <combinator>
    <...>: <...>

<#selector><combinator><identifier> {
  <...>: <...>;
}

Notes

• Regex Match: /^comp$|^component$|^components$|^comp-|^component-|^customComp/i
• MDN Child selectors
• MDN Adjacent sibling selectors
• MDN General sibling selectors
• MDN Descendant selectors

Basic¶

Description: The component Object creates a child <combinator> selector for the <identifier> at the scope level it is defined.

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    font-size: 1em
  }
})

.test:
  width: 200px
  component:
    key: span
    font-size: 1em

.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    font-size: 1em
  }
})

.test {
  width: 200px;
}
.test > span {
  font-size: 1em;
}

.test:
  width: 200px
  component:
    key: span
    font-size: 1em

Notes

• component alias: comp
• The key property can be defined inside or outside the option Object
• Component examples
  • .test > span
  • .test + #id
  • .test ~ .class
  • .test h3

Selector¶

Description: The value for the selector property sets the selector <combinator> for the <identifier>.

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    selector: '+'
    font-size: 2em
  }
})

.test:
  width: 200px
  component:
    key: span
    selector: +
    font-size: 2em

.test {
  width: 200px;
}
.test + span {
  font-size: 2em;
}

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    selector: '+'
    font-size: 2em
  }
})

.test {
  width: 200px;
}
.test + span {
  font-size: 2em;
}

.test:
  width: 200px
  component:
    key: span
    selector: +
    font-size: 2em

Notes

• The selector property can be defined inside or outside the option Object
• 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

Selector False¶

Description: The value of false for the selector property creates a descendant <combinator> selector for the <identifier>.

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    selector: false
    font-size: 3em
  }
})

.test:
  width: 200px
  component:
    key: span
    selector: false
    font-size: 3em

.test {
  width: 200px;
}
.test span {
  font-size: 3em;
}

ctr('.test', {
  width: 200px
  component: {
    key: 'span'
    selector: false
    font-size: 3em
  }
})

.test {
  width: 200px;
}
.test span {
  font-size: 3em;
}

.test:
  width: 200px
  component:
    key: span
    selector: false
    font-size: 3em

Notes

• The selector property can be defined inside or outside the option Object