Feature Request: Add easing functions to sal-* custom properties

[gingerchew]

I've put this together a couple of times before for other personal projects, but it would be nice to have access to the different easing function that have been added as custom properties.

This is the SASS I coded up most recently:

@function remove-leading-ease($name: '') {
    @if str-index($name, 'ease-') {
        @return str-slice($name, 6);
    }
    @return $name;
}

[data-sal] {
    @each $key, $ease in $sal-easings {
        $name: remove-leading-ease($key);
        --sal-#{$name}: #{$ease};
    }
}

Which outputs this CSS:

[data-sal] {
  --sal-linear: linear;
  --sal-ease: ease;
  --sal-in: ease-in;
  --sal-out: ease-out;
  --sal-in-out: ease-in-out;
  --sal-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --sal-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --sal-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --sal-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --sal-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --sal-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --sal-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --sal-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --sal-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --sal-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --sal-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sal-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --sal-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --sal-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --sal-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --sal-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --sal-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --sal-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --sal-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --sal-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --sal-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --sal-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --sal-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --sal-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

It doesn't have the name spacing --sal-easing convention, but that can be added using this @each loop instead.

[data-sal] {
    @each $key, $ease in $sal-easings {
        $name: remove-leading-ease($key);
        --sal-easing-#{$name}: #{$ease};
    }
}

To mitigate the added CSS the [data-sal][data-sal-easing] selectors can be updated to use the custom properties. Starting at ~1.1kb gzipped, only adding the custom properties (--sal-in-out) brings the gzip size up to 1.42kb. Adding the custom props to the[data-sal][data-sal-easing] selectors lowers that size to 1.275kb.

If this is something that is interesting, I can make a PR, or hash out some ways to reduce the size increase some how.

[ThestorngG]

What

[gingerchew]

@ThestorngG What is the confusion? Something unclear?