Minify stylesheets for twentytwentyone theme. by rutviksavsani · Pull Request #10860 · WordPress/wordpress-develop

rutviksavsani · 2026-02-04T07:56:23Z

This PR implements the Minification for TwentyTwentyOne theme initially to test out before we convert all of them in #10818

Trac ticket: https://core.trac.wordpress.org/ticket/64109

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-02-04T07:56:34Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @1178653+wordpress-develop-pr-bot[bot]@users.noreply.github.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

Core Committers: Use this line as a base for the props when committing in SVN:

Props rutviksavsani, westonruter.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-02-04T08:05:09Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Copilot

Pull request overview

This PR implements CSS minification for the Twenty Twenty-One theme as a test case before applying the approach to all classic themes. The implementation adds conditional loading of minified stylesheets based on the SCRIPT_DEBUG constant.

Changes:

Added cssnano dependency for CSS minification
Implemented conditional loading logic in functions.php to serve minified CSS in production
Added build script for CSS minification
Updated CSS files with developer documentation comments

Reviewed changes

Copilot reviewed 6 out of 10 changed files in this pull request and generated 3 comments.

File	Description
`style.min.css`	New minified stylesheet generated by build process
`functions.php`	Conditional loading logic for minified CSS based on SCRIPT_DEBUG
`package.json` / `package-lock.json`	Added cssnano dependency and build:minify script
`style.css` / `style-rtl.css` / `ie.css` / SCSS source	Added documentation comments about minification

Files not reviewed (1)

src/wp-content/themes/twentytwentyone/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T05:12:57Z

src/wp-content/themes/twentytwentyone/style.css


