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

[WordPress Trac]

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

Comment (by westonruter):

 Re-posting relevant parts of my
 [https://core.trac.wordpress.org/ticket/63007#comment:23 comment] from
 #63007 in reply to @poena:

 > When the ticket was opened, it included this comment:
 > "I'm not sure if this is the right place to introduce the minification,
 as perhaps it should be part of the theme's own build process." [...]
 > But then without further discussion it seems to have been decided that
 it must be the minification script that is in core. Which, would require
 knowledge of this script. I believe that is not an incorrect claim.

 Yeah, I included minification of the `style.css` files for the block
 themes here because when they are inlined they should be minified to
 ensure they don't exceed the `styles_inline_size_limit` limit. So perhaps
 #63012 should be addressed first as a dependency for this ticket.

 > I added this as one point of my comment, in addition to documentation.
 [...]
 > And the comment about documentation has not been addressed at all.

 In regards to documentation, the
 [https://make.wordpress.org/core/handbook/testing/patch/#setting-up-
 without-vvv documentation for testing a patch] already instructs to run
 `grunt build`. So any additional documentation specifically for testing
 themes should include this if it doesn't already.

 > Secondly, I described a scenario where a user repurposes the theme and
 adds CSS to style.css.
 > It does not matter if the user uses a text editor or the built in theme
 file editor.
 >
 > What matters is that style.css is not enqueued, instead the minified
 files is. And the user does not have  knowledge of that they need to edit
 the minified files, or how, or knowledge about script debug.
 > So the users changes are not working, and it is not a positive
 experience for them.

 If someone forks a theme and modifies the `style.css` then this indeed
 would be an issue. I described this in a previous
 [https://core.trac.wordpress.org/ticket/49665#comment:4 comment] on #49665
 where I wondered if the forking scenario was a reason why minification
 hasn't been done in the past. Nevertheless, there are themes today that
 already have a build step for their CSS, namely Twenty Nineteen and Twenty
 Twenty-One. So technically if someone forks those themes they already
 should not be using the theme file editor to edit the `style.css` file
 directly but rather to edit the underlying SASS files and then run `npm
 install && npm run build` in the theme. For themes that use SASS and for
 those which have minified CSS files, there should probably be a big notice
 comment in the `style.css` that instructs the users to run `npm run build`
 after making a change, and that for themes using SASS that the change
 should be made to the SASS files directly. For minification, the comment
 can say something like:

 {{{
 /*
  * NOTICE:
  * This file is served minified to improve performance. In order to see
 edits
  * to this file on the frontend, either enable the `SCRIPT_DEBUG` constant
 or
  * run `npm run build` to regenerate `style.min.css`. Alternatively, if
 you do
  * not want to use minified version, then remove the `style.min.css`
 version from
  * being enqueued in `functions.php`.
  */
 }}}

 Every theme would need to include their own `package.json` which has the
 `npm run build` command that which would result in the minified files
 being generated so that they wouldn't have to rely on core's build process
 to generate those files.

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