Bug: Optimized config causes CSS URL to be prefixed with /wp, breaking link

[paulbrzeski]

Terms

• I have read the guidelines for Contributing to Roots Projects
• This request is not a duplicate of an existing issue
• I have read the docs and followed them (if applicable)
• I have seached the Roots Discourse for answers and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

What's wrong?

When deploying a Sage 10 website, we have enabled wp acorn optimize as a build-after step in our fork of Trellis.

After running this command, the site tries to load the css from https://lcl.website.com/wp/app/themes/sage-dir, instead of https://lcl.website.com/app/themes/sage-dir.

What have you tried?

• Reproduced the issue locally by running wp acorn optimize and getting the same result.
• Extensive Googling, checked open/closed issues for Roots projects in the mix - Bud, Sage, Trellis and Acorn. Updated to latest Acorn to fix an initial issue with https which was resolved in 2.0.5
• Overriding the .env file to have a siteurl without /wp. When this is done, the wp acorn optimize command creates a config that works, but this wouldn't work with Bedrock afaik
• Tried hand correcting the file generated by acorn in sage-dir/storage/framework/cache/config.php, but this doesn't change the result
• Running composer install fixes it but I suspect just because it's clearing the cache folder
• Prepending /.. to the config/assets.php URL works but it creates ugly URLs which contain https://lcl.website.com/../wp/app/themes/sage-dir,
• Generated a working config.php by overriding .env file as before, ran a diff and all that was different was the "/wp" suffix for the Filesystems\Wordpress url & root values... but weirdly after switching back the URL and hand correcting this didn't change result. Did try regular wp cache flush but maybe there's another file based cache I'm not aware of?
• Tried reverting to Roots\asset instead of Roots\bundle, having the same issues which led me to believe it may be upstream in WP itself or arising from the combination of software we are using
• Did a bit of die(var_dump()) debugging within Roots\BundleContract, Roots\bundle, Roots\Asset, core WP Styles, wp_enqueue_styles and from all I can gather the caching of the config somehow triggers WP to choose the siteurl (which ends in `wp) for styles, even though it doesn't do so when cache hasn't been created and correcting that cache directly seems to not change anything.
• Deleting the config.php file triggers the CSS to load and the URL is correct in the html, making me wonder if either the files presence or another setting within it is causing this issue
• Tried Asynchronous components and their chunks are loaded from wrong path (on production) sage#3031, changes a different setting and the file is still loaded from the wrong location
• We are using a fork of Trellis and Bedrock as well as a Sage 10 beta2 which has been manually updated from an older beta. It's possible we missed something in the configuration changes between versions or something unique to our setup is causing this. I am mid setup for testing a non modified copy of Trellis\Bedrock\Sage but that's quite time consuming to setup so just wanted to get this bug report up first as it's possible I'll run out of time pursuing that before I get anywhere.
• Checked multiple projects that are in Sage 10 beta1, Sage 10 beta2 and stable Sage 10 (10.1.6) - all have the same issue. All are using the same forks of Trellis and Bedrock

What insights have you gained?

• .env file setting of siteurl causes wp acorn optimize to work correctly but it's my understanding this will break things with Bedrock which requires /wp there. Also it works in a "live" way - if I generate the cached config and change the setting in env, it seems to use siteurl for stylesheets. If I don't cache configs, it's correctly using homeurl.
• Deleting the config.php file allows css to load again but changing it by hand does not
• This thread feels related https://discourse.roots.io/t/site-url-returning-wp/12270

Possible solutions

• Open to suggestions :)

Temporary workarounds

• Omit wp acorn optimize from deployments, not sure how impacting this is on performance but it seemed minimal on first glance
• Prefix the /.. to assets.php, but this would be a last resort measure. Would almost rather just write our own script and link tags into the templates at that point.

Steps To Reproduce

1. On a VM provisioned by Trellis
2. Setup a Bedrock website using Sage 10
3. Build frontend assets using Bud
4. Run wp acorn optimize to cache configs
5. Load the website in a browser and confirm CSS is not loading
6. Check CSS urls and confirm they contain /wp/ after the public url of the site

Expected Behavior

• CSS to load
• URLs generated by wp_enqueue_style to be consistent whether we have cached configs or not

Actual Behavior

CSS cannot load as the URLs are invalid.

Relevant Log Output

No response

Versions

Acorn 2.0.5, Trellis 1.14.0, Sage 10 beta1,2 and 10.1.6, Bud 5.3.2, WP core 5.8.4, PHP 7.4, Ubuntu 20.04

[QWp6t]

I've seen this happen before. I think it has to do with Soil's relative URL stuff. Try disabling that module.

That's not a long term solution, but I think it's a viable workaround until we come up with a proper fix.

[paulbrzeski]

Thanks @QWp6t! I was hoping for a suggestion like that from someone in the know!

• Disabled soil plugin, CSS is loading on the main site I was testing on.
• Checked another Sage 10 build which doesn't have soil, doesn't have this issue

Sounds like that is the cause of this one, should this issue perhaps be lodged on soil's repo instead?

[retlehs]

Here's a workaround from @QWp6t that's been working for me:

    # Soil theme support
    add_theme_support('soil', [
        'clean-up',
        'nav-walker',
        'nice-search',
-       'relative-urls',
+       'relative-urls' => php_sapi_name() !== 'cli',
    ]);

[dalepgrant]

I've just hit this when swapping Soil for Acorn Prettier.

Acorn: 4.3 (latest)
Acorn Prettify: 1.0.1 (latest)
Bud 6.7.3 (latest is 6.23.1). Below all at 6.7.3 too:

• Bud Post CSS
• Bud Sass
• Bud Tailwind
• Bud Critical CSS
  WP 6.5.5

After deploying (to staging, in my case), I ran wp acorn optimize:clear which 'resolved' the issue. I then checked if setting 'enabled' => php_sapi_name() !== 'cli', in the prettify config worked by changing that and re-running wp acorn optimize. The issue did not return.

I also tested by setting 'enabled' => true, and commenting out script_loader_src and style_loader_src here. That also seemed to work. Correction: nope. Did not work.

Leaving this here in the hope it's helpful for future searchers (probably me).

[Log1x]

Feel free to open an issue on the Prettify repo – I'm sure we can just fix this in the package.