webpack2 | postcss build warning

Question

I have a postcss.config.js file:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  parser: 'postcss-scss',
    plugins: [
      require('postcss-smart-import')({
        addDependencyTo: webpack,
        path: [
          path.resolve(__dirname, 'src/common'),
          path.resolve(__dirname, 'src/common/styles'),
          path.resolve(__dirname, 'src/app1'),
          path.resolve(__dirname, 'src/app2'),
        ]
      }),
      require('precss'),
      require('autoprefixer'),
    ]
}

in webpack.conf.js I have simple definition:

{
    test: /\.(scss|sass|css)$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]',
      'postcss-loader'
    ]
}

During a build I get a warning:

WARNING in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!./~/postcss-loader/lib!./src/common/shared/ui/Button.scss

(Emitted value instead of an instance of Error) postcss-extend: /Users/kania/projects/app-frontend/src/common/shared/ui/Button.scss:22:5: @extend is being used in an anti-pattern (extending things not yet defined). This is your first and final warning

@ ./src/common/shared/ui/Button.scss 4:14-210 13:2-17:4 14:20-216 @ ./src/common/shared/ui/Button.tsx @ ./src/common/shared/ui/index.ts (...)

In Button.scss I have a very simple definitions:

@import 'shared/styles/buttons';
@import 'shared/styles/fonts';

.buttonContainer {
  display: flex;
}

.button {
  @extend %smallFont;
  padding: 0 2.5rem;
  flex: 1;

  &.style_primary {
    @extend %buttonPrimary;
  }

  &.style_secondary {
    @extend %buttonSecondary;
  }

  &.style_tertiary {
    @extend %buttonTertiary;
  }
}

Inside .button class I define 3 nested classes (&.style_primary &.style_secondary and &.style_tertiary). I found out if 2 of them are commented everything works. It looks like if I use more than one placeholder selector from one file it throws a warning...

Placeholders are defined in imported files, files exist on defined location.

I would appreciate any hint, how to solve this issue.

Used packages:

• postcss-loader@^2.0.5

• postcss-extend@^1.0.5

• postcss-smart-import@^0.7.4

• precss@^1.4.0 autoprefixer@^7.1.1

• webpack@^2.5.1

• webpack-dev-server@^2.4.5

I use this command to run the build: webpack-dev-server --hot --progress --config webpack.dev.config.js

Answer 1

After some hours spent on searching the reason of warning and not built styles for everything after the warning, I finally found the cause.

And the winner is:

precss@^1.4.0

This is old package, last changes were added 2 years ago. It is not even a package, just gathered plugins for postcss to process styles.

I removed this package from my project and added few needed plugins postcss.conf.js:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  parser: 'postcss-scss',
    plugins: [
      require('postcss-smart-import')({
        addDependencyTo: webpack,
        path: [
          path.resolve(__dirname, 'src/common'),
          path.resolve(__dirname, 'src/app1'),
          path.resolve(__dirname, 'src/app2'),
        ]
      }),
      require('postcss-advanced-variables'),
      require('postcss-mixins'),
      require('postcss-nested'),
      require('postcss-nesting'),
      require('postcss-extend'),
      require('autoprefixer'),
    ]
};

works!