Duplication of CSS rules in the result bundle (ver 7.0.0)

[mxmknnv]

I updated plugin to ver. 7.0.0 and I have noticed that CSS rules are duplicated. I rolled back plugin to ver. 6.3.1 and it looks fine. I can assume that this is common issue with this and this.

Before update 7.0.0:

After update 7.0.0:

After update 7.0.0 and I switched off "postcss-calc" plugin:

Before:

After:

Before:

After:

My postcss.config.js file:

module.exports = ({ file, options, env }) => ({ plugins: { 'postcss-import': {}, 'postcss-nested': {}, 'postcss-custom-properties': {}, 'postcss-calc': {}, 'autoprefixer': env == 'production' ? { browsers: ['last 2 versions'] } : false, 'cssnano': env === 'production' ? {} : false, }, });

[jonathantneal]

This Custom Properties plugin works like Autoprefixer, adding the compiled declarations as a fallback, in the same way Autoprefixer adds vendor-prefixed declarations as a fallback. What you’ve reported is a feature, and a breaking change from v6. If you want to compile variables regardless of browser support, use the preserve option.

postCSSCustomProperties({
  preserve: false
})

The issues you’ve linked to are very different. The first issue was with someone saying that parsing wasn’t working correctly, which should have now been closed due to inactivity. The second is someone saying we should include an option to export variables to their own file, which I’m still lookin into in my spare time.

[mxmknnv]

@jonathantneal thank you for quick response!

[jonathantneal]

@mxmknnv, hey thanks for writing that. I was fretting for a good 10 minutes that my response was too terse. I don’t want to discourage anyone.