{"id":11085,"library":"inline-style-prefixer","title":"Inline Style Prefixer","description":"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.","status":"active","version":"7.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/robinweser/inline-style-prefixer","tags":["javascript","react","react styling","prefixer","inline styles","autoprefixer","vendor prefix","userAgent"],"install":[{"cmd":"npm install inline-style-prefixer","lang":"bash","label":"npm"},{"cmd":"yarn add inline-style-prefixer","lang":"bash","label":"yarn"},{"cmd":"pnpm add inline-style-prefixer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary function for prefixing style objects. This is the recommended ESM import for modern usage since v4.","wrong":"import Prefixer from 'inline-style-prefixer'; const prefix = new Prefixer().prefix","symbol":"prefix","correct":"import { prefix } from 'inline-style-prefixer'"},{"note":"CommonJS usage requires destructuring the named 'prefix' export. Attempting to call the module directly will result in an error.","wrong":"const prefix = require('inline-style-prefixer')","symbol":"prefix (CommonJS)","correct":"const { prefix } = require('inline-style-prefixer')"},{"note":"Used for creating a custom prefixer instance with specific configurations (e.g., for legacy browser support). The class 'Prefixer' was removed in v4.","wrong":"import { Prefixer } from 'inline-style-prefixer'","symbol":"createPrefixer","correct":"import { createPrefixer } from 'inline-style-prefixer'"}],"quickstart":{"code":"import { prefix } from 'inline-style-prefixer';\n\nconst style = {\n  transition: '200ms all linear',\n  boxSizing: 'border-box',\n  display: 'flex',\n  color: 'blue',\n  // Example of a property that won't be prefixed in modern browsers\n  borderRadius: '5px'\n};\n\nconst prefixedStyle = prefix(style);\n\nconsole.log(prefixedStyle);\n/* Example output (may vary based on userAgent and browserlist):\n{\n  WebkitTransition: '200ms all linear',\n  transition: '200ms all linear',\n  MozBoxSizing: 'border-box',\n  boxSizing: 'border-box',\n  display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ],\n  color: 'blue',\n  borderRadius: '5px'\n}*/","lang":"javascript","description":"Demonstrates how to import and use the `prefix` function to automatically add vendor prefixes to a JavaScript style object."},"warnings":[{"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.","message":"Major refactor in v4 changed the API from a class-based `new Prefixer(config)` instantiation to a functional approach exporting `prefix` and `createPrefixer`.","severity":"breaking","affected_versions":">=4.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Install the official type definitions: `npm install --save-dev @types/inline-style-prefixer` or `yarn add -D @types/inline-style-prefixer`.","message":"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.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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')`.","cause":"Attempting to call 'prefix' on a CommonJS module import without destructuring, or importing an older default export that no longer exists.","error":"TypeError: inline_style_prefixer__WEBPACK_IMPORTED_MODULE_0__.prefix is not a function"},{"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'`.","cause":"Attempting to use the old class-based API (`new Prefixer()`) from versions 3.x or earlier with `inline-style-prefixer` v4 or newer.","error":"ReferenceError: Prefixer is not defined"}],"ecosystem":"npm"}