Autoprefixer for JavaScript style objects

Last update: Feb 25, 2022

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.

GitHub

https://github.com/rofrischmann/inline-style-prefixer
Comments
  • 1. Added support for combined vendor prefixing

    Passing * to the Prefixer constructor as the userAgent will combine prefixes for all vendors. If no user agent is specified and not exposed in the environment, we default to this mode.

    Useful for universal / isomorphic apps as we don't always know the user agent before rendering on the server. This option is good incase you wish to cache server generated pages and distribute to all browsers, you can be assured the markup will be the same as the client rendered version. The drawback is there's no support for vendor alternatives (eg: ie flexbox)

    Reviewed by TheUltDev at 2015-10-24 04:18
  • 2. Supporting legacy syntax?

    Should determine if legacy syntax should be supported and resolved as well. e.g. all those different linear-gradient specs. Just take a look at http://www.colorzilla.com/gradient-editor/

    Sure those should be prefixed to work properly at all. But also there is a different syntax within e.g. the old webkit version which would be broken if using a new syntaxed linear-gradient.

    @ianobermiller @necolas Would be great to have an opinion on this. I would say yes, we should do that, but it would enlarge the whole output file as well.

    Reviewed by robinweser at 2015-09-29 17:43
  • 3. Add basic support for CSS grid prefixing

    This PR implements very basic style prefixing for CSS grid. This is the first step to solving https://github.com/rofrischmann/inline-style-prefixer/issues/173.

    First, here's what I added:

    • Prefixing for display: grid | inline-grid
    • Prefixing / expansion for grid-column | grid-column-start | grid-column-end | grid-row | grid-row-start | grid-row-end
    • Prefixing for align-self and justify-self
    • Prefixing for grid-template-columns | grid-template-rows

    Here's what I did not add (beyond the properties not listed above, obviously):

    • Support for span values
    • repeat conversion (e.g., repeat(2, 1fr) -> (1fr)[2])
    • Auto-placement support
    • Support for negative values in grid-column and grid-row (see caveats at https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/)

    This provides basic support for IE10/11 and early versions of Edge. The rest is difficult to add given the limited ability of this program to set styles on child elements (a general limitation of style composability imposed by React). I think it's possible to convert the repeat syntax and add basic span support, but that looks like it may be reaching beyond the scope of this program.

    Ah! One last note: I noticed that the grid values in propertyMap.js may be generating invalid styles. Should I try to trim that down?

    Reviewed by etripier at 2019-03-03 04:31
  • 4. Simpler Hacks

    We should embrace a more modular, clean, simple and straight forward method to define hacks. E.g. just a plain object with the affected key, an optional condition and of course a callback function which provides both key and value as well as the whole style object.

    This would also simplify the act of testing each special hack.

    Reviewed by robinweser at 2015-09-26 08:32
  • 5. display: flex prefixing with Chrom 47 on iOS 8.4

    Hey, Using these two UA strings reproduces a problem where 'display: flex" is not prefixed on chrome 47 with iOS 8.4 when it should be. Safari on the same OS gets the prefix correctly.

    var uaChrome = 'Mozilla/5.0 (iPad; CPU OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/12H321 Safari/600.1.4';
    var uaSafari = 'Mozilla/5.0 (iPad; CPU OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H321 Safari/600.1.4';
    

    I guess the problem stems from the fact that this OS forces chrome to use the native OS web view rendering.

    Here is a CodePen with the repro in case needed. http://codepen.io/anon/pen/YWLGaj Let me know if any more info is required.

    And thanks!

    Reviewed by yoadsn at 2016-03-09 21:59
  • 6. Support passing array of user agents to prefix for multiple browsers

    I'd like to pre-render some mostly static React pages, and serve them from S3. Because I don't know the user-agent at render time, I'd like to pre-render with all (or some of) the vendor prefixes set. Is that possible?

    Reviewed by emilecantin at 2015-12-03 19:53
  • 7. Add support for Samsung Browser

    While the Samsung Browser seems to be just a fork of the stock Android Browser, it doesn't have the same userAgent. This is a user Agent from a test device:

    "Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-G900F Build/MMB29M) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36"
    

    I've been able to work around this by adding an exception to when I create the prefixer, that passes user agent as Android Mobile, when the actual user agent string contains SamsungBrowser.

    This might be as simple as adding [ 'samsung' ] to the list of android detections.

    Reviewed by kitten at 2016-10-25 11:27
  • 8. flexboxIE and flexboxOld fail to check in case of value is null

    I'm not really sure whether this is a bug or not as I encountered this issue when working with another project (Material-UI) that is using this library.

    Basically the error occurs when the property is _display_ but the value is _null_ (_undefined_ is also a possibility?)

    flexboxIE.js

    
    if ((properties[property] || property === 'display' && value.indexOf('flex') > -1) && (browser === 'ie_mob' || browser === 'ie') && version == 10) {
    
    

    flexboxOld.js

    if ((properties[property] || property === 'display' && value.indexOf('flex') > -1) && (browser === 'firefox' && version < 22 || browser === 'chrome' && version < 21 || (browser === 'safari' || browser === 'ios_saf') && version <= 6.1 || browser === 'android' && version < 4.4 || browser === 'and_uc')) {
    

    To get rid of the error temporary I added the check for value : typeof value === 'string'.

    Reviewed by divinetouch at 2016-03-07 02:20
  • 9. Invalid failover values

    Hi there!

    First of all thanks for a nice product (I mean Fela, of course)! It is not so easy to use as some other competitors, but seems to be more extensible and feature rich, so after the long comparison I have decided to is it as a primary styling tool :)

    I have found, that properties like width: -webkit-calc(33.3% - 20px),-moz-calc(33.3% - 20px),calc(33.3% - 20px); are not accepted by Yandex Browser, which is Chromium based. I have checked in the latest dev Chrome - the same thing. So I believe, it would be better, to provide fallbacks more traditional way:

    width: -moz-calc(33.3% - 20px);
    width: -webkit-calc(33.3% - 20px);
    width: calc(33.3% - 20px);
    

    Actually, the fallbackValue plugin already does it this way, so I hope it could be reused easily.

    Reviewed by priezz at 2016-07-12 15:57
  • 10. Replace OR with AND operator

    Changed the operators in flexboxIE.js and flexboxOld.js

    The issue with the 'OR' operator is that it will create issues in pages which does not have a display property.

    Changing the OR operator with AND will do the work.

    Closes https://github.com/rofrischmann/inline-style-prefixer/issues/70

    Reviewed by tintin1343 at 2016-03-07 18:38
  • 11. Add support for tap-highlight-color

    Could we add the support for the tap-highlight-color property? At first, I thought that it would be a good idea to not use it, but as pointed out by @owencm https://github.com/callemall/material-ui/issues/3410#issuecomment-186968242. That would be better to handle it.

    Reviewed by oliviertassinari at 2016-02-22 09:48
  • 12. Bump prismjs from 1.22.0 to 1.27.0

    Bumps prismjs from 1.22.0 to 1.27.0.

    Release notes

    Sourced from prismjs's releases.

    v1.27.0

    Release 1.27.0

    v1.26.0

    Release 1.26.0

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    v1.23.0

    Release 1.23.0

    Changelog

    Sourced from prismjs's changelog.

    1.27.0 (2022-02-17)

    New components

    Updated components

    Updated plugins

    Other

    • Core
      • Added better error message for missing grammars (#3311) 2cc4660b

    1.26.0 (2022-01-06)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-26 01:37
  • 13. perf: reduce bundle size

    Changes to reduce the final bundle size:

    • Extract the constants (e.g. ['-webkit-', '-moz-', '']).
    • Prefer Array#indexOf over Object#hasOwnProperty when possible.
    • Prefer ternary expressions
    Reviewed by SukkaW at 2022-02-24 20:04
  • 14. Incorrectly prefixes a mask-image property with a radial-gradient value

    With this style object:

    {
      maskImage: 'radial-gradient(closest-side, black, transparent)'
    }
    

    Using inline-style-prefixer (via fela-preset-web), the resulting prefixed properties and rules are all unusable in Chrome:

    -webkit-mask-image: -webkit-radial-gradient(closest-side, black, transparent),-moz-radial-gradient(closest-side, black, transparent),radial-gradient(closest-side, black, transparent);
    mask-image: -webkit-radial-gradient(closest-side, black, transparent);
    mask-image: -moz-radial-gradient(closest-side, black, transparent);
    mask-image: radial-gradient(closest-side, black, transparent);
    
    Screen Shot 2021-02-03 at 11 18 10 pm

    Here is the correct result from stylis (via styled-jsx), that works in Chrome:

    -webkit-mask-image: radial-gradient(closest-side,black,transparent);
    mask-image: radial-gradient(closest-side,black,transparent);
    
    Screen Shot 2021-02-03 at 11 17 39 pm
    Reviewed by jaydenseric at 2021-02-03 12:08
  • 15. Not converting values from css grid properties

    Reproduction link For reference: CSS Grid in IE: Debunking Common IE Grid Misconceptions

    Current behavior

    IE prefix for css grid are correctly added but with improper values:

    {
        gridTemplateColumns: 'repeat(3, 1fr)' 
    }
    

    Generates:

    {
        gridTemplateColumns: 'repeat(3, 1fr)', 
        msGridTemplateColumns: 'repeat(3, 1fr)',
    }
    

    Expected

    It should convert values to work properly:

    {
        gridTemplateColumns: 'repeat(3, 1fr)' 
    }
    

    Should generate

    {
        gridTemplateColumns: 'repeat(3, 1fr)', 
        msGridTemplateColumns: '(1fr)[3]', //or '1fr 1fr 1fr'
    }
    
    Reviewed by assuncaocharles at 2020-05-06 13:41
  • 16. Fix backgroundClip

    As per https://github.com/robinweser/inline-style-prefixer/issues/159#issuecomment-470307093 the prefixing for backgroundClip is applied to the value rather than the property.

    Reviewed by necolas at 2020-04-27 18:19
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

May 17, 2022
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

May 7, 2022
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!
CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid ?? What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021
CSS-in-JS solution with style-to-state bindings, SSR, and a next-level developer experience.

A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SRR and next-level developer experience. It includes a framework-agnostic implementation

Mar 23, 2022
Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Isomorphic CSS style loader for Webpack CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rend

May 7, 2022
A tool for creating ratio-based style systems built in React.
A tool for creating ratio-based style systems built in React.

Rational Design is a tool for generating type-scales for greater consistency in design systems or web design projects. It’s built with React Hooks, SCSS, Webpack, and npm scripts, and is fully responsive.

Dec 29, 2021
A terminal style/styled portfolio website made with <3 using react.

A Terminal Styled Portfolio Website. ??‍??, a terminal style/styled portfolio website made with <3 using react.

May 14, 2022
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

May 13, 2022
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

May 15, 2022
β™ž JavaScript mobile-first chess.

β™ž JavaScript mobile-first chess client. Play Documentation Changelog How does it work? The game state and the game view are separated. The view re-ren

Aug 27, 2021
Immutable data structures for JavaScript which are backwards-compatible with normal JS Arrays and Objects.

seamless-immutable Immutable JS data structures which are backwards-compatible with normal Arrays and Objects. Use them in for loops, pass them to fun

May 8, 2022
React-animate-style - A react integration of animate.css (animate.style)

react-animate-style Easy animate react app with animate.css library Install With

Jan 31, 2022
A lightweight library to create reactive objects

Reactivity As the name says, Reactivity is a lightweight javascript library to create simple reactive objects. Inspired in Redux and Vuex Get started

Oct 28, 2021
A search box that filters the provided array of objects

<ReactSearchAutocomplete> A <ReactSearchAutocomplete> is a fully customizable search box where the user can type text and filter the results. It relie

May 8, 2022
Runtime type checking for React props and similar objects

prop-types Runtime type checking for React props and similar objects. You can use prop-types to document the intended types of properties passed to co

May 8, 2022
React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations
React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations

React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations

Apr 30, 2022
An in-memory git-like repository for objects for when you need to keep the history around for a bit longer.

An in-memory git-like repository for objects for when you need to keep the history around for a bit longer.

Mar 13, 2022
A tiny React utils which gives uncontrolled input elements a power of namespaces, and allows constructing complex objects

A tiny React utils which gives uncontrolled input elements a power of namespaces, and allows constructing complex objects

Apr 26, 2022