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, sabernhardt.

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.

So in other words, since the code here is using get_template_directory_uri() and not get_stylesheet_directory_uri(), we can eliminate the $can_use_minified variable, correct?

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.

@sabernhardt So in reality we should the source map file for Twenty Nineteen should actually be deleted?

I don't like deleting files, but Twenty Nineteen's outdated .map cannot be very helpful. In the IE-related PR, I proposed emptying the ie.css.map file.

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

westonruter · 2026-02-12T21:01:17Z

@rutviksavsani With r61628 (05e54af), IE support has been removed from the theme and this has introduced merge conflicts. Would you address?

…nify-twentytwentyone

westonruter

FYI: We're two days away from the beta1 cut-off for 7.0.

westonruter · 2026-02-17T16:17:08Z

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

The minified file shouldn't actually be committed to the repo. It should be ignored as was done for Twenty Twenty-Five and Twenty Twenty-Two.

…ntytwentyone

sabernhardt

Please minify all the front-end stylesheets, and restore the deleted files.

Note: these changes will not be ready to include in the next release, so you do not need to rush updating the pull request.

sabernhardt · 2026-02-19T17:35:02Z

src/wp-content/themes/twentytwentyone/assets/css/ie.css

I purposely did not delete files such as ie.css and ie.css.map in case something still points to them (for example, in a child theme). Please restore the small files.

sabernhardt · 2026-02-19T17:36:32Z

src/wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss

+ * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
+ * in production, when `SCRIPT_DEBUG` is not enabled, the minified .css file will be served. This theme uses SCSS for styles.
+ * After making changes to SCSS files, run `npm run build` in the theme directory to compile
+ * SCSS to CSS and regenerate the minified version.


"In production" can start a new sentence, and the lines can wrap better.

Suggested change

* IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;

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

* After making changes to SCSS files, run `npm run build` in the theme directory to compile

* SCSS to CSS and regenerate the minified version.

* IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled.

* In production, when `SCRIPT_DEBUG` is not enabled, the minified .css file will be served.

* This theme uses SCSS for styles. After making changes to SCSS files, run `npm run build`

* in the theme directory to compile SCSS to CSS and regenerate the minified version.

sabernhardt · 2026-02-19T17:39:49Z

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

 * @return void
 */
 function twenty_twenty_one_scripts() {
+	$theme_version = wp_get_theme()->get( 'Version' );


Right now, the $theme_version variable is only used once. I would just put wp_get_theme()->get( 'Version' ) back within wp_enqueue_style(). However, if the variable is preferred, it should be used throughout the twenty_twenty_one_scripts() function.

sabernhardt · 2026-02-19T18:16:16Z

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

 		"build:dark-rtl": "rtlcss assets/css/style-dark-mode.css assets/css/style-dark-mode-rtl.css",
 		"build:print": "sass assets/sass/07-utilities/print.scss:assets/css/print.css --style=expanded --source-map",
 		"build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json",
+		"build:minify": "postcss style.css --use cssnano -o style.min.css --no-map",


Create minified copies of all (5) stylesheets.

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-rtl": "postcss style-rtl.css --use cssnano -o style-rtl.min.css --no-map",

"build:minify-print": "postcss assets/css/print.css --use cssnano -o assets/css/print.min.css --no-map",

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

"build:minify-dark-rtl": "postcss assets/css/style-dark-mode-rtl.css --use cssnano -o assets/css/style-dark-mode-rtl.min.css --no-map",

sabernhardt · 2026-02-19T18:23:09Z

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

+	wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style' . $suffix . '.css', array(), $theme_version );

 	// RTL styles.
 	wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );


The RTL 'replace' would make sites in right-to-left languages try to fetch a style.min-rtl.css file, which needs to be built in package.json and should include the 'suffix' data for a filename like style-rtl.min.css. The twenty_twenty_one_scripts() function can also include @since documentation and fetch a minified print stylesheet:

* @since Twenty Twenty-One 1.0 * @since Twenty Twenty-One 2.8 Removed Internet Explorer support. * @since Twenty Twenty-One 2.9 Added minified stylesheets. * * @return void */ function twenty_twenty_one_scripts() { $suffix = ( ! SCRIPT_DEBUG ) ? '.min' : ''; // The standard stylesheet. wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . "/style$suffix.css", array(), wp_get_theme()->get( 'Version' ) ); // RTL styles. wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' ); wp_style_add_data( 'twenty-twenty-one-style', 'suffix', $suffix ); // Print styles. wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . "/assets/css/print$suffix.css", array(), wp_get_theme()->get( 'Version' ), 'print' );

And then fetch the minified dark mode stylesheets like this:

/** * Enqueues scripts and styles. * * @since Twenty Twenty-One 1.0 * @since Twenty Twenty-One 2.9 Added minified stylesheets. * * @return void */ public function enqueue_scripts() { if ( ! $this->switch_should_render() ) { return; } $suffix = ( ! SCRIPT_DEBUG ) ? '.min' : ''; $url = get_template_directory_uri() . "/assets/css/style-dark-mode$suffix.css"; if ( is_rtl() ) { $url = get_template_directory_uri() . "/assets/css/style-dark-mode-rtl$suffix.css"; } wp_enqueue_style( 'tt1-dark-mode', $url, array( 'twenty-twenty-one-style' ), wp_get_theme()->get( 'Version' ) ); }

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 4 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

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

westonruter mentioned this pull request Feb 6, 2026

[#64109] Minify stylesheets in classic themes #10818

Open

Merge remote-tracking branch 'upstream/trunk' into feat/trac-64109-mi…

efc129c

…nify-twentytwentyone

rutviksavsani force-pushed the feat/trac-64109-minify-twentytwentyone branch from c85a045 to efc129c Compare February 13, 2026 07:52

westonruter reviewed Feb 17, 2026

View reviewed changes

rutviksavsani and others added 3 commits February 18, 2026 12:25

chore: remove min.css for tt1 and update header note.

1f381d8

Merge remote-tracking branch 'origin' into feat/trac-64109-minify-twe…

c7dff92

…ntytwentyone

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

44a60ee

sabernhardt suggested changes Feb 19, 2026

View reviewed changes

rutviksavsani and others added 3 commits February 27, 2026 12:09

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

8cef9dd

address feedback and be able to minify other styles

af45d63

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

185ea2c

	* 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",

-		"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-rtl": "postcss style-rtl.css --use cssnano -o style-rtl.min.css --no-map",
+		"build:minify-print": "postcss assets/css/print.css --use cssnano -o assets/css/print.min.css --no-map",
+		"build:minify-dark-mode": "postcss assets/css/style-dark-mode.css --use cssnano -o assets/css/style-dark-mode.min.css --no-map",
+		"build:minify-dark-rtl": "postcss assets/css/style-dark-mode-rtl.css --use cssnano -o assets/css/style-dark-mode-rtl.min.css --no-map",

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rutviksavsani commented Feb 5, 2026

Uh oh!

westonruter commented Feb 6, 2026

Uh oh!

westonruter commented Feb 12, 2026

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sabernhardt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Feb 4, 2026 •

edited

Loading