How to prevent 'postcss-preset-env' from removing CSS logical properties?

Question

When using the following in my Webpack config:

{
  test: /\.scss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env'
            ],
          ],
        },
      },
    },
    "sass-loader"
  ],
},

I'm noticing that sometimes CSS rules like the following are removed from the bundled CSS output.

img {
  margin-inline-end: 1rem;
}

When removing the above Webpack config, the rule above is applied as expected.

More specifically:

• when an [dir="rtl"] attribute is set on the html element, the margin-inline-end: 1rem; style exists
• when the dir attribute is not set, the margin-inline-end: 1rem; style does not exist in the bundled output
• when the 'postcss-preset-env' plugin is removed, the margin-inline-end: 1rem; style exists regardless of the presence of the [dir] attribute

What is causing this behavior and how can I disable it while continuing to use postcss-preset-env for other things like autoprefixer?

Answer 1

By default postcss-preset-env is processing stage 2+ rules, depending on the exact version of cssdb was installed, you might need to tweak the stage option while using postcss-preset-env to a higher value like stage: 3.

And looks like some logical properties like margin-inline-end will be processed into

[dir='ltr'] { margin-right: 1rem } ...

Also rules can also be disabled precisely in the option :

{
  /* use stage 2 features + disable logical properties and values rule */
  stage: 2,
  features: {
    'logical-properties-and-values': false
  }
}

This github repo vanilla-js-prototype-starter has webpack & PostCSS configured working well, check and see if it can help a bit.