Socket
Socket
Sign inDemoInstall

ember-css-properties

Package Overview
Dependencies
3
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-css-properties

Easily and safely bind CSS properties using the `style` attribute.


Version published
Weekly downloads
1K
increased by3.73%
Maintainers
1
Install size
56.3 MB
Created
Weekly downloads
 

Readme

Source

ember-css-properties

This addon let's you easily and safely bind CSS properties in your Ember templates. This creates a reusable helper to avoid the Binding Style Attributes Deprecation added in Ember 1.11.

Installation

ember install ember-css-properties

Usage

The ember-css-properties addon provides a handlebars helper called css-properties that can be used to safely bind CSS properties to elements in templates. This will use cssesc to escape CSS safe strings for each property, and it will return an htmlSafe string to handle the deprecation warning. For example to bind the background color of a div to a favoriteColor property:

<div class="headline" style="{{css-properties background-color=favoriteColor}}"></div>

The css-properties helper can also be used with multiple style properties at once:

<div class="headline" style="{{css-properties background-color=favoriteColor color=secondFavoriteColor}}"></div>

Finally for libraries and larger computed styles, the css-properties function can also be used with a single object of style properties (see notes and warnings below):

<div class="headline" style="{{css-properties myStyles}}"></div>
myStyles: {
  color: 'red',
  width: '20%',
  'background-image': 'url(http://placecage.com/200/200)'
}

Notes and Warnings!!

This addon only creates escaped CSS strings using cssesc. For performance, flexibility, and complexity reasons it does not:

  • Transform camelCase property names (ex borderRight to border-right)
  • Split deeply nested objects (ex border: { right: '1px solid black } to border-right: 1px solid black)
  • Apply themes
  • Reflect over existing styles
  • Compute units

The css-properties helper can be used as a lower level primitive by component styling libraries or other packages to provide this kind of functionality.

Supported Versions of Ember

This addon is tested against Ember >2.12, but should work with all 2.* releases and possibly even further back. Please submit an issue or PR if this does not support your Ember release.

License

MIT

Keywords

FAQs

Last updated on 12 Dec 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc