Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kripod/style-vendorizer
Tiny CSS vendor prefixer and property alias mapper for runtime styling solutions
https://github.com/kripod/style-vendorizer
alias css mapper prefixer resolver
Last synced: 3 months ago
JSON representation
Tiny CSS vendor prefixer and property alias mapper for runtime styling solutions
- Host: GitHub
- URL: https://github.com/kripod/style-vendorizer
- Owner: kripod
- License: mit
- Created: 2020-09-13T20:31:37.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-25T05:54:05.000Z (about 2 years ago)
- Last Synced: 2024-07-10T15:59:16.807Z (4 months ago)
- Topics: alias, css, mapper, prefixer, resolver
- Language: TypeScript
- Homepage:
- Size: 1.5 MB
- Stars: 59
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-list - style-vendorizer
README
# style-vendorizer
Tiny CSS vendor prefixer and property alias mapper for runtime styling solutions.
[](https://www.npmjs.com/package/style-vendorizer)
[](https://bundlephobia.com/package/style-vendorizer)
[](https://github.com/kripod/style-vendorizer/actions/workflows/ci.yaml)
[](./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).