Adds PostCSS Normalize (#5810)

* Add postcss-normalize plugin

* Configure PostCSS Normalize

* Add documentation

* Include the doc in sidebar

* Fix the id in sidebar.json

* Update adding-css-reset.md


Co-authored-by: Jack Zhao <jzhao@fb.com>
Co-authored-by: Ian Sutherland <ian@iansutherland.ca>

packages/react-scripts/config/webpack.config.js

@@ -35,6 +35,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
+const postcssNormalize = require('postcss-normalize');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -108,6 +109,10 @@ module.exports = function(webpackEnv) {
               },
               stage: 3,
             }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
           ],
           sourceMap: isEnvProduction && shouldUseSourceMap,
         },

packages/react-scripts/package.json

@@ -59,6 +59,7 @@
     "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
+    "postcss-normalize": "7.0.1",   
     "postcss-preset-env": "6.6.0",
     "postcss-safe-parser": "4.0.1",
     "react-app-polyfill": "^0.2.2",