create-quasar 1.10.1 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quasar",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Scaffolds Quasar Apps, AppExtensions or UI kits",
   "type": "module",
   "author": {
@@ -27,12 +27,12 @@
     "node": ">=16"
   },
   "dependencies": {
-    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
     "lodash": "^4.17.21",
     "minimist": "^1.2.8",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "tinyglobby": "^0.2.10"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.7",

package/templates/app/quasar-v2/index.js

@@ -6,10 +6,10 @@ export async function script ({ scope, utils }) {
       message: 'Pick Quasar App CLI variant:',
       initial: 0,
       choices: [
-        { title: 'Quasar App CLI with Vite 2 (stable | v1)', value: 'vite-1', description: 'recommended' },
-        { title: 'Quasar App CLI with Vite 6 (Release Candidate | next major version - v2)', value: 'vite-2' },
-        { title: 'Quasar App CLI with Webpack (stable | v3)', value: 'webpack-3' },
-        { title: 'Quasar App CLI with Webpack (Release Candidate | next major version - v4)', value: 'webpack-4' }
+        { title: 'Quasar App CLI with Vite 6 (v2)', value: 'vite-2', description: 'recommended' },
+        { title: 'Quasar App CLI with Webpack (v4)', value: 'webpack-4' },
+        { title: '[Legacy] Quasar App CLI with Vite 2 (v1)', value: 'vite-1' },
+        { title: '[Legacy] Quasar App CLI with Webpack (v3)', value: 'webpack-3' }
       ]
     },
     {

package/templates/app/quasar-v2/js-vite-1/BASE/quasar.config.js

@@ -137,7 +137,6 @@ module.exports = configure(function (/* ctx */) {
     // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
     ssr: {
       // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
-                                          // will mess up SSR
 
       // extendSSRWebserverConf (esbuildConf) {},
       // extendPackageJson (json) {},

package/templates/app/quasar-v2/js-vite-2/.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
       // Quasar v2 - JS
       'css',
       'preset',
-      'lintConfig'
+      'prettier'
     ]
   }
 }

package/templates/app/quasar-v2/js-vite-2/BASE/README.md

@@ -13,7 +13,7 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
@@ -21,7 +21,7 @@ yarn lint
 # or
 npm run lint
 ```
-<% if (lintConfig === 'prettier') { %>
+<% if (prettier) { %>
 
 ### Format the files
 ```bash
@@ -29,8 +29,7 @@ yarn format
 # or
 npm run format
 ```
-<% } %>
-<% } %>
+<% } } %>
 
 ### Build the app for production
 ```bash

package/templates/app/quasar-v2/js-vite-2/BASE/_.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

package/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.lint) { %>"dbaeumer.vscode-eslint",
-    <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode",<% } } %>
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

package/templates/app/quasar-v2/js-vite-2/BASE/_.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true<% if (preset.lint) { %>,
+  "editor.guides.bracketPairs": true<% if (preset.eslint) { %>,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],

package/templates/app/quasar-v2/js-vite-2/BASE/_package.json

@@ -7,9 +7,8 @@
   "type": "module",
   "private": true,
   "scripts": {
-    <% if (preset.lint) { %>"lint": "eslint --ext .js,.vue ./",
-    <% if (lintConfig === 'prettier') { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
-    <% } %>
+    <% if (preset.eslint) { %>"lint": "eslint -c ./eslint.config.js './src*/**/*.{js,cjs,mjs,vue}'",<% } %>
+    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
@@ -25,29 +24,24 @@
     "vue-router": "^4.0.0"
   },
   "devDependencies": {
-    <% if (preset.lint) { %>
-    "vite-plugin-checker": "^0.8.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.0.0",
-    <% if (lintConfig === 'standard') { %>
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    <% } else if (lintConfig === 'airbnb') { %>
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.20.1",
-    <% } else if (lintConfig === 'prettier') { %>
-    "eslint-config-prettier": "^9.0.0",
-    "prettier": "^3.0.3",
-    <% } } %>
     <% if (preset.i18n) { %>"@intlify/unplugin-vue-i18n": "^2.0.0",<% } %>
-    "@quasar/app-vite": "^2.0.0-rc.1",
+    <% if (preset.eslint) { %>
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "vite-plugin-checker": "^0.8.0",
+    <% } %>
+    <% if (prettier) { %>
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.3.3",
+    <% } %>
+    "@quasar/app-vite": "^2.0.0",
     "autoprefixer": "^10.4.2",
     "postcss": "^8.4.14"
   },
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

package/templates/app/quasar-v2/js-vite-2/BASE/postcss.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 import autoprefixer from 'autoprefixer'

package/templates/app/quasar-v2/js-vite-2/BASE/quasar.config.js

@@ -1,12 +1,8 @@
-/* eslint-env node */
-
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
 
-<% if (preset.lint && lintConfig === 'airbnb') { %>/* eslint func-names: 0 */
-/* eslint global-require: 0 */<% } %>
-import { defineConfig } from '#q-app/wrappers'
-<% if (preset.i18n) { %>import { fileURLToPath } from 'node:url';<% } %>
+import { defineConfig } from '#q-app/wrappers'<% if (preset.i18n) { %>
+import { fileURLToPath } from 'node:url'<% } %>
 
 export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<% } %>) => {
   return {
@@ -16,9 +12,9 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: [
-      <% if (preset.i18n) { %>'i18n',<% } %>
-      <% if (preset.axios) { %>'axios',<% } %>
+    boot: [<% if (preset.i18n) { %>
+      'i18n'<% } %><% if (preset.axios) { %><%= preset.i18n ? ',' : '' %>
+      'axios'<% } %>
     ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
@@ -65,8 +61,8 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
 
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
-
-      <% if (preset.i18n || preset.lint) { %>vitePlugins: [<% if (preset.i18n) { %>
+      <% if (preset.i18n || preset.eslint) { %>
+      vitePlugins: [<% if (preset.i18n) { %>
         ['@intlify/unplugin-vue-i18n/vite', {
           // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
           // compositionOnly: false,
@@ -78,11 +74,13 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
           ssr: ctx.modeName === 'ssr',
 
           // you need to set i18n resource including paths !
-          include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ],
-        }]<% } %><% if (preset.lint) { %><% if (preset.i18n) { %>,<% } %>
+          include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ]
+        }]<% } %><% if (preset.eslint) { %><% if (preset.i18n) { %>,
+<% } %>
         ['vite-plugin-checker', {
           eslint: {
-            lintCommand: 'eslint "./**/*.{js,mjs,cjs,vue}"'
+            lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
+            useFlatConfig: true
           }
         }, { server: false }]<% } %>
       ]<% } else { %>
@@ -93,7 +91,7 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
     devServer: {
-      // https: true
+      // https: true,
       open: true // opens browser window automatically
     },
 
@@ -150,7 +148,6 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
       // manualPostHydrationTrigger: true,
 
       pwa: false
-
       // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
 
       // pwaExtendGenerateSWOptions (cfg) {},
@@ -220,7 +217,15 @@ export default defineConfig((<% if (preset.i18n) { %>ctx<% } else { %>/* ctx */<
       // extendBexScriptsConf (esbuildConf) {},
       // extendBexManifestJson (json) {},
 
+      /**
+       * The list of extra scripts (js/ts) not in your bex manifest that you want to
+       * compile and use in your browser extension. Maybe dynamic use them?
+       *
+       * Each entry in the list should be a relative filename to /src-bex/
+       *
+       * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
+       */
       extraScripts: []
     }
   }
-});
+})

package/templates/app/quasar-v2/js-vite-2/eslint/_eslint.config.js

@@ -0,0 +1,73 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-vite/eslint'<% if (prettier) { %>
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'<% } %>
+
+export default [
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    // ignores: []
+  },
+
+  ...pluginQuasar.configs.recommended(),
+  js.configs.recommended,
+
+  /**
+   * https://eslint.vuejs.org
+   *
+   * pluginVue.configs.base
+   *   -> Settings and rules to enable correct ESLint parsing.
+   * pluginVue.configs[ 'flat/essential']
+   *   -> base, plus rules to prevent errors or unintended behavior.
+   * pluginVue.configs["flat/strongly-recommended"]
+   *   -> Above, plus rules to considerably improve code readability and/or dev experience.
+   * pluginVue.configs["flat/recommended"]
+   *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
+   */
+  ...pluginVue.configs[ 'flat/essential' ],
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly' // BEX related
+      }
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
+  },
+
+  {
+    files: [ 'src-pwa/custom-service-worker.js' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }<% if (prettier) { %>,
+
+  prettierSkipFormatting<% } %>
+]

package/templates/app/quasar-v2/js-vite-2/index.js

@@ -5,7 +5,7 @@ export async function script ({ scope, utils }) {
       name: 'preset',
       message: 'Check the features needed for your project:',
       choices: [
-        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'lint', description: 'recommended', selected: true },
+        { title: 'Linting (vite-plugin-checker + ESLint)', value: 'eslint', description: 'recommended', selected: true },
         { title: 'State Management (Pinia)', value: 'pinia', description: 'https://pinia.vuejs.org' },
         { title: 'axios', value: 'axios' },
         { title: 'vue-i18n', value: 'i18n' }
@@ -13,23 +13,24 @@ export async function script ({ scope, utils }) {
       format: utils.convertArrayToObject
     },
     {
-      type: (_, { preset }) => (preset.lint ? 'select' : null),
-      name: 'lintConfig',
-      message: 'Pick an ESLint preset:',
-      choices: [
-        { title: 'Prettier', value: 'prettier', description: 'https://github.com/prettier/prettier' },
-        { title: 'Standard', value: 'standard', description: 'https://github.com/standard/standard' },
-        { title: 'Airbnb', value: 'airbnb', description: 'https://github.com/airbnb/javascript' }
-      ]
+      type: (_, { preset }) => (preset.eslint ? 'confirm' : null),
+      name: 'prettier',
+      initial: true,
+      message: 'Add Prettier for code formatting?'
     }
   ])
 
