Package Exports

ember-cli-custom-properties
ember-cli-custom-properties/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ember-cli-custom-properties) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ember-cli-custom-properties

Adds support for CSS custom properties (variables) to your application

Installation

ember install ember-cli-custom-properties

Features

Uses modifiers to apply custom properties
Maps component attributes to CSS custom properties
Fast, lightweight implementation
Only updates CSS custom properties when its bound component value changes
Zero configuration design
Production ready

Usage

Starting with Ember 2.17 or later, we switched to using modifiers to set custom properties on an element. This design decision makes it a lot easier to apply a custom property at any level of the application, including top-level templates.

Here is the new an improved way for setting a custom property. You just need to make sure the variables passed into the modifier is tracked.

<div {{custom-property "--background-image" backgroundImage}}></div>

The first parameter to the modifier is the custom property in from your CSS file. The second parameter is the value of the custom property.

Removing a Property

You remove a CSS custom property value by simply setting its bound component property to null or undefined.

Happy Coding!