tcmulder / aquamin

Aquamin WordPress Theme
3 stars 1 forks source link

Consider using @wordpress/scripts rather than Parcel 2. #98

Closed tcmulder closed 3 months ago

tcmulder commented 3 months ago

Currently I've got an experimental branch going, v7.0.0_wpscripts. There's also older work on a v7.0.0_wpscripts_sass branch in which I converted all .css files to .scss.

tcmulder commented 3 months ago

This has some great potential since:

  1. It's maintained by the community.
  2. It has 1st class support for @wordpress/* packages.
  3. It outputs even .php files to dist, which is logical: all js/css/php then gets served from dist (assets could even be deleted in prod).
  4. The vast majority of examples I could copy/paste online should work out of the box.

But, it does currently come with some caveats:

  1. It's "Fast Refresh" doesn't seem to work in LocalWP, but rather wp-env+Docker.
  2. BrowserSync works, but since all files apparently change every save, it won't inject changes but do a full refresh every save.
  3. There's a lot more output than Parcel 2, which is annoying: I like how Parcel just shows Browser Sync output and then refreshes itself inline.
  4. I got it working on the v7.0.0_wpscripts branch, but it's just an odd patch: it has difficulty handling similar files like view.css and view.js, attempting to override one with the other.
  5. I got PostCSS working, but it prefers SCSS, so some features may misbehave.
  6. I haven't even started testing autoprefixer, browser version support adherence, linting and IDE hinting, and some other features.
  7. I tried getting --experimental-modules working for viewScriptModule and "interactivity": true, but it won't even compile. (Since this is experimental, they may fix it, but it may only work for block development rather than block+theme development).
  8. SVG's won't inline; to get block SVG's to work then, I need to search for @wordpress/scripts's SVG loader and add an ignore to it for inline SVGs, then implement my own. It works, but it feels fragile, like if they change the SVG regex a bit it will fail (it still builds but doesn't show the icon).

Here are some good resources:

  1. Developer Hours episode.
  2. Example theme using @wordpress/scripts for theme (rather than block) development.
tcmulder commented 3 months ago

Acceptance criteria: