Registry / web-framework / inline-style-prefixer

inline-style-prefixer

library7.0.1jsnpmunverified

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.

web-framework

npm install inline-style-prefixer

github ↗package ↗

INSTALL

IMPORT

SIG · INLINE-STYLE-PREFI

inline-style-prefixer

web-frameworkjavascriptv7.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

prefix

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

✗ import Prefixer from 'inline-style-prefixer'; const prefix = new Prefixer().prefix

The primary function for prefixing style objects. This is the recommended ESM import for modern usage since v4.

prefix (CommonJS)

✓ const { prefix } = require('inline-style-prefixer')

✗ 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

✓ import { createPrefixer } from 'inline-style-prefixer'

✗ import { Prefixer } 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.

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' }*/

Debug

Known issues

breakingMajor 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.

affects: >=4.0

gotchaThe 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.

affects: >=1.0

gotchaTypeScript 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`.

affects: >=1.0

Errors

Common errors & fixes

TypeError: inline_style_prefixer__WEBPACK_IMPORTED_MODULE_0__.prefix is not a function

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

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'`.

Upgrade

Version history

7.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/robinweser/inline-style-prefixer ↗

packagehttps://www.npmjs.com/package/inline-style-prefixer ↗