I'm following the instructions on Reacts official site here. I have an index.css file setup in the root of my src directory with the import as the say:
@import-normalize;
I then import the index.css file in my App component:
import '../../index.css';
class App {}
Though the stylesheet is indeed there, it only partially loads the reset instead of the full thing. I don't see an option in the docs to add/subtract what you want. Below you can see what is added. Now compare this to the full reset.
/*! normalize.css v9.0.1 | MIT License | github.com/csstools/normalize.css */
/* Document
* ========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
}
/* Sections
* ========================================================================== */
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Add the correct text decoration in Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/* Embedded content
* ========================================================================== */
/* Forms
* ========================================================================== */
/**
* Remove the margin in Safari.
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button {
text-transform: none; /* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Add the correct display in Edge and IE.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline; /* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
*/
textarea {
margin: 0; /* 1 */
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct display in Edge and IE.
*/
details {
display: block;
}
/*
* Add the correct styles in Edge, IE, and Safari.
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/* User interaction
* ========================================================================== */
There's two reasons (the second being the main one).
1) The first is due to the browserslist config in create react app. Postcss uses the browsers list configuration to determine which styles to keep/remove. The latest version of CRA uses this browserslist development config:
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
If you copy down the production config to development you'll see some of the styles added. For example, overflow: visible; being added to hr elements for Edge and IE. If you want a cleaner look on what will be included and aren't too far along in the project, run the build, and check out the static/css/*main.randomletters.chunk chunk file.
2) Postcss-normalize doesn't actually point at the necolas/normalize.css stylesheet you linked. Instead it points at @csstools/normalize.css. Many of the differences you noticed will be there. The author of postcss-normalize (who co-created normalize) says that this version is more actively maintained as the necolas/normalize version includes "non-fixes". I haven't looked into it enough to know whether they're actually non-fixes or not but you can see what he said here: https://github.com/csstools/normalize.css/issues/3. So feel free to yarn remove normalize.css if you had it installed!