Comment ajouter des propriétés et des préfixes de déclaration de css manquants dans epub?

Question

Les éditeurs publient parfois des titres Epub sans inclure toutes les propriétés et préfixes de déclaration de css spécifiques au navigateur. Par exemple, un titre peut inclure une déclaration -webkit-transform mais omettre transform ou vice versa.

Il existe un certain nombre d'outils disponibles pour aider le flux de travail du développeur dans la création de nouveau contenu Stackoverflow: How to automatically add browser prefix to CSS3 properties?; Cependant, je cherche un moyen d'analyser un Epub entier et d'ajouter des propriétés manquantes.

Answer 1

Nous supposerons que tous les CSS pertinents sont dans les fichiers .css. Vous pouvez ouvrir l'epub en le décompressant, ce qui exposera les fichiers CSS, où qu'ils soient. Vous pouvez ensuite simplement les exécuter à l'aide de votre outil de préfixation préféré, puis le fermer.

Le problème est que les outils de préfixe AFAIK s'attendent généralement à la propriété transform et ajoutent la contrepartie -webkit-transform. Je ne suis pas sûr que ces outils fonctionneront si seulement -webkit-transform est là et vous voulez ajouter transform. Vous devrez vérifier chaque outil pour voir s'il fournit ce comportement. Dans le pire des cas, vous pouvez écrire votre propre plugin pour un framework de transformation CSS, comme retravailler pour faire ce dont vous avez besoin.

Answer 2

Terminé la résolution du problème en utilisant postcss avec les plugins postcss-unprefix et autoprefixer. postcss-unprefix supprime les préfixes existants et autoprefixer puis ajoute ceux qui sont nécessaires.

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); 
     } 
    }); 
}