bertdeblock / ember-style-modifier

{{style}} element modifier for ember.js

ember-style-modifier

This addon provides a {{style}} element modifier to set element's style. This allows to set custom CSS of an element without requiring a Content Security Policy style-src-attr: "unsafe-inline".

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install ember-style-modifier

Usage

It expects CSS declarations as named arguments or as a hash as positional argument. Property names are supported in dasherized as well as in camelCase spelling. Value must be a string or undefined. You may set a priority by adding an "!important" suffix.

<p
  {{style
    border="1px"
    padding="1em !important"
  }}
>
</p>

<p
  {{style
    (hash border="1px" padding="1em !important")
  }}
>
</p>

You may pass multiple hashes as positional arguments and combine hashes with named arguments. If multiple hashes are passed and contain CSS declarations for the same property, last one wins. If hashes and named arguments declare same property, named argument wins.

Adding styles to pseudo-elements is not supported.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.