Add support for Dart SASS

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:

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"
   },

src/easings/_timings.scss → 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),

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);
+  }
+}

src/easings/_list-and-mapping.scss → 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',
-);

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',
+);

src/easings/_variables.scss

@@ -1,3 +1,7 @@
+@use 'get-bezier' as *;
+@forward '../functions';
+@use '../functions' as *;
+
 /**
  * Available variables
  *

src/functions/_bezier.scss → 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');
+}