From a136b9d5b55356804d25166264dc3b04f7d07164 Mon Sep 17 00:00:00 2001
From: Dale Sande <dale.sande@gmail.com>
Date: Wed, 20 Sep 2023 13:07:34 -0700
Subject: [PATCH] perf: update insetUtility to maintain current support

BREAKING CHANGE: This commit removes the legacy insetUtility mixin and
replaces it with a static output of the generated legacy values from the
previous version of WCSS and design tokens.

Users will not get a failure when importing the file reference
src/utilityMixins/_insetUtility.scss but instead of the mixin generating
a subset of selectors, all the static selectors will be added to the
project's CSS output.

This legacy feature has also been designated as DEPRECATED and should be
deleted with the next MAJOR release.
---
 src/_utilityClasses.scss             |   3 +
 src/utilityClasses/_inset.scss       | 188 +++++++++++++++++++++++++++
 src/utilityMixins/_insetUtility.scss |  90 +------------
 tests/insetUtility.spec.scss         |  32 -----
 4 files changed, 195 insertions(+), 118 deletions(-)
 create mode 100644 src/utilityClasses/_inset.scss
 delete mode 100644 tests/insetUtility.spec.scss

diff --git a/src/_utilityClasses.scss b/src/_utilityClasses.scss
index 5a8b6c9..bffe9cd 100644
--- a/src/_utilityClasses.scss
+++ b/src/_utilityClasses.scss
@@ -17,3 +17,6 @@
 
 // Functional selectors for the use of defining different list properties
 @import 'utilityClasses/listProperties';
