Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DO NOT MERGE] feat!: css inlining in as_raw_html() #498

Closed
wants to merge 12 commits into from

Conversation

rich-iannone
Copy link
Member

This addition to the as_raw_html() method adds the inline_css= argument. This option will inline CSS styles to the associated tags and remove the <style>...</style> block from the HTML fragment. It'll be helpful for situations where you'd need to include an HTML table in an email message body (requires CSS inlining) or for embedding a table in a larger HTML document (could help to preserve more of the table's styling properties).

Having this new feature requires a new dependency: css_inline. But it does a great job with CSS inlining both with a complete document and also with an HTML fragment (both modes are used here since there is a make_page= argument in as_raw_html()).

Here's an example for how this works in practice:

from great_tables import GT, md, style, loc
from great_tables.data import gtcars
import polars as pl

gtcars_mini = (
    pl.from_pandas(gtcars)
    .select(["mfr", "model", "msrp"])
    .head(5)
)

gt_tbl = (
    GT(gtcars_mini)
    .tab_header(
        title=md("Data listing from **gtcars**"),
        subtitle=md("gtcars is an R dataset")
    )
    .tab_style(
        style=style.fill(color="LightCyan"),
        locations=loc.body(columns="mfr")
    )
    .fmt_currency(columns="msrp")
    .tab_options(
        heading_background_color="Azure",
        table_body_hlines_color="Lavender",
        table_body_hlines_width="2px"
    )
    .opt_horizontal_padding(scale=2)
)

Here is the table HTML without the CSS-inlining:

print(gt_tbl.as_raw_html(inline_css=False))
<div id="dwjrrawiqe" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#dwjrrawiqe table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

#dwjrrawiqe thead, tbody, tfoot, tr, td, th { border-style: none; }
 tr { background-color: transparent; }
#dwjrrawiqe p { margin: 0; padding: 0; }
 #dwjrrawiqe .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
 #dwjrrawiqe .gt_caption { padding-top: 4px; padding-bottom: 4px; }
 #dwjrrawiqe .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
 #dwjrrawiqe .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
 #dwjrrawiqe .gt_heading { background-color: Azure; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #dwjrrawiqe .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
 #dwjrrawiqe .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
 #dwjrrawiqe .gt_column_spanner_outer:first-child { padding-left: 0; }
 #dwjrrawiqe .gt_column_spanner_outer:last-child { padding-right: 0; }
 #dwjrrawiqe .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
 #dwjrrawiqe .gt_spanner_row { border-bottom-style: hidden; }
 #dwjrrawiqe .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
 #dwjrrawiqe .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
 #dwjrrawiqe .gt_from_md> :first-child { margin-top: 0; }
 #dwjrrawiqe .gt_from_md> :last-child { margin-bottom: 0; }
 #dwjrrawiqe .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 2px; border-top-color: Lavender; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
 #dwjrrawiqe .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
 #dwjrrawiqe .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
 #dwjrrawiqe .gt_row_group_first td { border-top-width: 2px; }
 #dwjrrawiqe .gt_row_group_first th { border-top-width: 2px; }
 #dwjrrawiqe .gt_striped { background-color: rgba(128,128,128,0.05); }
 #dwjrrawiqe .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #dwjrrawiqe .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
 #dwjrrawiqe .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; text-align: left; }
 #dwjrrawiqe .gt_left { text-align: left; }
 #dwjrrawiqe .gt_center { text-align: center; }
 #dwjrrawiqe .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
 #dwjrrawiqe .gt_font_normal { font-weight: normal; }
 #dwjrrawiqe .gt_font_bold { font-weight: bold; }
 #dwjrrawiqe .gt_font_italic { font-style: italic; }
 #dwjrrawiqe .gt_super { font-size: 65%; }
 #dwjrrawiqe .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
 #dwjrrawiqe .gt_asterisk { font-size: 100%; vertical-align: 0; }
 
</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>

  <tr class="gt_heading">
    <td colspan="3" class="gt_heading gt_title gt_font_normal">Data listing from <strong>gtcars</strong></td>
  </tr>
  <tr class="gt_heading">
    <td colspan="3" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">gtcars is an R dataset</td>
  </tr>
<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="mfr">mfr</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="model">model</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" scope="col" id="msrp">msrp</th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ford</td>
    <td class="gt_row gt_left">GT</td>
    <td class="gt_row gt_right">$447,000.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Speciale</td>
    <td class="gt_row gt_right">$291,744.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Spider</td>
    <td class="gt_row gt_right">$263,553.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">458 Italia</td>
    <td class="gt_row gt_right">$233,509.00</td>
  </tr>
  <tr>
    <td style="background-color: LightCyan;" class="gt_row gt_left">Ferrari</td>
    <td class="gt_row gt_left">488 GTB</td>
    <td class="gt_row gt_right">$245,400.00</td>
  </tr>
</tbody>


</table>

</div>

With inline_css=True, we get the styles inlined into the style attributes of the appropriate tags:

print(gt_tbl.as_raw_html(inline_css=True))
<div id="tkbclwafcy" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">

<table class="gt_table" data-quarto-bootstrap="false" data-quarto-disable-processing="false" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;display: table;border-collapse: collapse;line-height: normal;margin-left: auto;margin-right: auto;color: #333333;font-size: 16px;font-weight: normal;font-style: normal;background-color: #FFFFFF;width: auto;border-top-style: solid;border-top-width: 2px;border-top-color: #A8A8A8;border-right-style: none;border-right-width: 2px;border-right-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #A8A8A8;border-left-style: none;border-left-width: 2px;border-left-color: #D3D3D3;">
<thead style="border-style: none;">

  <tr class="gt_heading" style="border-style: none;background-color: Azure;text-align: center;border-bottom-color: #FFFFFF;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
    <td class="gt_heading gt_title gt_font_normal" colspan="3" style="border-style: none;color: #333333;font-size: 125%;font-weight: normal;padding-top: 4px;padding-bottom: 4px;padding-left: 10px;padding-right: 10px;border-bottom-color: #FFFFFF;border-bottom-width: 0;background-color: Azure;text-align: center;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">Data listing from <strong>gtcars</strong></td>
  </tr>
  <tr class="gt_heading" style="border-style: none;background-color: Azure;text-align: center;border-bottom-color: #FFFFFF;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
    <td class="gt_heading gt_subtitle gt_font_normal gt_bottom_border" colspan="3" style="border-style: none;color: #333333;font-size: 85%;font-weight: normal;padding-top: 3px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;border-top-color: #FFFFFF;border-top-width: 0;background-color: Azure;text-align: center;border-bottom-color: #D3D3D3;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;">gtcars is an R dataset</td>
  </tr>
<tr class="gt_col_headings" style="border-style: none;background-color: transparent;border-top-style: solid;border-top-width: 2px;border-top-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #D3D3D3;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" id="mfr" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: left;">mfr</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" id="model" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: left;">model</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" id="msrp" rowspan="1" colspan="1" scope="col" style="border-style: none;color: #333333;background-color: #FFFFFF;font-size: 100%;font-weight: normal;text-transform: inherit;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: bottom;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">msrp</th>
</tr>
</thead>
<tbody class="gt_table_body" style="border-style: none;border-top-style: solid;border-top-width: 2px;border-top-color: #D3D3D3;border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #D3D3D3;">
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ford</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">GT</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$447,000.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Speciale</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$291,744.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Spider</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$263,553.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">458 Italia</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$233,509.00</td>
  </tr>
  <tr style="border-style: none;background-color: transparent;">
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;background-color: LightCyan">Ferrari</td>
    <td class="gt_row gt_left" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: left;">488 GTB</td>
    <td class="gt_row gt_right" style="border-style: none;padding-top: 8px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;margin: 10px;border-top-style: solid;border-top-width: 2px;border-top-color: Lavender;border-left-style: none;border-left-width: 1px;border-left-color: #D3D3D3;border-right-style: none;border-right-width: 1px;border-right-color: #D3D3D3;vertical-align: middle;overflow-x: hidden;text-align: right;font-variant-numeric: tabular-nums;">$245,400.00</td>
  </tr>
</tbody>


</table>

</div>

Notice that the CSS-inliner does not remove existing style rules from tags. Rather styles from the <style> block are prepended to the existing rules.

Fixes: #497

Copy link

codecov bot commented Oct 24, 2024

Codecov Report

Attention: Patch coverage is 91.54930% with 6 lines in your changes missing coverage. Please review.

Project coverage is 90.63%. Comparing base (03e38ab) to head (d307803).
Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
great_tables/_export.py 71.42% 6 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #498      +/-   ##
==========================================
- Coverage   90.65%   90.63%   -0.02%     
==========================================
  Files          45       45              
  Lines        5359     5402      +43     
==========================================
+ Hits         4858     4896      +38     
- Misses        501      506       +5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@github-actions github-actions bot temporarily deployed to pr-498 October 24, 2024 15:30 Destroyed
@machow machow self-requested a review November 12, 2024 21:22
Copy link
Collaborator

@machow machow left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From pairing, we're going to start a new PR for this, since reconciling Ruff accidentally produced many file changes

edit: here is the original diff before the ruff changes were applied: main...5ad0ae3

@machow machow changed the base branch from main to feat-fmt-icon December 9, 2024 21:08
@machow machow changed the base branch from feat-fmt-icon to main December 9, 2024 21:08
@Yasin197
Copy link

Yasin197 commented Dec 9, 2024

Thanks for this PR guys!

Do you think it will make it into the next release by any chance?

@rich-iannone
Copy link
Member Author

@Yasin197 I think there's a very good chance of that!

@rich-iannone rich-iannone changed the title feat: css inlining in as_raw_html() feat!: css inlining in as_raw_html() Dec 10, 2024
@github-actions github-actions bot temporarily deployed to pr-498 December 10, 2024 17:30 Destroyed
@rich-iannone rich-iannone changed the title feat!: css inlining in as_raw_html() [DO NOT MERGE] feat!: css inlining in as_raw_html() Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add an inline CSS option to the as_raw_html method
3 participants