How the theme is rendered?

The theme rendering process has several steps; knowing them is very useful if you want to fully understand all the possibilities the renderer can offer.

The Publii renderer can work in few modes:

Post preview mode
Tag page preview mode
Author page preview mode
Homepage preview mode
Full page mode

Post preview is available under the post editor and is used to preview changes before deploying changes to the server.

Tag, autor and homepage preview mode is used to quickly check changes during editing parameters under Publii settings for given subpages.

Full page mode is used for creating a preview and during website synchronization.

We will focus here on the full-page mode; other modes work in a very similar way but render only a single specific page.

Rendering process

Theme is validated,
Site config is loaded,
Translations are loaded,
Renderer loads website data from database,
Theme config is loaded,
Theme files are loaded,
Publii Handlebars helpers are registered,
Theme helpers from helpers.js (if exists) are registered,
Content structure is loaded and cached,
Common data for all views are loaded,
Partials are registered (standard and custom ones),
Homepage and its pagination are rendered,
Post pages are rendered (some operations are applied to the post content before the output),
Tag pages and its pagination are rendered,
Author pages and its pagination are rendered,
Error page is rendered (if used),
Search page is rendered (if used),
CSS is created,
Config files, assets and media files are copied to the output directory,
RSS and JSON feed is rendered,
Sitemap is created,

You can use custom helpers and partials in your theme.

The theme CSS is a sum of five CSS sources:

theme-variables.js output + main.css + GDPR popup CSS + visual-overrides.js output + custom CSS

Let's look into these CSS sources:

theme-variables.js - it is an optional file that can be used to generate a CSS code that prepends your theme CSS code. The main case for use is a support for CSS variables. As you can get theme options in this file, you can create CSS variables based on them and then use them in your main.css code.
main.css - it is a required file that contains core CSS of your theme
GDPR popup CSS - This is CSS code generated by Publii. You cannot currently affect this CSS code directly - you must use custom CSS or visual overrides to make changes.
visual-overrides.js - it is an optional file that works like theme-variables.js, but it appends the CSS code to your main.css file output.
custom CSS - it is a code added by user under Tools -> Custom CSS view in Publii. This CSS code is the last CSS code added to the CSS output and it can override everything generated earlier.

In short:

The output from the visual-overrides.js file overrides the main.css code, but any CSS code generated by Publii can be overridden with custom CSS code that is added in the Tools section of Publii. The theme-variables.js output can also prepend the whole code.