Why is normalize overriding my styles?

[JamesTheHacker]

I'm trying to use postcss-normalize with PostCSS. Anywhere I place the plugin in the list causes it to override my styles. I have forceImport set to true so I don't need to import it anywhere.

Here's my .postcssrc:

{
  "modules": false,
  "plugins": {
    "postcss-normalize": {
      forceImport: true,
    },
    "postcss-import": {},
    "postcss-nesting": {},
    "postcss-preset-env": {
      "autoprefixer": {
        "grid": true
      }
    },
    "postcss-color-mod-function": {},
    "postcss-font-magician": [
      {
          "variants": {
              "Open Sans": {
                  "300": [],
                  "400": [],
                  "700": []
              },
              "Arvo": {
                "400": [],
                "700": []
            }
          },
          "foundries": ["google"]
      }
    ]
  }
}

I'm also using ParcelJS and I import my styles in index.js like so:

import "./css/layout.css"
import "./css/base.css"
import "./css/fonts.css"
import "./css/theme.css"

import header from "./modules/luxbar"
import jumbo from "./modules/jumbo"
import partners from "./modules/partners"
import instructions from "./modules/instructions"
import about from "./modules/about"
import faq from "./modules/faq";
import contact from "./modules/contact"
import testimonials from "./modules/testimonials";

header();
jumbo();           
partners();        
instructions();
about();           
testimonials()
faq('.faq-list');   
contact();   

A module looks like this:

import $ from 'jquery'
import slick from 'slick-carousel'
import "./base.pcss"

export default () => {
    $('.partners__carousel').slick({
        autoplay: true,
        speed: 300,
        arrows: false,
        mobileFirst: true,
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1,
        buttons: false,
    })
}

The CSS is imported in the index.js for that module.

Any ideas how to solve this? Why is normalize overriding my own styles?

[jonathantneal]

What happens if you move postcss-normalize to the end of your plugin list? Does it correct the output?

If it resolves your issue, this is a workaround, and the issue is a limitation of PostCSS and the PostCSS Import plugin.

[JamesTheHacker]

That solved it.