Как добавить отсутствующие свойства и префиксы CSS-специфики для браузера для epub

Question

Издатели иногда выпускают названия Epub, не включая все необходимые свойства и префиксы объявления CSS-специфики для браузера. Например, заголовок может содержать объявление -webkit-transform, но опустить transform или наоборот.

Существует ряд инструментов, которые могут помочь процессу разработчиков при создании нового контента Stackoverflow: How to automatically add browser prefix to CSS3 properties?; однако я ищу способ разобрать весь Epub и добавить недостающие свойства.

Answer 1

Будем считать, что все соответствующие CSS находятся в файлах .css. Вы можете открыть epub, разархивировав его, и это покажет файлы CSS, где бы они ни находились. Затем вы можете просто запустить их через свой любимый инструмент префикса, а затем застегнуть книгу обратно.

Проблема в том, что префиксы AFAIK обычно ожидают свойство transform и добавляют -webkit-transform. Я не уверен, что эти инструменты будут работать, если только -webkit-transform есть, и вы хотите добавить transform. Вам нужно будет проверить каждый инструмент, чтобы узнать, обеспечивает ли оно это поведение. В худшем случае вы можете написать свой собственный плагин для инфраструктуры преобразования CSS, такой как переделка, чтобы делать то, что вам нужно.

Answer 2

Закончено решение проблемы с помощью postcss с плагинами postcss-unprefix и autoprefixer. 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); 
     } 
    }); 
}