Update to Volto 14, fix Storybook

.storybook/main.js

@@ -6,6 +6,7 @@ const fileLoaderFinder = makeLoaderFinder('file-loader');
 const projectRootPath = path.resolve('.');
 const createAddonsLoader = require('@plone/volto/create-addons-loader');
 const lessPlugin = require('@plone/volto/webpack-less-plugin');
+const scssPlugin = require('razzle-plugin-scss');
 
 const createConfig = require('../node_modules/razzle/config/createConfigAsync.js');
 const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js'));
@@ -35,7 +36,7 @@ module.exports = {
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/preset-scss',
+    '@storybook/addon-postcss',
   ],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
@@ -65,6 +66,13 @@ module.exports = {
       options: {},
     });
 
+    config = scssPlugin.modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: { razzleOptions: {} },
+    });
+
     // putting SVG loader on top, fix the fileloader manually (Volto plugin does not
     // work) since it needs to go first
     config.module.rules.unshift(SVGLOADER);

mrs.developer.json

@@ -3,6 +3,7 @@
     "package": "@plone/volto-quanta",
     "url": "git@github.com:plone/volto-quanta.git",
     "https": "https://github.com/plone/volto-quanta.git",
-    "path": "src"
+    "path": "src",
+    "branch": "volto14.1.0"
   }
 }

package.json

@@ -111,7 +111,8 @@
     "node": "^12 || ^14 || ^16"
   },
   "dependencies": {
-    "@plone/volto": "14.0.0-alpha.23"
+    "@plone/volto": "14.8.1",
+    "@storybook/addon-postcss": "2.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "6.3.1",
@@ -123,7 +124,7 @@
     "babel-loader": "^8.1.0",
     "eslint-plugin-prettier": "3.1.3",
     "prettier": "2.0.5",
-    "stylelint": "13.3.3",
+    "stylelint": "14.0.1",
     "stylelint-config-idiomatic-order": "8.1.0",
     "stylelint-config-prettier": "8.0.1",
     "stylelint-prettier": "1.1.2"

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')({
+      flexbox: 'no-2009',
+    }),
+  ],
+};