diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md new file mode 100644 index 00000000000..23821829c3e --- /dev/null +++ b/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 diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index cacaaad5659..53cbd68ffe1 100644 --- a/docusaurus/website/sidebars.json +++ b/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", diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 49b77620bc6..27946b51d66 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -34,6 +34,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'; @@ -107,6 +108,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, }, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 237710da9d8..dbb4cd1ac89 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -58,6 +58,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",