Merge branch 'master' into dependabot/npm_and_yarn/vuex-i18n-1.11.0

.dockerignore

@@ -11,3 +11,8 @@ scripts/
 .env
 
 cypress/
+
+README.md 
+screenshot*.png
+lokalise.png
+.editorconfig

.travis.yml

@@ -18,8 +18,8 @@ before_install:
   - sudo mv docker-compose /usr/local/bin
 
 install:
-  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT -t humanconnection/nitro-web .
+  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web .
-  - docker-compose -f docker-compose.yml up -d
+  - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d
   - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend
   - git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
   - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d
@@ -27,8 +27,8 @@ install:
   - yarn add cypress-cucumber-preprocessor
 
 script:
-  - docker-compose exec webapp yarn run lint
+  - docker-compose exec -e NODE_ENV=test webapp yarn run lint
-  - docker-compose exec webapp yarn run test
+  - docker-compose exec -e NODE_ENV=test webapp yarn run test
   - docker-compose -f ../Nitro-Backend/docker-compose.yml exec backend yarn run db:seed > /dev/null
   - wait-on http://localhost:3000
   - cypress run --record --key $CYPRESS_TOKEN

Dockerfile

@@ -1,9 +1,9 @@
-FROM node:10-alpine
+FROM node:10-alpine as base
 LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
 
 # Expose the app port
-EXPOSE 3000
+ARG BUILD_COMMIT
-
+ENV BUILD_COMMIT=$BUILD_COMMIT
 ARG WORKDIR=/nitro-web
 RUN mkdir -p $WORKDIR
 WORKDIR $WORKDIR
@@ -11,18 +11,19 @@ WORKDIR $WORKDIR
 # See: https://github.com/nodejs/docker-node/pull/367#issuecomment-430807898
 RUN apk --no-cache add git
 
-# Install Web Application
+COPY . .
-COPY package.json .
-COPY yarn.lock .
-COPY styleguide/ ./styleguide
-RUN yarn install --production=false --frozen-lockfile --non-interactive
 
-# Install and build Styleguide
+FROM base as build-and-test
-COPY styleguide/ ./styleguide
+RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN cd styleguide && yarn install --production=false --frozen-lockfile --non-interactive \
     && cd .. \
     && yarn run styleguide:build
+RUN yarn run build
 
-COPY . .
+FROM base as production
-RUN ["yarn", "run", "build"]
+ENV NODE_ENV=production
+COPY --from=build-and-test ./nitro-web/node_modules ./node_modules
+COPY --from=build-and-test ./nitro-web/.nuxt ./.nuxt
+
+EXPOSE 3000
 CMD ["yarn", "run", "start"]

assets/styles/main.scss

@@ -126,3 +126,23 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+#overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}

components/Author.vue

@@ -1,18 +1,19 @@
 <template>
-  <v-popover
+  <dropdown
-    :open.sync="isPopoverOpen"
     :disabled="!hasAuthor || !showAuthorPopover"
-    :open-group="Math.random().toString()"
     placement="top-start"
-    trigger="manual"
     offset="0"
+  >
+    <template
+      slot="default"
+      slot-scope="{openMenu, closeMenu, isOpen}"
     >
       <a
         v-router-link
         :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
-      style="white-space: nowrap; display: flex; align-items: center;"
+        :class="['author', isOpen && 'active']"
-      @mouseover="popoverMouseEnter"
+        @mouseover="openMenu(true)"
-      @mouseleave="popoveMouseLeave"
+        @mouseleave="closeMenu(true)"
       >
         <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
           <ds-avatar
@@ -40,12 +41,11 @@
           </template>
         </div>
       </a>
-    <div
+    </template>
+    <template
       slot="popover"
-      style="min-width: 250px;"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
     >
+      <div style="min-width: 250px">
         <!--<ds-avatar
           :image="author.avatar"
           :name="author.name || 'Anonymus'"
@@ -61,7 +61,7 @@
             <ds-space margin="small">
               <ds-number
                 :count="fanCount"
-              label="Folgen"
+                :label="$t('profile.followers')"
                 size="x-large"
               />
             </ds-space>
@@ -70,7 +70,7 @@
             <ds-space margin="small">
               <ds-number
                 :count="author.contributionsCount"
-              label="Beiträge"
+                :label="$t('common.post', null, author.contributionsCount)"
               />
             </ds-space>
           </ds-flex-item>
@@ -78,7 +78,7 @@
             <ds-space margin="small">
               <ds-number
                 :count="author.commentsCount"
