Using Moovweb only some of the inline styles are being removed

Question

So I am working in a very old site that is table heavy - everything has been converted to divs, and inside of main.ts I have tried removing the inline styles because the function remove_all_styles() is not working.

@func XMLNode.remove_all_styles() {
  remove(".//link[@rel='stylesheet'][not(@data-mw-keep)]|.//style")
}

I also tried adding remove(".//@style") and still failing to remove the div style="" on half of the page. I am not having much luck finding a solution so any help would be appreciated.

edit - as a temporary solution I used this custom JavaScript I found on CSS tricks - http://css-tricks.com/snippets/javascript/remove-inline-styles/

but I know there is a more appropriate Moovweb solution out there somewhere.

Thanks,

Answer 1

My guess is if you view the source, the inline styles won't be there, which means the styles are added later with JS. Otherwise remove(".//@style") would have worked if you've scoped into the right div.

The only tritium implementation that I can think of is a bit hacky but worked for me on several occasions. You need to reverse engineer the desktop js that adds those inline styles and figure out the selector it uses. Then you can find a workaround by changing the attribute or renaming the node

For example, if the desktop js is something like this $(".price-table th").css("color", "red"); or like this $(".my-table th").attr("style", "");

You can override the class name in tritium to break the jquery selectors above.

$(".//table[@class='price-table']") {
  attributes(class: "new-price-table)
}