[wp-trac] [WordPress Trac] #63012: Bundled themes: Stylesheets should be minified

[WordPress Trac]

#63012: Bundled themes: Stylesheets should be minified
---------------------------+-------------------------------
 Reporter:  westonruter    |       Owner:  westonruter
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  6.9
Component:  Bundled Theme  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  css, performance
---------------------------+-------------------------------

Comment (by westonruter):

 We discussed this today during the bi-weekly Performance bug scrub.

 To facilitate the editing of CSS files in the theme file editor, we could
 do the CSS minification whenever a `*.css` file is modified to then update
 the corresponding `*.min.css` file. We can show a notice when editing a
 `*.css` file when there is a corresponding `*.min.css` file that the
 latter will be updated with a minified version of the former
 automatically.

 The three scenarios I see for editing CSS files that would need re-
 minification are:

 1. Distributed theme stylesheets are minified automatically as part of the
 core build process.
 2. Stylesheets edited by a developer on the filesystem are minified via
 `npm run build` thanks to a `package.json` shipped with the theme (as is
 already done in T19, T20, T21). The file header comment in the CSS file
 must include instructions for how to re-minify. If a developer does not
 want to do this, they can enable `SCRIPT_DEBUG`.
 3. A stylesheet modified in the theme file editor is automatically
 minified to update any corresponding `*.min.css` file. This minification
 could be done client-side (in JavaScript) or server-side (in PHP e.g. via
 [https://github.com/MyIntervals/PHP-CSS-Parser MyIntervals/PHP-CSS-
 Parser]).

 The automatic re-minification process ''might'' be able to be employed in
 the second scenario as well (when a developer edits the file), but this
 could be out of scope here. For example, if `wp_get_environment_type()`
 returns `local`/`development`, or if `wp_get_development_mode()` returns
 `theme`/`all`, then with each page load, core could read the contents of
 the stylesheet, compute an MD5 hash, and store this in a transient. If at
 the next page load the MD5 hash changes, then it could re-minify the CSS
 file. This would depend on there being a PHP-based CSS minifier.

 Before doing any of this, I'll work on gathering metrics on what the
 performance gains are with minified stylesheets
 ([https://core.trac.wordpress.org/ticket/63018 and]
 [https://core.trac.wordpress.org/ticket/63007 inlined]
 [https://core.trac.wordpress.org/ticket/58519 too]).

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63012#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform