Refactor: migrate Laravel mix to @wordpress/scripts

[jonwaldstein]

Description

ohhh yeahhhh

This has been a long time coming. We are officially migrating away from Laravel Mix to @wordpress/scripts. Up until now we had 2 build processes: Laravel Mix for our pre-3.0 scripts and @wordpress/scripts for our post-3.0 scripts. The result was a slow build process that was hard to manage.

Since we have been using @wordpress/scripts in production for over a year now, I am confident it will work for our needs beyond blocks which was an initial concern (since it's primarily geared to building blocks). It includes a lot of config for us that we don't have to manage and is easy to extend by supplying our own wepback config.

The actual act of migration was simple enough by specifying entry points for the legacy scripts and replacing the imports to use the top level build folder which contains all our compiled scripts and styles.

The biggest change has to do with styles that are imported into js files as Laravel Mix would inject style tags into the DOM, where as @wordpress/scripts uses MiniCssExtractPlugin to create specific stylesheets. This migration was primarily achieved by updating our EnqueueScript to automatically load the respected stylesheet based on the name of the script. If using enqueue_script directly then you also need to enqueue the stylesheet which was already being done in most cases.

The last hiccup and modification has to do with the way @wordpress/scripts handles css modules. Since it's geared toward creating blocks it tries to create separate stylesheets for the block editor and frontend. It does this by identifying any file with the name like style.module.scss and puts those styles into a file called "style-[filename].css". This was problematic as we use css modules in a lot of places without the intention of splitting up stylesheets. Again, this is specific to building blocks and we don't have much of a need for it in most cases. This approach was modified to use a new syntax like frontend.module.scss to preserve this functionality for blocks if need be.

Affects

Everything...

This technically touches all aspects of GiveWP as we are modifying the bundle and location of scripts and styles. I have tested this as much as possible to ensure all scripts and styles are accounted for

Visuals

N/A

Testing Instructions

ZIP: https://github.com/impress-org/givewp/actions/runs/13723192240

Test everything 😏

But seriously, let's manually click through all the pages and of course run automated tests.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed