miox-prefix-property

Prefix Property

An in-browser vendor prefixer that doesn't suck.

Simple usage:

import prefix from 'prefix-property';
// or 
const prefix = window.prefixProperty;

// in chrome:
prefix('fontFeatureSettings');      // => 'WebkitFontFeatureSettings'
prefix.css('fontFeatureSettings');  // => '-webkit-font-feature-settings'

Advanced usage:

import { js, css, jsPrefix, cssPrefix } from 'prefix-property';

// in chrome:
js('fontFeatureSettings');      // => 'WebkitFontFeatureSettings'
js('font-feature-settings');    // => 'WebkitFontFeatureSettings'
css('fontFeatureSettings');     // => '-webkit-font-feature-settings'
css('font-feature-settings');   // => '-webkit-font-feature-settings'

// browser's prefix:
jsPrefix();    // => 'Webkit'
cssPrefix();   // => '-webkit-'

// non-prefixed properties:
js('color');              // => 'color'
js('background-color');   // => 'backgroundColor'

The default output of prefixProperty() is a JS-friendly prop (ex: WebkitTransformOriginX).

To get a CSS-friendly prop, use prefixProperty.css() (ex: -webkit-transform-origin-x).

Installation

npm i prefix-property --save

or add /dist/prefix-property.min.js to your html.

Contributing

Clone repo, cd into it, then

npm install && npm run build && npm test

Building

npm run build

Testing

Run the tests on your browser here.

npm test

For live retesting:

npm run test-watch

Browser:

npm run build && open test/test.html

Node:

npm run test-node

Linting

npm run lint

License

MIT