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 9 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
9 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
cfe58a3
Automation: Updating built files with changes.
Feb 4, 2026
c85a045
Merge branch 'trunk' into feat/trac-64109-minify-twentytwentyone
rutviksavsani Feb 5, 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
7 changes: 7 additions & 0 deletions src/wp-content/themes/twentytwentyone/assets/css/ie.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,13 @@ 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 most instances, the `style.min.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.
*/

/**
* SETTINGS
* File-header..........The file header for the themes style.css file.
Expand Down
2 changes: 1 addition & 1 deletion src/wp-content/themes/twentytwentyone/assets/css/ie.css.map
View file
Open in desktop

Large diffs are not rendered by default.

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 most instances, the `style.min.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.
*/
14 changes: 12 additions & 2 deletions src/wp-content/themes/twentytwentyone/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,12 +400,22 @@ function twenty_twenty_one_scripts() {
// Note, the is_IE global variable is defined by WordPress and is used
// to detect if the current browser is internet explorer.
global $is_IE, $wp_scripts;
$theme_version = wp_get_theme()->get( 'Version' );

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

if ( ! SCRIPT_DEBUG && $can_use_minified ) {
Comment on lines +406 to +409
Copy link

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

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

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 ) {

Copilot uses AI. Check for mistakes.
Copy link
Member

@westonruter westonruter Feb 6, 2026

Choose a reason for hiding this comment

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

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

Copy link

@sabernhardt sabernhardt Feb 6, 2026

Choose a reason for hiding this comment

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

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.

$suffix = '.min';
}

if ( $is_IE ) {
// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables.
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), $theme_version );
} else {
// If not IE, use 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.
Expand Down
Loading
Loading