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

Regex match: /^element-|^elm-/i
For reference, the element- or elm- 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 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

Regex match: /^customEl/i
This syntax requires you define a key property to specify the <identifier>

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

Regex match: /^before$/i

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

Regex match: /^after$/i

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

Regex match: /-child$|-child$\d+$$/i

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

Regex match: /-type$|-type$\d+$$/i

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

Hyphenated Element¶

Custom Element¶

Before¶

After¶

Child¶

Type¶

Multiple Key¶

Multiple Key Merge¶

Compile Status: valid

Help

Resourses

Account

Hyphenated Element¶

Custom Element¶

Before¶

After¶

Child¶

Type¶

Multiple Key¶

Multiple Key Merge¶

Compile Status: valid

Social

Help

Resourses

Account