From 288685e0f3c5d13fd904d23644133ab0632d4db0 Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Wed, 14 Nov 2018 21:24:21 -0500 Subject: [PATCH 1/6] Add postcss-normalize plugin --- packages/react-scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index dfef220b781..a86858e886f 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -58,6 +58,7 @@ "pnp-webpack-plugin": "1.1.0", "postcss-flexbugs-fixes": "4.1.0", "postcss-loader": "3.0.0", + "postcss-normalize": "7.0.1", "postcss-preset-env": "6.3.1", "postcss-safe-parser": "4.0.1", "react-app-polyfill": "^0.1.3", From 429c2ea3c2e2a5f88a06e78df21cbb157fd062b2 Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Wed, 14 Nov 2018 21:35:22 -0500 Subject: [PATCH 2/6] Configure PostCSS Normalize --- packages/react-scripts/config/webpack.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 80391927084..89af7efe8f0 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, }, From 15ffa54aca3bf7e234ea2937c71c27bd9f1b6e0a Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Wed, 27 Feb 2019 22:42:50 -0500 Subject: [PATCH 3/6] Add documentation --- docusaurus/docs/adding-css-reset.md | 71 +++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 docusaurus/docs/adding-css-reset.md diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md new file mode 100644 index 00000000000..3670328c749 --- /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 From 26652ab5df46bb2c6dc473aff1c3b492c47c0689 Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Wed, 27 Feb 2019 22:54:21 -0500 Subject: [PATCH 4/6] Include the doc in sidebar --- docusaurus/website/sidebars.json | 1 + 1 file changed, 1 insertion(+) diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index bde33240766..27357bbbe21 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-a-css-reset", "post-processing-css", "adding-images-fonts-and-files", "using-the-public-folder", From 9de61dfdfd7f2c4b8b4550008cf3f3fc0efe8942 Mon Sep 17 00:00:00 2001 From: Hrusikesh Panda Date: Wed, 27 Feb 2019 22:55:58 -0500 Subject: [PATCH 5/6] Fix the id in sidebar.json --- docusaurus/website/sidebars.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index 27357bbbe21..946444be384 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -18,7 +18,7 @@ "adding-a-stylesheet", "adding-a-css-modules-stylesheet", "adding-a-sass-stylesheet", - "adding-a-css-reset", + "adding-css-reset", "post-processing-css", "adding-images-fonts-and-files", "using-the-public-folder", From 10e874c95b9ac1fddd8275cf8535515ffa31375d Mon Sep 17 00:00:00 2001 From: Ian Sutherland Date: Fri, 5 Apr 2019 09:51:02 -0600 Subject: [PATCH 6/6] Update adding-css-reset.md --- docusaurus/docs/adding-css-reset.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md index 3670328c749..23821829c3e 100644 --- a/docusaurus/docs/adding-css-reset.md +++ b/docusaurus/docs/adding-css-reset.md @@ -6,14 +6,14 @@ 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`. +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 */ +/* rest of app styles */ ``` You can control which parts of [normalize.css] to use via your project's [browserslist].