Custom CSS Property bindings for ember components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
bower.json
ember-cli-build.js
index.js
package.json
testem.json

README.md

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