如何防止"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的确切版本，您可能需要在使用postcss-preset-env时将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-reo-vanilla-js原型启动器具有webpack&PostCSS配置工作良好，请检查是否有帮助。