Minify stylesheets for twentytwentyone theme.

.gitignore

@@ -94,6 +94,8 @@ 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/twentytwentyone/assets/css/*.min.css
 /src/wp-content/themes/twentytwentytwo/*.min.css
 /src/wp-content/themes/twentytwentyfive/*.min.css
 

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

@@ -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.
+ */

src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

@@ -87,16 +87,18 @@ public function editor_custom_color_variables() {
 	 * 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;
 		}
-		$url = get_template_directory_uri() . '/assets/css/style-dark-mode.css';
+		$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.css';
+			$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' ) );
 	}

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

@@ -383,18 +383,23 @@ function twenty_twenty_one_content_width() {
  *
  * @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() {
+	$theme_version = wp_get_theme()->get( 'Version' );
+	$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' );
+	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.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
+	wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . "/assets/css/print$suffix.css", array(), $theme_version, 'print' );
 
 	// Threaded comment reply styles.
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
@@ -406,14 +411,14 @@ function twenty_twenty_one_scripts() {
 		'twenty-twenty-one-ie11-polyfills-asset',
 		false,
 		array(),
-		wp_get_theme()->get( 'Version' ),
+		$theme_version,
 		array( 'in_footer' => true )
 	);
 	wp_register_script(
 		'twenty-twenty-one-ie11-polyfills',
 		false,
 		array(),
-		wp_get_theme()->get( 'Version' ),
+		$theme_version,
 		array( 'in_footer' => true )
 	);
 
@@ -423,7 +428,7 @@ function twenty_twenty_one_scripts() {
 			'twenty-twenty-one-primary-navigation-script',
 			get_template_directory_uri() . '/assets/js/primary-navigation.js',
 			array(),
-			wp_get_theme()->get( 'Version' ),
+			$theme_version,
 			array(
 				'in_footer' => false, // Because involves header.
 				'strategy'  => 'defer',
@@ -436,7 +441,7 @@ function twenty_twenty_one_scripts() {
 		'twenty-twenty-one-responsive-embeds-script',
 		get_template_directory_uri() . '/assets/js/responsive-embeds.js',
 		array(),
-		wp_get_theme()->get( 'Version' ),
+		$theme_version,
 		array( 'in_footer' => true )
 	);
 }