From 6fed5efb3df2e60995f5c20d38feeadd365ec1dc Mon Sep 17 00:00:00 2001
From: Mehdi <9340937+meduzen@users.noreply.github.com>
Date: Fri, 22 Jul 2022 14:06:46 +0200
Subject: [PATCH] Add support for Dart SASS

---
 README.md                                     | 47 +++++++++++---
 package.json                                  |  4 +-
 src/easings.scss                              | 22 -------
 .../{_timings.scss => _coordinates.scss}      |  4 +-
 src/easings/_get-bezier.scss                  | 15 +++++
 .../{_list-and-mapping.scss => _map.scss}     | 63 +------------------
 src/easings/_names.scss                       | 60 ++++++++++++++++++
 src/easings/_variables.scss                   |  4 ++
 src/easings/easings.scss                      |  3 -
 src/functions/_helpers.scss                   | 46 --------------
 src/functions/functions.scss                  |  2 -
 src/functions/{_bezier.scss => index.scss}    | 38 ++++++++++-
 src/index.scss                                | 14 +++++
 src/stylesheet/custom-properties.scss         | 17 +++++
 14 files changed, 193 insertions(+), 146 deletions(-)
 delete mode 100644 src/easings.scss
 rename src/easings/{_timings.scss => _coordinates.scss} (95%)
 create mode 100644 src/easings/_get-bezier.scss
 rename src/easings/{_list-and-mapping.scss => _map.scss} (68%)
 create mode 100644 src/easings/_names.scss
 delete mode 100644 src/easings/easings.scss
 delete mode 100644 src/functions/_helpers.scss
 delete mode 100644 src/functions/functions.scss
 rename src/functions/{_bezier.scss => index.scss} (55%)
 create mode 100644 src/index.scss
 create mode 100644 src/stylesheet/custom-properties.scss

diff --git a/README.md b/README.md
index 66576a5..23fe903 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,8 @@ Goals and benefits of the package:
 - reverse any bezier curve with `reverse-bezier()`;
 - code portability: same syntax as similar libraries.
 
