Automatically Convert Style Sheets to Inline Style

VS Code - How To Automatically Convert Inline Style Strings To React Inline Style Objects

I'm from Casbin team. The source code of https://casbin.org/CssToAndFromReact/ is the master branch of repo: https://github.com/casbin/CssToAndFromReact and it's deployed to the gh-pages branch.

We forked from https://github.com/htbkoo/CssToAndFromReact and add some changes. You can assemble a script to run automatically against multiple files via using our source code.

css - converting from an external style sheet to inline; not sure where some dropdown styles go

The fast solution, put all your CSS inside the HTML not inline but in Style tags and remove the styles from the style sheet file:

<style>
  .dropbtn
{
   display: inline-block;
   color: white;
   text-align: left;
   padding: 8px 16px;
   text-decoration: none;
}
.dropdown:hover .dropbtn
{
   background-color: #111;
}
li.dropdown
{
   display: inline-block;
}
.dropdown-content
{
   display: none;
   position: absolute;
   background-color: navy;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
   color: white;
   padding: 8px 16px;
   text-decoration: none;
   display: block;
   text-aligh: left;
}
.dropdown-content a:hover
{
   background-color: blue;
}
.dropdown:hover .dropdown-content
{
   display: block;
}
</style>

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;" >
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/first.html" class="dropbtn">
      First Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/second.html" class="dropbtn">
      Second Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/fourth.html" class="dropbtn">
      Fourth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float:right" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn">
      Fifth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

The other solution that I like to use is Mailchimp CSS Inline tool. It takes your style sheet and puts all the CSS styles inline automatically. You just remove the CSS styles from your stylesheet and then include the style sheet with the remaining css styles as usual. I put your CSS and HTML in there and this is the output. Let me know if any of the two worked.

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;">
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/first.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      First Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/1st1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/second.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Second Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/2nd1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/fourth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fourth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/4th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float: right;display: inline-block;" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fifth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/5th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

You can try the CSS Inline tool here: https://templates.mailchimp.com/resources/inline-css/

Convert inline styles to css rules

Try http://extractcss.com, but as @Tushar pointed out, the yellow div won't work.

Try https://github.com/jonkemp/extract-css too, which looks promising.

Convert internal stylesheet to inline css

select all the div that has the column class and remove class column if it is there then apply inline CSS using jquery.

$(document).ready(function(){
var obj = $(".column");
$(obj).each(function(){
    $(this).removeClass("column");//not really necessary
    $(this).css({"font-size":"13px","font-family":"arial,helvetica, verdana, sans-serif",          
            "font-weight":"normal",
            "color":"rgb(221, 221, 221)",
            "font-weight":"normal"});
});
});

Working Fiddle

How to convert external css properties to inline property?

There are a lot of tools for this task. Here are just some of them:

Online

• http://premailer.dialect.ca
• http://zurb.com/ink/inliner.php
• http://inlinestyler.torchboxapps.com/

Grunt

• https://www.npmjs.com/package/grunt-inline-css

Gulp

• https://www.npmjs.com/package/gulp-inline-css

---

Related Topics