BREAKING: replace .range-start, .range-end with .range

Author: Adam Plesnik

README.md

@@ -28,7 +28,7 @@ module.exports = {
 The plugin provides utilities for a subset of CSS scroll-driven animation properties.
 
 - `animation-timeline`
-- `animation-range-start`, `animation-range-end`
+- `animation-range`
 - `scroll-timeline`, `view-timeline`
 - `timeline-scope`
 
@@ -42,7 +42,7 @@ Scroll and View timelines provide user with better control over the animations.
 
 ### Range
 
-Animation range controls start and end of an animation. Utility classes `.range-start` and `.range-end` can be used for setting the start and the end of the range. They default to `entry` and `exit` respectively.
+Animation range controls start and end of an animation. Utility class `.range` offers various options along with a possibility to use length modifiers.
 
 ### Scope
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adam.plesnik/tailwindcss-scroll-driven-animations",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "author": "Adam Plesnik <adam@adamplesnik.com>",
   "scripts": {
     "build": "swc ./src/index.js --out-dir ./dist"

src/index.ts

@@ -55,39 +55,18 @@ export = plugin(
 
     matchUtilities(
       {
-        'range-start': (value) => ({
-          animationRangeStart: value,
+        range: (value, { modifier }) => ({
+          animationRange: splitAndCombine(value, modifier),
         }),
       },
       {
         values: {
-          DEFAULT: 'entry',
-          exit: 'exit',
-          normal: 'normal',
-          contain: 'contain',
-          cover: 'cover',
-          'entry-crossing': 'entry-crossing',
-          'exit-crossing': 'exit-crossing',
-        },
-      }
-    )
-
-    matchUtilities(
-      {
-        'range-end': (value) => ({
-          animationRangeEnd: value,
-        }),
-      },
-      {
-        values: {
-          DEFAULT: 'exit',
-          entry: 'entry',
-          normal: 'normal',
-          contain: 'contain',
-          cover: 'cover',
-          'entry-crossing': 'entry-crossing',
-          'exit-crossing': 'exit-crossing',
+          DEFAULT: 'cover cover',
+          'on-entry': 'entry entry',
+          'on-exit': 'exit exit',
+          contain: 'contain contain',
         },
+        modifiers: 'any',
       }
     )
   },
@@ -102,3 +81,13 @@ export = plugin(
     },
   }
 )
+
+function splitAndCombine(values: string, modifiers: string | null) {
+  const defaultValueArray = ['0', '100%']
+  const valueArray = (values || '').split(' ')
+  const modifierArray = (modifiers || defaultValueArray.join(',')).split(',')
+
+  const combinedValues = [valueArray[0], modifierArray[0], valueArray[1], modifierArray[1]]
+
+  return combinedValues.join(' ')
+}