feat(app-vite/app-webpack/create-quasar/docs): support multiple postc…

…ss/babel/eslint config files; normalize create-quasar config files #15756

app-webpack/lib/app-paths.js

@@ -27,9 +27,12 @@ function getAppInfo () {
 }
 
 const postcssConfigFilenameList = [
+  'postcss.config.cjs',
   '.postcssrc.js',
   'postcss.config.js',
-  'postcss.config.cjs'
+  'postcss.config.mjs',
+  '.postcssrc.cjs',
+  '.postcssrc.mjs'
 ]
 
 function getPostcssConfigFile (appDir) {
@@ -42,9 +45,13 @@ function getPostcssConfigFile (appDir) {
 }
 
 const babelConfigFilenameList = [
-  'babel.config.js',
   'babel.config.cjs',
-  '.babelrc.js'
+  'babel.config.js',
+  'babel.config.mjs',
+  '.babelrc.js',
+  '.babelrc.cjs',
+  '.babelrc.mjs',
+  '.babelrc'
 ]
 
 function getBabelConfigFile (appDir) {

docs/src/pages/options/rtl-support.md

@@ -11,7 +11,7 @@ RTL is referring to "right to left" UI for languages that need it.
 ## Enabling RTL support
 
 ### Quasar CLI with Vite
-* Edit `/postcss.config.js` file and uncomment the `require('postcss-rtlcss')` line.
+* Edit `/postcss.config.cjs` file and uncomment the `require('postcss-rtlcss')` line.
 * Yarn/npm install the `postcss-rtlcss` package.
 * If you are already running "quasar dev" command, restart it.
 
@@ -52,7 +52,7 @@ $ npm install -D postcss-rtlcss
 $ pnpm add quasar -D postcss-rtlcss # experimental support
 ```
 
-Then create `/postcss.config.js` file if you don't have it already, and add this to it:
+Then create `/postcss.config.cjs` file if you don't have it already, and add this to it:
 
 ``` js
 module.exports = {
@@ -110,7 +110,7 @@ Let's discuss about each of these requirements:
 3. Optional: *Treat devland source CSS as RTL*.
   By default, Quasar assumes that all styles are written in LTR direction and generates corresponding RTL styles for them. Should you wish to write your own css directly in RTL then you need to:
     * (Quasar CLI with Webpack) set quasar.config.js > "build" > rtl > "source" to `rtl`
-    * (Quasar CLI with Vite / Quasar Vite plugin / Vue CLI plugin) set `require('postcss-rtlcss')({ source: 'rtl' })` in /postcss.config.js
+    * (Quasar CLI with Vite / Quasar Vite plugin / Vue CLI plugin) set `require('postcss-rtlcss')({ source: 'rtl' })` in /postcss.config.cjs
 
 ::: tip
 Full list of [postcss-rtlcss options](https://github.com/elchininet/postcss-rtlcss#options).

docs/src/pages/quasar-cli-vite/browser-compatibility.md

@@ -28,10 +28,10 @@ build: {
 }
 ```
 
-Furthermore, based on your `/postcss.config.js` file content, your CSS will also pass through `autoprefixer` for which you can configure the browser levels that you are interested in:
+Furthermore, based on your `/postcss.config.cjs` file content, your CSS will also pass through `autoprefixer` for which you can configure the browser levels that you are interested in:
 
 ```js
-// postcss.config.js
+// postcss.config.cjs
 
 require('autoprefixer')({
   overrideBrowserslist: [

docs/src/pages/quasar-cli-vite/css-preprocessors.md

@@ -9,7 +9,7 @@ related:
 
 ## Configuration
 
-You can configure how your CSS is handled through `/postcss.config.js` and through extending the Vite config:
+You can configure how your CSS is handled through `/postcss.config.cjs` and through extending the Vite config:
 
 ```js
 // quasar.config.js

docs/src/pages/quasar-cli-vite/directory-structure.md

@@ -102,10 +102,10 @@ scope:
     - l: ".eslintignore"
       e: ESLint ignore paths
       url: https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file
-    - l: ".eslintrc.js"
+    - l: ".eslintrc.cjs"
       e: ESLint config
       url: https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files
-    - l: postcss.config.js
+    - l: postcss.config.cjs
       e: PostCSS config
       url: https://github.com/postcss/postcss
     - l: jsconfig.json

docs/src/pages/quasar-cli-vite/handling-vite.md

@@ -145,7 +145,7 @@ It is likely that you will need to copy static or external files to your Quasar
   build: {
   ...
     vitePlugins: [
-      [ 
+      [
         'rollup-plugin-copy', {
           targets: [
             { // Syntax code, check doc in https://www.npmjs.com/package/rollup-plugin-copy
@@ -156,7 +156,7 @@ It is likely that you will need to copy static or external files to your Quasar
               src: 'config/firebase/firebase-messaging-sw.js',
               dest: 'dest/spa'    // example when building SPA
             }
-        } 
+        }
        ],
        // other vite/rollup plugins
     ]
@@ -222,4 +222,4 @@ module.exports = function (ctx) {
 
 Styles in `*.vue` files (and all other style files) are piped through PostCSS by default, so you don't need to use a specific loader for it.
 
-By default, PostCSS is configured to use Autoprefixer. Take a look at `/postcss.config.js` where you can tweak it if you need to.
+By default, PostCSS is configured to use Autoprefixer. Take a look at `/postcss.config.cjs` where you can tweak it if you need to.

docs/src/pages/quasar-cli-vite/linter.md

@@ -13,10 +13,10 @@ When you scaffold a Quasar project folder it will ask you if you want a linter a
 
 Two dot files will be created:
 
-* .eslintrc.js -- ESLint configuration, including rules
+* .eslintrc.cjs -- ESLint configuration, including rules
 * .eslintignore -- what ESLint should ignore when linting
 
-Further extension of one of the ESLint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `/.eslintrc.js` and notice it:
+Further extension of one of the ESLint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `/.eslintrc.cjs` and notice it:
 
 ```js
 extends: [
@@ -52,7 +52,7 @@ You can add/remove/change rules by first visiting [https://eslint.org/docs/rules
 Example of ESLint rules below:
 
 ```js
-// .eslintrc.js
+// .eslintrc.cjs
 
 'rules': {
   'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],

docs/src/pages/quasar-cli-webpack/directory-structure.md

@@ -102,12 +102,15 @@ scope:
     - l: ".eslintignore"
       e: ESLint ignore paths
       url: https://eslint.org/docs/latest/user-guide/configuring/ignoring-code#the-eslintignore-file
-    - l: ".eslintrc.js"
+    - l: ".eslintrc.cjs"
       e: ESLint config
       url: https://eslint.org/docs/latest/user-guide/configuring/configuration-files#using-configuration-files
-    - l: postcss.config.js
+    - l: postcss.config.cjs
       e: PostCSS config
       url: https://github.com/postcss/postcss
+    - l: babel.config.cjs
+      e: Babel config
+      url: https://babeljs.io/docs/
     - l: jsconfig.json
       e: Editor config (if not using TypeScript)
       url: https://code.visualstudio.com/docs/languages/jsconfig

docs/src/pages/quasar-cli-webpack/handling-webpack.md

@@ -201,7 +201,7 @@ And you're done.
 
 Styles in `*.vue` files (and all other style files) are piped through PostCSS by default, so you don't need to use a specific loader for it.
 
-By default, PostCSS is configured to use Autoprefixer. Take a look at `/.postcssrc.js` where you can tweak it if you need to.
+By default, PostCSS is configured to use Autoprefixer. Take a look at `/postcss.config.cjs` where you can tweak it if you need to.
 
 ### Pug
 First, you need to install some dependencies:

docs/src/pages/quasar-cli-webpack/linter.md

@@ -13,10 +13,10 @@ When you scaffold a Quasar project folder it will ask you if you want a linter a
 
 Two dot files will be created:
 
-* .eslintrc.js -- ESLint configuration, including rules
+* .eslintrc.cjs -- ESLint configuration, including rules
 * .eslintignore -- what ESLint should ignore when linting
 
-Further extension of one of the Eslint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `.eslintrc.js` and notice it:
+Further extension of one of the Eslint setups above can be made. Your project will by default use `eslint-plugin-vue` to handle your Vue files. Take a quick look at `.eslintrc.cjs` and notice it:
 
 ```js
 extends: [
@@ -47,7 +47,7 @@ You can add/remove/change rules by first visiting [https://eslint.org/docs/rules
 
 Example of ESLint rules below:
 ```js
-// .eslintrc.js
+// .eslintrc.cjs
 
 'rules': {
   'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],

docs/src/pages/quasar-cli-webpack/supporting-ts.md

@@ -79,7 +79,7 @@ $ yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plug
 Then update your ESLint configuration accordingly, like in the following example:
 
 ```js
-// .eslintrc.js
+// .eslintrc.cjs
 const { resolve } = require('path');
 
 module.exports = {

docs/src/pages/start/upgrade-guide/upgrade-guide.md

@@ -165,7 +165,7 @@ Before starting, it is highly suggested to make a copy of your current working p
   $ yarn add quasar@2 vue@3 vue-router@4
   ```
 7) **Remove** `.quasar` and `node_modules` folders, and `package-lock.json` / `yarn.lock` file, then run `npm install` / `yarn install` to regenerate the lock file. This forces the upgrade of the whole dependency graph (deep dependencies included) and avoids troubles with mismatching packages, especially webpack 5 related ones.
-8) If you are using ESLint, then edit `/.eslintrc.js`:
+8) If you are using ESLint, then edit `/.eslintrc.cjs` (also rename from `/.eslintrc.js`):
   ```js
   // old way
   parserOptions: {