Make WordPress Core

Opened 3 hours ago

Last modified 2 hours ago

#63012 new defect (bug)

Bundled themes: Stylesheets should be minified

Reported by: westonruter's profile westonruter Owned by:
Milestone: 6.9 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords:
Focuses: css, performance Cc:

Description

As commented on #49665:

Since core has CSS minification as part of the build process, shouldn't this be used by themes as well? This would help address things like #47925, where the stylesheet for T19 is 224K but after going through cssmin it is reduced to 196K. It doesn't really make sense for themes to serve the WP theme metadata CSS comment block to browsers. I should think that all .css files in a theme should also have a corresponding .min.css file. Maybe minification has been discouraged in the past to facilitate authors forking a theme and making changes to the CSS, with there being an unexpected result where the minified CSS wouldn't also be updated. Nevertheless, themes like T19, T20, and T21 are already using a build step for the CSS so authors shouldn't be directly modifying the style.css file directly anyway. They should be using the build process to re-generate the CSS instead.

Minifying the CSS will facilitate allowing the stylesheets to be inlined, for example in #63007. Without minification, enqueued CSS will more quickly reach the styles_inline_size_limit.

And as noted by @karmatosed:

I would also support minification for themes if this is correctly documented. I think historically it has been as you noted not done because of confusion where to update. However, in many real world situations this is part of the development process.

And as advised by @sabernhardt:

Classic themes from Twenty Ten to Twenty Twenty call get_stylesheet_uri() for their main stylesheets, so a child theme's style.css would replace its parent stylesheet.

I expect that a patch would need an is_child_theme() check to avoid looking for a minified file in the child theme directory (and/or printing the parent stylesheet inline).

Change History (1)

#1 @westonruter
2 hours ago

In a PR for #63007 I've added initial minification for the style.css in Twenty Twenty-Two and Twenty Twenty-Five. I'm not sure this is the best approach, however. I implemented it in core's overall gruntfile. Perhaps the minification should be part of each theme's build step if they have one.

Also, should we try to generate source maps? Granted this isn't really necessary when SCRIPT_DEBUG can be enabled.

Last edited 2 hours ago by westonruter (previous) (diff)
Note: See TracTickets for help on using tickets.