0.8.0/next

gridsome/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.0]
+
+Updated to Webpack 5 and PostCSS 8
+
+*Breaking changes*
+
+Supports following node versions: ^10 || ^12 || >=14
+
+### Updated following packages:
+
+ - @vue/component-compiler-utils: 2.5.2 > 3.2.0
+ - autoprefixer: 9.4.7 > 10.2.5
+ - cache-loader: 2.0.1 > 4.1.0
+ - css-loader: 2.1.0 > 5.2.0
+ - express-graphql: 0.9.0 > 0.12.0
+ - file-loader: 3.0.1 > 6.2.0
+ - graphql: 14.4.2 > 15.5.0
+ - html-webpack-plugin: 3.2.0 > 5.3.1
+ - mini-css-extract-plugin: 0.5.0 > 1.4.0
+ - postcss-loader: 3.0.0 > 5.2.0
+ - url-loader: 1.1.2 > 4.1.1
+ - webpack: 4.29.3 > 5.28.0
+ - webpack-dev-middleware: 3.5.2 > 4.1.0
+ - webpack-merge: 4.2.1 > 5.7.3
+ - yaml-loader: 0.5.0 > 0.6.0
+
+ ### Removed & replaced following deprecated packages:
+
+ - @hapi/joi > joi
+ - optimize-css-assets-webpack-plugin > css-minimizer-webpack-plugin
+
+
+### Added following packages:
+
+ - postcss: ^8.2.8
+ - process: 0.11.10
+
 ## [0.7.23](https://github.com/gridsome/gridsome/compare/gridsome@0.7.22...gridsome@0.7.23) (2020-11-22)
 
 

gridsome/lib/app/Compiler.js

@@ -142,6 +142,10 @@ class Compiler {
       )
     }
 
+    config.plugins.push(new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }))
+
     return config
   }
 

gridsome/lib/app/loadConfig.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const fs = require('fs-extra')
-const Joi = require('@hapi/joi')
+const Joi = require('joi')
 const crypto = require('crypto')
 const dotenv = require('dotenv')
 const isRelative = require('is-relative')
@@ -215,7 +215,7 @@ function normalizePathPrefix (pathPrefix = '') {
   return segments.length ? `/${segments.join('/')}` : ''
 }
 
