Ember-custom-css-properties

WARNING: This addon is a proof of concept and should not be used in production yet!

Installation

ember install ember-custom-css-properties

Usage

You may define cssPropertyBindings on all your components, just like attributeBindings this will set and bind your property to a custom css property.

Example:

import Component from `ember-component`
 
export default Component.extend({
  cssPropertyBindings: [ 'fooBar', 'baz' ],
 
  fooBar: 5,
  baz: '5px'
})

Will result in an element like this:

<div style="--foo-bar:5;--baz:5px"></div>

You may define your own property name mapping using a colon:

import Component from `ember-component`
 
export default Component.extend({
  cssPropertyBindings: [ 'fooBar:foobar' ],
 
  fooBar: 5
})

Will result in an element like this:

<div style="--foobar:5"></div>

Currently, javascript numbers, CSS number values and hex colors are treated as safe by default, anything else should be escaped using the Ember.String.htmlSafe() function. Otherwise a warning will be printed to your developer console.

Configuration

By default, this addon adds the ember-custom-css-properties mixin to all components by default. To disable this behaviour, you can set the addToAllComponents in your config file at config/environment to false.

module.exports = function(environment) {
  var ENV = {
    // ...
    'ember-custom-css-properties': {
      addToAllComponents: false
    }
  }
}

After disabling the mixin, you need to add it to all components which want to bind custom CSS properties.

Example:

import Component from 'ember-component'
import CustomCSSPropertyBindings from 'ember-custom-css-properties/mixins/custom-css-properties'
 
export default Component.extend(CustomCSSPropertyBindings, {
  // ...
})

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server