Injects normalize.css multiple times

[stevensacks]

I am using this with module-css with ExtractTextPlugin and it's injecting the normalize.css before every single css file I have in my project above each file's contents. Which means my stitched together css has numerous copies of normalize.css.

module: {
        loaders: [
            {
                test: /\.(css|scss)$/,
                loader: ExtractTextPlugin.extract('css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass-loader?sourceMap'),
                exclude: /node_modules/
            }
        ]
    },
    postcss: [
        require('postcss-normalize')
    ],
    plugins: [
        new ExtractTextPlugin('style.css', { allChunks: true })
    ]

How do I ensure it only includes it one time at the top of the style.css file?

[AdamQuadmon]

How I'm doing it using react:

webpack.config.babel.js

module: {
      loaders: [
        // *.global.css => global (normal) css
        {
          test: /\.global\.css$/,
          include: path.resolve(__dirname, "web_modules"),
          loader: ExtractTextPlugin.extract(
            "style-loader",
            [ "css-loader", "postcss-loader" ].join("!"),
          ),
        },
      ]
},
postcss: () => [
      require("stylelint")(),
      require("postcss-cssnext")({ browsers: "last 2 versions" }),
      require("postcss-browser-reporter")(),
      require("postcss-reporter")(),
    ],

index.global.css

@use postcss-normalize;

LayoutContainer.js

import React, { Component, PropTypes } from "react"
import Helmet from "react-helmet"

import "./index.global.css"
import styles from "./index.css"
//...

I'm using Phonemic

[stevensacks]

I spend all day doing this manually, googling to figure things out. I finally get it working (though not as cleanly as I'd like), and then you post Phonemic which is everything I did today and the remaining stuff I couldn't figure out. Well, at least I immediately see the value of it. Thanks!

[AdamQuadmon]

I don't know why because I'm also new to React PostCss word but the example I posted is not working anymore.

I needed to do the following add:

postcss: () => [
      require("stylelint")(),
      require("postcss-cssnext")({ browsers: "last 2 versions" }),
      require("postcss-browser-reporter")(),
      require("postcss-reporter")(),
      require("postcss-use")({ modules: ['postcss-normalize']}),
    ],

[madeleineostoja]

For what it's worth I'd consider this package somewhat deprecated - a more robust solution would be to use postcss-import and pull in normalize from NPM.

[AdamQuadmon]

Can you then add a disclaimer on the readme? PostCss is such a mess, please help reduce noise!

[01dr]

Anybody knows how to fix that bug without use postcss-import? I found 54 injections on my css.

[madeleineostoja]

This package is being deprecated, see #9. Use postcss-import. It does exactly the same thing, in a cleaner and more predictable way.