+⚠️ **`easings.scss` version `1.x` is compatible with Dart SASS while version `0.x` sticks to `node-sass`. If you’re not sure about your environment, start with the [installation section](#installation).** The installation step is the only usage difference between both versions, but if you prefer to only read the documentation for `0.x`, see [v0.31 documentation](https://github.com/meduzen/easings/tree/v0.3.1#contents).
+
 ## Summary
 
 - [Easings list](#easings-list)
@@ -122,12 +124,36 @@ $my-curve-not-reversed-yet: .1, .02, 1, .7;
 
 ## Installation
 
-1. `npm install easings.scss` pulls the package into your project.
+💡 `easings.scss` supports both the old and the new (2020) SASS specification, but aside from the installation step, the usage of the library remains the same in both spec.
+
+<details>
+
+<summary>If you’re not sure which one your project uses, this might help.</summary>
+
+- If the project uses `node-sass` **or** if you import SCSS files using `@import`, there’s a high chance you use **the old spec**.
+- If the project uses Dart SASS (`sass`) **and** if you import SCSS files using `@use` or `@forward`, you are using **the new spec**.
+- In the new spec, `@import` is deprecated and variables are not global. This is why `double.dash.scss` usage isn’t the same changes depending on the spec.
+
+</details>
+
+### Projects using Dart SASS
+
+**Dart SASS support starts at version 1.0.**
+
+- `npm install easings.scss@dart-sass` pulls the package into your project;
+- `@use 'easings.scss' as *;` in a SCSS file make all the easings available as SCSS variables in addition to adding them at [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level.
+
+### Projects using `node-sass`
+
+1. `npm install easings.scss@0` pulls the package into your project (for now, the `@0` part isn’t needed).
 2. `@import '~easings.scss';` in a SCSS file make all the easings available as SCSS variables in addition to adding them at [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) level.
 
-This means the `@import` statement…
+### Full import
+
+This means the sole `@import` or `@use` statement…
 ```scss
-@import '~easings.scss';
+@use 'easings.scss'; // easings.scss 1.x
+@import 'easings.scss'; // easings.scss 0.x
 ```
 
 … already outputs:
@@ -146,11 +172,14 @@ This means the `@import` statement…
 
 ### Partial import (`$easings`)
 
-If you don’t want to import everything, write an `$easings` list before the `@import` statement:
+If you don’t want to import everything, write an `$easings` list before the `@use` (or `@import`) statement:
 
 ```scss
+// your minimal list of easings
 $easings: 'in-out-quad', 'in-out-quad-r', 'out-circ', 'in-out-back';
-@import '~easings.scss;
+
+@use 'easings.scss' with($easings: $easings); // easings.scss 1.x
+@import 'easings.scss'; // easings.scss 0.x
 ```
 
 This will only output the needed Custom Properties, instead of the 24 available:
@@ -173,11 +202,15 @@ This will only output the needed Custom Properties, instead of the 24 available:
 
 ### Legacy browsers (`$easings-legacy`)
 
-If you don’t want to output custom properties, set `$easings-legacy` to `true` before the `@import` statement:
+If you don’t want to output custom properties, set `$easings-legacy` to `true`:
 
 ```scss
+// easings.scss 1.x
+@use 'easings.scss' with($easings-legacy: true);
+
+// easings.scss 0.x
 $easings-legacy: true;
-@import '~easings.scss;
+@import 'easings.scss';
 ```
 
 With this legacy flag, no CSS will be generated in `:root`. SCSS variables will output a `cubic-bezier` function instead of a Custom Property:
diff --git a/package.json b/package.json
index 05a56ad..e9cc8f5 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "easings.scss",
-  "version": "0.3.1",
+  "version": "1.0.0-rc.0",
   "description": "Easings (cubic-bezier timing functions) as custom properties and SCSS variables.",
-  "main": "src/easings.scss",
+  "main": "src/index.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/src/easings.scss b/src/easings.scss
deleted file mode 100644
index cdbe867..0000000
--- a/src/easings.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import 'functions/functions';
-@import 'easings/easings';
-
-/**
- * Providing a custom easings list.
- */
-@if variable-exists('easings') {
-  $easings-list: $easings;
-}
-
-/**
- * Attach easings custom properties to `:root {}` if `$easings-legacy` is true
- * or doesn’t exist.
- */
-@if variable-exists('easings-legacy') == false or $easings-legacy == false {
-
-  :root {
-    @each $easing in $easings-list {
-      --#{$easing}: cubic-bezier(#{map-get($easings-map, $easing)});
-    }
-  }
-}
diff --git a/src/easings/_timings.scss b/src/easings/_coordinates.scss
similarity index 95%
rename from src/easings/_timings.scss
rename to src/easings/_coordinates.scss
index 10ead73..b4580d5 100644
--- a/src/easings/_timings.scss
+++ b/src/easings/_coordinates.scss
@@ -1,7 +1,7 @@
 /**
- * The four esaings coordinates for each easing
+ * The four easings coordinates for each easing.
  */
-$easings-values: (
+ $easings-coordinates: (
   'in-sine': ('x1': .47, 'y1': 0, 'x2': .745, 'y2': .715),
   'out-sine': ('x1': .39, 'y1': .575, 'x2': .565, 'y2': 1),
   'in-out-sine': ('x1': .445, 'y1': .05, 'x2': .55, 'y2': .95),
diff --git a/src/easings/_get-bezier.scss b/src/easings/_get-bezier.scss
new file mode 100644
index 0000000..fb0c184
--- /dev/null
+++ b/src/easings/_get-bezier.scss
@@ -0,0 +1,15 @@
+$easings-legacy: false !default;
+
+/**
+ * RETURNS A cubic bezier TIMING FUNCTION.
+
+ * Modern browsers will get a custom property, legacy browsers will get a
+ * `cubic-bezier()` function.
+ */
+ @function get-bezier($name, $value) {
+  @if $easings-legacy == false {
+    @return var(--#{$name});
+  } @else {
+    @return cubic-bezier($value);
+  }
+}
diff --git a/src/easings/_list-and-mapping.scss b/src/easings/_map.scss
similarity index 68%
rename from src/easings/_list-and-mapping.scss
rename to src/easings/_map.scss
index 034624d..58f8a29 100644
--- a/src/easings/_list-and-mapping.scss
+++ b/src/easings/_map.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /**
  * The value associated to each easing
  */
@@ -58,64 +60,3 @@ $easings-map: (
   'in-out-back': $in-out-back-value,
   'in-out-back-r': $in-out-back-r-value,
 );
-
-/**
- * Available easings
- */
-$easings-list: (
-  'in-sine',
-  'in-sine-r',
-  'out-sine',
-  'out-sine-r',
-  'in-out-sine',
-  'in-out-sine-r',
-
-  'in-quad',
-  'in-quad-r',
-  'out-quad',
-  'out-quad-r',
-  'in-out-quad',
-  'in-out-quad-r',
-
-  'in-cubic',
-  'in-cubic-r',
-  'out-cubic',
-  'out-cubic-r',
-  'in-out-cubic',
-  'in-out-cubic-r',
-
-  'in-quart',
-  'in-quart-r',
-  'out-quart',
-  'out-quart-r',
-  'in-out-quart',
-  'in-out-quart-r',
-
-  'in-quint',
-  'in-quint-r',
-  'out-quint',
-  'out-quint-r',
-  'in-out-quint',
-  'in-out-quint-r',
-
-  'in-expo',
-  'in-expo-r',
-  'out-expo',
-  'out-expo-r',
-  'in-out-expo',
-  'in-out-expo-r',
-
-  'in-circ',
-  'in-circ-r',
-  'out-circ',
-  'out-circ-r',
-  'in-out-circ',
-  'in-out-circ-r',
-
-  'in-back',
-  'in-back-r',
-  'out-back',
-  'out-back-r',
-  'in-out-back',
-  'in-out-back-r',
-);
diff --git a/src/easings/_names.scss b/src/easings/_names.scss
new file mode 100644
index 0000000..a8ecdd3
--- /dev/null
+++ b/src/easings/_names.scss
@@ -0,0 +1,60 @@
+/**
+ * The names of the easings.
+ */
+$easings-list: (
+  'in-sine',
+  'in-sine-r',
+  'out-sine',
+  'out-sine-r',
+  'in-out-sine',
+  'in-out-sine-r',
+
+  'in-quad',
+  'in-quad-r',
+  'out-quad',
+  'out-quad-r',
+  'in-out-quad',
+  'in-out-quad-r',
+
+  'in-cubic',
+  'in-cubic-r',
+  'out-cubic',
+  'out-cubic-r',
+  'in-out-cubic',
+  'in-out-cubic-r',
+
+  'in-quart',
+  'in-quart-r',
+  'out-quart',
+  'out-quart-r',
+  'in-out-quart',
+  'in-out-quart-r',
+
+  'in-quint',
+  'in-quint-r',
+  'out-quint',
+  'out-quint-r',
+  'in-out-quint',
+  'in-out-quint-r',
+
+  'in-expo',
+  'in-expo-r',
+  'out-expo',
+  'out-expo-r',
+  'in-out-expo',
+  'in-out-expo-r',
+
+  'in-circ',
+  'in-circ-r',
+  'out-circ',
+  'out-circ-r',
+  'in-out-circ',
+  'in-out-circ-r',
+
+  'in-back',
+  'in-back-r',
+  'out-back',
+  'out-back-r',
+  'in-out-back',
+  'in-out-back-r',
+);
diff --git a/src/easings/_variables.scss b/src/easings/_variables.scss
index b602f53..b71913b 100644
--- a/src/easings/_variables.scss
+++ b/src/easings/_variables.scss
@@ -1,3 +1,7 @@
+@use 'get-bezier' as *;
+@forward '../functions';
+@use '../functions' as *;
+
 /**
  * Available variables
  *
diff --git a/src/easings/easings.scss b/src/easings/easings.scss
deleted file mode 100644
index a47aabe..0000000
--- a/src/easings/easings.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'timings';
-@import 'variables';
-@import 'list-and-mapping';
diff --git a/src/functions/_helpers.scss b/src/functions/_helpers.scss
deleted file mode 100644
index 31dfb1a..0000000
--- a/src/functions/_helpers.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * RETURNS A cubic bezier TIMING FUNCTION.
-
- * Modern browsers will get a custom property, legacy browsers will get a
- * `cubic-bezier()` function.
- */
-@function get-bezier($name, $value) {
-  @if variable-exists('easings-legacy') == false or $easings-legacy == false {
-    @return var(--#{$name});
-  } @else {
-    @return cubic-bezier($value);
-  }
-}
-
-/**
- * RETURNS VALUE(S) FOR A NAMED TIMING FUNCTION.
- */
-
-@function bezier-value($name, $coordinate) {
-  @return map-get(map-get($easings-values, $name), $coordinate);
-}
-
-@function reverse-bezier-value($name) {
-  $x1: bezier-x1($name);
-  $y1: bezier-y1($name);
-  $x2: bezier-x2($name);
-  $y2: bezier-y2($name);
-
-  @return 1 - $x2, 1 - $y2, 1 - $x1, 1 - $y1;
-}
-
-@function bezier-x1($name) {
-  @return bezier-value($name, 'x1');
-}
-
-@function bezier-y1($name) {
-  @return bezier-value($name, 'y1');
-}
-
-@function bezier-x2($name) {
-  @return bezier-value($name, 'x2');
-}
-
-@function bezier-y2($name) {
-  @return bezier-value($name, 'y2');
-}
diff --git a/src/functions/functions.scss b/src/functions/functions.scss
deleted file mode 100644
index d1b096f..0000000
--- a/src/functions/functions.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'helpers';
-@import 'bezier';
diff --git a/src/functions/_bezier.scss b/src/functions/index.scss
similarity index 55%
rename from src/functions/_bezier.scss
rename to src/functions/index.scss
index 4822f64..94bbc80 100644
--- a/src/functions/_bezier.scss
+++ b/src/functions/index.scss
@@ -1,10 +1,12 @@
+@use '../easings/coordinates' as *;
+
 /**
  * ALIAS FOR THE CSS cubic-bezier FUNCTION
  *
  * Use:
  * `transition-timing-function: bezier(.1, .02, 1, .7);`
  */
-@function bezier($args...) {
+ @function bezier($args...) {
   @return #{'cubic-bezier(#{$args})'};
 }
 
@@ -40,3 +42,37 @@
 
   @return reverse-bezier($args);
 }
+
+/**
+ * RETURNS VALUE(S) FOR A NAMED TIMING FUNCTION.
+ */
+
+ @function bezier-value($name, $coordinate) {
+  @return map-get(map-get($easings-coordinates, $name), $coordinate);
+}
+
+
+@function reverse-bezier-value($name) {
+  $x1: bezier-x1($name);
+  $y1: bezier-y1($name);
+  $x2: bezier-x2($name);
+  $y2: bezier-y2($name);
+
+  @return 1 - $x2, 1 - $y2, 1 - $x1, 1 - $y1;
+}
+
+@function bezier-x1($name) {
+  @return bezier-value($name, 'x1');
+}
+
+@function bezier-y1($name) {
+  @return bezier-value($name, 'y1');
+}
+
+@function bezier-x2($name) {
+  @return bezier-value($name, 'x2');
+}
+
+@function bezier-y2($name) {
+  @return bezier-value($name, 'y2');
+}
diff --git a/src/index.scss b/src/index.scss
new file mode 100644
index 0000000..fa21a30
--- /dev/null
+++ b/src/index.scss
@@ -0,0 +1,14 @@
+/**
+ * @todo: Rework directory structure. Right now it’s messy.
+ */
+
+$easings-legacy: false !default;
+
+// Setup the base bezier value getter function.
+@forward 'easings/get-bezier' with($easings-legacy: $easings-legacy);
+
+// Export variables and functions.
+@forward 'easings/variables';
+
+// Add custom properties to `:root`.
+@forward 'stylesheet/custom-properties' with($do-not-generate-css: $easings-legacy);
diff --git a/src/stylesheet/custom-properties.scss b/src/stylesheet/custom-properties.scss
new file mode 100644
index 0000000..caba734
--- /dev/null
+++ b/src/stylesheet/custom-properties.scss
@@ -0,0 +1,17 @@
+$do-not-generate-css: false !default;
+
+@use '../easings/names' as *;
+@use '../easings/map' as *;
+
+/**
+ * Providing a custom easings list or use the default one.
+ */
+$easings: $easings-list !default;
+
+@if $do-not-generate-css == false {
+  :root {
+    @each $easing in $easings {
+      --#{$easing}: cubic-bezier(#{map-get($easings-map, $easing)});
+    }
+  }
+}