Package Exports

inline-style-transformer

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 (inline-style-transformer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

[![Build Status](https://travis-ci.org/rofrischmann/inline-style-transformer.svg)](https://travis-ci.org/rofrischmann/inline-style-transformer) [![Code Climate](https://codeclimate.com/github/rofrischmann/inline-style-transformer/badges/gpa.svg)](https://codeclimate.com/github/rofrischmann/inline-style-transformer) [![npm version](https://badge.fury.io/js/inline-style-transformer.svg)](http://badge.fury.io/js/inline-style-transformer) ![Dependencies](https://david-dm.org/rofrischmann/inline-style-transformer.svg)

Usage

npm install inline-style-transformer

toCSS(styles [, unit])

Takes a styles object and generates a valid CSS string. Property names get converted to dash-case and plain numbers (if they're not unitless properties) get a unit applied (default = px).

import { toCSS } from 'inline-style-transformer'

const styles = {
    fontSize: 15,
    color: 'red',
    transform: 'rotate(30deg)'
}

// basic object to CSS string
const CSS = toCSS(styles)
CSS === 'font-size:15px;color:red;transform:rotate(30deg)'

// custom unit transformation
CSS = toCSS(styles, 'em')
CSS === 'font-size:15em;color:red;transform:rotate(30deg)'

toObject(CSS)

Converts a CSS string to a optimized javascript object. Property names get camel-cased and number values get converted to pure numbers if possible.

import { toObject } from 'inline-style-transformer'

const CSS = 'font-size:15px;color:red;transform:rotate(30deg)'

// values with px also get
// converted to pure numbers
const styles = toObject(CSS)
styles === {fontSize: 15, color: 'red', transform: 'rotate(30deg)'}

Advanced

You can also use the new ECMAScript 2015 template strings. This let's you effectively write CSS within javascript.
objectifyCSS will automatically normalize all tabs and line-breaks.

const CSS = `
    font-size: 15px;
    color: red;
    transform: rotate(30deg)
`

const styles = toObject(CSS)
styles === {fontSize: 15, color: 'red', transform: 'rotate(30deg)'}

License

inline-style-transformer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Contributing

I would love to see people getting involved.
If you have a feature request please create an issue. Also if you're even improving inline-style-transformer by any kind please don't be shy and send a pull request to let everyone benefit.

Issues

If you're having any issue please let me know as fast as possible to find a solution a hopefully fix the issue. Try to add as much information as possible such as your environment, exact case, the line of actions to reproduce the issue.

Pull Requests

If you are creating a pull request, try to use commit messages that are self-explanatory. Also always add some tests unless it's totally senseless (add a reason why it's senseless) and test your code before you commit so Travis won't throw errors.