Merge branch 'hotfix/3.5.1'

* hotfix/3.5.1:
  build(deps): reinstall npm packages
  fix(package): update project version number from `3.5.0` to `3.5.1`
  style(sass): format the `media` mixin code using double quotes, spaces and line breaks
  style(sass): sort sass imports alphabetically
  fix(sass): correct assignment of `$dimension` parameter in `media` mixin
  fix(sass): use `math.unit` instead of `unit` to avoid deprecation warnings
  fix(sass): use `math.is-unitless` instead of `unitless` to avoid deprecation warnings
  fix(sass): use `map.keys` instead of `map-keys` to avoid deprecation warnings
  fix(sass): use `map.inspect` instead of `inspect` to avoid deprecation warnings
  fix(sass): use `map.has-key` instead of `map-has-key` to avoid deprecation warnings
  fix(sass): use `map.get` instead of `map-get` to avoid deprecation warnings
  fix(sass): broken responsive styles
  fix(sass): use `meta.list` instead of `list` to avoid deprecation warnings
  fix(sass): use `meta.type-of` instead of `type-of` to avoid deprecation warnings
  fix(sass): use `meta.variable-exists` instead of `variable-exists` to avoid deprecation warnings
  fix(sass): rename `variable_exists` function to `variable-exists`
  fix(sass): use `color.mix` instead of `mix` to avoid deprecation warnings
  fix(sass): use `@forward` and `@use` instead of `@import` to avoid deprecation warnings

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "3.5.0",
+	"version": "3.5.1",
 	"private": true,
 	"name": "vue-users",
 	"description": "Vue app that get/set a list of random users from an API.",

src/assets/scss/settings/settings-colors.scss

@@ -1,6 +1,7 @@
 // SETTINGS
 // COLORS
 // ------------------
+@use "sass:color";
 
 // GRAY SCALE
 // =================================================
@@ -19,5 +20,5 @@ $color-success: #008080;
 // =================================================
 $color-brand-1: #42b883;
 $color-brand-2: #35495e;
-$color-brand-2--dark: mix($color-black, $color-brand-2, 20%);
+$color-brand-2--dark: color.mix($color-black, $color-brand-2, 20%);
 $color-gradient: linear-gradient($color-brand-1, $color-brand-2);

src/assets/scss/styles.scss

@@ -3,10 +3,10 @@
 
 // SETTINGS
 // =================================================
-@import "settings/settings-breakpoints";
-@import "settings/settings-colors";
-@import "settings/settings-fonts";
+@forward "settings/settings-breakpoints";
+@forward "settings/settings-colors";
+@forward "settings/settings-fonts";
 
 // TOOLS
 // =================================================
-@import "tools/tools-media";
+@forward "tools/tools-media";

src/assets/scss/tools/tools-media.scss

@@ -2,9 +2,14 @@
 // MIXIN
 // media queries
 // ------------------
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../settings/settings-breakpoints" as *;
 
 @function contains($list, $item) {
-	@return index($list, $item) != null;
+	@return list.index($list, $item) != null;
 }
 
 @mixin media($breakpoint, $rule: "max", $dimension: "width") {
@@ -17,34 +22,34 @@
 	}
 
 	@if not contains($dimensions, $dimension) {
-		$rule: "width";
+		$dimension: "width";
 	}
 
-	@if type-of($breakpoint) ==number {
-		@if unitless($breakpoint) {
-			@media (#{$rule}-#{$dimension}: #{$breakpoint + 'px'}) {
+	@if meta.type-of($breakpoint) == number {
+		@if math.is-unitless($breakpoint) {
+			@media (#{$rule}-#{$dimension}: #{$breakpoint + "px"}) {
 				@content;
 			}
-		} @else if contains($units, unit($breakpoint)) {
+		} @else if contains($units, math.unit($breakpoint)) {
 			@media (#{$rule}-#{$dimension}: #{$breakpoint}) {
 				@content;
 			}
 		} @else {
-			@error 'Invalid units provided';
+			@error "Invalid units provided";
 		}
-	} @else if variable_exists(breakpoints) {
-		@if map-has-key($breakpoints, $breakpoint) {
-			@media (#{$rule}-#{$dimension}: #{inspect(map-get($breakpoints, $breakpoint))}) {
+	} @else if meta.variable-exists(breakpoints) {
+		@if map.has-key($breakpoints, $breakpoint) {
+			@media (#{$rule}-#{$dimension}: #{meta.inspect(map.get($breakpoints, $breakpoint))}) {
 				@content;
 			}
 		} @else {
-			@error 'Unfortunately, no value could be retrieved from `#{$breakpoint}`. '+'Available breakpoints are: #{map-keys($breakpoints)}.';
+			@error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Available breakpoints are: #{map.keys($breakpoints)}.";
 		}
-	} @else if variable_exists(breakpoint) {
+	} @else if meta.variable-exists(breakpoint) {
 		@media (#{$rule}-#{$dimension}: #{$breakpoint}) {
 			@content;
 		}
 	} @else {
-		@error 'Neither $breakpoints map nor variable provided are defined';
+		@error "Neither $breakpoints map nor variable provided are defined";
 	}
 }

vue.config.js

@@ -15,7 +15,7 @@ module.exports = {
 	"css": {
 		"loaderOptions": {
 			"sass": {
-				"additionalData": `@import "@/assets/scss/styles.scss";`,
+				"additionalData": `@use "@/assets/scss/styles.scss" as *;`,
 			},
 		},
 	},