Minify stylesheets for twentytwentyone theme.

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

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

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

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

@@ -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 ) {
+		$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.