Add 'no-animations:' variant, fix naming in splitAndCombine(),

change README; v0.2.5

Author: Adam Plesnik

README.md

@@ -50,4 +50,4 @@ Timeline scope allows to control animated elements outside the parent which defi
 
 ### Browser Support
 
-Scroll-driven animations are not broadly supported yet. Use `@supports` rules for fallback styling.
+Scroll-driven animations are not broadly supported yet. Use the `no-animations:...` variant for fallback styling.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adam.plesnik/tailwindcss-scroll-driven-animations",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "author": "Adam Plesnik <[email protected]>",
   "scripts": {
     "build": "swc ./src/index.ts --out-dir ./dist"

src/index.ts

@@ -1,7 +1,7 @@
 import plugin from 'tailwindcss/plugin'
 
 export = plugin(
-  function ({ matchUtilities, theme }) {
+  function ({ matchUtilities, addVariant, theme }) {
     matchUtilities(
       {
         timeline: (value, { modifier }) => ({
@@ -69,6 +69,8 @@ export = plugin(
         modifiers: 'any',
       }
     )
+
+    addVariant('no-animations', '@supports not (animation-range: cover)')
   },
 
   {
@@ -83,9 +85,8 @@ export = plugin(
 )
 
 function splitAndCombine(values: string, modifiers: string | null) {
-  const defaultValueArray = ['0', '100%']
   const valueArray = (values || '').split(' ')
-  const modifierArray = (modifiers || defaultValueArray.join(',')).split(',')
+  const modifierArray = (modifiers || ['0,100%'].join(',')).split(',')
 
   const combinedValues = [valueArray[0], modifierArray[0], valueArray[1], modifierArray[1]]