diff options
Diffstat (limited to 'node_modules/postcss-fixes/README.md')
| -rw-r--r-- | node_modules/postcss-fixes/README.md | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/node_modules/postcss-fixes/README.md b/node_modules/postcss-fixes/README.md new file mode 100644 index 00000000..4c505d0e --- /dev/null +++ b/node_modules/postcss-fixes/README.md @@ -0,0 +1,83 @@ +# PostCSS Fixes [![Build Status][ci-img]][ci] [](https://codeclimate.com/github/MattDiMu/postcss-fixes)
+
+[PostCSS]: https://github.com/postcss/postcss
+[ci-img]: https://travis-ci.org/MattDiMu/postcss-fixes.svg
+[ci]: https://travis-ci.org/MattDiMu/postcss-fixes
+
+[PostCSS] pack to fix known Browser Bugs, making it easier to write your CSS according to the official W3C Syntax. Additionally it adds safe fallbacks.
+
+[postcss-fixes](https://github.com/MattDiMu/postcss-fixes) differs from [cssnext](https://github.com/MoOx/postcss-cssnext) by doing only transformations for stable CSS Features, whereas cssnext is more progressively tries to implement features, which aren't official W3C recommendations yet and could therefore change/break in the future. Another alternative is [oldie](https://github.com/jonathantneal/oldie), which is Internet Explorer only, however.
+
+
+## A few examples
+```css
+:nth-child(n)::before {
+ flex: 1;
+ opacity: .5;
+ height: 2.5rem;
+ width: 10vmin;
+}
+```
+
+```css
+:nth-child(1n):before {
+ flex: 1 1 0%; /* fix some flexbox issues */
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* opacity for IE */
+ opacity: .5;
+ height: 40px; /* rem to px fallback */
+ height: 2.5rem;
+ width: 10vm;
+ width: 10vmin;
+}
+```
+
+## Used Plugins
+Hint: An opinionated config for these plugins is used, to make them more future-safe
+* [pixrem](https://github.com/robwierzbowski/node-pixrem)
+* [postcss-calc](https://github.com/postcss/postcss-calc)
+* [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes) (also in 'safe' mode)
+* [postcss-pseudoelements](https://github.com/axa-ch/postcss-pseudoelements) (also in 'safe' mode)
+* [postcss-unopacity](https://github.com/jonathantneal/postcss-unopacity)
+* [postcss-unroot](https://github.com/jonathantneal/postcss-unroot)
+* [postcss-nth-child-fix](https://github.com/MattDiMu/postcss-nth-child-fix)
+* [postcss-vmin](https://github.com/iamvdo/postcss-vmin)
+
+
+### Recommended Usage
+[postcss-fixes](https://github.com/MattDiMu/postcss-fixes) is recommended to be used in conjunction with [autoprefixer](https://github.com/postcss/autoprefixer) and [cssnano](https://github.com/ben-eb/cssnano) (optimizations)
+```js
+/* for developement */
+postcss([
+ require('postcss-fixes')(),
+ require('autoprefixer')()
+])
+
+/* for production */
+postcss([
+ require('postcss-fixes')(),
+ require('autoprefixer')(),
+ require('cssnano')({
+ 'safe': true, // I would recommend using cssnano only in safe mode
+ 'calc': false // calc is no longer necessary, as it is already done by postcss-fixes due to precision rounding reasons
+ })
+])
+```
+See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment (e.g. if you are using a task runner like grunt, gulp, broccoli, webpack, etc.).
+
+
+## Options
+### `preset`
+* `recommended` (default)
+* `safe`
+* `fixes-only`
+* `fallbacks-only`
+* `enable-all`
+* `disable-all`
+
+This would look like this:
+
+```js
+postcss([
+ require('postcss-fixes')({ preset: 'safe' }) // do only very safe transformations
+])
+```
|
