Hyphenated Element

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

Edit
ctr('.test', {
width: 200px
element-after: {
content: 'test'
font-size: 1em
}
elm-first-child: {
font-size: 2em
}
'element-nth-child(2)': {
font-size: 3em
}
})
.test:
width: 200px
element-after:
content: test
font-size: 1em
elm-first-child:
font-size: 2em
element-nth-child(2):
font-size: 3em
.test {
width: 200px;
}
.test::after {
font-size: 1em;
content: "test";
}
.test:first-child {
font-size: 2em;
}
.test:nth-child(2) {
font-size: 3em;
}
ctr('.test', {
  width: 200px
  element-after: {
    content: 'test'
    font-size: 1em
  }
  elm-first-child: {
    font-size: 2em
  }
  'element-nth-child(2)': {
    font-size: 3em
  }
})
.test {
  width: 200px;
}
.test::after {
  font-size: 1em;
  content: "test";
}
.test:first-child {
  font-size: 2em;
}
.test:nth-child(2) {
  font-size: 3em;
}
.test:
  width: 200px
  element-after:
    content: test
    font-size: 1em
  elm-first-child:
    font-size: 2em
  element-nth-child(2):
    font-size: 3em

Notes

Custom Element

Description: An element can be defined through an Object key that matches customEl.

Edit
ctr('.test', {
width: 200px
customElement: {
option: {
key: 'first-line'
}
font-size: 1em
}
customEl-YOLO: {
option: {
key: 'lang(es)'
}
font-size: 2em
}
})
.test:
width: 200px
customElement:
option:
key: first-line
font-size: 1em
customEl-YOLO:
option:
key: lang(es)
font-size: 2em
.test {
width: 200px;
}
.test::first-line {
font-size: 1em;
}
.test:lang(es) {
font-size: 2em;
}
ctr('.test', {
  width: 200px
  customElement: {
    option: {
      key: 'first-line'
    }
    font-size: 1em
  }
  customEl-YOLO: {
    option: {
      key: 'lang(es)'
    }
    font-size: 2em
  }
})
.test {
  width: 200px;
}
.test::first-line {
  font-size: 1em;
}
.test:lang(es) {
  font-size: 2em;
}
.test:
  width: 200px
  customElement:
    option:
      key: first-line
    font-size: 1em
  customEl-YOLO:
    option:
      key: lang(es)
    font-size: 2em

Notes

Before

Description: A before pseudo-element can be defined through an Object key of before.