+  // ensure it's defined since if not selecting ESLint,
+  // user won't be asked about it hence it won't be defined
+  scope.prettier = scope.prettier || false
+
   utils.createTargetDir(scope)
   utils.renderTemplate('BASE', scope)
   utils.renderTemplate(scope.css, scope)
 
   if (scope.preset.axios) utils.renderTemplate('axios', scope)
   if (scope.preset.i18n) utils.renderTemplate('i18n', scope)
-  if (scope.preset.lint) utils.renderTemplate('lint', scope)
+  if (scope.preset.eslint) utils.renderTemplate('eslint', scope)
+  if (scope.prettier) utils.renderTemplate('prettier', scope)
   if (scope.preset.pinia) utils.renderTemplate('pinia', scope)
 }

package/templates/app/quasar-v2/js-vite-2/pinia/src/stores/example-store.js

@@ -1,15 +1,21 @@
-import { defineStore } from 'pinia';
+import { defineStore, acceptHMRUpdate } from 'pinia'
 
 export const useCounterStore = defineStore('counter', {
   state: () => ({
-    counter: 0,
+    counter: 0
   }),
+
   getters: {
-    doubleCount: (state) => state.counter * 2,
+    doubleCount: (state) => state.counter * 2
   },
+
   actions: {
     increment() {
-      this.counter++;
-    },
-  },
-});
+      this.counter++
+    }
+  }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot))
+}

