Search code examples
csspostcss

postcss-autoreset is overriding font-family with the browser's default

I'm using postcss-autoreset which applies all: initial; to any element I style in my CSS files.

But, when I try to set the font of the body element only elements that I haven't styled in CSS will get the font. Elements I have styled revert to the browser's default. Which is very odd.

all: initial; seems to be overriding font-face because when I view in Chrome inspector it's showing as overridden.

As an example below all my elements on the page are displaying with the Roboto font, except for text within header which is using the browsers default.

app.css

@import "variables.css";
@import "header.css";
@import "footer.css";

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

header.css

header {
    padding: 10px 0;
}

config.js (PostCSS CLI config.js file)

{
    "use": [
      "postcss-import",
      "postcss-cssnext",
      "lost",
      "rucksack-css",
      "postcss-autoreset",
      "postcss-font-magician"
    ],
    "input": "src/app.css",
    "output": "css/main.css",
    "local-plugins": true,
    "autoprefixer": {
      "browsers": "last 2 versions"
    }
}

Here is the output being produced by postcss:

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"),local(Roboto-ThinItalic),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YVQlYEbsez9cZjKsNMjLOwM.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-Yfk_vArhqVIZ0nv9q090hN8.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YRsxEYwM7FgeyaSgU71cLG0.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 300;
  src: local("Roboto Light Italic"),local(Roboto-LightItalic),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Italic"),local(Roboto-Italic),url(//fonts.gstatic.com/s/roboto/v15/OiNnAEwKzzJkQCr4qZmeq_esZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Medium Italic"),local(Roboto-MediumItalic),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0WfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0YbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 700;
  src: local("Roboto Bold Italic"),local(Roboto-BoldItalic),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC2fQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC44P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: italic;
  font-weight: 900;
  src: local("Roboto Black Italic"),local(Roboto-BlackItalic),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpWfQcKutQXcIrRfyR5jdjY8.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpY4P5ICox8Kq3LLUNMylGO4.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYbN6UDyHWBl620a-IRfuBk.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"),local(Roboto-Thin),url(//fonts.gstatic.com/s/roboto/v15/PP2U5prMl9yvKSWVu6DtvPesZW2xOQ-xsNqO47m55DA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxPesZW2xOQ-xsNqO47m55DA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg1_esZW2xOQ-xsNqO47m55DA.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"),local(Roboto-Light),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUffY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local(Roboto),local(Roboto-Regular),url(//fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Medium"),local(Roboto-Medium),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUfY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Bold"),local(Roboto-Bold),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOPY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 900;
  src: local("Roboto Black"),local(Roboto-Black),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIvY6323mHUZFJMgTvxaG2iE.eot?#) format("eot"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIltXRa8TVwTICgirnJhmVJw.woff2) format("woff2"),url(//fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")
}

header,
header .brand,
header nav,
header nav li,
header nav a,
header nav,
header nav ul,
header nav li,
body,
body {
  all: initial
}

header {
  background: #00AFEC;
  display: block
}

header .brand {
  width: 100%
}

header nav li {
  display: block;
  text-align: center
}

header nav a {
  color: #FFF;
  text-decoration: none;
  font-size: 18px
}

@media (min-width: 361px) {
  header nav {
    width: 100%
  }
  header nav ul {
    float: right
  }
  header nav li {
    padding: 0 30px
  }
}

body {
  font-family: 'Roboto';
  margin: 0 auto;
  display: block;
}

Any idea why this is happening?

Solution

  • postcss-autoreset accepts reset option. By default it is just all: initial, which resets font. But I recommend to set reset in all: initial; font-family: inherit; font-size: inherit.

    So in postcss-autoreset you should explicit show what properties you really want to inherit. And you could set some inherit properties by default in reset option.