Update sharetribe-scripts to CRA v4 and add vanilla CSS support

CHANGELOG.md

@@ -14,6 +14,14 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2020-XX-XX
 
+- [change] Update sharetribe-scripts (our fork of create-react-app) to v4.0.0. In addition to
+  changes that CRA@v4 brought along,
+
+  - We started to use`*.module.css` naming pattern for styles that use CSS Modules preprocessor.
+  - We also turned on live CSS Custom Properties (CSS Variables).
+
+  Read the PR for more info: [#1374](https://github.com/sharetribe/ftw-daily/pull/1374)
+
 ## [v6.5.0] 2020-11-16
 
 - [add] Add support for Google login. This works in the same way as Facebook flow so you can check

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/runtime": "^7.11.2",
     "@formatjs/intl-relativetimeformat": "^4.2.1",
     "@mapbox/polyline": "^1.1.1",
     "@sentry/browser": "5.20.1",
@@ -52,17 +53,17 @@
     "react-moment-proptypes": "^1.6.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
+    "react-with-direction": "^1.3.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "seedrandom": "^3.0.5",
     "sharetribe-flex-sdk": "1.13.0",
-    "sharetribe-scripts": "3.4.4",
+    "sharetribe-scripts": "4.0.0",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.9",
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "babel-jest": "24.9.0",
     "bfj": "^7.0.2",
     "chalk": "^v4.1.0",
     "concurrently": "^5.3.0",

server/env.js

@@ -15,11 +15,11 @@ if (!NODE_ENV) {
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 var dotenvFiles = [
   `.env.${NODE_ENV}.local`,
-  `.env.${NODE_ENV}`,
   // Don't include `.env.local` for `test` environment
   // since normally you expect tests to produce the same
   // results for everyone
-  NODE_ENV !== 'test' && `env.local`,
+  NODE_ENV !== 'test' && `.env.local`,
+  `.env.${NODE_ENV}`,
   '.env',
 ].filter(Boolean);
 

src/components/ActivityFeed/ActivityFeed.js

@@ -31,7 +31,7 @@ import {
 import { propTypes } from '../../util/types';
 import * as log from '../../util/log';
 
-import css from './ActivityFeed.css';
+import css from './ActivityFeed.module.css';
 
 const Message = props => {
   const { message, intl } = props;

src/components/ActivityFeed/ActivityFeed.css → src/components/ActivityFeed/ActivityFeed.module.css

@@ -1,4 +1,4 @@
-@import '../../marketplace.css';
+@import '../../styles/propertySets.css';
 
 .root {
   margin: 0;

src/components/ActivityFeed/__snapshots__/ActivityFeed.test.js.snap

@@ -2,79 +2,119 @@
 
 exports[`ActivityFeed matches snapshot 1`] = `
 <ul
-  className=""
+  className="root"
 >
   <li
+    className="transitionItem"
     key="transition/confirm-payment"
   >
-    <div>
-      <div>
-        <p>
+    <div
+      className="transition"
+    >
+      <div
+        className="bullet"
+      >
+        <p
+          className="transitionContent"
+        >
           •
         </p>
       </div>
       <div>
-        <p />
-        <p />
+        <p
+          className="transitionContent"
+        />
+        <p
+          className="transitionDate"
+        />
       </div>
     </div>
   </li>
   <li
+    className="transitionItem"
     key="transition/accept"
   >
-    <div>
-      <div>
-        <p>
+    <div
+      className="transition"
+    >
+      <div
+        className="bullet"
+      >
+        <p
+          className="transitionContent"
+        >
           •
         </p>
       </div>
       <div>
-        <p />
-        <p />
+        <p
+          className="transitionContent"
+        />
+        <p
+          className="transitionDate"
+        />
       </div>
     </div>
   </li>
   <li
+    className="messageItem"
     id="msg-msg1"
     key="msg1"
   >
-    <div>
+    <div
+      className="message"
+    >
       <a
-        className=""
+        className="root avatar"
         href="/u/user1"
         onClick={[Function]}
         style={Object {}}
         title="user1 display name"
       >
-        <span>
+        <span
+          className="initials"
+        >
           TT
         </span>
       </a>
       <div>
-        <p>
+        <p
+          className="messageContent"
+        >
           Message msg1
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
-        <p>
+        <p
+          className="messageDate"
+        >
           2017-11-09, 08:12
         </p>
       </div>
     </div>
   </li>
   <li
+    className="messageItem"
     id="msg-msg2"
     key="msg2"
   >
-    <div>
-      <div>
-        <p>
+    <div
+      className="ownMessage"
+    >
+      <div
+        className="ownMessageContentWrapper"
+      >
+        <p
+          className="ownMessageContent"
+        >
           Message msg2
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
       </div>
-      <p>
+      <p
+        className="ownMessageDate"
+      >
         2017-11-09, 08:12
       </p>
     </div>

src/components/AddImages/AddImages.example.js

@@ -4,7 +4,7 @@ import findIndex from 'lodash/findIndex';
 import uniqueId from 'lodash/uniqueId';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import AddImages from './AddImages';
-import css from './AddImagesExample.css';
+import css from './AddImagesExample.module.css';
 
 const { UUID } = sdkTypes;
 

src/components/AddImages/AddImages.js

@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ImageFromFile, ResponsiveImage, IconSpinner } from '../../components';
 
-import css from './AddImages.css';
+import css from './AddImages.module.css';
 import RemoveImageButton from './RemoveImageButton';
 
 const ThumbnailWrapper = props => {

src/components/AddImages/AddImages.css → src/components/AddImages/AddImages.module.css

@@ -1,5 +1,3 @@
-@import '../../marketplace.css';
-
 .root {
   width: 100%;
   min-height: 120px;

src/components/AddImages/RemoveImageButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import css from './AddImages.css';
+import css from './AddImages.module.css';
 
 const RemoveImageButton = props => {
   const { className, rootClassName, onClick } = props;

src/components/Avatar/Avatar.js

@@ -11,7 +11,7 @@ import {
 } from '../../util/data';
 import { ResponsiveImage, IconBannedUser, NamedLink } from '../../components/';
 
-import css from './Avatar.css';
+import css from './Avatar.module.css';
 
 // Responsive image sizes hint
 const AVATAR_SIZES = '40px';