Doc: update with latests introduced feature (nesting + initial value)

Close MoOx#240

Author: MoOx

README.md

@@ -24,6 +24,8 @@ It transforms CSS specs into more compatible CSS so you don’t need to wait for
 For questions and support please visit the
 [gitter room](https://gitter.im/MoOx/postcss-cssnext).
 
+For offline documentation, check out `statinamic/docs/content`.
+
 ---
 
 _The [issue tracker](https://github.com/MoOx/postcss-cssnext/issues) is exclusively for bug reports and feature requests._

docs/content/features.md

@@ -7,11 +7,15 @@ backgroundModifier: darkRoad
 
 @[toc]
 
+**Note that according to your [browser scope](usage/#browsers) some
+transformation can be skipped to avoid extra useless output.**
+Eg: if you use don't cover IE 8, rem fallback and rgba fallback might be skipped.
+
 ## automatic vendor prefixes
 
 Vendor prefixes are automatically added (and removed if deprecated/useless
 depending on your browser scope) using
-[autoprefixer](https://github.com/postcss/autoprefixer))
+**[autoprefixer](https://github.com/postcss/autoprefixer)**).
 
 
 ## custom properties & `var()`
@@ -120,7 +124,34 @@ Alows you to create your own selectors
 |
 [Plugin documentation](https://github.com/postcss/postcss-custom-selector)
 
-## `color()`
+## nesting
+
+Allow you to nest selectors
+
+```scss
+a {
+  /* direct nesting (& MUST be the first part of selector)*/
+  & span {
+    color: white;
+  }
+
+  /* @nest rule (for complex nesting) */
+  @nest span & {
+    color: blue;
+  }
+
+  /* media query automatic nesting */
+  @media (min-width: 30em) {
+    color: yellow;
+  }
+}
+```
+
+[Specification](http://tabatkins.github.io/specs/css-nesting/)
+|
+[Plugin documentation](https://github.com/jonathantneal/postcss-nesting)
+
+## `color()` function
 
 a color function to modify colors (transpiled to: `rgba()`)
 
@@ -142,7 +173,7 @@ so be sure to check them !
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-function)
 
-## `hwb()`
+## `hwb()` function
 
 Similar to `hsl()` but easier for humans to work with (transpiled to: `rgba()`).
 
@@ -156,7 +187,7 @@ body {
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-hwb)
 
-## `gray()`
+## `gray()` function
 
 Allow you to use more than 50 shades of gray (transpiled to: `rgba()`).
 For the first argument, you can use a number between 0 and 255 or a percentage.
@@ -175,7 +206,7 @@ For the first argument, you can use a number between 0 and 255 or a percentage.
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-gray)
 
-## #rrggbbaa
+## `#rrggbbaa` colors
 
 Allows use to use 4 or 8 digits hexadecimal notation (transpiled to: `rgba()`).
 
@@ -189,7 +220,23 @@ body {
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-hex-alpha)
 
-## `rebeccapurple`
+## `rgba` function (`rgb` fallback)
+
+Add solid colors fallback for rgba colors
+(if you browser scope cover old browsers, eg: IE8).
+
+```css
+body {
+  background: rgba(153, 221, 153, 0.8);
+  /* you will have the same value without alpha as a fallback */
+}
+```
+
+[Specification](http://www.w3.org/TR/css3-color/)
+|
+[Plugin documentation](https://github.com/postcss/postcss-color-rgba-fallback)
+
+## `rebeccapurple` color
 
 Allows you to use the new color keyword as a homage to
 [Eric Meyer’s daughter](https://github.com/postcss/postcss-color-rebeccapurple#why-this-plugin-)
@@ -204,8 +251,7 @@ body {
 |
 [Plugin documentation](https://github.com/postcss/postcss-color-rebeccapurple)
 
-
-## font-variant
+## `font-variant` property
 
 properties (fallback: `font-feature-settings`)
 
@@ -228,7 +274,7 @@ at the support of
 |
 [Plugin documentation](https://github.com/postcss/postcss-font-variant)
 
-## filter
+## `filter` property
 
 The W3C filters are only transformed as svg filter using the `url(data:*)` trick
 for Firefox < 35.
@@ -243,10 +289,38 @@ for Firefox < 35.
 |
 [Plugin documentation](https://github.com/iamvdo/pleeease-filters)
 
-## `rem` units
+## `initial` value
+
+Allow you to use `initial` value for any value. This value represents the value
+specified as the property’s initial value. **It does not mean browser default.**
+
+For example, for the `display` property, `initial` always means `inline`,
+because that’s the designated initial value of the property.
+As an example, using `div { display: initial }`, will **not** be `block`, but
+`inline`.
+
+```css
+div {
+  display: initial; /* inline */
+}
+```
+
+_Killer feature :_
+
+```css
+div {
+  all: initial; /* use initial for ALL PROPERTIES in one shot */
+}
+```
+
+[Specification](http://www.w3.org/TR/css3-values/#common-keywords)
+|
+[Plugin documentation](https://github.com/maximkoretskiy/postcss-initial)
+
+## `rem` unit (`px` fallback)
 
 `rem` fallback to `px`
-(if you browser scope cover old browsers).
+(if you browser scope cover old browsers, eg: IE8).
 
 ```css
 h1 {
@@ -303,10 +377,10 @@ p:not(:first-child, .special) {
 |
 [Plugin documentation](https://github.com/postcss/postcss-selector-NOT)
 
-## pseudo-elements
+## `::` pseudo syntax (`:` fallback)
 
 Adjust `::` to `:`
-(if you browser scope cover old browsers)
+(if you browser scope cover old browsers, eg: IE8).
 
 ```css
 a::before {
@@ -318,25 +392,6 @@ a::before {
 |
 [Plugin documentation](https://github.com/axa-ch/postcss-pseudoelements)
 
-## Alpha colors
-
-Add solid colors fallback for rgba colors
-(if you browser scope cover old browsers)
-
-```css
-body {
-  background: rgba(153, 221, 153, 0.8);
-  /* you will have the same value without alpha as a fallback */
-}
-```
-
-[Specification](http://www.w3.org/TR/css3-color/)
-|
-[Plugin documentation](https://github.com/postcss/postcss-color-rgba-fallback)
-
-_Note that according to your [browser scope](#nodejs-options) some might be not
-transpiled to avoid extra useless output._
-
 ## @todo
 
 Any omissions of the CSS specifications (even in draft) that are subject to be

docs/content/index.md

@@ -48,69 +48,82 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
   <h2 class="cssnext-Section-title"><a href="/features/">Features</a></h2>
     <ul class="r-Grid cssnext-List cssnext-FeaturesList">
       <li class="r-Grid-cell r-minS--1of2">
-        custom properties & `var()`
+        <a href="/features/#automatic-vendor-prefixes">automatic vendor prefixes</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        reduced `calc()`
+        <a href="/features/#custom-properties-var">custom properties & <code>var()</code></a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        custom media queries
+        <a href="/features/#reduced-calc">reduced <code>calc()</code></a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        media queries ranges
+        <a href="/features/#custom-media-queries">custom media queries</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        custom selectors
+        <a href="/features/#media-queries-ranges">media queries ranges</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        automatic vendor prefixes
+        <a href="/features/#custom-selectors">custom selectors</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `color()` support
+        <a href="/features/#nesting">nesting</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `gray()` support
+        <a href="/features/#color-function"><code>color()</code> function</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `hwb()` support
+        <a href="/features/#hwb-function"><code>hwb()</code> function</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        hexa `#rrggbbaa` support
+        <a href="/features/#gray-function"><code>gray()</code> function</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `rebeccapurple`
+        <a href="/features/#rrggbbaa-colors"><code>#rrggbbaa</code> colors</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `:matches` pseudo-class
+        <a href="/features/#rgba-function-rgb-fallback"><code>rgba</code> function
+          <small class="cssnext-FeaturesList-small">
+            (<code>rgb</code> fallback</code>)
+          </small>
+        </a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `:not` pseudo-class
-        <small class="cssnext-FeaturesList-small">
-          (to l.3)
-        </small>
+        <a href="/features/#rebeccapurple-color"><code>rebeccapurple</code> color</a>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        font-variant
+        <a href="/features/#font-variant-property"><code>font-variant</code> property</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#filter-property"><code>filter</code> property</a>
         <small class="cssnext-FeaturesList-small">
-          (to font-feature-settings)
+          (svg fallback)
         </small>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        filters
+        <a href="/features/#initial-value"><code>initial</code> value</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#rem-unit-px-fallback"><code>rem</code> unit</a>
         <small class="cssnext-FeaturesList-small">
-          (svg fallback)
+          (<code>px</code> fallback)
         </small>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        `rem` units fallback
+        <a href="/features/#any-link-pseudo-class"><code>:any-link</code> pseudo-class</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#matches-pseudo-class"><code>:matches</code> pseudo-class</a>
+      </li>
+      <li class="r-Grid-cell r-minS--1of2">
+        <a href="/features/#not-pseudo-class"><code>:not</code> pseudo-class</a>
         <small class="cssnext-FeaturesList-small">
-          (to px)
+          (to l.3)
         </small>
       </li>
       <li class="r-Grid-cell r-minS--1of2">
-        ::pseudo syntax
+        <a href="/features/#pseudo-syntax-fallback"><code>::</code>pseudo syntax</a>
         <small class="cssnext-FeaturesList-small">
-          (`:` compat)
+          (<code>:</code> fallback)
         </small>
       </li>
     </ul>
@@ -119,7 +132,7 @@ title: cssnext - Use tomorrow’s CSS syntax, today.
       style="display: block; text-align: center;"
     >
       <small>
-        _l.* are level of the specification (when information is relevant)_
+        <em>l.* are level of the specification (when information is relevant)</em>
       </small>
     </small>
   </div>

docs/content/usage.md

@@ -61,43 +61,8 @@ var output = cssnext(input, {
 })
 ```
 
-To know all available options, please check corresponding postcss plugin:
-
-- `customProperties`
-[(=> postcss-custom-properties)](https://www.npmjs.com/package/postcss-custom-properties)
-- `calc`
-[(=> postcss-calc)](https://www.npmjs.com/package/postcss-calc)
-- `customMedia`
-[(=> postcss-custom-media)](https://www.npmjs.com/package/postcss-custom-media)
-- `mediaQueriesRange`
-[(=> postcss-media-minmax)](https://www.npmjs.com/package/postcss-media-minmax)
-- `customSelectors`
-[(=> postcss-custom-selectors)](https://www.npmjs.com/package/postcss-custom-selectors)
-- `colorRebeccapurple`
-[(=> postcss-color-rebeccapurple)](https://www.npmjs.com/package/postcss-color-rebeccapurple)
-- `colorHwb`
-[(=> postcss-color-hwb)](https://www.npmjs.com/package/postcss-color-hwb)
-- `colorGray`
-[(=> postcss-color-gray)](https://www.npmjs.com/package/postcss-color-gray)
-- `colorHexAlpha`
-[(=> postcss-color-hex-alpha)](https://www.npmjs.com/package/postcss-color-hex-alpha)
-- `colorFunction`
-[(=> postcss-color-function)](https://www.npmjs.com/package/postcss-color-function)
-- `fontVariant`
-[(=> postcss-font-variant)](https://www.npmjs.com/package/postcss-font-variant)
-- `filter`
-[(=> pleeease-filters)](https://www.npmjs.com/package/pleeease-filters)
-- `rem`
-[(=> pixrem)](https://www.npmjs.com/package/pixrem)
-- `pseudoElements`
-[(=> postcss-pseudoelements)](https://www.npmjs.com/package/postcss-pseudoelements)
-- `pseudoClassMatches`
-[(=> postcss-selector-matches)](https://www.npmjs.com/package/postcss-selector-matches)
-- `pseudoClassNot`
-[(=> postcss-selector-not)](https://www.npmjs.com/package/postcss-selector-not)
-- `colorRgba`
-[(=> postcss-color-rgba-fallback)](https://www.npmjs.com/package/postcss-color-rgba-fallback)
-- `autoprefixer`
-[(=> autoprefixer-core)](https://www.npmjs.com/package/autoprefixer-core)
+**To know all available options, please check corresponding postcss plugin by
+browsing the
+[feature mapping](https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js).**
 
 _Note: order is important to get everything working correctly._

package.json

@@ -15,6 +15,7 @@
   "homepage": "http://cssnext.io/",
   "main": "lib/index.js",
   "files": [
+    "docs/content",
     "lib",
     "src",
     "!**/__tests__"