-              label="Kommentare"
+                :label="$t('common.comment', null, author.commentsCount)"
               />
             </ds-space>
           </ds-flex-item>
@@ -107,21 +107,21 @@
         </ds-flex>
         <!--<ds-space margin-bottom="x-small" />-->
       </div>
-  </v-popover>
+    </template>
+  </dropdown>
 </template>
 
 <script>
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
-
+import Dropdown from '~/components/Dropdown'
-let mouseEnterTimer = null
-let mouseLeaveTimer = null
 
 export default {
   name: 'HcAuthor',
   components: {
     HcFollowButton,
-    HcBadges
+    HcBadges,
+    Dropdown
   },
   props: {
     post: { type: Object, default: null },
@@ -130,7 +130,6 @@ export default {
   },
   data() {
     return {
-      isPopoverOpen: false,
       voted: false
     }
   },
@@ -156,30 +155,6 @@ export default {
     hasAuthor() {
       return Boolean(this.post && this.post.author)
     }
-  },
-  beforeDestroy() {
-    clearTimeout(mouseEnterTimer)
-    clearTimeout(mouseLeaveTimer)
-  },
-  methods: {
-    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (!this.isPopoverOpen) {
-        mouseEnterTimer = setTimeout(() => {
-          this.isPopoverOpen = true
-        }, 500)
-      }
-    },
-    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (this.isPopoverOpen) {
-        mouseLeaveTimer = setTimeout(() => {
-          this.isPopoverOpen = false
-        }, 300)
-      }
-    }
   }
 }
 </script>
@@ -191,4 +166,15 @@ export default {
   margin-top: -45px;
   border: #fff 5px solid;
 }
+.author {
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &.active {
+    z-index: 999;
+  }
+}
 </style>

components/Dropdown.vue

@@ -3,10 +3,16 @@
     :open.sync="isPopoverOpen"
     :open-group="Math.random().toString()"
     :placement="placement"
+    :disabled="disabled"
     trigger="manual"
     :offset="offset"
   >
-    <slot :toggleMenu="toggleMenu" />
+    <slot
+      :toggleMenu="toggleMenu"
+      :openMenu="openMenu"
+      :closeMenu="closeMenu"
+      :isOpen="isOpen"
+    />
     <div
       slot="popover"
       @mouseover="popoverMouseEnter"
@@ -15,6 +21,9 @@
       <slot
         name="popover"
         :toggleMenu="toggleMenu"
+        :openMenu="openMenu"
+        :closeMenu="closeMenu"
+        :isOpen="isOpen"
       />
     </div>
   </v-popover>
@@ -29,6 +38,7 @@ let mouseLeaveTimer = null
 export default {
   props: {
     placement: { type: String, default: 'bottom-end' },
+    disabled: { type: Boolean, default: false },
     offset: { type: [String, Number], default: '16' }
   },
   data() {
@@ -36,17 +46,68 @@ export default {
       isPopoverOpen: false
     }
   },
+  computed: {
+    isOpen() {
+      return this.isPopoverOpen
+    }
+  },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        try {
+          if (isOpen) {
+            this.$nextTick(() => {
+              setTimeout(() => {
+                document
+                  .getElementsByTagName('body')[0]
+                  .classList.add('dropdown-open')
+              }, 20)
+            })
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList.remove('dropdown-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
   beforeDestroy() {
     clearTimeout(mouseEnterTimer)
     clearTimeout(mouseLeaveTimer)
   },
   methods: {
     toggleMenu() {
-      this.isPopoverOpen = !this.isPopoverOpen
+      this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false)
+    },
+    openMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoverMouseEnter()
+      } else {
+        this.isPopoverOpen = true
+      }
+    },
+    closeMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoveMouseLeave()
+      } else {
+        this.isPopoverOpen = false
+      }
     },
     popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
+      if (this.disabled) {
-      clearTimeout(mouseLeaveTimer)
+        return
+      }
+      this.clearTimeouts()
       if (!this.isPopoverOpen) {
         mouseEnterTimer = setTimeout(() => {
           this.isPopoverOpen = true
@@ -54,13 +115,19 @@ export default {
       }
     },
     popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
+      if (this.disabled) {
-      clearTimeout(mouseLeaveTimer)
+        return
+      }
+      this.clearTimeouts()
       if (this.isPopoverOpen) {
         mouseLeaveTimer = setTimeout(() => {
           this.isPopoverOpen = false
         }, 300)
       }
+    },
+    clearTimeouts() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
     }
   }
 }

cypress/integration/common/steps.js

@@ -1,6 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import find from 'lodash/find'
-import { eq } from 'semver';
 
 /* global cy */
 
@@ -73,7 +72,6 @@ Given('my user account has the role {string}', role => {
   // TODO: use db factories instead of seed data
 })
 
-
 When('I log out', logout)
 
 When('I visit the {string} page', page => {

docker-compose.override.yml

@@ -2,6 +2,9 @@ version: '3.7'
 
 services:
   webapp:
+    build:
+      context: .
+      target: build-and-test
     volumes:
       - .:/nitro-web
       - node_modules:/nitro-web/node_modules

docker-compose.travis.yml

@@ -0,0 +1,7 @@
+version: "3.7"
+
+services:
+  webapp:
+    build:
+      context: .
+      target: build-and-test

docker-compose.yml

@@ -3,7 +3,9 @@ version: '3.7'
 services:
   webapp:
     image: humanconnection/nitro-web:latest
-    build: .
+    build:
+      context: .
+      target: production
     ports:
       - 3000:3000
       - 8080:8080

layouts/blank.vue

@@ -5,6 +5,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 

layouts/default.vue

@@ -26,7 +26,7 @@
                   <a
                     class="avatar-menu-trigger"
                     :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                    @click.prevent="toggleMenu()"
+                    @click.prevent="toggleMenu"
                   >
                     <ds-avatar
                       :image="user.avatar"
@@ -37,7 +37,7 @@
                 </template>
                 <template
                   slot="popover"
-                  slot-scope="{toggleMenu}"
+                  slot-scope="{closeMenu}"
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }} <b>{{ user.name }}</b>
@@ -50,13 +50,16 @@
                         slot-scope="item"
                         :route="item.route"
                         :parents="item.parents"
-                        @click.native="toggleMenu"
+                        @click.native="closeMenu(false)"
                       >
                         <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
                     <ds-space margin="xx-small" />
-                    <nuxt-link :to="{ name: 'logout'}">
+                    <nuxt-link
+                      :to="{ name: 'logout'}"
+                      style="margin-left: 0"
+                    >
                       <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                     </nuxt-link>
                   </div>
@@ -72,6 +75,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 
@@ -121,6 +125,10 @@ export default {
   },
   methods: {
     isExact(url) {
+      if (url.indexOf('/profile') === 0) {
+        // do only match own profile
+        this.$route.path === url
+      }
       return this.$route.path.indexOf(url) === 0
     }
   }
@@ -147,10 +155,14 @@ export default {
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -15px;
+    margin-left: -16px;
-    margin-right: -15px;
+    margin-right: -10px;
     padding-top: 1rem;
     padding-bottom: 1rem;
+
+    a {
+      padding-left: 12px;
+    }
   }
 }
 </style>

locales/de.json

@@ -13,7 +13,9 @@
     "memberSince": "Mitglied seit",
     "follow": "Folgen",
     "followers": "Folgen",
