同步使用自动前缀

Question

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

很简单：

var result = autoprefixer.process(css);

或

var result = myPrefixerWrap(css);

我正在为此苦苦挣扎，请你帮帮我。

谢谢

ps：我已经尝试过 postcss-js，但它会产生一个 json 对象供 React 使用，而不是纯粹的 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

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

同步使用自动前缀

Use autoprefixer synchronously

css

node.js

autoprefixer

postcss