Update sharetribe-scripts v5.0.1 -> v6.0.0

[Gnito]

NOTE: THIS IS GOING TO CAUSE A MAJOR VERSION CHANGE TO TEMPLATES.

This PR updates sharetribe-scripts to the next major version.

sharetribe-scripts is a fork of Create React App (CRA) repository and specifically react-scripts is modified to support server-side rendering, code-splitting, and certain PostCSS plugins that we chose to include years ago. (E.g. introduced CSS Modules before CRA took the same approach.)

This update is actually an update from CRA 4.0.2 to v5.0.1

The breaking changes are in v5.0.0

Highlights from CRA update:

• webpack 5 (Webpack 5 facebook/create-react-app#11201)
• Jest 27 (#11338)
• ESLint 8 (#11375)
• PostCSS 8 (#11121)
• Fast Refresh improvements and bug fixes (fix: fast refresh stops on needed bail outs facebook/create-react-app#11105)
• Support for Tailwind (Add support for Tailwind facebook/create-react-app#11717)
• Improved package manager detection (Use env var to detect yarn or npm as the package manager facebook/create-react-app#11322)
• Unpinned all dependencies for better compatibility with other tools (Remove dependency pinning facebook/create-react-app#11474)
• Dropped support for Node 10 and 12

Note: we haven't explored Tailwind support since it would mean a complete rewrite for the FTW templates. In addition, CSS Modules make it easier for customizers to learn a big codebase like FTW (i.e. which component is responsible for a different sections of DOM, etc.).

---

Consequences

Major updates to Webpack (v4 > v5) and PostCSS (v7 > v8), were the most worksome for FTW templates.

• The upper restriction of Node.js engine "version earlier than v17" has been lifted!

• Loadable components was updated

  • FTW and other client apps should update their part of Loadable components too
    • "@loadable/component": "^5.15.2",
    • "@loadable/server": "^5.15.2",

• You should add @importfor customMediaQueries.css file.

  • E.g. @import '../../styles/customMediaQueries.css';
  • Some parallelism has increased in the build process and postcss-import wasn't included without it being explicitly mentioned per CSS file.

• src/index.js was refactored.

  • We rearranged the module imports
    • marketplaceDefaults.css was introduced first before any of the components were imported.
    • This ensures that the content of marketplaceDefaults.css is first in the built CSS file (main chunk).
      (The order of classes in CSS files affects declaration overrides.)

• postcss-apply plugin is not working anymore

  • It's been deprecated for a long time because W3C decided to not go forward with that feature suggestion

  • You should migrate away from postcss-apply syntax (aka CSS Property Sets)

    • Most of the code changes in this PR are about migrating away from CSS Property Sets

  • However, we have introduced a naive custom version of postcss-apply as a private plugin to give more time to migrate away.

    Most of the previous CSS Property Sets are turned into CSS classes in the marketplaceDefaults.css file.
    So, most of the time the change is minimal:

    .author {
      @apply --marketplaceH4FontStyles;
    }
    

    .author {
      composes: h4 from global;
    }
    

    Unfortunately, there's one problem that doesn't make it that straightforward. The order of the plain CSS classes in the marketplaceDefaults.css file defines which classes override each other. (The composes feature just includes those class names to DOM element - not their content.) Therefore, if multiple @apply rules are used inside the CSS module class, you need to check if there are overwrites between declarations of those Sets.

    Button styling included almost always some overrides. We decided to split buttons styles into smaller chunks that can be combined:

    .buttonLink {
      @apply --marketplaceButtonStyles;
    }
    .buttonLinkPrimary {
      @apply --marketplaceButtonStylesPrimary;
    }
    
    .buttonLinkSecondary {
      @apply --marketplaceButtonStylesSecondary;
    }
    
    

    New syntax:

    .buttonLink {
      composes: button buttonFont buttonText buttonBorders buttonColors from global;
    }
    .buttonLinkPrimary {
      composes: button buttonFont buttonText buttonBorders buttonColorsPrimary from global;
    }
    
    .buttonLinkSecondary {
      composes: button buttonFont buttonText buttonBordersSecondary buttonColorsSecondary from global;
    }
    

    This might be a bit controversial, but it introduces fewer CSS overrides. Of course, you are free to customize this to your liking.

---

Potential issues that you might encounter if taking an update from upstream

NOTE: You may need to delete your node_modules folder and reinstall your dependencies by running npm install (or yarn) if you encounter errors after upgrading.

NOTE 2: If you have moved components under page-level containers (like in FTW-product), those components are likely to be nested more deeply. You might need to adjust relative paths to the customMediaQueries.css file.

Old version of @babel/runtime

Module not found: Error: Can't resolve './defineProperty' in '/Users/vesaluusua/st/ftw-daily/node_modules/redux/node_modules/@babel/runtime/helpers/esm'
Did you mean 'defineProperty.js'?

Redux has sub-dependency to @babel/runtime. An old version of that package doesn't handle ES Modules well. You might need to call yarn upgrade redux after yarn install to update Redux sub dependencies to the latest in yarn.lock file.
reduxjs/redux#4174

customMediaQueries.css was not @imported in the file that uses them

You should be able to find correct files by grepping files that don't contain "customMediaQueries" but which contain "--viewport".

In OSX, that could be done in Terminal with:

grep -r --include \*.module.css -L customMediaQueries ./src | xargs grep -l '\-\-viewport'

Missing propertySets.css file and your custom CSS Property Sets

You should consider if you want to refactor your custom @apply rules (i.e. migrate away as recommended) or reintroduce / revert the deletion of the propertySets.css file.

Some changes related to naming:

• button styles as described before.

• --marketplaceLinkStyles > .a

• --marketplaceH1FontStyles > .h1

• --marketplaceH2FontStyles > .h2

• --marketplaceH3FontStyles > .h3

• --marketplaceH4FontStyles > .h4

• --marketplaceH5FontStyles > .h5

• --marketplaceH6FontStyles > .h6

• marketplaceTabNavFontStyles was inlined for FTW-daily

• marketplaceTabNavHorizontalFontStyles was inlined for FTW-daily

• marketplaceSmallFontStyles was inlined for FTW-daily and FTW-hourly but not for FTW-product

Wrong syntax for CSS Property Sets (postcss-apply)

Some of the definitions of CSS Property Sets in the FTW codebase used a wrong syntax to define them. The previous way how PostCSS v7 parsed CSS files to the AST (Abstract Syntax Tree) didn't care about that, but PostCSS v8 changed the parsing logic.

🚫 Invalid:

--marketplaceModalTitleStyles {
  font-size: 30px;
}

✅ Valid:

--marketplaceModalTitleStyles: {
  font-size: 30px;
}

You should only face this issue if you continue to use CSS Property Sets. However, you should consider them as deprecated and migrate away.

There are a couple of warnings with yarn run dev

[0] (node:58738) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] (Use `node --trace-deprecation ...` to show where the warning was created)
[0] (node:58738) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

This is hopefully fixed in the next release:
facebook/create-react-app#11862