Oxygen builder dynamic CSS not being exported properly

[Zyles]

CSS styles are not working after export. They are in fact there, and I can go to them by looking at the page source code.

But the entire page is unstyled.

I am rewriting URLs as so:

wp-content/,contents/
wp-content/uploads/sites/2/,contents/uploads/
wp-includes/,includes/

And:

wp-content/,contents/
wp-content/uploads/sites/2/,contents/uploads/
wp-includes,includes

What is causing this to fail to render CSS?

[Zyles]

I am using Oxygen to build the site and there is a link to a non .css file for some reason.

<link rel="stylesheet" id="oxygen-styles-css" href="//example.com/?xlink=css&#038;ver=5.4.2 type="text/css" media="all" />

This is causing rendering issues because WP2Static does not process this link.

xlink=css is used by Oxygen to have dynamic CSS on pages. Which means this link seems to have unique data per page.

A solution could be to convert the link to a inline CSS block.

[Zyles]

Another Oxygen Builder problem.

Excluding URLs containing parameter "?ct_template"

It does not seem to be possible excluding URLs with parameters in the exclusion list. I tried the following:

/?ct_template*
/?ct_template
?ct_template
ct_template

[Zyles]

This is also a problem with the plugin: https://sv.wordpress.org/plugins/wp-add-custom-css/

Probably because the URL it generates is: <link rel='stylesheet' id='wp-add-custom-css-css' href='https://example.com?display_custom_css=css&#038;ver=5.4.2' type='text/css' media='all' />

I assume the parser is looking for .css files? I think it would be better if it was looking for type='text/css' and rewrite the files into .css files. Perhaps with a md5sum filename for cache purposes.

[leonstafford]

Hi @Zyles thanks for reporting.

For such query string based URLs, they won't be included by default in the export, as we cannot maintain such a page in the static site, ie:

/somepage/index.html
/somestyles.css

are OK, where the /somepage/index.html will resolve requests to /somepage/. It won't resolve requests to filenames like display_custom_css=css&ver=5.4.2.

It may be possible to add some rewrite rules/proxying on your WP server to turn display_custom_css=css&ver=5.4.2 into display_custom_css/css/ver/5.4.2/ or such, but that's a lot of effort for a workaround.

I'd suggest as a possible quick-win, to try the Autoptimize plugin, which has an option to consolidate all CSS files and is often a quick solution to include assets that are otherwise not being included in static export.

[leonstafford]

Also, I've moved this issue to this project, which seems to be the one you're using. The directory renaming/rewriting has an open issue, so I'd avoid that for the time being and ensure you're using the latest released installer here: https://github.com/WP2Static/static-html-output-plugin/files/4822705/static-html-output-plugin-6.6.21.zip

[Zyles]

Autoptmize didn't do anything. It does not seem to combine dynamic CSS.

Is it technically possible to convert the dynamic CSS into inline CSS on a per page basis?

This technical problem is making us unable to launch the site because Oxygen is saving part of the site design in this dynamic CSS.

[leonstafford]

@Zyles technically possible? Definitely!

How hard is another question.

If it's one of those query string URLs, that exists within a page, then as the page loads, you could use output buffering to grab all the HTML content, make the request to the dynamic script, then replace the reference to it with some inline CSS.

That's if you want to do it on the WordPress side.

It could also (and probably with more control) be done within WP2Static's Crawl process. We have a hook in the plugin now to allow all sorts of things within the post_processing stage, but could add a hook where needed within the crawling stage, along with the custom code that would grab and inline the CSS.

I don't know how much demand there would be for any WP2Static users to want to do this, it's usually more an Autoptimize type solution people will use in conjunction. That said, as we get the full exported site, there could possibly be some advanced processing addons in WP2Static to squeeze out more pagespeed optimization by inlining and keeping just critical CSS and even shortening element attributes, etc, to really squeeze out the most performance for page loads.

[Zyles]

I tried a lot of the cache tools and none of them converts the dynamic CSS into inline, only the .css files.

The only solution I see is converting it to inline CSS when crawling or converting it to a static CSS file and linking to it. But since dynamic CSS seems to be used on a per page basis it might as well be better to inline it as it is not shared across multiple pages.

As it stands now, this tool does not work with Oxygen builder because of how they partly save CSS dynamically. This is a huge problem for us at least. Because it breaks half the design of the site after exporting.

[leonstafford]

I'll rename this issue to Oxygen builder missing styles, so I can look into that when able.