Ember-cli addon to allow CSP-safe inline CSS styling
npm install ember-cli-stylist!  !Code Climate
```bash``
ember install ember-cli-stylist
mixin like so:`javascript
import SharedStylist from 'ember-cli-stylist/mixins/shared-stylist';
export default Ember.Component.extend(SharedStylist,{
attributeBindings: ['stylist:style'],
// your code here
}
`or if you're using tagless component ...
javascript
import SharedStylist from 'ember-cli-stylist/mixins/shared-stylist';
export default Ember.Component.extend(SharedStylist,{
tagName: '',
}
`handlebars
Hello world
`You can optionally include a property in your component
which will specify which styles you want proxied. If you don't specify then the default properties proxied are:> height width minHeight maxHeight minWidth maxWidth fontSize fontFamily fontWeight cursor display
With the Mixin added your component will now proxy style properties in a safe manner (aka, they will be escaped so XSS attacks are made much harder). For your component called
my-component a container might use it like so: {{my-component width='50%' height='100px' fontWeight=800}}
which would result in the style property being set to:
$3
In many cases you may find yourself with a component which you would like to represent/serve as a style but it's name is something other than the style property name. With "aliasing" you can address this problem. For example:
`javascript
styleBindings: [width::_width, height],
`
In this case we've stated our style should only listen for changes on _width and _height_ but the name "_width" is an alias for the style property name "width".
Template Helpers
In addition to the core functionality for observing and projecting style properties to the DOM, this addon provides a few useful helper functions for working with classes.
- classy` - this allows your to list a set of properties which -- if there is a value adds the value with a space prepended.
Dependencies
None.
Version Compatibility
This may very well work with older version of Ember and Ember-CLI but it was intended for:
- Ember 1.13.7+
- Ember-CLI 1.13.7+
You can see the CI results at: Travis Reporting
Repo Contribution
We're open to your creative suggestions but please move past the "idea" stage
and send us a PR so we can incorporate your ideas without killing ourselves. :)
Licensing
This component is free to use under the MIT license:
Copyright (c) 2015 LifeGadget Ltd
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.