Hyphenated Extend¶

Description: A specific extend target can be defined through a hyphenated Object key that matches extend-<class>.

ctrSetClass('Box', {
  $$: {
    width: 200px
    height: 200px
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  background: blue
  extend-Box: {
    height: 400px
  }
})

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 200px
  width: $width$
  height: $height$

.test:
  background: blue
  extend-Box:
    height: 400px

.test {
  width: 200px;
  height: 400px;
  background: #00f;
}

ctrSetClass('Box', {
  $$: {
    width: 200px
    height: 200px
  }
  width: '$width$'
  height: '$height$'
})

ctr('.test', {
  background: blue
  extend-Box: {
    height: 400px
  }
})

.test {
  width: 200px;
  height: 400px;
  background: #00f;
}

ctr:::setClass:Box:
  $$:
    width: 200px
    height: 200px
  width: $width$
  height: $height$

.test:
  background: blue
  extend-Box:
    height: 400px

Notes

• Regex match: /^extend-/i
• A class value supersedes the hyphenated value

Key Modifier¶

Description: Object key conflicts can be resolved through key modifier notation that matches <class>:::<modifier>.

ctrSetClass('HoverSingle', {
  $$: {
    property: 'background'
    value: blue
  }
  hover: {
    $property$: '$value$'
  }
})

ctr('.test', {
  width: 200px
  extend: {
    HoverSingle: {
      value: red
    }
    'HoverSingle:::color': {
      property: color
      value: red
    }
  }
})

ctr:::setClass:HoverSingle:
  $$:
    property: background
    value: blue
  hover:
    $property$: $value$

.test:
  width: 200px
  extend:
    HoverSingle:
      value: red
    HoverSingle:::color:
      property: color
      value: red

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctrSetClass('HoverSingle', {
  $$: {
    property: 'background'
    value: blue
  }
  hover: {
    $property$: '$value$'
  }
})

ctr('.test', {
  width: 200px
  extend: {
    HoverSingle: {
      value: red
    }
    'HoverSingle:::color': {
      property: color
      value: red
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr:::setClass:HoverSingle:
  $$:
    property: background
    value: blue
  hover:
    $property$: $value$

.test:
  width: 200px
  extend:
    HoverSingle:
      value: red
    HoverSingle:::color:
      property: color
      value: red

Notes

• For reference, :::<modifier> is just removed and disregarded