如何将缺少的特定于浏览器的 css 声明属性和前缀添加到 epub [关闭]答案

【问题标题】：How to add missing browser-specific css declaration properties and prefixes to epub [closed]如何将缺少的特定于浏览器的 css 声明属性和前缀添加到 epub [关闭]
【发布时间】：2015-10-23 15:59:56
【问题描述】：

出版商有时会发布 Epub 标题，但不包括所有必需的特定于浏览器的 css 声明属性和前缀。例如，标题可能包含 -webkit-transform 声明但省略 transform，反之亦然。

有许多工具可用于协助开发人员工作流程创建新内容Stackoverflow: How to automatically add browser prefix to CSS3 properties?；但是，我正在寻找一种方法来解析整个 Epub 并添加任何缺失的属性。

【问题讨论】：

试图让我的头脑避开反对票。没有显示任何研究或努力：这个问题清楚地表明我研究了现有的工具。怎么不清楚？对谁没用？
开车投票，不用担心。也许反对者担心您最初似乎在要求一个工具，这在 SO 上是题外话。然而，在这种情况下，首选的反应是投票结束（他可能也这样做了），而不是反对。随便。

标签： css epub emmet epub3

【解决方案1】：

我们假设所有相关的 CSS 都在 .css 文件中。您可以通过解压缩来打开 epub，这将暴露 CSS 文件，无论它们在哪里。然后，您可以通过您最喜欢的前缀工具简单地运行这些，然后将书压缩起来。

问题在于 AFAIK 前缀工具通常需要 transform 属性并添加 -webkit-transform 对应项。如果只有-webkit-transform 存在并且您希望添加transform，我不确定这些工具是否有效。您必须检查每个工具以查看它是否提供此行为。在最坏的情况下，您可以为 CSS 转换框架编写自己的插件，例如返工来做您需要的事情。

【讨论】：

看起来 reworkcss 应该可以解决问题。将尝试找到一种方法来分享我的解决方案。

【解决方案2】：

最终使用带有插件 postcss-unprefix 和 autoprefixer 的 postcss 解决了问题。 postcss-unprefix 删除现有的前缀和 autoprefixer 然后添加任何需要的。

var fs = require('fs')
var postcss = require('postcss');

var input = process.argv[2]; // the source of the css
var output = process.argv[3]; // where to write the output

fs.readFile(input, 'utf8', function (err, result) {
    if (err) {
        console.log(err);
        process.exit(1);
    }
    processCss(result, function (err, result) {
        if (err) {
            console.log(err);
            process.exit(1);
        } else {
            fs.writeFileSync(output, result, "utf8");
            process.exit(0);
        }
    })
});


function processCss(cssString, callback) {
    postcss([require('postcss-unprefix'), require('autoprefixer')])
    .process(cssString, { from: 'in.css', to: 'out.css' })
    .then(function ( error, result ) {
        if (result) {
            callback(String.trim(result.css));
        } else {
            callback(null, error);
        }
    });
}

【讨论】：