Hyphentated Non¶

Description: A non <identifier> can be defined through a hyphenated Object key that matches non-<identifier> or not-<identifier>

ctr('.test', {
  width: 100px
  'non-.bad': {
    font-size: 1em
  }
  // Does not have to be String but...
  // better be safe than sorry
  'not-span': {
    font-size: 2em
  }
})

.test:
  width: 100px
  non-.bad:
    font-size: 1em
  # Does not have to be String but...
  # better be safe than sorry
  not-span:
    font-size: 2em

.test {
  width: 100px;
}
.test:not(.bad) {
  font-size: 1em;
}
.test:not(span) {
  font-size: 2em;
}

ctr('.test', {
  width: 100px
  'non-.bad': {
    font-size: 1em
  }
  // Does not have to be String but...
  // better be safe than sorry
  'not-span': {
    font-size: 2em
  }
})

.test {
  width: 100px;
}
.test:not(.bad) {
  font-size: 1em;
}
.test:not(span) {
  font-size: 2em;
}

.test:
  width: 100px
  non-.bad:
    font-size: 1em
  # Does not have to be String but...
  # better be safe than sorry
  not-span:
    font-size: 2em

Notes

• Regex match: /^non-|^not-/i
• For reference, the not- or non- 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 Non¶

Description: A non <identifier> can be defined through an Object key that matches customNo.

ctr('.test', {
  width: 200px
  customNon: {
    key: 'span'
    font-size: 1em
  }
  customNotWrap: {
    key: '#x-or-y'
    font-size: 2em
  }
})

.test:
  width: 200px
  customNon:
    key: span
    font-size: 1em
  customNotWrap:
    key: '#x-or-y'
    font-size: 2em

.test {
  width: 200px;
}
.test:not(span) {
  font-size: 1em;
}
.test:not(#x-or-y) {
  font-size: 2em;
}

ctr('.test', {
  width: 200px
  customNon: {
    key: 'span'
    font-size: 1em
  }
  customNotWrap: {
    key: '#x-or-y'
    font-size: 2em
  }
})

.test {
  width: 200px;
}
.test:not(span) {
  font-size: 1em;
}
.test:not(#x-or-y) {
  font-size: 2em;
}

.test:
  width: 200px
  customNon:
    key: span
    font-size: 1em
  customNotWrap:
    key: '#x-or-y'
    font-size: 2em

Notes

• Regex match: /^customNo/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
  non: {
    key: '.today' 'span'
    font-size: 1em
  }
})

.test:
  width: 200px
  non:
    key: [.today, span]
    font-size: 1em

.test {
  width: 200px;
}
.test:not(.today) {
  font-size: 1em;
}
.test:not(span) {
  font-size: 1em;
}

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

.test {
  width: 200px;
}
.test:not(.today) {
  font-size: 1em;
}
.test:not(span) {
  font-size: 1em;
}

.test:
  width: 200px
  non:
    key: [.today, span]
    font-size: 1em

Multiple Key Merge¶

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

ctr('.test', {
  width: 200px
  customNon: {
    key: '.today' 'span'
    font-size: 1em
  }
  'non-p': {
    color: red
    font-size: 2em
  }
  'non-.today': {
    color: blue
  }
})

.test:
  width: 200px
  customNon:
    key: [.today, span]
    font-size: 1em
  non-p:
    color: red
    font-size: 2em
  non-.today:
    color: blue

.test {
  width: 200px;
}
.test:not(.today) {
  color: #00f;
  font-size: 1em;
}
.test:not(span) {
  font-size: 1em;
}
.test:not(p) {
  color: #f00;
  font-size: 2em;
}

ctr('.test', {
  width: 200px
  customNon: {
    key: '.today' 'span'
    font-size: 1em
  }
  'non-p': {
    color: red
    font-size: 2em
  }
  'non-.today': {
    color: blue
  }
})

.test {
  width: 200px;
}
.test:not(.today) {
  color: #00f;
  font-size: 1em;
}
.test:not(span) {
  font-size: 1em;
}
.test:not(p) {
  color: #f00;
  font-size: 2em;
}

.test:
  width: 200px
  customNon:
    key: [.today, span]
    font-size: 1em
  non-p:
    color: red
    font-size: 2em
  non-.today:
    color: blue