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 <[email protected]>
Co-authored-by: Ian Sutherland <[email protected]>

Author: 3 people

docusaurus/docs/adding-css-reset.md

@@ -0,0 +1,71 @@
+---
+id: adding-css-reset
+title: Adding a CSS Reset
+sidebar_label: Adding CSS Reset
+---
+
+This project setup uses [PostCSS Normalize] for adding a [CSS Reset].
+
+To start using it, add `@import-normalize;` anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is `index.css` or `App.css`.
+
+## `index.css`
+
+```css
+@import-normalize; /* bring in normalize.css styles */
+
+/* rest of app styles */
+```
+
+You can control which parts of [normalize.css] to use via your project's [browserslist].
+
+Results when [browserslist] is `last 3 versions`:
+
+```css
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+```
+
+Results when [browserslist] is `last 2 versions`:
+
+```css
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+```
+
+## Browser support
+
+Browser support is dictated by what normalize.css [supports]. As of this writing, it includes:
+
+- Chrome (last 3)
+- Edge (last 3)
+- Firefox (last 3)
+- Firefox ESR
+- Opera (last 3)
+- Safari (last 3)
+- iOS Safari (last 2)
+- Internet Explorer 9+
+
+[browserslist]: http://browserl.ist/
+[css reset]: https://cssreset.com/what-is-a-css-reset/
+[normalize.css]: https://github.com/csstools/normalize.css
+[supports]: https://github.com/csstools/normalize.css#browser-support
+[postcss normalize]: https://github.com/csstools/postcss-normalize

docusaurus/website/sidebars.json

@@ -18,6 +18,7 @@
       "adding-a-stylesheet",
       "adding-a-css-modules-stylesheet",
       "adding-a-sass-stylesheet",
+      "adding-css-reset",
       "post-processing-css",
       "adding-images-fonts-and-files",
       "loading-graphql-files",

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",