perf(Screen): Only add screen-* body classes if enabled through framework: { config: { screen: { bodyClasses: true } } } quasarframework#5757

Author: rstoenescu

docs/src/pages/options/screen-plugin.md

@@ -44,11 +44,11 @@ import { Screen } from 'quasar'
 // Screen.name ('xs', 'sm', ...; Quasar v1.5.2+)
 ```
 
-## CSS helper
+## Body classes
 
-<q-badge label="v1.5.2+" />
+<q-badge label="v1.5.3+" />
 
-You can also style your content based on a particular set of CSS classes applied to document.body: `screen--xs`, `screen--sm`, ..., `screen-xl`.
+**If you enable it (see how to do it after the examples below)**, you can also style your content based on a particular set of CSS classes applied to document.body: `screen--xs`, `screen--sm`, ..., `screen-xl`.
 
 ```css
 body.screen--xs {
@@ -74,6 +74,23 @@ Or a sexy variant in Sass or Stylus:
     color: #fff
 ```
 
+### How to enable body classes
+
+In order to enable the behavior above, edit your /quasar.conf.js file like below. Please note that this will increase a bit the time for First Meaningful Paint.
+
+```js
+// file: /quasar.conf.js
+// with Quasar v1.5.3+
+
+framework: {
+  config: {
+    screen: {
+      bodyClasses: true // <<< add this
+    }
+  }
+}
+```
+
 ## Configuration
 There are a few methods that can be used to tweak how Screen plugin works:
 

docs/src/pages/style/body-classes.md

@@ -19,4 +19,4 @@ Quasar attaches some very useful helper CSS classes to document.body which you c
 | electron | When client is on an [Electron](/quasar-cli/developing-electron-apps/introduction) app |
 | bex | When app runs from a browser extension |
 | within-iframe | When app runs from an iframe |
-| `screen--*` | Tells current window breakpoint (`screen--xs`, `screen--sm`, ..., `screen--xl`) (**Quasar v1.5.2+**) |
+| `screen--*` | If [enabled (only)](/options/screen-plugin#How-to-enable-body-classes), tells current window breakpoint (`screen--xs`, `screen--sm`, ..., `screen--xl`) (**Quasar v1.5.3+**) |

docs/src/pages/style/breakpoints.md

@@ -40,10 +40,10 @@ $sizes.<breakpoint>
 // replace <breakpoint> with xs, sm, md, lg or xl
 ```
 
-Starting with **Quasar v1.5.2+**, you can also style your content based on a particular set of CSS classes applied to document.body: `screen--xs`, `screen--sm`, ..., `screen-xl`.
+Starting with **Quasar v1.5.3+**, [if enabled (only)](/options/screen-plugin#How-to-enable-body-classes), you can also style your content based on a particular set of CSS classes applied to document.body: `screen--xs`, `screen--sm`, ..., `screen-xl`.
 
 ```css
-// v1.5.2+
+// v1.5.3+
 
 .my-div
   body.screen-xs &

ui/src/body.js

@@ -80,7 +80,9 @@ export default {
           cls = getBodyClasses(q.platform, cfg),
           fn = ctx.ssr.setBodyClasses
 
-        cls.push('screen--xs')
+        if (cfg.screen !== void 0 && cfg.screen.bodyClass === true) {
+          cls.push('screen--xs')
+        }
 
         if (typeof fn === 'function') {
           fn(cls)

ui/src/install.js

@@ -30,7 +30,7 @@ export default function (Vue, opts = {}) {
   Platform.install($q, queues)
   Body.install(queues, cfg)
   Dark.install($q, queues, cfg)
-  Screen.install($q, queues)
+  Screen.install($q, queues, cfg)
   History.install($q, cfg)
   Lang.install($q, queues, opts.lang)
   IconSet.install($q, opts.iconSet)

ui/src/plugins/Screen.js

@@ -40,12 +40,14 @@ export default {
   setSizes () {},
   setDebounce () {},
 
-  install ($q, queues) {
+  install ($q, queues, cfg) {
     if (isSSR === true) {
       $q.screen = this
       return
     }
 
+    const classes = cfg.screen !== void 0 && cfg.screen.bodyClasses === true
+
     const update = force => {
       const
         w = window.innerWidth,
@@ -86,8 +88,10 @@ export default {
 
       if (s !== this.name) {
         this.name = s
-        document.body.classList.remove(`screen--${this.__oldName}`)
-        document.body.classList.add(`screen--${s}`)
+        if (classes === true) {
+          document.body.classList.remove(`screen--${this.__oldName}`)
+          document.body.classList.add(`screen--${s}`)
+        }
         this.__oldName = s
       }
     }