csstools / postcss-normalize

Use the parts of normalize.css (or sanitize.css) you need from your browserslist
Creative Commons Zero v1.0 Universal
816 stars 40 forks source link

PostCSS autoprefixer working but normalize not #22

Closed akrueger closed 6 years ago

akrueger commented 6 years ago

Angular 4.3.6 Webpack 3.5.5 postcss-loader 2.0.6 postcss-normalize 4.0.0 Firefox 55.0.3 Chrome 60.0.3112.113 Safari 10.1.2

I'm trying to test postcss-normalize in my build and have been unable to see it work. I am using it in the same way as autoprefixer--and I've been able to verify that that works.

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

The above rule shows up in Chrome and Safari as font-weight: bold; and Firefox as font-weight: bolder;. I am inferring that this means that postcss-normalize isn't working as I have listed the last 10 versions in my browserslist. Is this a correct assumption? Is there a better way to test that the package is working? I had thought if autoprefixer is working correctly that normalize should as well. Am I forgetting something?

// package.json

"browserslist": ["last 10 versions"]

// postcss.config.js

module.exports = {
  plugins: [require('autoprefixer'), require('postcss-normalize')]
}

// webpack.dev.js

module: {
    rules: [
      {
        test: /\.scss$/,
        exclude: helpers.root('src', 'app'),
        loader: ['to-string-loader'].concat(
          ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: { importLoaders: 2, sourceMap: true }
              },
              { loader: 'postcss-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { sourceMap: true } }
            ]
          })
        )
      },
      {
        test: /\.scss$/,
        include: helpers.root('src', 'app'),
        use: [
          {
            loader: 'raw-loader'
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
jonathantneal commented 6 years ago

You must include an injection point:

@import-normalize;

The funny name is to prevent conflicts with postcss-import.