+/*
+ * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
+ * in most instances, the `style.min.css` file will be served. This theme uses SCSS for styles.


The comment states "in most instances, the style.min.css file will be served" but this is only accurate when SCRIPT_DEBUG is false (default production mode). The comment should clarify that style.min.css is served in production when SCRIPT_DEBUG is not enabled.

Suggested change

* in most instances, the `style.min.css` file will be served. This theme uses SCSS for styles.

* in production, when `SCRIPT_DEBUG` is not enabled, the `style.min.css` file will be served. This theme uses SCSS for styles.

Copilot · 2026-02-05T05:12:57Z

src/wp-content/themes/twentytwentyone/functions.php

+	$suffix           = '';
+	$can_use_minified = ! is_child_theme() || file_exists( get_stylesheet_directory() . '/style.min.css' );
+
+	if ( ! SCRIPT_DEBUG && $can_use_minified ) {


The logic checks if the child theme has a style.min.css file, but doesn't verify if it's up-to-date or valid. Consider whether stale or corrupted minified files in child themes could cause issues. Additionally, the variable name $can_use_minified suggests a permission check, but it's actually a file existence check - consider renaming to $minified_file_exists for clarity.

Suggested change

$suffix = '';

$can_use_minified = ! is_child_theme() || file_exists( get_stylesheet_directory() . '/style.min.css' );

if ( ! SCRIPT_DEBUG && $can_use_minified ) {

$suffix = '';

// Decide whether a minified stylesheet can be safely used.

$minified_file_is_valid = ! is_child_theme();

if ( is_child_theme() ) {

$minified_file_path = get_stylesheet_directory() . '/style.min.css';

$unminified_file_path = get_stylesheet_directory() . '/style.css';

// Basic validity: file must exist, be readable, and non-empty.

$minified_file_is_valid = file_exists( $minified_file_path )

&& is_readable( $minified_file_path )

&& 0 !== filesize( $minified_file_path );

// If both minified and unminified files exist, ensure the minified file is not older.

if ( $minified_file_is_valid && file_exists( $unminified_file_path ) ) {

$minified_file_is_valid = filemtime( $minified_file_path ) >= filemtime( $unminified_file_path );

}

}

if ( ! SCRIPT_DEBUG && $minified_file_is_valid ) {

I don't think this is valid. I don't core does any readability or non-zero size checks for any theme stylesheets.

The existing theme stylesheets do not have a fallback option if something is wrong (file is not readable, empty, missing, inaccurate, etc.). Minified files would have an alternate version that could be fetched in the case of some predictable failures.

Checking the modified time would not accurately determine whether the minified file is outdated in relation to the unminified stylesheet. I could update the styles locally, compile all stylesheets, and then upload the minified files via FTP before their unminified versions.

I appreciate that you checked if the site has a child theme in this PR, but Twenty Twenty-One does not use get_stylesheet_directory(). It uses get_template_directory_uri(), which refers to the twentytwentyone directory regardless of whether the active theme is T21 or a child theme.

Another important note about T21 is that multiple stylesheets affect the front end:

style.css

style-rtl.css, which replaces style.css in right-to-left languages

ie.css (though IE support might be removed soon: Trac 64590)

print.css

The notice in file-header.scss (or possibly in style.scss) should not mention style.min.css because the comment is inserted into three different compiled stylesheets, and their minified versions would have different file names.

Copilot · 2026-02-05T05:12:58Z

src/wp-content/themes/twentytwentyone/package.json

 		"build:ie": "postcss style.css -o assets/css/ie.css",
 		"build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
 		"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
+		"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",


The build script uses --no-map flag which prevents source map generation for the minified CSS. While this is acceptable for production, consider documenting this decision or providing a separate script that generates source maps for debugging purposes.

Suggested change

"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",

"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",

"build:minify:debug": "postcss style.css --use cssnano -o style.min.css",

I don't believe we do this for the block themes which have had minification done. For debugging, it is more common to use SCRIPT_DEBUG as opposed to rely on a source map (although maybe we should revisit that in the future).

Oh wait, but there is a style.css.map committed in this PR?

Oh, interesting. Twenty Nineteen actually has a source map: https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-content/themes/twentynineteen/style.css.map

I'm confused. The command has --no-map and yet there is a style.css.map present?

This PR is for Twenty Twenty-One, which has source map files for its current stylesheets. The --no-map flag prevents the build command from adding a giant 240KB sourceMappingURL comment in style.min.css (resulting in a file more than twice the original size).

Regarding Twenty Nineteen, its early development involved a source map file that appears in trunk, but it was never updated.

rutviksavsani · 2026-02-05T13:15:15Z

@westonruter As suggested in the other PR for minification of stylesheets for themes, Here I have created a separate PR for TT1.

westonruter · 2026-02-06T04:51:50Z

cc @sabernhardt

rutviksavsani added 3 commits February 4, 2026 12:51

Bundled Themes: Add CSS minification support to Twenty Twenty-One

6361788

Fix child theme compatibility for minified CSS loading

d10d52e

chore: standardize version in package.json

7257263

rutviksavsani and others added 5 commits February 4, 2026 17:28

Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone

7f3dc41

chore: update package lock

ab5bf66

Automation: Updating built files with changes.

30b41a8

chore: add the notice correct way

d1286f9

Automation: Updating built files with changes.

cfe58a3

mukeshpanchal27 requested a review from Copilot February 5, 2026 05:10

Copilot started reviewing on behalf of mukeshpanchal27 February 5, 2026 05:11 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone

c85a045

westonruter mentioned this pull request Feb 6, 2026

[#64109] Minify stylesheets in classic themes #10818

Open

	* in most instances, the `style.min.css` file will be served. This theme uses SCSS for styles.
	* in production, when `SCRIPT_DEBUG` is not enabled, the `style.min.css` file will be served. This theme uses SCSS for styles.

-	$suffix           = '';
-	$can_use_minified = ! is_child_theme() || file_exists( get_stylesheet_directory() . '/style.min.css' );
-	if ( ! SCRIPT_DEBUG && $can_use_minified ) {
+	$suffix = '';
+	// Decide whether a minified stylesheet can be safely used.
+	$minified_file_is_valid = ! is_child_theme();
+	if ( is_child_theme() ) {
+		$minified_file_path   = get_stylesheet_directory() . '/style.min.css';
+		$unminified_file_path = get_stylesheet_directory() . '/style.css';
+		// Basic validity: file must exist, be readable, and non-empty.
+		$minified_file_is_valid = file_exists( $minified_file_path )
+			&& is_readable( $minified_file_path )
+			&& 0 !== filesize( $minified_file_path );
+		// If both minified and unminified files exist, ensure the minified file is not older.
+		if ( $minified_file_is_valid && file_exists( $unminified_file_path ) ) {
+			$minified_file_is_valid = filemtime( $minified_file_path ) >= filemtime( $unminified_file_path );
+		}
+	}
+	if ( ! SCRIPT_DEBUG && $minified_file_is_valid ) {

	"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",
	"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",
	"build:minify:debug": "postcss style.css --use cssnano -o style.min.css",

Conversation

rutviksavsani commented Feb 4, 2026

Uh oh!

github-actions bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

github-actions bot commented Feb 4, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

sabernhardt Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

sabernhardt Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

rutviksavsani commented Feb 5, 2026

Uh oh!

westonruter commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Feb 4, 2026 •

edited

Loading