feat(next): upgrade to v11

next.config.js

@@ -1,66 +1,19 @@
-require("dotenv").config();
 const path = require("path");
-const withSass = require("@zeit/next-sass");
-const rtlcss = require("rtlcss");
+require("dotenv").config();
 
-module.exports = withSass({
+module.exports = {
   assetPrefix: ".",
   basePath: process.env.BASE_PATH || "",
   env: {
     ALTLANG_ROOT_PATH: process.env.ALTLANG_ROOT_PATH || "/",
     ENABLE_RTL: process.env.ENABLE_RTL || "false",
   },
-  sassLoaderOptions: {
-    sassOptions: {
-      includePaths: [path.resolve(__dirname, "node_modules")],
-    },
-  },
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.scss$/,
-      sideEffects: true,
-      use: [
-        {
-          loader: "postcss-loader",
-          options: {
-            plugins: () => {
-              const autoPrefixer = require("autoprefixer")({
-                overrideBrowserslist: ["last 1 version", "ie >= 11"],
-              });
-              return process.env.ENABLE_RTL === "true"
-                ? [autoPrefixer, rtlcss]
-                : [autoPrefixer];
-            },
-          },
-        },
-        {
-          loader:
-            process.env.NODE_ENV === "production"
-              ? "sass-loader"
-              : "fast-sass-loader",
-          options: Object.assign(
-            process.env.NODE_ENV === "production"
-              ? {
-                  sassOptions: {
-                    includePaths: [path.resolve(__dirname, "node_modules")],
-                  },
-                }
-              : {
-                  includePaths: [path.resolve(__dirname, "node_modules")],
-                },
-            {
-              additionalData: `
-              $feature-flags: (
-                enable-css-custom-properties: true
-              );
-            `,
-              sourceMap: process.env.NODE_ENV !== "production",
-            }
-          ),
-        },
-      ],
-    });
-
-    return config;
+  sassOptions: {
+    includePaths: [path.resolve(__dirname, "node_modules")],
+    additionalData: `
+      $feature-flags: (
+        enable-css-custom-properties: true
+      );
+    `,
   },
-});
+};

package.json

@@ -27,36 +27,40 @@
   "dependencies": {
     "@carbon/ibmdotcom-react": "^1.23.0",
     "@carbon/ibmdotcom-styles": "^1.23.0",
-    "@carbon/icons-react": "^10.9.1",
-    "@carbon/pictograms-react": "^10.9.0"
+    "@carbon/icons-react": "^10.37.0",
+    "@carbon/pictograms-react": "^10.18.0",
+    "@carbon/type": "^10.33.0",
+    "sass": "^1.37.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@zeit/next-sass": "^1.0.1",
     "autoprefixer": "9.8.6",
     "cross-env": "7.0.3",
     "dotenv": "^8.2.0",
-    "eslint": "^6.0.1",
+    "eslint": "^7.32.0",
+    "eslint-config-next": "^11.0.1",
     "eslint-plugin-jsdoc": "^23.0.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
     "eslint-plugin-tree-shaking": "^1.8.0",
     "express": "^4.17.1",
-    "fast-sass-loader": "1.5.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.5",
-    "next": "10.1.3",
+    "next": "11.1.0",
     "next-compose-plugins": "^2.2.0",
-    "node-sass": "^4.13.0",
+    "postcss": "^8.3.6",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.4",
     "prop-types": "^15.7.2",
-    "react": "16.11.0",
-    "react-dom": "16.11.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rtlcss": "^2.6.0",
-    "stylelint": "^13.3.2",
-    "webpack": "^4.41.5"
+    "sass-loader": "^12.1.0",
+    "stylelint": "^13.3.2"
   },
   "resolutions": {
     "dot-prop": ">=5.1.1",

pages/index.js

@@ -1,5 +1,5 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
-import "../styles/landing.scss";
+/* eslint-disable jsx-a11y/anchor-has-content,jsx-a11y/anchor-is-valid */
+// import "../styles/landing.scss";
 import { Desktop, Pattern, Touch } from "@carbon/pictograms-react";
 import {
   TableOfContents,

postcss.config.js

@@ -0,0 +1,32 @@
+const rtlcss = require("rtlcss");
+require("dotenv").config();
+
+/**
+ * Define the postcss plugins
+ *
+ * @type {[]}
+ */
+const plugins = [
+  "postcss-flexbugs-fixes",
+  [
+    "postcss-preset-env",
+    {
+      autoprefixer: {
+        flexbox: "no-2009",
+      },
+      stage: 3,
+      features: {
+        "custom-properties": false,
+      },
+    },
+  ],
+];
+
+// Adds rtlcss if configured in environment variables
+if (process.env.ENABLE_RTL === "true") {
+  plugins.push(rtlcss);
+}
+
+module.exports = {
+  plugins,
+};

styles/global.scss

@@ -4,3 +4,4 @@
 @include carbon--font-face-sans();
 
 @import "~@carbon/ibmdotcom-styles/scss/components/dotcom-shell/dotcom-shell";
+@import "./landing";