j2c-plugin-prefix-browser
Advanced tools
j2c-plugin-prefix-browser - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
| { | ||
| "name": "j2c-plugin-prefix-browser", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "Vendor prefix handling for j2c in the browser, built on top of Lea Verou's PrefixFree", | ||
@@ -5,0 +5,0 @@ "main": "dist/j2c-plugin-prefix-browser.commonjs.js", |
207
README.md
@@ -1,20 +0,17 @@ | ||
| # j2c-filter-prefix-browser | ||
| # j2c-plugin-prefix-browser | ||
| This j2c plugin adds client side automatic vendor prefix insertion on the client to j2c. | ||
| This j2c plugin does client side vendor prefix insertion (and some polyfilling) for | ||
| It handles: | ||
| - properties and values, including flexbox and nested functions, | ||
| - properties and values (including flexbox). | ||
| - selectors, | ||
| - at-rules and at-rules parameters like `@supports (...)` and `@media (min-resolution:2ddpx)`. | ||
| - at-rules and at-rules parameters | ||
| See below for a detailed feature set. | ||
| Unlike Autoprefixer and the Inline Style Prefixer, it relies on feature detection rather than browser sniffing and it supports more browsers. It weights ~3KB minified and gzipped. | ||
| Unlike Autoprefixer and the inline-style-prefixer, it relies on feature detection rather than browser sniffing. It weights ~3KB minified and gzipped. | ||
| You can get a (non-live) sample of its work [here](https://cdn.rawgit.com/j2css/j2c/86db0ee4f2ea0e76eebac0b389c068463e3b1cd4/plugins/prefix-browser/tests/index.html). | ||
| You can watch it at work [in your browser](https://cdn.rawgit.com/j2css/j2c/86db0ee4f2ea0e76eebac0b389c068463e3b1cd4/plugins/prefix-browser/tests/index.html). | ||
| The plugin is well tested (385 assertions, many of which are `deepEquals` on nested objects) and has 100% branch coverage (which doesn't mean it is bug free, off course). | ||
| Many thanks to [Lea Verou](https://github.com/LeaVerou/) for [PrefixFree](http://leaverou.github.io/prefixfree/) from which most of the feature detection code originates, [Robin Frischmann](https://github.com/rofrischmann) for the [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer/) which helped me undestand the flexbox translation tables, and [Andrey Sitnik](https://github.com/ai) for the [Autoprefixer](https://github.com/postcss/autoprefixer) which is also a resource I've used while building this. | ||
@@ -31,3 +28,3 @@ ---- | ||
| - [Flexbox](#flexbox) | ||
| - [Flexbox 2009 (`-moz-box` and `-webkit-box`)](#flexbox-2009--moz-box-and--webkit-box) | ||
| - [Flexbox 2009 (`-moz-box`** and **`-webkit-box`)](#flexbox-2009--moz-box-and--webkit-box) | ||
| - [Flexbox 2012 (`-ms-flexbox`)](#flexbox-2012--ms-flexbox) | ||
@@ -37,4 +34,6 @@ - [Final spec, prefixed (`-webkit-flex`)](#final-spec-prefixed--webkit-flex) | ||
| - [At rules](#at-rules) | ||
| - [At rules parameters (resolution and @supports)](#at-rules-parameters-resolution-and-supports) | ||
| - [What about the server side?](#what-about-the-server-side) | ||
| - [And what about speed?](#and-what-about-speed) | ||
| - [Thanks](#thanks) | ||
| - [License: MIT](license-mit) | ||
@@ -53,5 +52,15 @@ | ||
| ```JS | ||
| var J2c = require("j2c") | ||
| var j2c = new J2c(require("j2c-plugin-prefix-browser")) | ||
| import {prefixPlugin} from "j2c-plugin-prefix-browser" | ||
| import {J2c} from "j2c" | ||
| // alternatively | ||
| const prefixPlugin = require("j2c-plugin-prefix-browser").prefixPlugin | ||
| const J2c = require("j2c") | ||
| // anyways... | ||
| const j2c = new J2c(prefixPlugin) | ||
| j2c.sheet({ | ||
@@ -80,7 +89,7 @@ "@keyframes foo": { | ||
| Please file an issue if you see something missing. | ||
| Here's what supported, please file an issue if you see something missing. | ||
| ### Properties | ||
| Properties that are supported with a prefix and unsupported unprefixed will be prefixed. | ||
| Properties that are supported with a prefix but unsupported without one will be prefixed. | ||
@@ -95,23 +104,23 @@ ### Values | ||
| `initial` | ||
| => **`initial`** | ||
| ##### `cursor` | ||
| ##### *`cursor:`* | ||
| `grab`, `grabbing`, `zoom-in`, `zoom-out` | ||
| => **`grab`**, **`grabbing`**, **`zoom-in`**, **`zoom-out`** | ||
| ##### `display` | ||
| ##### *`display:`* | ||
| The flexbox zoo (see below), plus `grid` and `inline-grid` | ||
| => **`grid`**, **`inline-grid`** and the flexbox zoo (see below) | ||
| ##### `position` | ||
| ##### *`position:`* | ||
| `sticky` | ||
| => **`sticky`** | ||
| ##### `width`, `column-width`, `height`, `max-height`, `max-width`, `min-height`, `min-width` | ||
| ##### *`width:`*, *`column-width:`, `height:`, `max-height:`, `max-width:`, `min-height:`, `min-width:`* | ||
| `contain-floats`, `fill-available`, `fit-content`, `max-content` and `min-content` | ||
| => **`contain-floats`**, **`fill-available`**, **`fit-content`**, **`max-content`** and **`min-content`** | ||
| #### Functions | ||
| Gradients, `calc()`, `element()` and `cross-fade()` are prefixed, even if they are nested in other functions. | ||
| **`calc()`**, **`element()`**, **`cross-fade()`** and gradients are prefixed, even if they are nested in other functions or part of a list of values. | ||
@@ -122,7 +131,7 @@ Prefixed gradients also have their angle changed from trigonometric to clockwise coordinates. | ||
| `transiton:`, `transition-property:` and `will-change:` take properties as arguments. They are prefixed where needed. | ||
| **`transiton:`**, **`transition-property:`** and **`will-change:`** take properties as arguments. The latter are prefixed where needed. | ||
| ### Flexbox | ||
| The plugin translates the final flexbox spec to its older versions as much as possible. | ||
| The plugin translates the final flexbox spec to its older versions as much as possible. Squigly arrows indicate an approximate mapping. | ||
@@ -133,33 +142,31 @@ #### Flexbox 2009 (`-moz-box` and `-webkit-box`) | ||
| - (`align-content` => ? no mapping AFAIK please chime in if you know any) | ||
| - (`align-self` => ?) | ||
| - `align-items` => `-x-box-align`, | ||
| - `flex` => `-x-box-flex` | ||
| - (`flex-basis` => ?) | ||
| - `flex-direction` => `-x-box-direction` + `-x-box-orient` | ||
| - `flex-flow` => `-x-box-direction` + `-x-box-orient` and/or `-x-box-lines` | ||
| - (`flex-grow` => ?) | ||
| - (`flex-shrink` => ?) | ||
| - `flex-wrap` => `-x-box-lines`, | ||
| - `justify-content`: `-x-box-pack`, | ||
| - `order`: `-x-box-ordinal-group` | ||
| - `align-content` => `?` no mapping AFAIK please chime in if you know any) | ||
| - `align-self` => `?` | ||
| - **`align-items`** => **`-x-box-align`** | ||
| - **`flex`** => **`-x-box-flex`** | ||
| - `flex-basis` => `?` | ||
| - **`flex-direction`** => **`-x-box-direction`** + **`-x-box-orient`** | ||
| - **`flex-flow`** => **`-x-box-direction`** + **`-x-box-orient`** and/or **`-x-box-lines`** | ||
| - `flex-grow` => `?` | ||
| - `flex-shrink` => `?` | ||
| - **`flex-wrap`** => **`-x-box-lines`** | ||
| - **`justify-content`** => **`-x-box-pack`** | ||
| - **`order`** => **`-x-box-ordinal-group`** | ||
| ##### Values | ||
| - `flex` => `-x-box` | ||
| - `inline-flex` => `-x-inline-box` | ||
| - **`flex`** => **`-x-box`** | ||
| - **`inline-flex`** => **`-x-inline-box`** | ||
| - **`column`** => **`block-axis`** + **`normal`** (respectively for `-x-box-orient` and `box-direction`) | ||
| - **`column-reverse`** => **`block-axis`** + **`reverse`** | ||
| - **`row`** => **`inline-axis`** + **`normal`** | ||
| - **`row-reverse`** => **`inline-axis`** + **`reverse`** | ||
| - **`flex-end`** => **`end`** | ||
| - **`flex-start`** => **`start`** | ||
| - **`nowrap`** => **`single`** | ||
| - **`space-around`** ~> **`justify`** | ||
| - **`space-between`** => **`justify`** | ||
| - **`wrap`** => **`multiple`** | ||
| - **`wrap-reverse`** ~> **`multiple`** | ||
| - `column` ~> `block-axis` (for `-x-box-orient`) + `normal` (for `box-direction) | ||
| - `column-reverse ~> `block-axis` + `reverse` | ||
| - `row` ~> `inline-axis` + `normal` | ||
| - `row-reverse` ~> `inline-axis` + `reverse` | ||
| - `flex-end`: `end`, | ||
| - `flex-start` => `start`, | ||
| - `nowrap`: `single`, | ||
| - `space-around` ~> `justify`, | ||
| - `space-between` => `justify`, | ||
| - `wrap` => `multiple`, | ||
| - `wrap-reverse` ~> `multiple` | ||
| #### Flexbox 2012 (`-ms-flexbox`) | ||
@@ -169,32 +176,30 @@ | ||
| - `align-content` => `-ms-flex-line-pack`, | ||
| - `align-items` => `-ms-flex-align`, | ||
| - `align-self` => `-ms-flex-item-align`, | ||
| - (`flex` => `-ms-flex`) | ||
| - `flex-basis` => `-ms-preferred-size`, | ||
| - `flex-direction` => `-ms-flex-direction` | ||
| - `flex-flow` => `-ms-flex-flow` | ||
| - `flex-grow` => `-ms-flex-positive`, | ||
| - `flex-shrink` => `-ms-flex-negative`, | ||
| - (`flex-wrap` => `-ms-flex-wrap`) | ||
| - `justify-content` => `-ms-flex-pack`, | ||
| - `order` => `-ms-flex-order` | ||
| - **`align-content`** => **`-ms-flex-line-pack`** | ||
| - **`align-items`** => **`-ms-flex-align`** | ||
| - **`align-self`** => **`-ms-flex-item-align`** | ||
| - `flex` => `-ms-flex` | ||
| - **`flex-basis`** => **`-ms-preferred-size`** | ||
| - **`flex-direction`** => **`-ms-flex-direction`** | ||
| - **`flex-flow`** => **`-ms-flex-flow`** | ||
| - **`flex-grow`** => **`-ms-flex-positive`** | ||
| - **`flex-shrink`** => **`-ms-flex-negative`** | ||
| - `flex-wrap` => `-ms-flex-wrap` | ||
| - **`justify-content`** => **`-ms-flex-pack`** | ||
| - **`order`** => **`-ms-flex-order`** | ||
| ##### Values | ||
| - `flex` => `-ms-flexbox` | ||
| - `inline-flex` => `-ms-inline-flexbox` | ||
| - **`flex`** => **`-ms-flexbox`** | ||
| - **`inline-flex`** => **`-ms-inline-flexbox`** | ||
| - `column` => `column` | ||
| - `column-reverse` => `column-reverse | ||
| - `row` => `row` | ||
| - `row-reverse` => `row-reverse` | ||
| - **`flex-end`** => **`end`** | ||
| - **`flex-start`** => **`start`** | ||
| - **`space-around`** => **`distribute`** | ||
| - **`space-between`** => **`justify`** | ||
| - `wrap` => `wrap` | ||
| - `wrap-reverse` => `wrap-reverse` | ||
| - (`column` => `column`) | ||
| - (`column-reverse` => `column-reverse) | ||
| - (`row` => `row`) | ||
| - (`row-reverse` => `row-reverse`) | ||
| - `flex-end` => `end`, | ||
| - `flex-start` => `start`, | ||
| - `space-around` => `distribute`, | ||
| - `space-between` => `justify` | ||
| - (`wrap` => `wrap`) | ||
| - (`wrap-reverse` => `wrap-reverse`) | ||
| #### Final spec, prefixed (`-webkit-flex`) | ||
@@ -206,9 +211,9 @@ | ||
| - `:any-link`: `:-x-any-link`, | ||
| - `:read-only`: `:-x-read-only`, | ||
| - `:read-write`: `:-x-read-write`, | ||
| - `::selection`: `::-x-selection`, | ||
| - `:fullscreen` => `:-x-fullscreen` or `:-x-fullscreen` | ||
| - `::backdrop` => `::-x-backdrop`, | ||
| - `::placeholder` => `::-x-placeholder`, `:-x-placeholder`:, `::-x-input-placeholder` or `:-x-input-placeholder` | ||
| - **`:any-link`** => **`:-x-any-link`** | ||
| - **`:read-only`** => **`:-x-read-only`** | ||
| - **`:read-write`** => **`:-x-read-write`** | ||
| - **`::selection`** => **`::-x-selection`** | ||
| - **`:fullscreen`** => **`:-x-fullscreen`** or **`:-x-fullscreen`** | ||
| - **`::backdrop`** => **`::-x-backdrop`** | ||
| - **`::placeholder`** => **`::-x-placeholder`**, **`:-x-placeholder`:, `::-x-input-placeholder`** or **`:-x-input-placeholder`** | ||
@@ -219,8 +224,24 @@ The `:-webkit-scrollbar` pseudo-element/pseudo-class family not implemented since it is webkit-only and not on a standard track AFAIK. | ||
| `@keyframes`, `@document` and `@viewport` get a prefix where needed. | ||
| **`@keyframes`**, **`@document`** and **`@viewport`** get a prefix where needed. | ||
| `@media (min/max-resolution: 2dppx)` is converted to `-webkit-min/max-device-pixel-ratio:2`, `min/max--moz-device- pixel-ratio:2` and `min/max-resolution: 192dpi` when necessary (even to `-o-device-pixel-ratio 20/10`). | ||
| #### At rules parameters (resolution and @supports) | ||
| The parameters of `@supports` have also their properties and values prefixed automatically. | ||
| ```CSS | ||
| @media (min-resolution: 2dppx){} | ||
| ``` | ||
| (resp. `max-resolution` and `resolution`) can be converted to one of the following, when appropriate: | ||
| ```CSS | ||
| @media (-webkit-min-device-pixel-ratio:2){} | ||
| @media (min--moz-device-pixel-ratio:2){} | ||
| @media (-o-device-pixel-ratio 20/10){} | ||
| @media (min-resolution: 192dpi){} // Mostly IE | ||
| ``` | ||
| The parameters of **`@supports`** have also their properties and values prefixed automatically. | ||
| ## What about the server side? | ||
@@ -234,4 +255,10 @@ | ||
| The plugin is designed to be as fast as possible. Most of the feature detection is performed upfront to enable the fastest operation possible while applying prefixes. Allocations and branches are kept to a bare minimum after initialization (the prefixes are applied once and then cached). No objects beside strings are created while prefixing (with one exception when `flex-flow` has to be translated to the 2009 equivalent, the value is `.split(' ')` into an array.). | ||
| The plugin is designed to be as fast as possible. Most of the feature detection is performed upfront to enable the fastest operation possible while applying prefixes. Allocations and branches are kept to a bare minimum after initialization (the prefixes are applied once and then cached). No objects beside strings are created while prefixing (with one exception when `flex-flow` has to be translated to the 2009 equivalent, the value is `.split(' ')` into an array.). Some tweaks are still possible, benchmarks will be needed. | ||
| ## Thanks | ||
| Many thanks to [Lea Verou](https://github.com/LeaVerou/) for [PrefixFree](http://leaverou.github.io/prefixfree/) from which most of the feature detection code originates, [Robin Frischmann](https://github.com/rofrischmann) for the [inline-style-prefixer](https://github.com/rofrischmann/inline-style-prefixer/) whose plugin folder was an inspiration, [Andrey Sitnik](https://github.com/ai) for the [Autoprefixer](https://github.com/postcss/autoprefixer) which is also a resource I've used while building this, and [Ben Briggs]() who's always been helpful in the PostCSS-related chats. | ||
| Thanks as well to all the folks that hang out in the gitter channel for keeping my motivation up. | ||
| ## License: MIT |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.41%
277114
- Number of lines in readme file
- increased by11.95%
253
No dependency changes