+
+// Functional selectors for the use of defining different inset properties
+@import 'utilityClasses/inset';
diff --git a/src/utilityClasses/_inset.scss b/src/utilityClasses/_inset.scss
new file mode 100644
index 0000000..e199394
--- /dev/null
+++ b/src/utilityClasses/_inset.scss
@@ -0,0 +1,188 @@
+// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+@import '../libSupport/deprecated';
+@import '../libSupport/manageScope';
+
+// sass-lint:disable mixins-before-declarations variable-for-property
+
+@import '../utilityVariables/important';
+
+@include deprecated('Inset utility selectors and mixin.');
+
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetNone {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetNone {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetNone {}
+///
+
+#{$scope}.#{$prefix}util_insetNone {
+  padding: 0 $important;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs {
+  padding: 0.125rem;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs--stretch {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs--stretch {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs--stretch {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs--stretch {
+  padding: calc(0.125rem * 2) 0.125rem;
+}
+
+/// [Manage](/#utility-variable-important) `!important` flag.
+///
+/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
+///
+/// Not all options are illustrated in documentation.
+/// Range of options xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl
+/// @group Utility-inset
+/// @example scss - Default selector(s)
+///   .util_insetXxxs--squish {}
+///
+/// @example scss - Selector(s) when $scope: true;
+///   .auro .util_insetXxxs--squish {}
+///
+/// @example scss - Selector(s) when $prefix: true;
+///   .auro_util_insetXxxs--squish {}
+///
+
+#{$scope}.#{$prefix}util_insetXxxs--squish {
+  padding: 0 0.125rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs {
+  padding: 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs--stretch {
+  padding: calc(0.25rem * 1.5) 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxs--squish {
+  padding: calc(0.25rem / 2) 0.25rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs {
+  padding: 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs--stretch {
+  padding: calc(0.5rem * 1.5) 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXs--squish {
+  padding: calc(0.5rem / 2) 0.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm {
+  padding: 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm--stretch {
+  padding: calc(0.75rem * 1.5) 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetSm--squish {
+  padding: calc(0.75rem / 2) 0.75rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd {
+  padding: 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd--stretch {
+  padding: calc(1rem * 1.5) 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetMd--squish {
+  padding: calc(1rem / 2) 1rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg {
+  padding: 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg--stretch {
+  padding: calc(1.5rem * 1.5) 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetLg--squish {
+  padding: calc(1.5rem / 2) 1.5rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl {
+  padding: 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl--stretch {
+  padding: calc(2rem * 1.5) 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXl--squish {
+  padding: calc(2rem / 2) 2rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl {
+  padding: 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl--stretch {
+  padding: calc(3rem * 1.5) 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxl--squish {
+  padding: calc(3rem / 2) 3rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl {
+  padding: 4rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl--stretch {
+  padding: calc(4rem * 1.5) 4rem;
+}
+
+#{$scope}.#{$prefix}util_insetXxxl--squish {
+  padding: calc(4rem / 2) 4rem;
+}
diff --git a/src/utilityMixins/_insetUtility.scss b/src/utilityMixins/_insetUtility.scss
index ece9981..9d45e49 100644
--- a/src/utilityMixins/_insetUtility.scss
+++ b/src/utilityMixins/_insetUtility.scss
@@ -2,90 +2,8 @@
 // See LICENSE in the project root for license information.
 
 // ---------------------------------------------------------------------
-// Variables are defined by baseline Design Tokens
+// The previous inset utility mixin as been fully deprecated and is no longer available for use.
+// In its place is a static generated series of utility selectors that will be removed
+// with the next major release of Auro's web core style sheets.
 
-@import '../utilityVariables/spacing-options';
-@import '../utilityFunctions/capitalize';
-@import '../utilityFunctions/map-deep-get';
-@import '../utilityVariables/important';
-@import '../libSupport/manageScope';
-
-$ds-inset-directions: '', --stretch, --squish !default;
-$ds-inset-spacing-options: $ds-spacing-options !default;
-
-/// This mixin is designed to return a series of pre-defined selectors based on the inset spacing design spec
-///
-/// DO NOT execute mixin, this is already included with the import of the file dependency
-///
-/// **Dependency:** `$npm i @aurodesignsystem/design-tokens`
-/// @group utility-layout
-/// @param {String} $ds-inset-directions ["", --stretch, --squish] defines value
-/// @param {String} $ds-inset-spacing-options [none, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl] defines value applied
-/// @example css - Example output css
-///  .util_insetXxxs {
-///    padding: 0.125rem;
-///  }
-///  .util_insetXxxs--stretch {
-///    padding: calc(0.125rem * 2) 0.125rem;
-///  }
-///  .util_insetXxxs--squish {
-///    padding: 0 0.125rem;
-///  }
-/// @example scss - import dependencies
-///   @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
-/// @example scss - import with custom over-rides
-///   $ds-inset-spacing-options: xxxs;
-///   $ds-inset-directions:'';
-///   @import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap";
-///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/insetUtility";
-
-@mixin auro_inset($directions: $ds-inset-directions, $values: $ds-inset-spacing-options) {
-  @each $value in $values {
-    $map: map-keys($tokens);
-    $mapValue: auro_map-deep-get($tokens, #{$map}, $value);
-    $squish-string: null;
-    $stretch-string: null;
-
-
-    @if $value == 'none' {
-      $squish-string: 0 $important;
-      $stretch-string: 0 $important;
-      $mapValue: 0;
-    } @else if $value == 'xxxs' {
-      $squish-string: 0 $mapValue $important;
-      $stretch-string: calc(#{$mapValue} * 2) $mapValue $important;
-    } @else {
-      $squish-string: calc(#{$mapValue} / 2) $mapValue $important;
-      $stretch-string: calc(#{$mapValue} * 1.5) $mapValue $important;
-    }
-
-    @if auro_contains($values, $value) {
-      @if not index($values, $value) {
-        @error 'INVALID, `#{$value}` is not known, please choose from options, [#{$values}]';
-      }
-
-      @if $value == 'none' {
-        #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)} {
-          padding: $mapValue $important;
-        }
-      } @else {
-        @for $i from 1 through length($directions) {
-          $direction: nth($directions, $i);
-
-          #{$scope}.#{$prefix}util_inset#{auro_capitalize($value)}#{$direction} {
-            @if $direction == '' {
-              padding: $mapValue $important;
-            } @else if  $direction == '--squish' {
-              padding: $squish-string;
-            } @else if  $direction == '--stretch' {
-              padding: $stretch-string;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@include auro_inset();
+@import '../utilityClasses/inset';
diff --git a/tests/insetUtility.spec.scss b/tests/insetUtility.spec.scss
deleted file mode 100644
index 2315c4b..0000000
--- a/tests/insetUtility.spec.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-@import '../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariableMap';
-
-@import 'true';
-
-$ds-inset-spacing-options: sm, md, lg;
-$ds-inset-directions: --stretch;
-@import '../src/utilityMixins/insetUtility';
-
-@include describe('auro_inset()') {
-  @include it('should return a specific list of selectors based on config options') {
-    @include assert {
-      @include output {
-        @include auro_inset();
-      }
-
-      @include expect {
-        .util_insetSm--stretch {
-          padding: calc(0.75rem * 1.5) 0.75rem;
-        }
-
-        .util_insetMd--stretch {
-          padding: calc(1rem * 1.5) 1rem;
-        }
-
-        .util_insetLg--stretch {
-          padding: calc(1.5rem * 1.5) 1.5rem;
-        }
-      }
-    }
-  }
-}