-    "following": "Folgt"
+    "following": "Folgt",
+    "shouted": "Empfohlen",
+    "commented": "Kommentiert"
   },
   "settings": {
     "name": "Einstellungen",

locales/en.json

@@ -13,7 +13,9 @@
     "memberSince": "Member since",
     "follow": "Follow",
     "followers": "Followers",
-    "following": "Following"
+    "following": "Following",
+    "shouted": "Shouted",
+    "commented": "Commented"
   },
   "settings": {
     "name": "Settings",

package.json

@@ -42,7 +42,7 @@
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/dotenv": "^1.3.0",
     "accounting": "^0.4.1",
-    "cookie-universal-nuxt": "^2.0.12",
+    "cookie-universal-nuxt": "^2.0.14",
     "cross-env": "^5.2.0",
     "date-fns": "^2.0.0-alpha.26",
     "express": "^4.16.3",
@@ -51,6 +51,7 @@
     "jsonwebtoken": "^8.3.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
+    "nuxt-sass-resources-loader": "^2.0.5",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
@@ -72,7 +73,6 @@
     "jest": "^23.6.0",
     "node-sass": "^4.11.0",
     "nodemon": "^1.18.9",
-    "nuxt-sass-resources-loader": "^2.0.5",
     "prettier": "1.14.3",
     "sass-loader": "^7.1.0",
     "vue-jest": "^3.0.2",

pages/post/_slug.vue

@@ -18,33 +18,33 @@
 
 <script>
 export default {
-  data() {
+  computed: {
-    return {
+    routes() {
-      routes: [
+      return [
         {
-          name: 'Post',
+          name: this.$t('common.post', null, 1),
           path: `/post/${this.$route.params.slug}`,
           children: [
             {
-              name: 'Kommentare',
+              name: this.$t('common.comment', null, 2),
               path: `/post/${this.$route.params.slug}#comments`
             },
             {
-              name: 'Miteinander reden',
+              name: this.$t('common.letsTalk'),
               path: `/post/${this.$route.params.slug}#lets-talk`
             },
             {
-              name: 'Versus',
+              name: this.$t('common.versus'),
               path: `/post/${this.$route.params.slug}#versus`
             }
           ]
         },
         {
-          name: 'Mehr Info',
+          name: this.$t('common.moreInfo'),
           path: `/post/${this.$route.params.slug}/more-info`
         },
         {
-          name: 'Aktiv werden',
+          name: this.$t('common.takeAction'),
           path: `/post/${this.$route.params.slug}/take-action`
         }
       ]

pages/profile/_slug.vue

@@ -183,7 +183,7 @@
                   <ds-space margin="small">
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
-                      <ds-number label="Beiträge">
+                      <ds-number :label="$t('common.post', null, user.contributionsCount)">
                         <hc-count-to
                           slot="count"
                           :end-val="user.contributionsCount"
@@ -196,7 +196,7 @@
                   <ds-space margin="small">
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
-                      <ds-number label="Kommentiert">
+                      <ds-number :label="$t('profile.commented')">
                         <hc-count-to
                           slot="count"
                           :end-val="user.commentsCount"
@@ -209,7 +209,7 @@
                   <ds-space margin="small">
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
-                      <ds-number label="Empfohlen">
+                      <ds-number :label="$t('profile.shouted')">
                         <hc-count-to
                           slot="count"
                           :end-val="user.shoutedCount"

styleguide/src/system/components/navigation/Menu/MenuItem.vue

@@ -14,6 +14,10 @@
     <component
       v-if="route"
       class="ds-menu-item-link"
+      :class="[
+        isExact && 'router-active-link',
+        isExact && 'router-link-exact-active'
+      ]"
       v-bind="bindings"
       :exact="isExact"
       :is="linkTag"

yarn.lock

@@ -2777,6 +2777,11 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^1.0.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
@@ -3793,18 +3798,18 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie-universal-nuxt@^2.0.12:
+cookie-universal-nuxt@^2.0.14:
-  version "2.0.12"
+  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.12.tgz#061bb1864d2dd010fad1c484ae982da42954bfd9"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.14.tgz#6fdf8e928eadd7611c04a57614fe2e29b60eb971"
-  integrity sha512-qZu3rOgsDjWqgq9dU+zCQl3RpsZeevI/c6fN+wgTRsQdSe8MSwYWpl+6Pitu0mXgZKVJ8e+JA3s3jDVoXV5szg==
+  integrity sha512-ih9Z0Z2K6eLaugTttGCVN85nogKseIFF/dqup3klvYC4mQS3+1IloqBqzTL/N7degBBAols2oppwYNDmaRtVig==
   dependencies:
     "@types/cookie" "^0.3.1"
-    cookie-universal "^2.0.12"
+    cookie-universal "^2.0.14"
 
-cookie-universal@^2.0.12:
+cookie-universal@^2.0.14:
-  version "2.0.12"
+  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.12.tgz#3627a56045a84c1c53618d38bd30b278db5633f4"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.14.tgz#1b4f27cffccfc2e47703fa235c1f67f931213041"
-  integrity sha512-/3ch/W145NHVmX2Oenykb3U/Knmu/78JJZxGY2qw28mIr/Ueve6D+A3BySAncvqIgNUy7lIgmAUjf1hV4D4d/A==
+  integrity sha512-m6J0DQa4/RQvXhzUG37EY1ynK3Uq1BKzp5hotST9olrzjrRx+B0vNPx7azg0/X0XrYQvL7MMbPXwou8m0BNDwg==
   dependencies:
     "@types/cookie" "^0.3.1"
     cookie "^0.3.1"
@@ -7177,6 +7182,13 @@ json5@^0.5.0, json5@^0.5.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
@@ -7382,7 +7394,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
@@ -7391,6 +7403,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+loader-utils@^1.0.4:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"