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

Basic

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

Edit
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

Selector

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

Edit
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

Selector False

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

Edit
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