# style-vendorizer > Tiny CSS vendor prefixer and property alias mapper for runtime styling solutions Latest version **2.2.3** (published 2022-06-25) · MIT license · 0 weekly downloads ## Install ```sh npm install style-vendorizer pnpm add style-vendorizer yarn add style-vendorizer bun add style-vendorizer ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.3 | | Published | 2022-06-25 | | First published | 2020-09-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 24.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 58 | | Author | Kristóf Poduszló | | Maintainers | kripod | | Keywords | css, prefixer, alias, mapper, resolver | ## Links - npm: https://www.npmjs.com/package/style-vendorizer - Repository: https://github.com/kripod/style-vendorizer - Homepage: https://github.com/kripod/style-vendorizer#readme - Issues: https://github.com/kripod/style-vendorizer/issues - npm.io page: https://npm.io/package/style-vendorizer ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 2.2.3 (latest) — 2022-06-25 - 2.2.2 — 2022-06-25 - 2.2.1 — 2022-06-25 - 2.2.0 — 2022-06-25 - 2.1.1 — 2021-08-14 - 2.1.0 — 2021-08-14 - 2.0.0 — 2020-10-17 - 1.0.1 — 2020-09-13 - 1.0.0 — 2020-09-13 ## README # style-vendorizer Tiny CSS vendor prefixer and property alias mapper for runtime styling solutions. [![npm](https://img.shields.io/npm/v/style-vendorizer)](https://www.npmjs.com/package/style-vendorizer) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/style-vendorizer)](https://bundlephobia.com/package/style-vendorizer) [![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/kripod/style-vendorizer/CI/main)](https://github.com/kripod/style-vendorizer/actions/workflows/ci.yaml) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](./CODE_OF_CONDUCT.md) ## Usage Install the library with a package manager, e.g. npm: ```shell npm install style-vendorizer ``` After that, import transformer functions on demand. A recommended starting point is shown below: ```js import { cssPropertyAlias, cssPropertyPrefixFlags, cssValuePrefixFlags, } from "style-vendorizer"; function styleDeclaration(property, value) { let cssText = ""; /* Resolve aliases, e.g. `gap` -> `grid-gap` */ const propertyAlias = cssPropertyAlias(property); if (propertyAlias) cssText += `${propertyAlias}:${value};`; /* Prefix properties, e.g. `backdrop-filter` -> `-webkit-backdrop-filter` */ const propertyFlags = cssPropertyPrefixFlags(property); if (propertyFlags & 0b001) cssText += `-webkit-${property}:${value};`; if (propertyFlags & 0b010) cssText += `-moz-${property}:${value};`; if (propertyFlags & 0b100) cssText += `-ms-${property}:${value};`; /* Prefix values, e.g. `position: "sticky"` -> `position: "-webkit-sticky"` */ /* Notice that flags don't overlap and property prefixing isn't needed here */ const valueFlags = cssValuePrefixFlags(property, value); if (valueFlags & 0b001) cssText += `${property}:-webkit-${value};`; else if (valueFlags & 0b010) cssText += `${property}:-moz-${value};`; else if (valueFlags & 0b100) cssText += `${property}:-ms-${value};`; /* Include the standardized declaration last */ /* https://css-tricks.com/ordering-css3-properties/ */ cssText += `${property}:${value};`; return cssText; } ``` Prefix flags may be defined in TypeScript without any overhead as follows: ```ts const enum CSSPrefixFlags { "-webkit-" = 1 << 0, // 0b001 "-moz-" = 1 << 1, // 0b010 "-ms-" = 1 << 2, // 0b100 } /* Magic numbers from the previous snippet should be replaced like below: */ if (flags & CSSPrefixFlags["-webkit-"]) cssText += "..."; if (flags & CSSPrefixFlags["-moz-"]) cssText += "..."; if (flags & CSSPrefixFlags["-ms-"]) cssText += "..."; ``` ## Browser Support Every browser in the default [Browserslist](https://github.com/browserslist/browserslist) configuration is supported and tested against: - Baidu Browser for Android 7.12+ - Chrome 57+ - Edge 16+ - Firefox 48+ - Internet Explorer 11 - KaiOS Browser 2.5+ - Opera 46+ - Safari 12.2+ - Samsung Internet Browser 11.1+ - QQ Browser for Android 10.4+ - UC Browser for Android 12.12+ ## Quirks - Function values are only prefixed for longhand properties. This guarantees that only the start of each value is compared, for efficiency: ```js // Prints "1 0" console.log( cssPropertyPrefixFlags( "background-image", // Longhand "image-set('example.png' 1x, 'example-2x.png' 2x)", // Prefixed ), cssPropertyPrefixFlags( "background", // Shorthand "image-set('example.png' 1x, 'example-2x.png' 2x)", // Not prefixed ), ); ``` - CSS Grid works in IE 11 only when using the following longhand properties: - `grid-template-rows`, `grid-template-columns` - `grid-row-start`, `grid-column-start` - `-ms-grid-row-span` and `-ms-grid-column-span` (along with `grid-row-end` and `grid-column-end` for cross-browser compatibility) - `align-self`, `justify-self` - `cross-fade()` and `element()` functions are not prefixed, due to the lack of standard implementations. - Selectors are not yet supported. ## Acknowledgements This project was heavily inspired by [tiny-css-prefixer](https://github.com/kitten/tiny-css-prefixer). Test vectors are obtained from [@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data). --- _Source: https://npm.io/package/style-vendorizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._