Change range separator to '_': e.g. range-on-exit/10px_100px

+ update homepage
+ v0.2.7

Author: Adam Plesnik

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adam.plesnik/tailwindcss-scroll-driven-animations",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "author": "Adam Plesnik <[email protected]>",
   "scripts": {
     "dev-docs": "npm run --workspace=docs dev",
@@ -51,5 +51,5 @@
   "bugs": {
     "url": "https://github.com/adamplesnik/tailwindcss-scroll-driven-animations/issues"
   },
-  "homepage": "https://github.com/adamplesnik/tailwindcss-scroll-driven-animations#readme"
+  "homepage": "https://tailwind.adamplesnik.com"
 }

src/index.ts

@@ -86,7 +86,7 @@ export = plugin(
 
 function splitAndCombine(values: string, modifiers: string | null) {
   const valueArray = (values || '').split(' ')
-  const modifierArray = (modifiers || ['0-100%'].join('-')).split('-')
+  const modifierArray = (modifiers || ['0_100%'].join('_')).split('_')
 
   const combinedValues = [valueArray[0], modifierArray[0], valueArray[1], modifierArray[1]]
 

tests/content.ts

@@ -27,10 +27,10 @@ export const contentToTest = String.raw`
   <div class="range-on-exit"></div>
   <div class="range-contain"></div>
 
-  <div class="range/10px-100px"></div>
-  <div class="range-on-entry/10px-100px"></div>
-  <div class="range-on-exit/10px-100px"></div>
-  <div class="range-contain/10px-100px"></div>
+  <div class="range/10px_100px"></div>
+  <div class="range-on-entry/10px_100px"></div>
+  <div class="range-on-exit/10px_100px"></div>
+  <div class="range-contain/10px_100px"></div>
 
   <div class="no-animations:px-0"></div>
 `

tests/expect.ts

@@ -62,22 +62,22 @@ export const expectedCss = String.raw`
 .range-contain {
   animation-range: contain 0 contain 100%
 }
-.range-contain\/10px-100px {
+.range-contain\/10px_100px {
   animation-range: contain 10px contain 100px
 }
 .range-on-entry {
   animation-range: entry 0 entry 100%
 }
-.range-on-entry\/10px-100px {
+.range-on-entry\/10px_100px {
   animation-range: entry 10px entry 100px
 }
 .range-on-exit {
   animation-range: exit 0 exit 100%
 }
-.range-on-exit\/10px-100px {
+.range-on-exit\/10px_100px {
   animation-range: exit 10px exit 100px
 }
-.range\/10px-100px {
+.range\/10px_100px {
   animation-range: cover 10px cover 100px
 }
 @supports not (animation-range: cover) {