preserve: false dosen't work with @import

[chybisov]

Hi, preserve: false dosen't work with css @import, however preserve: true works great. If index.css looks like

:root {
  --some-color: red;
}

body {
  color: var(--some-color);
}

then output will be correct

body {
  color: red;
}

If we have colors.css and index.css and import colors.css to index like this

@import 'colors.css';

body {
  color: var(--some-color);
}

then output will be

body {
  color: var(--some-color);
}

I'm using postcss-custom-properties with postcss-preset-env and webpack.

webpack.config.js

...
const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              preserve: false,
              stage: 3,
            }),
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ];
...