Inline Style Prefixer

7.0.1 · active · verified Sun Apr 19

inline-style-prefixer is a JavaScript library designed to automatically add vendor prefixes to CSS properties within JavaScript style objects at runtime. Currently stable at version 7.0.1, the library has seen sporadic major releases (e.g., a jump from v3 to v7) but maintains active development within its major versions. Its primary function is to ensure cross-browser compatibility for modern CSS properties by intelligently applying prefixes only where necessary for its supported browser matrix (e.g., Chrome 55+, Firefox 52+), rather than prefixing all properties indiscriminately. Key differentiators include its small footprint, speed, and simplicity, offering a functional API. It is widely adopted by popular styling-in-JS libraries such as Aphrodite, Fela, Material UI, and styled-components, providing a reliable solution for managing vendor prefixes in complex web applications.

Common errors

```
TypeError: inline_style_prefixer__WEBPACK_IMPORTED_MODULE_0__.prefix is not a function
```
cause Attempting to call 'prefix' on a CommonJS module import without destructuring, or importing an older default export that no longer exists.

fix Ensure you are using named imports for ESM: `import { prefix } from 'inline-style-prefixer'` or destructuring for CJS: `const { prefix } = require('inline-style-prefixer')`.
```
ReferenceError: Prefixer is not defined
```
cause Attempting to use the old class-based API (`new Prefixer()`) from versions 3.x or earlier with `inline-style-prefixer` v4 or newer.

fix Update your code to use the modern functional API: `import { prefix } from 'inline-style-prefixer'; prefix(style)` or `import { createPrefixer } from 'inline-style-prefixer'`.

Warnings

breaking Major refactor in v4 changed the API from a class-based `new Prefixer(config)` instantiation to a functional approach exporting `prefix` and `createPrefixer`.
Fix: Update import statements and usage from `new Prefixer().prefix(style)` to `import { prefix } from 'inline-style-prefixer'; prefix(style)` for simple cases, or `import { createPrefixer } from 'inline-style-prefixer'; const customPrefixer = createPrefixer(config); customPrefixer.prefix(style)` for custom configurations.
gotcha The library only applies prefixes for properties that *still require* them in its specified supported browser versions (e.g., Chrome 55+, Firefox 52+). Properties like `border-radius` which are fully standardized in modern browsers will not be prefixed.
Fix: Review the 'Browser Support' and 'Data Reference' documentation to understand which properties are prefixed. For legacy browser support, use a custom prefixer configuration as described in the official guides.
gotcha TypeScript users must install `@types/inline-style-prefixer` separately as the package does not bundle its own type definitions. Without it, you'll encounter TypeScript errors.
Fix: Install the official type definitions: `npm install --save-dev @types/inline-style-prefixer` or `yarn add -D @types/inline-style-prefixer`.

Install

npm install inline-style-prefixer npm
yarn add inline-style-prefixer yarn
pnpm add inline-style-prefixer pnpm

Imports

prefix
wrong:
```
import Prefixer from 'inline-style-prefixer'; const prefix = new Prefixer().prefix
```
correct:
```
import { prefix } from 'inline-style-prefixer'
```
The primary function for prefixing style objects. This is the recommended ESM import for modern usage since v4.
prefix (CommonJS)
wrong:
```
const prefix = require('inline-style-prefixer')
```
correct:
```
const { prefix } = require('inline-style-prefixer')
```
CommonJS usage requires destructuring the named 'prefix' export. Attempting to call the module directly will result in an error.
createPrefixer
wrong:
```
import { Prefixer } from 'inline-style-prefixer'
```
correct:
```
import { createPrefixer } from 'inline-style-prefixer'
```
Used for creating a custom prefixer instance with specific configurations (e.g., for legacy browser support). The class 'Prefixer' was removed in v4.

Quickstart

Demonstrates how to import and use the `prefix` function to automatically add vendor prefixes to a JavaScript style object.

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

const style = {
  transition: '200ms all linear',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue',
  // Example of a property that won't be prefixed in modern browsers
  borderRadius: '5px'
};

const prefixedStyle = prefix(style);

console.log(prefixedStyle);
/* Example output (may vary based on userAgent and browserlist):
{
  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',
  borderRadius: '5px'
}*/

view raw JSON →