Inspecting the module, it seems various styles are unused on page load namely:

The purpose of the codex-search-styles module (at this time) is not primarily to serve as a render-blocking set of styles to be loaded on page load, but as the set of styles that is needed for TypeaheadSearch in JS mode. We could try to split it into render-blocking styles (needed at page load to render the CSS-only version of TahS) and non-render-blocking styles (not needed for the CSS-only version but needed for the JS version), but the non-render-blocking styles could not be removed from codex-search-styles as it's currently conceived, or the JS version of TahS would break.

• cdx-text-input

This one should not be unused on page load. You're right that the others (cdx-menu-item, cdx-search-result, cdx-thumbnail) are unused, as is cdx-menu. These add up to 3.5KB before gzip.

@mask-image rules also seem to add 0.5kb

Are you talking about the various @supports ( ( -webkit-mask-image: none ) or ( mask-image: none ) ) { ... } blocks? It might be possible to consolidate those, the number of times that phrase appears in the current module (24 times) does seem excessive. Consolidating them (or unwrapping them altogether, which I think may be possible) would remove about 1.4KB before gzip (looks like it's only 0.1KB after gzip, probably because this repetitive pattern compresses well).

The biggest issue seems to be nesting however. Could rules such as .cdx-search-input .cdx-text-inputicon.cdx-text-inputstart-icon be simplified to single word selectors such as .cdx-search-inputinputicon so they gzip better?

That's unfortunately not that simple to do, because we try to keep the boundaries between components clean.

Offhand I think the main opportunities for optimization would be:

• Unwrapping the @supports blocks (I believe these are unnecessary because the countervailing @supports not blocks for CSS-only icons will override them anyway) could save about 1.4KB before gzip (0.1KB after gzip)
• Not using :not() selectors for the default weight (either not supporting that class being omitted, or structuring the CSS differently) could save about 0.8KB before gzip (less than 0.1KB after gzip)
• Splitting out the render-blocking vs non-render-blocking styles. A simple split based on whether the selector starts with ^\.cdx-(menu|search-result|thumbnail) (which catches the low-hanging fruit but misses some other things) would defer about 3.5KB before gzip (0.6KB after gzip). These styles would still be loaded, but only when the JS version of TahS loads

In T338911#8926204, @Catrope wrote:

• Not using :not() selectors for the default weight (either not supporting that class being omitted, or structuring the CSS differently) could save about 0.8KB before gzip (less than 0.1KB after gzip)

We're now considering making this change independently of this task (for different reasons), see T339141