feat(app-webpack): support more babel & postcss config filenames #15756

Author: rstoenescu

app-webpack/lib/app-paths.js

@@ -26,6 +26,36 @@ function getAppInfo () {
   fatal(`Error. This command must be executed inside a Quasar project folder.`)
 }
 
+const postcssConfigFilenameList = [
+  '.postcssrc.js',
+  'postcss.config.js',
+  'postcss.config.cjs'
+]
+
+function getPostcssConfigFile (appDir) {
+  for (const name of postcssConfigFilenameList) {
+    const filename = join(appDir, name)
+    if (existsSync(filename)) {
+      return filename
+    }
+  }
+}
+
+const babelConfigFilenameList = [
+  'babel.config.js',
+  'babel.config.cjs',
+  '.babelrc.js'
+]
+
+function getBabelConfigFile (appDir) {
+  for (const name of babelConfigFilenameList) {
+    const filename = join(appDir, name)
+    if (existsSync(filename)) {
+      return filename
+    }
+  }
+}
+
 const { appDir, quasarConfigFilename } = getAppInfo()
 
 const cliDir = resolve(__dirname, '..')
@@ -47,7 +77,10 @@ module.exports = {
   capacitorDir,
   electronDir,
   bexDir,
+
   quasarConfigFilename,
+  postcssConfigFilename: getPostcssConfigFile(appDir),
+  babelConfigFilename: getBabelConfigFile(appDir),
 
   resolve: {
     cli: dir => join(cliDir, dir),

app-webpack/lib/helpers/has-eslint.js

@@ -1,21 +1,16 @@
-const fs = require('fs')
+
+const { existsSync } = require('fs')
+
 const appPaths = require('../app-paths')
 const appPkg = require(appPaths.resolve.app('package.json'))
 
-function hasEslint() {
-  // See: https://eslint.org/docs/user-guide/configuring/configuration-files
-  const configPaths = [
-    '.eslintrc.js',
-    '.eslintrc.cjs',
-    '.eslintrc.yaml',
-    '.eslintrc.yml',
-    '.eslintrc.json',
-  ]
-
-  return (
-    configPaths.some(path => fs.existsSync(appPaths.resolve.app(path))) ||
-    appPkg.eslintConfig !== undefined
-  )
-}
+const eslintConfigFile = [
+  '.eslintrc.cjs',
+  '.eslintrc.js',
+  '.eslintrc.yaml',
+  '.eslintrc.yml',
+  '.eslintrc.json',
+].find(path => existsSync(appPaths.resolve.app(path)))
 
-module.exports = hasEslint()
+module.exports.eslintConfigFile = eslintConfigFile
+module.exports.hasEslint = appPkg.eslintConfig || eslintConfigFile

app-webpack/lib/mode/mode-pwa.js

@@ -5,7 +5,7 @@ const appPaths = require('../app-paths')
 const { log, warn } = require('../helpers/logger')
 const nodePackager = require('../helpers/node-packager')
 const hasTypescript = require('../helpers/has-typescript')
-const hasEslint = require('../helpers/has-eslint')
+const { hasEslint } = require('../helpers/has-eslint')
 
 const pwaDeps = {
   'workbox-webpack-plugin': '^6.0.0'
@@ -34,7 +34,7 @@ class Mode {
       appPaths.resolve.cli(`templates/pwa/${format}`),
       appPaths.pwaDir,
       // Copy .eslintrc.js only if the app has ESLint
-      { filter: src => hasEslint || !src.endsWith('/.eslintrc.js') }
+      hasEslint === true && format === 'ts' ? { filter: src => !src.endsWith('/.eslintrc.js') } : void 0
     )
 
     fse.copySync(

app-webpack/lib/webpack/create-chain.js

@@ -175,7 +175,7 @@ module.exports = function (cfg, configName) {
         .loader('babel-loader')
           .options({
             compact: false,
-            extends: appPaths.resolve.app('babel.config.js')
+            extends: appPaths.babelConfigFilename
           })
   }
 

app-webpack/lib/webpack/inject.node-babel.js

@@ -10,7 +10,7 @@ module.exports = function (cfg, chain) {
       .use('babel-loader')
         .loader('babel-loader')
           .options({
-            extends: appPaths.resolve.app('babel.config.js')
+            extends: appPaths.babelConfigFilename
           })
   }
 }

app-webpack/lib/webpack/inject.style-rules.js

@@ -4,7 +4,6 @@ const path = require('path')
 
 const appPaths = require('../app-paths')
 const cssVariables = require('../helpers/css-variables')
-const postCssConfigFile = appPaths.resolve.app('.postcssrc.js')
 const quasarCssPaths = [
   path.join('node_modules', 'quasar', 'dist'),
   path.join('node_modules', 'quasar', 'src'),
@@ -113,8 +112,8 @@ function injectRule (chain, pref, lang, test, loader, loaderOptions) {
 
     // need a fresh copy, otherwise plugins
     // will keep on adding making N duplicates for each one
-    delete require.cache[postCssConfigFile]
-    const postCssConfig = require(postCssConfigFile)
+    delete require.cache[appPaths.postcssConfigFilename]
+    const postCssConfig = require(appPaths.postcssConfigFilename)
     let postCssOpts = { sourceMap: pref.sourceMap, ...postCssConfig }
 
     if (pref.rtl) {

app-webpack/lib/webpack/pwa/create-custom-sw.js

@@ -91,7 +91,7 @@ module.exports = function (cfg, configName) {
         .loader('babel-loader')
           .options({
             compact: false,
-            extends: appPaths.resolve.app('babel.config.js')
+            extends: appPaths.babelConfigFilename
           })
   }