Fix docs structure

Author: ai

README.md

@@ -114,7 +114,49 @@ module.exports = {
 }
 ```
 
-## Integration with postcss-import
+## Custom Syntaxes
+
+PostCSS can transforms styles in any syntax, not only in CSS.
+There are 3 parameters to control syntax:
+
+* `syntax` accepts module name with `parse` and `stringify` function.
+* `parser` accepts module name with input parser function.
+* `stringifier` accepts module name with output stringifier function.
+
+For example, you can use [Safe Parser] to find and fix any CSS errors:
+
+```js
+var css = require('postcss?parser=postcss-safe-parser!./broken')
+```
+
+[Safe Parser]: https://github.com/postcss/postcss-safe-parser
+
+If you need to pass the function directly instead of a module name,
+you can do so through the webpack postcss option, as such:
+
+```js
+var sugarss = require('sugarss')
+module.exports = {
+    module: {
+        loaders: [
+            {
+                test:   /\.css$/,
+                loader: "style-loader!css-loader!postcss-loader"
+            }
+        ]
+    },
+    postcss: function () {
+        return {
+            plugins: [autoprefixer, precss],
+            syntax: sugarss
+        };
+    }
+}
+```
+
+## Examples
+
+### With postcss-import
 
 When using [postcss-import] plugin, you may want to tell webpack about
 dependencies coming from your `@import` directives.
@@ -147,7 +189,7 @@ module.exports = {
 [webpack loader-context]: http://webpack.github.io/docs/loaders.html#loader-context
 [postcss-import]:         https://github.com/postcss/postcss-import
 
-## Integration with CSS Modules
+### With CSS Modules
 
 `postcss-loader` [cannot be used] with [CSS Modules] out of the box due
 to the way `css-loader` processes file imports. To make them work properly,
@@ -166,46 +208,6 @@ or use [postcss-modules] plugin instead of `css-loader`.
 [postcss-modules]:        https://github.com/outpunk/postcss-modules
 [cannot be used]:         https://github.com/webpack/css-loader/issues/137
 [CSS Modules]:            https://github.com/webpack/css-loader#css-modules
-
-## JS Styles
-
-If you want to process styles written in JavaScript
-you can use the [postcss-js] parser.
-
-```js
-{
-    test:   /\.style.js$/,
-    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js"
-}
-```
-
-Or use can use even ES6 in JS styles by Babel:
-
-```js
-{
-    test:   /\.style.js$/,
-    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
-}
-```
-
-As result you will be able to write styles as:
-
-```js
-import colors from '../config/colors';
-
-export default {
-    '.menu': {
-        color: colors.main,
-        height: 25,
-        '&_link': {
-            color: 'white'
-        }
-    }
-}
-```
-
-[postcss-js]: https://github.com/postcss/postcss-js
-
 ## Custom Syntaxes
 
 PostCSS can transforms styles in any syntax, not only in CSS.
@@ -245,3 +247,43 @@ module.exports = {
     }
 }
 ```
+
+
+### JS Styles
+
+If you want to process styles written in JavaScript
+you can use the [postcss-js] parser.
+
+```js
+{
+    test:   /\.style.js$/,
+    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js"
+}
+```
+
+Or use can use even ES6 in JS styles by Babel:
+
+```js
+{
+    test:   /\.style.js$/,
+    loader: "style-loader!css-loader!postcss-loader?parser=postcss-js!babel"
+}
+```
+
+As result you will be able to write styles as:
+
+```js
+import colors from '../config/colors';
+
+export default {
+    '.menu': {
+        color: colors.main,
+        height: 25,
+        '&_link': {
+            color: 'white'
+        }
+    }
+}
+```
+
+[postcss-js]: https://github.com/postcss/postcss-js