css - 同步使用自动前缀

Question

我想在我的 Node 应用程序中使用 autoprefixer 来编译 css。对于我的特定需求，我想在没有回调或 promise 的情况下调用 autoprefixer。

很简单:

var result = autoprefixer.process(css);

或

var result = myPrefixerWrap(css);

我为此苦苦挣扎了一段时间，你能帮帮我吗？

ps:我已经尝试过 postcss-js，但它产生了一个用于 react 使用的 json 对象，而不是纯 css。例如 {borderRadius:"5px"}

var prefixer    = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject   = postcssJS.objectify(cssCompiled);
var autoResult  = prefixer(cssObject);

Answer 1

PostCSS 有一个 API 用于同步获取 Processor#process(process().css，别名为 toString())的结果，只要所有的使用的 PostCSS 插件是同步的(比如 Autoprefixer)。执行此操作的代码非常简单:

var postcss = require('postcss'); // import postcss from 'posts';
var autoprefixer = require('autoprefixer'); // import autoprefixer from 'autoprefixer';
postcss([autoprefixer]).process(styleString).css;

---

注意:我在 Webpack 中使用 postcss-js 时遇到了问题，所以对于那些看到如下错误的人:

Module parse failed: /path/to/node_modules/autoprefixer/node_modules/caniuse-db/features-json/css-regions.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.

或者:

ERROR in ./~/autoprefixer/~/browserslist/index.js
Module not found: Error: Cannot resolve module 'fs' in /path/to/node_modules/autoprefixer/node_modules/browserslist
 @ ./~/autoprefixer/~/browserslist/index.js 3:14-27

查看 Troubleshooting section postcss-js GitHub 自述文件，了解您需要添加到 Webpack 配置以使其正常工作的内容。