package/templates/app/quasar-v2/js-vite-2/prettier/_.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/templates/app/quasar-v2/js-webpack-4/.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
       // Quasar v2 - JS
       'css',
       'preset',
-      'lintConfig'
+      'prettier'
     ]
   }
 }

package/templates/app/quasar-v2/js-webpack-4/BASE/README.md

@@ -13,7 +13,7 @@ npm install
 ```bash
 quasar dev
 ```
-<% if (preset.lint) { %>
+<% if (preset.eslint) { %>
 
 ### Lint the files
 ```bash
@@ -21,7 +21,7 @@ yarn lint
 # or
 npm run lint
 ```
-<% if (lintConfig === 'prettier') { %>
+<% if (prettier) { %>
 
 ### Format the files
 ```bash
@@ -29,8 +29,7 @@ yarn format
 # or
 npm run format
 ```
-<% } %>
-<% } %>
+<% } } %>
 
 ### Build the app for production
 ```bash

package/templates/app/quasar-v2/js-webpack-4/BASE/_.editorconfig

@@ -1,9 +1,7 @@
-root = true
-
-[*]
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
 charset = utf-8
-indent_style = space
 indent_size = 2
+indent_style = space
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true

package/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
-    <% if (preset.lint) { %>"dbaeumer.vscode-eslint",
-    <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode",<% } } %>
+    <% if (preset.eslint) { %>"dbaeumer.vscode-eslint",<% } %>
+    <% if (prettier) { %>"esbenp.prettier-vscode",<% } %>
     "editorconfig.editorconfig",
     "vue.volar",
     "wayou.vscode-todo-highlight"

package/templates/app/quasar-v2/js-webpack-4/BASE/_.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.bracketPairColorization.enabled": true,
-  "editor.guides.bracketPairs": true<% if (preset.lint) { %>,
+  "editor.guides.bracketPairs": true<% if (preset.eslint) { %>,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": <% if (lintConfig === 'prettier') { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
+  "editor.defaultFormatter": <% if (prettier) { %>"esbenp.prettier-vscode"<% } else { %>"dbaeumer.vscode-eslint"<% } %>,
   "editor.codeActionsOnSave": [
     "source.fixAll.eslint"
   ],

package/templates/app/quasar-v2/js-webpack-4/BASE/_package.json

@@ -5,10 +5,10 @@
   "productName": "<%= productName %>",
   "author": "<%= author %>",
   "private": true,
+  "type": "module",
   "scripts": {
-    <% if (preset.lint) { %>"lint": "eslint --ext .js,.vue ./",
-    <% if (lintConfig === 'prettier') { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
-    <% } %>
+    <% if (preset.eslint) { %>"lint": "eslint -c ./eslint.config.js './src*/**/*.{js,cjs,mjs,vue}'",<% } %>
+    <% if (prettier) { %>"format": "prettier --write \"**/*.{js,vue<% if (css !== 'sass') { %>,<%= css %><% } %>,html,md,json}\" --ignore-path .gitignore",<% } %>
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
@@ -25,24 +25,19 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    <% if (preset.lint) { %>
-    "@babel/eslint-parser": "^7.13.14",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    <% if (lintConfig === 'standard') { %>
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-n": "^15.0.0",
-    "eslint-plugin-promise": "^6.0.0",
-    <% } else if (lintConfig === 'airbnb') { %>
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.20.1",
-    <% } else if (lintConfig === 'prettier') { %>
-    "eslint-config-prettier": "^9.0.0",
-    "prettier": "^3.0.3",
-    <% } } %>
-    "@quasar/app-webpack": "^4.0.0-rc.1"
+    <% if (preset.eslint) { %>
+    "@eslint/js": "^9.14.0",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "eslint-webpack-plugin": "^4.2.0",
+    "globals": "^15.12.0",
+    <% } %>
+    <% if (prettier) { %>
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "prettier": "^3.3.3",
+    <% } %>
+    "@quasar/app-webpack": "^4.0.0",
+    "autoprefixer": "^10.4.2"
   },
   "browserslist": [
     "last 10 Chrome versions",
@@ -56,7 +51,7 @@
     "last 5 Opera versions"
   ],
   "engines": {
-    "node": "^24 || ^22 || ^20 || ^18",
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }

package/templates/app/quasar-v2/js-webpack-4/BASE/{babel.config.cjs → babel.config.js}

@@ -1,6 +1,4 @@
-/* eslint-disable */
-
-module.exports = api => {
+export default api => {
   return {
     presets: [
       [

package/templates/app/quasar-v2/js-webpack-4/BASE/{postcss.config.cjs → postcss.config.js}

@@ -1,9 +1,9 @@
-/* eslint-disable */
 // https://github.com/michael-ciniawsky/postcss-load-config
+import autoprefixer from 'autoprefixer'
 
-module.exports = {
+export default {
   plugins: [
     // to edit target browsers: use "browserslist" field in package.json
-    require('autoprefixer')
+    autoprefixer
   ]
 }