NitroPack script tags inserted unconventionally breaking CSS styles

I have found that the NitroPack plugin is inserting script tags in a non-WordPress way which is, for us, breaking CSS styles.

Our specific issue

We have CSS that expects a specific DOM structure using the adjacent sibling combinator (+) selector.

For example, say our DOM looks like….

<main>
    ...
</main>
<footer>
    ...
</footer>

And the main tag is located in index.php and the footer tag in footer.php. Now say that our CSS is something like:

main + footer {
    background: red;
}

The NitroPack plugin inserts scripts inbetween the main and footer…

<main>
    ...
</main>
<script nitro-exclude>...</script>
<script nitro-exclude>...</script>
<script nitro-exclude>...</script>
<footer>
    ...
</footer>

Which, as you can guess, breaks the CSS because main + footer is no longer true.

The main issue and cause

Looking at the nitropack/main.php file I can see both the get_footer and wp_footer hooks are used to print said scripts and it’s the get_footer hook that is causing the issue. By using the get_footer hook, you are printing the scripts above the footer. Instead, I expect the scripts to be printed after the footer but before the closing </body> tag.

I understand that both hooks are used as fallbacks for each other but may I suggest using a different hook instead, maybe wp_head or even wp_enqueue_scripts? Or if that’s a major breaking change, can we get an advanced setting or PHP constant allowing us to enable/disable the use of get_footer?

Temporary fix

I’ve implemented the below temporary fix our end but would like to see a solution from NitroPack….

remove_action( 'get_footer', 'nitropack_print_heartbeat_script' );
remove_action( 'get_footer', 'nitropack_print_beacon_script' );
remove_action( 'get_footer', 'nitropack_print_cookie_handler_script' );

add_action( 'plugins_loaded', function() {
    remove_action( 'get_footer', 'nitropack_print_heartbeat_script' );
    remove_action( 'get_footer', 'nitropack_print_beacon_script' );
    remove_action( 'get_footer', 'nitropack_print_cookie_handler_script' );
}, PHP_INT_MAX );

add_action( 'get_footer', function() {
    remove_action( 'get_footer', 'nitropack_print_heartbeat_script' );
    remove_action( 'get_footer', 'nitropack_print_beacon_script' );
    remove_action( 'get_footer', 'nitropack_print_cookie_handler_script' );
}, 1 );