如何防止 'postcss-preset-env' 删除 CSS 逻辑属性？

Question

在我的 Webpack 配置中使用以下内容时：

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

我注意到有时像下面这样的 CSS 规则会从捆绑的 CSS 输出中删除。

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

删除上面的 Webpack 配置时，上面的规则会按预期应用。

更具体地说：

当在 html 元素上设置 [dir="rtl"] 属性时，margin-inline-end: 1rem; 样式存在
未设置dir属性时，捆绑输出中不存在margin-inline-end: 1rem;样式
删除'postcss-preset-env'插件后，无论是否存在[dir]属性，margin-inline-end: 1rem;样式都存在

是什么导致了此行为？如何在继续使用 postcss-preset-env 进行其他操作（例如 autoprefixer 的同时禁用它？

Answer 1

默认情况下 postcss-preset-env 正在处理阶段 2+ 规则，具体取决于安装的 cssdb 的确切版本，您可能需要在使用 [=12] 时调整 stage 选项=] 到更高的值，例如 stage: 3.

并且看起来像 margin-inline-end 这样的一些逻辑属性将被处理成

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

也可以在选项中精确禁用规则：

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

这个 github 回购 vanilla-js-prototype-starter 有 webpack 和 PostCSS 配置工作正常，检查看看它是否能有所帮助。

如何防止 'postcss-preset-env' 删除 CSS 逻辑属性？

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

css

webpack

postcss