Question 43603 in Html Question posted in
Some basic documentation can be found here.

Using npm juice2, can I inline styles inside <style> without overriding styles in html style attribute?

Hi im using juice2 from:
https://www.npmjs.com/package/juice2

juice2 correctly inlines those CSS selectors of … to corresponding HTML tag.
However I have some HTML tags which also have style attribute. ie:

<style>
 p { color: black}
</style>

<p style="padding: 10px"> Hi there</p>

when I run juice API on a file:

 const options = {
  applyStyleTags: true,
  preserveMediaQueries: true
}
juice.juiceFile(ruta, options, (err, html) => {
  console.log(html);
  try {
    fs.writeFileSync(inlinedFile, html);
    // file written successfully
  } catch (err) {
    console.error(err);
  }

})

will output:

<p style="color: black">Hi there</p>

instead of merging both styles:

<p style="color: black; padding: 10px;">Hi there</p>

Any idea on how to get the desired output? (am I missing any options of juice2 which merges both styles?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    juice v9.0.0 https://www.npmjs.com/package/juice?activeTab=readme (not juice2) seems to fix the issue and now correctly merges styles declared unside tag with those styles inlined in style attribute in HTML tag.

    As mentioned above, juice seems to be updated while juice2 is unmaintained


  2. 0

    It is possible that the npm juice2 package override your inline CSS and in order to avoid that we can use id selector in your inline style,
    for example:

    <style>
    #my_paragraph{
    color: black;
    }
</style>

 <p id="my_paragraph" style="padding: 10px"> Hi there </p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search