Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master).
Updated Sage 9.x
You can now try out the Sage PR branch for webpack 5 and updated dependencies.
The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now.
Trying it out now!
To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this setup as it applies the fixes via PRs.
You can create a new Sage 9 project from this PR branch by using the following command:
(it may take a moment as composer usually iterates over some branches in the repository)
Updating an existing Sage 9 theme (quick guide)
Create a new Sage 9 project with the command above,
select the framework that is also used by your own Sage 9 project.
(It is assumed that your own Sage project is already under version control (as git).
Copy all the files of the newly created, empty Sage 9 project over the ones of your own Sage 9 project,
overwrite everything. You can skip the vendor/ folder to speed things up slightly.
Use diff/merge tools to resolve any differences, apply your own configuration and adjust it if necessary. Updating to webpack4 and 5 requires surprisingly little configuration changes.
Invoke composer update or, if there is trouble, remove the composer.lock file (it shouldnāt cause issues most of the time) and invoke composer install.
Invoke npm install, or, if there is trouble, remove the package-lock.json and/or yarn.lock (it shouldnāt cause issues as the base dependencies are already maxed out) and invoke npm install.
Also note that recent npm is much faster than in the earlier days, so you may want to switch back to npm, but this is up to you.
Invoke npm run build, the theme should build fine, fix your re-applied configuration if otherwise.
Test your theme, styles and images should load as before.
Feedback
Report issues you encounter with the blank theme and your updated theme, so the PRs for Sage9.x and sage-installer can be merged.
I have an easy fix, and I could tell you what I did, but not sure Iād be able to contribute to it.
Edit: Actually, my mistake - I think? Well, not sure anymore. It works with this code. Ummm. Sage is soo unmaintained. Though this 9.2 sage seems to be working alright so far. Iām impressed xD
I wonder how much money they need to support development of this. WordPress is soo behindā¦ I wouldnāt giving some money each month to support the dev of thisā¦ and so would other thousands of devs wouldnāt mind am sure. It makes the work soo much easier etcā¦ there are still a few things that are bit uff. Plus the more support it gets, the more people will use it, more yt videos etcā¦
IMHO one issue is that node versions become unsupported, which can cause issues with bindings.
package rot rogether with the need for then bumping the node version often results in incompatible node packages, forcing one to update to newer packages. Also the switch from composer 1 to 2 forced me to update existing sage projects.
And some packages like the Imagemin Mix for Laravel Mix hasnāt been updated for 2 years now and doesnāT currently work with Laravel Mixā¦
production builds log a warning/notice message I try to get rid off:
[DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
How can this be fixed? The assets are changed twice or something?
yarn build:production
yarn run v1.22.10
$ webpack --mode=production --progress --config resources/assets/build/webpack.config.js
46% building 2/3 entries 10/10 dependencies 8/9 modules
warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
92% sealing asset processing ESLintWebpackPlugin(node:2543) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
95% emitting emit(node:2543) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
99% done plugins FriendlyErrorsWebpackPlugin
...etc
assets by chunk 3.96 MiB (name: main)
asset styles/main_de31624e.css 3.96 MiB [emitted] [immutable] [big] (name: main)
asset scripts/main_de31624e.js 1.04 KiB [emitted] [immutable] [minimized] (name: main)
asset scripts/customizer_de31624e.js 426 bytes [emitted] [immutable] [minimized] (name: customizer)
asset assets.json 161 bytes [emitted]
Entrypoint main [big] 3.96 MiB = styles/main_de31624e.css 3.96 MiB scripts/main_de31624e.js 1.04 KiB
Entrypoint customizer 426 bytes = scripts/customizer_de31624e.js
webpack compiled with 3 warnings
āØ Done in 18.42s.
Did you do yarn build:production? Generally speaking you should be using yarn, not npm (edit: for this particular project, since roots sage is mainly on yarn) - I found when using npm there are some issues, even tho thereās almost no difference between yarn and npm.
When working on your starter theme, yarn build:production works just fine.
This is primarily meant for updating existing Sage 9 themes so they build again properly (newer node and npm versions). Updating should be easy as most what is changed consists of āglueā code.
Then there are some devs that have familiarized with Sage 9 and are still learning Sage 10 (notably the webpack and acorn part), hence they will still start new theme projects with Sage 9.
After starting, errors begin to appear in the console:
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 14748)
Iām testing this new version. It works, but I noticed that the scss compiling takes longer after every change. It takes everytime 1 second more. After few changes all the process starts to be very very long.
The reason is that Sage (9.x) uses an extra script that adds modifications on top of the base Sage files.
These modifications also had to be updated to be compatible with the new fixes.
IMHO this behaviour is better than the previous one where URLs had been relative to the main stylesheet, even inside other nested, imported stylehseets.
