Merge branch 'hotfix/2.2.1'

* hotfix/2.2.1:
  fix(package): update project version number from `2.2.0` to `2.2.1`
  style(sass): sort sass imports alphabetically
  fix(sass): use `list.length` instead of `list` to avoid deprecation warnings
  fix(sass): use `list.nth` instead of `list` to avoid deprecation warnings
  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 `meta.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): use `list.index` 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): add default `unit` validation to the `media` mixin
  fix(sass): correct assignment of `$dimension` parameter in `media` mixin
  fix(sass): rename `variable_exists` function to `variable-exists`
  fix(sass): use `@forward` and `@use` instead of `@import` to avoid deprecation warnings

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "2.2.0",
+	"version": "2.2.1",
 	"name": "validation-form",
 	"description": "Customized form with validation for different types of fields.",
 	"author": "beatrizsmerino@gmail.com",

src/sass/abstracts/_index.sass

@@ -0,0 +1,16 @@
+// PARTIALS SASS
+// ===============================================================================
+
+// ABSTRACTS
+// ----------------------------------------------------------------------
+@forward "./functions/abstracts-functions-contains"
+// ------------------
+@forward "./mixins/abstracts-mixins-media"
+@forward "./mixins/abstracts-mixins-position"
+@forward "./mixins/abstracts-mixins-prefix"
+@forward "./mixins/abstracts-mixins-prefix-keyframes"
+@forward "./mixins/abstracts-mixins-prefix-animation"
+// ------------------
+@forward "./variables/abstracts-variables-colors"
+@forward "./variables/abstracts-variables-fonts"
+@forward "./variables/abstracts-variables-breakpoints"

src/sass/abstracts/functions/_abstracts-functions-contains.sass

@@ -1,10 +1,11 @@
 // ABSTRACTS - FUNCTIONS
 // CONTAINS
 // =================================================
+@use "sass:list"
 
 
 
 
 
 @function contains($list, $item)
-	@return index($list, $item) != null
+	@return list.index($list, $item) != null

src/sass/abstracts/mixins/_abstracts-mixins-media.scss

@@ -1,6 +1,11 @@
 // ABSTRACTS - MIXINS
 // MEDIA
 // =================================================
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../variables/abstracts-variables-breakpoints" as *;
+@use "../functions/abstracts-functions-contains" as *;
 
 
 
@@ -16,30 +21,34 @@
 	}
 
 	@if not contains($dimensions, $dimension) {
-		$rule: "width";
+		$dimension: "width";
 	}
 
-	@if type-of($breakpoint) == number {
-		@if unitless($breakpoint) {
+	@if not contains($units, $unit) {
+		$unit: "px";
+	}
+
+	@if meta.type-of($breakpoint) == number {
+		@if math.is-unitless($breakpoint) {
 			@media (#{$rule}-#{$dimension}: #{$breakpoint + $unit}) {
 				@content;
 			}
-		} @else if contains($units, unit($breakpoint)) {
+		} @else if contains($units, math.unit($breakpoint)) {
 			@media (#{$rule}-#{$dimension}: #{$breakpoint}) {
 				@content;
 			}
 		} @else {
 			@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;
 		}

src/sass/abstracts/mixins/_abstracts-mixins-position.sass

@@ -1,6 +1,7 @@
 // ABSTRACTS - MIXINS
 // POSITION
 // =================================================
+@use "abstracts/mixins/abstracts-mixins-prefix" as *
 
 
 

src/sass/abstracts/mixins/_abstracts-mixins-prefix-animation.sass

@@ -1,17 +1,19 @@
 // ABSTRACTS - MIXINS
 // PREFIX-ANIMATION
 // =================================================
+@use "sass:list"
+@use "abstracts/mixins/abstracts-mixins-prefix" as *
 
 
 
 
 
 @mixin animation($animate...)
-	$max: length($animate)
+	$max: list.length($animate)
 	$animations: ""
 
 	@for $i from 1 through $max
-		$animations: #{$animations + nth($animate, $i)}
+		$animations: #{$animations + list.nth($animate, $i)}
 
 		@if $i < $max
 			$animations: #{$animations + ", "}

src/sass/animations/_animations-keyframes-fade.sass

@@ -1,6 +1,7 @@
 // ANIMATIONS
 // KEYFRAMES-FADE
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/animations/_animations-keyframes-move.sass

@@ -1,6 +1,7 @@
 // ANIMATIONS
 // KEYFRAMES-MOVE
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/animations/_animations-keyframes-size.sass

@@ -1,6 +1,7 @@
 // ANIMATIONS
 // KEYFRAMES-SIZE
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/base/_base-fonts.sass

@@ -1,6 +1,7 @@
 // BASE
 // FONTS
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-button.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // BUTTON
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-container.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // CONTAINER
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-ckeditor.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM-CKEDITOR
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-error.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM-ERROR
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-input-check.sass

@@ -1,8 +1,9 @@
 // COMPONENTS
 // FORM-INPUT-CHECK
 // =================================================
-@use "sass:math"
 @use "sass:color"
+@use "sass:math"
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-input-color.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM-INPUT-COLOR
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-input-range.sass

@@ -1,8 +1,9 @@
 // COMPONENTS
 // FORM-INPUT-RANGE
 // =================================================
-@use "sass:math"
 @use "sass:color"
+@use "sass:math"
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-require.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM-REQUIRE
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form-select.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM-SELECT
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-form.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // FORM
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-icon.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // ICON
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-link.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // LINK
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-message.sass

@@ -1,6 +1,7 @@
 // COMPONENTS
 // MESSAGE
 // =================================================
+@use "../abstracts/index" as *
 
 
 

src/sass/components/_components-page.sass

@@ -2,6 +2,7 @@
 // PAGE
 // =================================================
 @use "sass:color"
+@use "../abstracts/index" as *
 
 
 

src/sass/styles.sass

@@ -5,59 +5,41 @@
 
 
 
-// ABSTRACTS
-// ----------------------------------------------------------------------
-@import "abstracts/functions/abstracts-functions-contains"
-// ------------------
-@import "abstracts/mixins/abstracts-mixins-media"
-@import "abstracts/mixins/abstracts-mixins-position"
-@import "abstracts/mixins/abstracts-mixins-prefix"
-@import "abstracts/mixins/abstracts-mixins-prefix-keyframes"
-@import "abstracts/mixins/abstracts-mixins-prefix-animation"
-// ------------------
-@import "abstracts/variables/abstracts-variables-colors"
-@import "abstracts/variables/abstracts-variables-fonts"
-@import "abstracts/variables/abstracts-variables-breakpoints"
-
-
-
-
-
 // BASE
 // ----------------------------------------------------------------------
-// @import "base/base-reset-ericmeyer"
-// @import "base/base-reset-normalize"
-@import "base/base-reset-personal"
-@import "base/base-fonts"
+// @use "base/base-reset-ericmeyer"
+// @use "base/base-reset-normalize"
+@use "base/base-reset-personal"
+@use "base/base-fonts"
 
 
 
 
 
 // ANIMATIONS
 // ----------------------------------------------------------------------
-// @import "animations/animations-animate-css"
-@import "animations/animations-keyframes-fade"
-@import "animations/animations-keyframes-move"
-@import "animations/animations-keyframes-size"
+// @use "animations/animations-animate-css"
+@use "animations/animations-keyframes-fade"
+@use "animations/animations-keyframes-move"
+@use "animations/animations-keyframes-size"
 
 
 
 
 
 // COMPONENTS
 // ----------------------------------------------------------------------
-@import "components/components-container"
-@import "components/components-page"
-@import "components/components-link"
-@import "components/components-button"
-@import "components/components-icon"
-@import "components/components-message"
-@import "components/components-form"
-@import "components/components-form-select"
-@import "components/components-form-input-range"
-@import "components/components-form-input-check"
-@import "components/components-form-input-color"
-@import "components/components-form-require"
-@import "components/components-form-error"
-@import "components/components-form-ckeditor"
+@use "components/components-container"
+@use "components/components-page"
+@use "components/components-link"
+@use "components/components-button"
+@use "components/components-icon"
+@use "components/components-message"
+@use "components/components-form"
+@use "components/components-form-select"
+@use "components/components-form-input-range"
+@use "components/components-form-input-check"
+@use "components/components-form-input-color"
+@use "components/components-form-require"
+@use "components/components-form-error"
+@use "components/components-form-ckeditor"