Edit
ctr('.test', {
width: 200px
before: {
content: 'test'
font-size: 1em
}
})
.test:
width: 200px
before:
content: test
font-size: 1em
.test {
width: 200px;
}
.test::before {
font-size: 1em;
content: "test";
}
ctr('.test', {
  width: 200px
  before: {
    content: 'test'
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "test";
}
.test:
  width: 200px
  before:
    content: test
    font-size: 1em

Notes

After

Description: An after pseudo-element can be defined through an Object key of after.

Edit
ctr('.test', {
width: 200px
after: {
content: 'test'
font-size: 1em
}
})
.test:
width: 200px
after:
content: test
font-size: 1em
.test {
width: 200px;
}
.test::after {
font-size: 1em;
content: "test";
}
ctr('.test', {
  width: 200px
  after: {
    content: 'test'
    font-size: 1em
  }
})
.test {
  width: 200px;
}
.test::after {
  font-size: 1em;
  content: "test";
}
.test:
  width: 200px
  after:
    content: test
    font-size: 1em

Notes

Child

Description: A child pseudo-class can be defined through an Object key that matches child-<identifier>.

Edit
ctr('.test', {
width: 200px
// creates a `> li` selector
'component-li': {
first-child: {
font-size: 1em
}
last-child: {
font-size: 2em
}
'nth-child(2)': {
font-size: 3em
}
'nth-child(22)': {
font-size: 4em
}
}
})
.test:
width: 200px
# creates a `> li` selector
component-li:
first-child:
font-size: 1em
last-child:
font-size: 2em
nth-child(2):
font-size: 3em
nth-child(22):
font-size: 4em
.test {
width: 200px;
}
.test > li:first-child {
font-size: 1em;
}
.test > li:last-child {
font-size: 2em;
}
.test > li:nth-child(2) {
font-size: 3em;
}
.test > li:nth-child(22) {
font-size: 4em;
}
ctr('.test', {
  width: 200px
  // creates a `> li` selector
  'component-li': {
    first-child: {
      font-size: 1em
    }
    last-child: {
      font-size: 2em
    }
    'nth-child(2)': {
      font-size: 3em
    }
    'nth-child(22)': {
      font-size: 4em
    }
  } 
})
.test {
  width: 200px;
}
.test > li:first-child {
  font-size: 1em;
}
.test > li:last-child {
  font-size: 2em;
}
.test > li:nth-child(2) {
  font-size: 3em;
}
.test > li:nth-child(22) {
  font-size: 4em;
}
.test:
  width: 200px
  # creates a `> li` selector
  component-li:
    first-child:
      font-size: 1em
    last-child:
      font-size: 2em
    nth-child(2):
      font-size: 3em
    nth-child(22):
      font-size: 4em

Notes

Type

Description: A type pseudo-class can be defined through an Object key that matches type-<identifier>.

Edit
ctr('.test', {
width: 200px
// creates a `> li` selector
'component-li': {
first-of-type: {
font-size: 1em
}
last-of-type: {
font-size: 2em
}
'nth-last-of-type(2)': {
font-size: 3em
}
}
})
.test:
width: 200px
# creates a `> li` selector
component-li:
first-of-type:
font-size: 1em
last-of-type:
font-size: 2em
nth-last-of-type(2):
font-size: 3em
.test {
width: 200px;
}
.test > li:first-of-type {
font-size: 1em;
}
.test > li:last-of-type {
font-size: 2em;
}
.test > li:nth-last-of-type(2) {
font-size: 3em;
}
ctr('.test', {
  width: 200px
  // creates a `> li` selector
  'component-li': {
    first-of-type: {
      font-size: 1em
    }
    last-of-type: {
      font-size: 2em
    }
    'nth-last-of-type(2)': {
      font-size: 3em
    }
  } 
})
.test {
  width: 200px;
}
.test > li:first-of-type {
  font-size: 1em;
}
.test > li:last-of-type {
  font-size: 2em;
}
.test > li:nth-last-of-type(2) {
  font-size: 3em;
}
.test:
  width: 200px
  # creates a `> li` selector
  component-li:
    first-of-type:
      font-size: 1em
    last-of-type:
      font-size: 2em
    nth-last-of-type(2):
      font-size: 3em

Notes

Multiple Key

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

Edit
ctr('.test', {
width: 200px
customElement: {
key: 'before' 'after' 'first-child' 'nth-of-type(2)'
position: absolute
}
})
'.test':
width: 200px
customElement:
key: ['before', 'after', 'first-child', 'nth-of-type(2)']
position: absolute
.test {
width: 200px;
}
.test::before {
position: absolute;
}
.test::after {
position: absolute;
}
.test:first-child {
position: absolute;
}
.test:nth-of-type(2) {
position: absolute;
}
ctr('.test', {
  width: 200px
  customElement: {
    key: 'before' 'after' 'first-child' 'nth-of-type(2)'
    position: absolute
  }
})
.test {
  width: 200px;
}
.test::before {
  position: absolute;
}
.test::after {
  position: absolute;
}
.test:first-child {
  position: absolute;
}
.test:nth-of-type(2) {
  position: absolute;
}
'.test':
  width: 200px
  customElement:
    key: ['before', 'after', 'first-child', 'nth-of-type(2)']
    position: absolute

Multiple Key Merge

Description: Like element, Objects with the same <identifier> in the same scope are merged.

Edit
ctr('.test', {
width: 200px
customElement: {
key: 'before' 'after' 'first-child'
position: absolute
}
before: {
content: 'ctr'
bottom: 0
}
after: {
content: 'test'
top: 0
}
})
.test:
width: 200px
customElement:
key: [before, after, first-child]
position: absolute
before:
content: ctr
bottom: 0
after:
content: test
top: 0
.test {
width: 200px;
}
.test::before {
bottom: 0;
content: "ctr";
position: absolute;
}
.test::after {
top: 0;
content: "test";
position: absolute;
}
.test:first-child {
position: absolute;
}
ctr('.test', {
  width: 200px
  customElement: {
    key: 'before' 'after' 'first-child'
    position: absolute
  }
  before: {
    content: 'ctr'
    bottom: 0
  }
  after: {
    content: 'test'
    top: 0
  }
})
.test {
  width: 200px;
}
.test::before {
  bottom: 0;
  content: "ctr";
  position: absolute;
}
.test::after {
  top: 0;
  content: "test";
  position: absolute;
}
.test:first-child {
  position: absolute;
}
.test:
  width: 200px
  customElement:
    key: [before, after, first-child]
    position: absolute
  before:
    content: ctr
    bottom: 0
  after:
    content: test
    top: 0