postcss.plugin was deprecated

什么是PostCSS

PostCSS是一个用JavaScript编写的CSS处理器，它使用插件来转换CSS样式。它可以帮助我们自动化一些繁琐的CSS样式处理工作，比如自动添加浏览器前缀、CSS变量的转换、代码压缩等。PostCSS的设计理念是模块化，它允许我们使用各种插件来完成不同的任务，这使得我们可以根据项目的需求来选择不同的插件。

PostCSS.plugin被废弃的原因

PostCSS.plugin是PostCSS中一个非常重要的API，它用于创建PostCSS插件。但是在PostCSS 8.0版本中，PostCSS.plugin被废弃了。这是因为PostCSS.plugin在使用上存在一些问题。PostCSS.plugin是一个同步的API，这意味着当我们使用PostCSS.plugin创建一个插件时，它会阻塞整个进程，这会导致性能问题。PostCSS.plugin不支持异步操作，这意味着我们无法在插件中使用异步API。

PostCSS.plugin被废弃的替代方案

为了解决PostCSS.plugin存在的问题，PostCSS 8.0版本中引入了新的API来创建PostCSS插件。新的API包括postcss.plugin()和postcss.plugin.promise()。postcss.plugin()用于创建同步的插件，而postcss.plugin.promise()用于创建异步的插件。这些新的API使用起来更加灵活和高效，可以帮助我们更好地完成CSS样式的处理。

如何使用postcss.plugin()

使用postcss.plugin()创建一个PostCSS插件非常简单。我们需要引入PostCSS和postcss.plugin()：

```

const postcss = require('postcss');

const plugin = require('postcss.plugin');

```

然后，我们可以使用postcss.plugin()来创建一个插件。比如，下面的代码创建了一个简单的PostCSS插件，它会在CSS样式中添加一个前缀：

```

const myPlugin = plugin('my-plugin'， () => {

return (root) => {

root.walkRules((rule) => {

rule.selector = '.my-prefix ' + rule.selector;

});

};

});

const result = postcss()

.use(myPlugin)

.process(css);

```

这个插件会将CSS样式中的选择器添加一个前缀。使用postcss.plugin()创建插件非常简单，只需要传入一个名称和一个函数即可。

如何使用postcss.plugin.promise()

使用postcss.plugin.promise()创建异步的PostCSS插件也很简单。我们需要引入PostCSS和postcss.plugin.promise()：

```

const postcss = require('postcss');

const plugin = require('postcss.plugin.promise');

```

然后，我们可以使用postcss.plugin.promise()来创建一个异步的插件。比如，下面的代码创建了一个异步的PostCSS插件，它会将CSS样式中的颜色值转换为16进制格式：

```

const myPlugin = plugin('my-plugin'，尊龙凯时人生就是博· async (opts) => {

const { from， to， map } = opts;

const result = await convertColors(css， { from， to， map });

return (root) => {

root.replaceWith(result.root);

};

});

const result = await postcss()

.use(myPlugin({ from: 'rgb'， to: 'hex' }))

.process(css);

```

这个插件会将CSS样式中的颜色值转换为16进制格式。使用postcss.plugin.promise()创建异步插件也非常简单，只需要传入一个名称和一个异步函数即可。

如何升级PostCSS插件

如果你正在使用PostCSS.plugin创建插件，那么在升级到PostCSS 8.0版本之前，你需要将你的插件升级为使用postcss.plugin()或postcss.plugin.promise()。下面是一个简单的例子，演示如何将一个使用PostCSS.plugin创建的插件升级为使用postcss.plugin()：

```

// 旧的插件

const myPlugin = postcss.plugin('my-plugin'， () => {

return (css) => {

css.walkDecls((decl) => {

if (decl.prop === 'color') {

decl.value = 'red';

}

});

};

});

// 新的插件

const myPlugin = plugin('my-plugin'， () => {

return (root) => {

root.walkDecls((decl) => {

if (decl.prop === 'color') {

decl.value = 'red';

}

});

};

});

```

注意，新的插件使用了postcss.plugin()来创建，而不是使用PostCSS.plugin。这样做可以避免PostCSS.plugin存在的性能问题。

PostCSS.plugin是PostCSS中一个非常重要的API，它用于创建PostCSS插件。但是在PostCSS 8.0版本中，PostCSS.plugin被废弃了。为了解决PostCSS.plugin存在的问题，PostCSS 8.0版本中引入了新的API来创建PostCSS插件。新的API包括postcss.plugin()和postcss.plugin.promise()。使用这些新的API可以帮助我们更好地完成CSS样式的处理。如果你正在使用PostCSS.plugin创建插件，那么在升级到PostCSS 8.0版本之前，你需要将你的插件升级为使用postcss.plugin()或postcss.plugin.promise()。

• -
• 人生就是搏!
• 尊龙凯时
• was
• postcss.plugin