Skip to content

Minify stylesheets for twentytwentyone theme. #10860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rutviksavsani wants to merge 12 commits into
base: trunk
Choose a base branch
from
Open

Minify stylesheets for twentytwentyone theme. #10860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6361788
Bundled Themes: Add CSS minification support to Twenty Twenty-One
rutviksavsani Jan 29, 2026
d10d52e
Fix child theme compatibility for minified CSS loading
rutviksavsani Feb 4, 2026
7257263
chore: standardize version in package.json
rutviksavsani Feb 4, 2026
7f3dc41
Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone
rutviksavsani Feb 4, 2026
ab5bf66
chore: update package lock
rutviksavsani Feb 4, 2026
30b41a8
Automation: Updating built files with changes.
Feb 4, 2026
d1286f9
chore: add the notice correct way
rutviksavsani Feb 4, 2026
efc129c
Merge remote-tracking branch 'upstream/trunk' into feat/trac-64109-mi…
rutviksavsani Feb 13, 2026
1f381d8
chore: remove min.css for tt1 and update header note.
rutviksavsani Feb 18, 2026
c7dff92
Merge remote-tracking branch 'origin' into feat/trac-64109-minify-twe…
rutviksavsani Feb 18, 2026
44a60ee
Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone
rutviksavsani Feb 18, 2026
8cef9dd
Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone
rutviksavsani Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ wp-tests-config.php
/src/wp-content/themes/twentytwentyfive/node_modules

# Minified files in bundled themes
/src/wp-content/themes/twentytwentyone/*.min.css
/src/wp-content/themes/twentytwentytwo/*.min.css
/src/wp-content/themes/twentytwentyfive/*.min.css

Expand Down
1 change: 0 additions & 1 deletion src/wp-content/themes/twentytwentyone/assets/css/ie.css
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/wp-content/themes/twentytwentyone/assets/css/ie.css.map
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions src/wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,10 @@ Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo,
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/*
* 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.
Comment on lines +21 to +24
Copy link

@sabernhardt sabernhardt Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"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.

*/
6 changes: 5 additions & 1 deletion src/wp-content/themes/twentytwentyone/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,8 +387,12 @@ function twenty_twenty_one_content_width() {
* @return void
*/
function twenty_twenty_one_scripts() {
$theme_version = wp_get_theme()->get( 'Version' );
Copy link

@sabernhardt sabernhardt Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


$suffix = ( ! SCRIPT_DEBUG ) ? '.min' : '';

// The standard stylesheet.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
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' );
Copy link

@sabernhardt sabernhardt Feb 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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' ) );
	}

Expand Down
Loading
Loading