feat(ui): Ability to disable Quasar automatically adding "dir" and "l…

…ang" HTML attributes to the html tag #15010
quasarframework · Dec 27, 2022 · 1b98a38 · 1b98a38
1 parent 8e54e75
commit 1b98a38
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 13 deletions.
diff --git a/docs/src/pages/options/quasar-language-packs.md b/docs/src/pages/options/quasar-language-packs.md
@@ -276,3 +276,29 @@ setup () {
   $q.lang.getLocale() // returns a string
 }
 ```
+
+## Disabling HTML attributes <q-badge align="top" color="brand-primary" label="v2.11.3+" />
+
+By default, Quasar will add `dir` and `lang` HTML attributes to the `<html>` tag for you. The `dir` attribute is especially important to the way CSS is preprocesses with Sass when [RTL is enabled](/options/rtl-support).
+
+If, for whatever reason you want this behavior disabled, then you can:
+
+```js
+// Quasar CLI > quasar.config.js
+framework: {
+  config: {
+    lang: {
+      noHtmlAttrs: true // add this
+    }
+  }
+}
+
+// Vite plugin / Vue plugin / UMD
+app.use(Quasar, {
+  config: {
+    lang: {
+      noHtmlAttrs: true // add this
+    }
+  }
+})
+```
diff --git a/ui/dev/postcss.config.js b/ui/dev/postcss.config.js
@@ -3,13 +3,13 @@
 module.exports = {
   plugins: [
     // to edit target browsers: use "browserslist" field in package.json
-    require('autoprefixer'),
+    require('autoprefixer')
 
     // https://github.com/elchininet/postcss-rtlcss
     // If you want to support RTL css, then
     // 1. yarn/npm install postcss-rtlcss
     // 2. optionally set quasar.config.js > framework > lang to an RTL language
     // 3. uncomment the following line:
-    require('postcss-rtlcss')
+    // require('postcss-rtlcss')
   ]
 }
diff --git a/ui/src/lang.js b/ui/src/lang.js
@@ -40,25 +40,30 @@ const Plugin = defineReactivePlugin({
         return
       }
 
-      const dir = lang.rtl === true ? 'rtl' : 'ltr'
-      const attrs = `lang=${ lang.isoName } dir=${ dir }`
-
       lang.set = ssrContext.$q.lang.set
 
-      ssrContext._meta.htmlAttrs = ssrContext.__qPrevLang !== void 0
-        ? ssrContext._meta.htmlAttrs.replace(ssrContext.__qPrevLang, attrs)
-        : attrs
+      if (ssrContext.$q.config?.lang?.noHtmlAttrs !== true) {
+        const dir = lang.rtl === true ? 'rtl' : 'ltr'
+        const attrs = `lang=${ lang.isoName } dir=${ dir }`
+
+        ssrContext._meta.htmlAttrs = ssrContext.__qPrevLang !== void 0
+          ? ssrContext._meta.htmlAttrs.replace(ssrContext.__qPrevLang, attrs)
+          : attrs
+
+        ssrContext.__qPrevLang = attrs
+      }
 
-      ssrContext.__qPrevLang = attrs
       ssrContext.$q.lang = lang
     }
     else {
-      const el = document.documentElement
-      el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr')
-      el.setAttribute('lang', lang.isoName)
-
       lang.set = Plugin.set
 
+      if (Plugin.__langConfig?.noHtmlAttrs !== true) {
+        const el = document.documentElement
+        el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr')
+        el.setAttribute('lang', lang.isoName)
+      }
+
       Object.assign(Plugin.__langPack, lang)
 
       Plugin.props = lang
@@ -87,6 +92,7 @@ const Plugin = defineReactivePlugin({
     }
     else {
       $q.lang = Plugin.__langPack
+      Plugin.__langConfig = $q.config?.lang
 
       if (this.__installed === true) {
         lang !== void 0 && this.set(lang)