Updated postcss configuration

This follows the migration guide at https://evilmartians.com/chronicles/postcss-8-plugin-migration

Author: jasongrout

examples/web3/package.json

@@ -37,5 +37,8 @@
     "typescript": "~4.3.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.65.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   }
 }

examples/web3/webpack.config.js

@@ -22,20 +22,22 @@ module.exports = {
             options: {
               postcssOptions: {
                 plugins: [
-                  postcss.plugin('delete-tilde', function () {
-                    return function (css) {
-                      css.walkAtRules('import', function (rule) {
-                        rule.params = rule.params.replace('~', '');
-                      });
-                    };
-                  }),
-                  postcss.plugin('prepend', function () {
-                    return function (css) {
+                  {
+                    postcssPlugin: 'delete-tilde',
+                    AtRule: {
+                      import: (atRule) => {
+                        atRule.params = atRule.params.replace('~', '');
+                      },
+                    },
+                  },
+                  {
+                    postcssPlugin: 'prepend',
+                    Once(css) {
                       css.prepend(
                         "@import '@jupyter-widgets/controls/css/labvariables.css';"
                       );
-                    };
-                  }),
+                    },
+                  },
                   require('postcss-import')(),
                   require('postcss-cssnext')(),
                 ],