fix(#1149): fix vulnerable dependencies (node-sass) (#1263)

This PR replaces deprecated node-sass with sass Close #1149 (cherry picked from commit 6d0bc55)
argilla-io · Mar 28, 2022 · 3d29ac7 · 3d29ac7
1 parent be37fe5
commit 3d29ac7
Show file tree

Hide file tree

Showing 10 changed files with 16 additions and 15 deletions.
diff --git a/frontend/assets/scss/abstract/functions/_functions.scss b/frontend/assets/scss/abstract/functions/_functions.scss
@@ -29,7 +29,7 @@
 //  }
 
 @function calculateRem($size) {
-    $remSize: $size / 16px;
+    $remSize: calc($size / 16px);
     @return $remSize * 1rem;
 }
 

diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
@@ -213,7 +213,7 @@ $color: #333346;
   &__title {
     padding-bottom: 0;
     color: $lighter-color;
-    @include font-size(22);
+    @include font-size(22px);
     font-weight: bold;
     margin-top: 0;
   }

diff --git a/frontend/components/text-classifier/results/RecordExplain.vue b/frontend/components/text-classifier/results/RecordExplain.vue
@@ -101,7 +101,7 @@ export default {
 }
 @for $i from 0 through 100 {
   .grad-#{$i} {
-    $bg: hsla(40, 100%, 100 - $i * 0.5, 1);
+    $bg: hsla(40, 100%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -112,7 +112,7 @@ export default {
     }
   }
   .grad-neg-#{$i} {
-    $bg: hsla(200, 60%, 100 - $i * 0.5, 1);
+    $bg: hsla(200, 60%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -123,7 +123,7 @@ export default {
     }
   }
   .grad-plus-#{$i} {
-    $bg: hsla(100, 60%, 100 - $i * 0.5, 1);
+    $bg: hsla(100, 60%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -134,7 +134,7 @@ export default {
     }
   }
   .grad-rest-#{$i} {
-    $bg: hsla(0, 80%, 100 - $i * 0.5, 1);
+    $bg: hsla(0, 80%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {

diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -177,7 +177,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
     &.active,

diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -116,7 +116,7 @@ export default {
 }
 
 .highlight {
-  @include font-size(0);
+  font-size: 0;
   line-height: 1em;
   position: relative;
   cursor: default; // display: inline-flex;

diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/frontend/components/token-classifier/results/TextSpan.vue
@@ -166,7 +166,7 @@ export default {
   position: relative;
   display: inline;
   line-height: 18px;
-  @include font-size(0);
+  font-size: 0;
   &__text {
     display: inline;
     position: relative;
@@ -211,7 +211,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     &.annotation ::v-deep .highlight__content {
       background: $rcolor;

diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -100,7 +100,7 @@ export default {
   position: relative;
   display: inline;
   line-height: 18px;
-  @include font-size(0);
+  font-size: 0;
   &__text {
     display: inline;
     position: relative;
@@ -162,7 +162,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     &.annotation ::v-deep .highlight__content {
       background: $rcolor;

diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
@@ -75,7 +75,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
   }

diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -194,7 +194,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
     &.predicted_mentions {

diff --git a/frontend/package.json b/frontend/package.json
@@ -28,11 +28,12 @@
     "@vuex-orm/core": "^0.36.3",
     "@vuex-orm/plugin-axios": "^0.9.3",
     "core-js": "^3.6.5",
+    "js-base64": "^3.7.2",
     "moment-timezone": "^0.5.33",
-    "node-sass": "^5.0.0",
     "nuxt": "^2.14.6",
     "nuxt-highlightjs": "^1.0.1",
     "nuxt-mq": "^2.0.2",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.0",
     "stringz": "^2.1.0",
     "v-click-outside": "^3.1.2",