-const template = Joi.object()
+const joiTemplate = Joi.object()
   .label('Template')
   .keys({
     typeName: Joi.string().required(),
@@ -234,12 +234,12 @@ function normalizeTemplates (context, config, localConfig) {
 
   const normalize = (typeName, options, i = 0) => {
     if (typeof options === 'string' || typeof options === 'function') {
-      const { error, value } = Joi.validate({
+      const { error, value } = joiTemplate.validate({
         typeName,
         path: options,
         component: path.join(templatesDir, `${typeName}.vue`),
         name: 'default'
-      }, template)
+      })
 
       if (error) {
         throw new Error(error.message)
@@ -261,7 +261,7 @@ function normalizeTemplates (context, config, localConfig) {
       )
     }
 
-    const { error, value } = Joi.validate({
+    const { error, value } = joiTemplate.validate({
       typeName,
       name: options.name,
       path: options.path,
@@ -270,7 +270,7 @@ function normalizeTemplates (context, config, localConfig) {
           ? path.join(context, options.component)
           : options.component
         : path.join(templatesDir, `${typeName}.vue`)
-    }, template)
+    })
 
     if (error) {
       throw new Error(error.message)
@@ -320,7 +320,7 @@ function normalizePlugins (context, plugins) {
   })
 }
 
-const redirect = Joi.object()
+const joiRedirect = Joi.object()
   .label('Redirect')
   .keys({
     from: Joi.string().required(),
@@ -333,7 +333,7 @@ function normalizeRedirects (config) {
 
   if (Array.isArray(config.redirects)) {
     return config.redirects.map(rule => {
-      const { error, value } = Joi.validate(rule, redirect)
+      const { error, value } = joiRedirect.validate(rule)
 
       if (error) {
         throw new Error(error.message)
@@ -346,23 +346,23 @@ function normalizeRedirects (config) {
   return redirects
 }
 
-const permalinksSchema = Joi.object()
+const joiPermalinksConfig = Joi.object()
   .label('Permalinks config')
   .keys({
     trailingSlash: Joi.boolean()
       .valid(true, false, 'always')
       .default(true),
     slugify: Joi.alternatives()
-      .try([
+      .try(
         Joi.object().keys({
-          use: Joi.alternatives().try([
+          use: Joi.alternatives().try(
             Joi.string(),
             Joi.func()
-          ]),
+          ),
           options: Joi.object()
         }),
         Joi.func()
-      ])
+      )
       .default({
         use: '@sindresorhus/slugify',
         options: {}
@@ -371,7 +371,7 @@ const permalinksSchema = Joi.object()
   })
 
 function normalizePermalinks (permalinks = {}) {
-  const { error, value } = Joi.validate(permalinks, permalinksSchema)
+  const { error, value } = joiPermalinksConfig.validate(permalinks)
 
   if (error) {
     throw new Error(error.message)
@@ -486,36 +486,34 @@ function normalizeImages (config = {}) {
     })
   }
 
-  const { error, value } = Joi.validate(
-    config,
-    Joi.object().label('Images').keys({
-      compress: Joi.boolean().default(true),
-      defaultQuality: Joi.number().default(75).min(0).max(100),
-      backgroundColor: Joi.string().allow(null).default(null),
-      defaultBlur: Joi.number().default(defaultPlaceholder.defaultBlur),
-      placeholder: Joi.alternatives()
-        .default(defaultPlaceholder)
-        .try([
-          Joi.object().label('Blur').keys({
-            type: Joi.string().default('blur').valid('blur'),
-            defaultBlur: Joi.number().min(0).default(defaultPlaceholder.defaultBlur)
-          }),
-          Joi.object().label('Trace').keys({
-            type: Joi.string().required().valid('trace'),
-            background: Joi.string().default(undefined),
-            color: Joi.string().default(undefined),
-            threshold: Joi.number().min(0).max(255).default(120)
-          }),
-          Joi.object().label('Blurhash').keys({
-            type: Joi.string().required().valid('blurhash'),
-            components: Joi.number().default(5).min(1).max(9)
-          }),
-          Joi.object().label('Dominant').keys({
-            type: Joi.string().required().valid('dominant')
-          })
-        ])
-    })
-  )
+  const joiImages = Joi.object().label('Images').keys({
+    compress: Joi.boolean().default(true),
+    defaultQuality: Joi.number().default(75).min(0).max(100),
+    backgroundColor: Joi.string().allow(null).default(null),
+    defaultBlur: Joi.number().default(defaultPlaceholder.defaultBlur),
+    placeholder: Joi.alternatives()
+      .default(defaultPlaceholder)
+      .try(
+        Joi.object().label('Blur').keys({
+          type: Joi.string().default('blur').valid('blur'),
+          defaultBlur: Joi.number().min(0).default(defaultPlaceholder.defaultBlur)
+        }),
+        Joi.object().label('Trace').keys({
+          type: Joi.string().required().valid('trace'),
+          background: Joi.string(),
+          color: Joi.string(),
+          threshold: Joi.number().min(0).max(255).default(120)
+        }),
+        Joi.object().label('Blurhash').keys({
+          type: Joi.string().required().valid('blurhash'),
+          components: Joi.number().default(5).min(1).max(9)
+        }),
+        Joi.object().label('Dominant').keys({
+          type: Joi.string().required().valid('dominant')
+        })
+      )
+  })
+  const { error, value } = joiImages.validate(config)
 
   if (error) {
     throw new Error(error.message)

gridsome/lib/develop.js

@@ -60,11 +60,7 @@ module.exports = async (context, args) => {
   })
 
   app.server.hooks.afterSetup.tap('develop', server => {
-    const devMiddleware = require('webpack-dev-middleware')(compiler, {
-      pathPrefix: webpackConfig.output.pathPrefix,
-      watchOptions: webpackConfig.devServer ? webpackConfig.devServer.watchOptions : null,
-      logLevel: 'silent'
-    })
+    const devMiddleware = require('webpack-dev-middleware')(compiler)
 
     server.use(devMiddleware)
   })

gridsome/lib/pages/schemas.js

@@ -1,4 +1,4 @@
-const Joi = require('@hapi/joi')
+const Joi = require('joi')
 
 const schemas = {
   route: Joi.object()
@@ -49,7 +49,7 @@ const schemas = {
 }
 
 function validate (schema, options) {
-  const { error, value } = Joi.validate(options, schemas[schema])
+  const { error, value } = schemas[schema].validate(options)
 
   if (error) {
     throw new Error(error.message)

gridsome/lib/server/Server.js

@@ -4,7 +4,7 @@ const chalk = require('chalk')
 const devcert = require('devcert')
 const express = require('express')
 const { SyncHook } = require('tapable')
-const graphqlHTTP = require('express-graphql')
+const { graphqlHTTP } = require('express-graphql')
 const graphqlMiddleware = require('./middlewares/graphql')
 const historyApiFallback = require('connect-history-api-fallback')
 const { default: playground } = require('graphql-playground-middleware-express')

gridsome/lib/webpack/createBaseConfig.js

@@ -50,15 +50,15 @@ module.exports = (app, { isProd, isServer }) => {
       }])
       .end()
     // TODO: Remove plugin when using webpack 5
-    .plugin('pnp')
-      .use({...require(`pnp-webpack-plugin`)})
+    //.plugin('pnp')
+    //  .use({...require(`pnp-webpack-plugin`)})
 
-  config.resolveLoader
+  //config.resolveLoader
     // TODO: Remove plugin when using webpack 5
-    .plugin('pnp-loaders')
-      .use({ ...require('pnp-webpack-plugin').topLevelLoader })
-      .end()
-    .set('symlinks', true)
+    //.plugin('pnp-loaders')
+    //  .use({ ...require('pnp-webpack-plugin').topLevelLoader })
+    //  .end()
+    //.set('symlinks', true)
 
   config.module.noParse(/^(vue|vue-router|vue-meta)$/)
 
@@ -69,7 +69,7 @@ module.exports = (app, { isProd, isServer }) => {
   }
 
   if (!isProd) {
-    config.devtool('cheap-module-eval-source-map')
+    config.devtool('cheap-module-source-map')
   }
 
   // vue
@@ -241,7 +241,7 @@ module.exports = (app, { isProd, isServer }) => {
   }
 
   // Short hashes as ids for better long term caching.
-  config.optimization.merge({ moduleIds: 'hashed' })
+  config.optimization.merge({ moduleIds: 'deterministic' })
 
   if (process.env.GRIDSOME_TEST) {
     config.output.pathinfo(true)
@@ -276,7 +276,10 @@ module.exports = (app, { isProd, isServer }) => {
     const modulesRule = baseRule.oneOf('modules').resourceQuery(/module/)
     const normalRule = baseRule.oneOf('normal')
 
-    applyLoaders(modulesRule, true)
+    applyLoaders(modulesRule, {
+      exportOnlyLocals: isServer,
+      localIdentName: `[local]_[hash:base64:8]`,
+    })
     applyLoaders(normalRule, false)
 
     function applyLoaders (rule, modules) {
@@ -291,19 +294,19 @@ module.exports = (app, { isProd, isServer }) => {
       rule.use('css-loader')
         .loader(require.resolve('css-loader'))
         .options(Object.assign({
+          esModule: false,
           modules,
-          exportOnlyLocals: isServer,
-          localIdentName: `[local]_[hash:base64:8]`,
           importLoaders: 1,
           sourceMap: !isProd
         }, css))
 
       rule.use('postcss-loader')
         .loader(require.resolve('postcss-loader'))
         .options(Object.assign({
-          sourceMap: !isProd
-        }, postcss, {
-          plugins: (postcss.plugins || []).concat(require('autoprefixer'))
+          sourceMap: !isProd,
+          postcssOptions: Object.assign({}, postcss, {
+            plugins: (postcss.plugins || []).concat(require('autoprefixer'))
+          })
         }))
 
       if (loader) {

gridsome/lib/webpack/createClientConfig.js

@@ -10,25 +10,14 @@ module.exports = async app => {
 
   config.entry('app').add(resolve('../../app/entry.client.js'))
 
-  config.node.merge({
-    setImmediate: false
-  })
-
   if (isProd) {
     config.plugin('vue-server-renderer')
       .use(require('./plugins/VueSSRClientPlugin'), [{
         filename: path.relative(outputDir, clientManifestPath)
       }])
 
     config.plugin('optimize-css')
-      .use(require('optimize-css-assets-webpack-plugin'), [{
-        canPrint: false,
-        cssProcessorOptions: {
-          safe: true,
-          autoprefixer: { disable: true },
-          mergeLonghand: false
-        }
-      }])
+      .use(require('css-minimizer-webpack-plugin'))
 
     if (css.split !== true) {
       const cacheGroups = {