All Projects → robinweser → Inline Style Prefixer

robinweser / Inline Style Prefixer

Licence: mit
Autoprefixer for JavaScript style objects

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Inline Style Prefixer

Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-64.64%)
Mutual labels:  autoprefixer
html-sass-jumpstart
Minimal Sass/HTML Template Site - dart sass powered, includes stylelint and prettier, and autoprefix upon build. develop script includes hot-reload via browsersync.
Stars: ✭ 82 (-78.36%)
Mutual labels:  autoprefixer
django-compressor-autoprefixer
Django Compressor CSS filter for autoprefixer
Stars: ✭ 23 (-93.93%)
Mutual labels:  autoprefixer
Deventy
A minimal 11ty starting point for building static websites with modern tools.
Stars: ✭ 157 (-58.58%)
Mutual labels:  autoprefixer
frontie
Frontie is a front-end boilerplate. Gulp | Twig.js | Sass | Autoprefixer | Browsersync | Bootstrap 4 Grid System & Responsive Breakpoints
Stars: ✭ 28 (-92.61%)
Mutual labels:  autoprefixer
php-autoprefixer
CSS autoprefixer written in pure PHP
Stars: ✭ 33 (-91.29%)
Mutual labels:  autoprefixer
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-67.55%)
Mutual labels:  autoprefixer
genesis-sample-task-runner
Gulp workflow for Auto prefixing, Sass compiling, CSS minification, automatic browser reloading and more
Stars: ✭ 23 (-93.93%)
Mutual labels:  autoprefixer
bootstrap-4-boilerplate
Basic Bootstrap 4 Starter Template
Stars: ✭ 50 (-86.81%)
Mutual labels:  autoprefixer
Angular-Gulp-Boilerplate
Clean but full-featured AngularJS boilerplate using Gulp workflow and best practices
Stars: ✭ 30 (-92.08%)
Mutual labels:  autoprefixer
Less Plugin Autoprefix
Adds the ability for less to be post-processed by autoprefixer
Stars: ✭ 171 (-54.88%)
Mutual labels:  autoprefixer
Next Starter Tailwind
Next.js starter styled with Tailwind CSS
Stars: ✭ 225 (-40.63%)
Mutual labels:  autoprefixer
stylus-playground
Stylus environment for practice and testing.
Stars: ✭ 16 (-95.78%)
Mutual labels:  autoprefixer
Dev Toolkit
Universal Development Toolkit for Javascript People
Stars: ✭ 134 (-64.64%)
Mutual labels:  autoprefixer
middleman starter kit
Middleman front-end starter kit
Stars: ✭ 19 (-94.99%)
Mutual labels:  autoprefixer
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: ✭ 126 (-66.75%)
Mutual labels:  autoprefixer
nextsss
Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.
Stars: ✭ 80 (-78.89%)
Mutual labels:  autoprefixer
Babel Preset Env
PSA: this repo has been moved into babel/babel -->
Stars: ✭ 3,550 (+836.68%)
Mutual labels:  autoprefixer
frontend-template
Simple responsive template
Stars: ✭ 27 (-92.88%)
Mutual labels:  autoprefixer
gulp-starter-kit
My Gulp Starter Kit
Stars: ✭ 91 (-75.99%)
Mutual labels:  autoprefixer

inline-style-prefixer

A small, simple and fast vendor prefixer from JavaScript style object.

TravisCI Test Coverage npm downloads gzipped size npm version

Support Us

Support Robin Frischmann's work on Fela and its ecosystem (inline-style-prefixer) directly via Patreon.

Installation

yarn add inline-style-prefixer

If you're still using npm, you may run npm i --save inline-style-prefixer.

Browser Support

It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.

  • Chrome: 55+
  • Android (Chrome): 55+
  • Android (Stock Browser): 5+
  • Android (UC): 11+
  • Firefox: 52+
  • Safari: 9+
  • iOS (Safari): 9+
  • Opera: 30+
  • Opera (Mini): 12+
  • IE: 11+
  • IE (Mobile): 11+
  • Edge: 12+

It will only add prefixes if a property still needs them in one of the above mentioned versions.
Therefore, e.g. border-radius will not be prefixed at all.

Need to support legacy browser versions?
Don't worry - we got you covered. Check this guide.

Usage

import { prefix } from 'inline-style-prefixer'

const style = {
  transition: '200ms all linear',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
}

const output = prefix(style)

output === {
  WebkitTransition: '200ms all linear',
  transition: '200ms all linear',
  MozBoxSizing: 'border-box',
  boxSizing: 'border-box',
  display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ]
  color: 'blue'
}

Usage with TypeScript

You can use TypeScript definition from DefinitelyTyped using @types/inline-style-prefixer

yarn add @types/inline-style-prefixer

# alternatively use npm
npm i --save @types/inline-style-prefixer

Documentation

If you got any issue using this prefixer, please first check the FAQ's. Most cases are already covered and provide a solid solution.

Community

Here are some popular users of this library:

PS: Feel free to add your solution!

Support

Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.

License

inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all contributors.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].