October 2024 release (2.4.8-beta1)

src/pages/guide/css/preprocess.md

@@ -263,6 +263,44 @@ In the processed file, this results in the following:
  // Theme widgets
 ```
 
+## Deploy styles for enabled modules only
+
+<InlineAlert variant="info" slots="text"/>
+
+This feature is available in 2.4.8-beta only.
+
+By default, the core code base imports all CSS from all modules, regardless of whether modules are enabled or disabled. This can lead to unnecessarily large CSS files, which can delay browser parsing, especially for stores with many modules and custom styles. To reduce the size of the CSS output and improve browser performance, you can use the `static_content_only_enabled_modules` flag.
+
+1. Add the following line to the top of the array in your `app/etc/env.php` or `app/etc/config.php` file:
+
+   ```php
+   return [
+   'static_content_only_enabled_modules' => true,
+   //...other lines
+   ]
+   ```
+
+   - Set the value to `true` to deploy styles from enabled modules only to the final CSS files (`styles-l.css`, `styles-m.css`).
+   - Set the value to `false` to deploy all styles, regardless of module status.
+
+1. Update your configuration:
+
+   ```bash
+   bin/magento app:config:import
+   ```
+
+   ```bash
+   bin/magento setup:upgrade
+   ```
+
+1. Re-run static content deployment (if necessary):
+
+   ```bash
+   bin/magento setup:static-content:deploy en_US --area frontend
+   ```
+
+   Replace `en_US` with the appropriate locale code if your store uses a different language.
+
 <!-- Link definitions -->
 [production application mode]:https://experienceleague.adobe.com/docs/commerce-operations/configuration-guide/setup/application-modes.html#production-mode
 [LESS PHP library]: https://github.com/wikimedia/less.php

src/pages/guide/responsive-design/css.md

@@ -19,12 +19,12 @@ In the Blank and Luma themes, a "mobile first" approach is used. The order is:
 -  Tablet
 -  Desktop
 
-This means that the styles for mobile devices (screen width is 768px and less) are extended by the styles for the higher breakpoints. As the result, the extra styles are never loaded when a store is viewed on a mobile device.
+This means that the styles for mobile devices (screen width is 767px and less) are extended by the styles for the higher breakpoints. As the result, the extra styles are never loaded when a store is viewed on a mobile device.
 
 The mobile and desktop styles are defined in separate files:
 
--  [styles-l.less] is used to generate desktop-specific styles (width higher than 768px).
--  [styles-m.less] is used to generate basic and mobile-specific styles (width of 768px and less).
+-  [styles-l.less] is used to generate desktop-specific styles (width higher than 767px).
+-  [styles-m.less] is used to generate basic and mobile-specific styles (width of 767px and less).
 
 ## Breakpoints
 
@@ -35,7 +35,7 @@ The Blank and Luma themes use Less variables to implement the following [breakpo
 -  `@screen__xxs`: 320px
 -  `@screen__xs`: 480px
 -  `@screen__s`: 640px
--  `@screen__m`: 768px (in the Blank and Luma themes, when the viewport width is more than 768px, this breakpoint switches to the desktop view)
+-  `@screen__m`: 767px (in the Blank and Luma themes, when the viewport width is more than 767px, this breakpoint switches to the desktop view)
 -  `@screen__l`: 1024px
 -  `@screen__xl`: 1440px
 
@@ -102,8 +102,8 @@ For grouping style rules in certain media queries the `.media-width()` mixin use
 
 // This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width mixins or media-target
 & when (@media-target = 'desktop'), (@media-target = 'all') {
-    @media only screen and (min-width: @screen__m + 1) and (max-width: (@screen__xl - 1)) {
-        // styles for breakpoint > 768px and < 1440px
+    @media only screen and (min-width: @screen__m) and (max-width: (@screen__xl - 1)) {
+        // styles for breakpoint >= 768px and < 1440px
     }
 }