@udixio/tailwind 2.3.2 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/browser.cjs +1 -1
- package/dist/browser.js +2 -2
- package/dist/node.cjs +1 -1
- package/dist/node.js +2 -2
- package/dist/plugins-tailwind/animation.d.ts.map +1 -1
- package/dist/{tailwind.plugin-CKDthKVL.cjs → tailwind.plugin-BVo4TZ6g.cjs} +39 -57
- package/dist/{tailwind.plugin-Bb39ytUc.js → tailwind.plugin-CNzjEOdG.js} +39 -57
- package/package.json +2 -2
- package/src/plugins-tailwind/animation.ts +44 -57
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## 2.3.4 (2025-10-17)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated @udixio/theme to 2.1.0
|
|
6
|
+
|
|
7
|
+
## 2.3.3 (2025-10-16)
|
|
8
|
+
|
|
9
|
+
### 🩹 Fixes
|
|
10
|
+
|
|
11
|
+
- **animation:** unify variable structure for scroll animations ([3f73978](https://github.com/Udixio/UI/commit/3f73978))
|
|
12
|
+
|
|
13
|
+
### ❤️ Thank You
|
|
14
|
+
|
|
15
|
+
- Joël VIGREUX
|
|
16
|
+
|
|
1
17
|
## 2.3.2 (2025-10-16)
|
|
2
18
|
|
|
3
19
|
### 🩹 Fixes
|
package/dist/browser.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const tailwind_plugin = require("./tailwind.plugin-
|
|
3
|
+
const tailwind_plugin = require("./tailwind.plugin-BVo4TZ6g.cjs");
|
|
4
4
|
exports.TailwindImplPluginBrowser = tailwind_plugin.TailwindImplPluginBrowser;
|
|
5
5
|
exports.TailwindPlugin = tailwind_plugin.TailwindPlugin;
|
|
6
6
|
exports.animation = tailwind_plugin.animation;
|
package/dist/browser.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { m as main } from "./tailwind.plugin-
|
|
2
|
-
import { T, b, a, f, s } from "./tailwind.plugin-
|
|
1
|
+
import { m as main } from "./tailwind.plugin-CNzjEOdG.js";
|
|
2
|
+
import { T, b, a, f, s } from "./tailwind.plugin-CNzjEOdG.js";
|
|
3
3
|
export {
|
|
4
4
|
T as TailwindImplPluginBrowser,
|
|
5
5
|
b as TailwindPlugin,
|
package/dist/node.cjs
CHANGED
|
@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
24
24
|
));
|
|
25
25
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
26
26
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
27
|
-
const tailwind_plugin = require("./tailwind.plugin-
|
|
27
|
+
const tailwind_plugin = require("./tailwind.plugin-BVo4TZ6g.cjs");
|
|
28
28
|
const theme = require("@udixio/theme");
|
|
29
29
|
const fs = require("fs");
|
|
30
30
|
const console = require("node:console");
|
package/dist/node.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-
|
|
5
|
-
import { a, f, s } from "./tailwind.plugin-
|
|
4
|
+
import { T as TailwindImplPluginBrowser, m as main } from "./tailwind.plugin-CNzjEOdG.js";
|
|
5
|
+
import { a, f, s } from "./tailwind.plugin-CNzjEOdG.js";
|
|
6
6
|
import { PluginAbstract, FontPlugin } from "@udixio/theme";
|
|
7
7
|
import * as fs from "fs";
|
|
8
8
|
import * as console from "node:console";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/animation.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/plugins-tailwind/animation.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgHD,eAAO,MAAM,SAAS,sFAgcrB,CAAC"}
|
|
@@ -39,19 +39,18 @@ const createAnimationFunc = ({
|
|
|
39
39
|
animationFillMode: "both"
|
|
40
40
|
},
|
|
41
41
|
[`.${prefix}-${name}, .${prefix}-${name}-in`]: {
|
|
42
|
-
|
|
42
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`
|
|
43
43
|
},
|
|
44
44
|
[`.${prefix}-${name}-out`]: {
|
|
45
|
-
|
|
45
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
addUtilities({
|
|
49
49
|
[`.${prefix}-${name}-scroll`]: {
|
|
50
50
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
51
51
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
52
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
53
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
55
54
|
animationFillMode: "both"
|
|
56
55
|
}
|
|
57
56
|
});
|
|
@@ -314,19 +313,18 @@ const animation = plugin.withOptions(
|
|
|
314
313
|
[variableName("dy")]: dy
|
|
315
314
|
},
|
|
316
315
|
[`.${prefix}-${name}-${directionAlias}, .${prefix}-${name}-in-${directionAlias}`]: {
|
|
317
|
-
|
|
316
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`
|
|
318
317
|
},
|
|
319
318
|
[`.${prefix}-${name}-out-${directionAlias}`]: {
|
|
320
|
-
|
|
319
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`
|
|
321
320
|
}
|
|
322
321
|
});
|
|
323
322
|
addUtilities({
|
|
324
323
|
[`.${prefix}-${name}-scroll-${directionAlias}`]: {
|
|
325
324
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
326
325
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
326
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
327
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
330
328
|
animationFillMode: "both",
|
|
331
329
|
[variableName("dx")]: dx,
|
|
332
330
|
[variableName("dy")]: dy
|
|
@@ -412,56 +410,40 @@ const animation = plugin.withOptions(
|
|
|
412
410
|
}
|
|
413
411
|
}
|
|
414
412
|
);
|
|
415
|
-
|
|
416
|
-
{
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
}
|
|
437
|
-
);
|
|
438
|
-
matchUtilities(
|
|
439
|
-
{
|
|
440
|
-
[`${prefix}-range-end`]: (value) => ({
|
|
441
|
-
[`--${prefix}-range-end`]: value
|
|
442
|
-
})
|
|
443
|
-
},
|
|
444
|
-
{
|
|
445
|
-
values: {
|
|
446
|
-
"entry-0": "entry 0%",
|
|
447
|
-
"entry-20": "entry 20%",
|
|
448
|
-
"entry-50": "entry 50%",
|
|
449
|
-
"entry-80": "entry 80%",
|
|
450
|
-
"entry-100": "entry 100%",
|
|
451
|
-
"contain-0": "contain 0%",
|
|
452
|
-
"cover-0": "cover 0%",
|
|
453
|
-
"cover-50": "cover 50%",
|
|
454
|
-
"cover-100": "cover 100%",
|
|
455
|
-
"exit-0": "exit 0%",
|
|
456
|
-
"exit-20": "exit 20%",
|
|
457
|
-
"exit-100": "exit 100%"
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
);
|
|
413
|
+
["start", "end"].forEach((direction) => {
|
|
414
|
+
["entry", "contain", "cover", "exit"].forEach((preset) => {
|
|
415
|
+
matchUtilities(
|
|
416
|
+
{
|
|
417
|
+
[`${prefix}-scroll-${direction}-${preset}`]: (value) => ({
|
|
418
|
+
[`--${prefix}-range-${direction}`]: `${preset} ${value}`
|
|
419
|
+
})
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
values: {
|
|
423
|
+
...theme2("spacing"),
|
|
424
|
+
full: "100%",
|
|
425
|
+
"1/2": "50%",
|
|
426
|
+
"1/3": "33.333333%",
|
|
427
|
+
"2/3": "66.666667%",
|
|
428
|
+
"1/4": "25%",
|
|
429
|
+
"3/4": "75%"
|
|
430
|
+
},
|
|
431
|
+
supportsNegativeValues: true
|
|
432
|
+
}
|
|
433
|
+
);
|
|
434
|
+
});
|
|
435
|
+
});
|
|
461
436
|
addBase({
|
|
462
437
|
[`[class*="${prefix}-"]`]: {
|
|
463
438
|
animationName: Array.from(animationNames).map((name) => `var(--${prefix}-name-${name}, noop)`).join(", "),
|
|
464
|
-
["will-change"]: Array.from(animationNames).map((name) => `var(--${prefix}-dependencies-${name}, noop)`).join(", ")
|
|
439
|
+
["will-change"]: Array.from(animationNames).map((name) => `var(--${prefix}-dependencies-${name}, noop)`).join(", "),
|
|
440
|
+
animationPlayState: Array.from(animationNames).map((name) => `var(--${prefix}-play-state-${name}, running)`).join(", ")
|
|
441
|
+
}
|
|
442
|
+
});
|
|
443
|
+
addBase({
|
|
444
|
+
[`[class*="${prefix}-"][class*="-scroll"]`]: {
|
|
445
|
+
animationTimeline: Array.from(animationNames).map((name) => `var(--${prefix}-timeline-${name}, auto)`).join(", "),
|
|
446
|
+
animationRange: Array.from(animationNames).map((name) => `var(--${prefix}-range-${name}, normal)`).join(", ")
|
|
465
447
|
}
|
|
466
448
|
});
|
|
467
449
|
};
|
|
@@ -38,19 +38,18 @@ const createAnimationFunc = ({
|
|
|
38
38
|
animationFillMode: "both"
|
|
39
39
|
},
|
|
40
40
|
[`.${prefix}-${name}, .${prefix}-${name}-in`]: {
|
|
41
|
-
|
|
41
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`
|
|
42
42
|
},
|
|
43
43
|
[`.${prefix}-${name}-out`]: {
|
|
44
|
-
|
|
44
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
47
|
addUtilities({
|
|
48
48
|
[`.${prefix}-${name}-scroll`]: {
|
|
49
49
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
50
50
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
51
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
52
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
54
53
|
animationFillMode: "both"
|
|
55
54
|
}
|
|
56
55
|
});
|
|
@@ -313,19 +312,18 @@ const animation = plugin.withOptions(
|
|
|
313
312
|
[variableName("dy")]: dy
|
|
314
313
|
},
|
|
315
314
|
[`.${prefix}-${name}-${directionAlias}, .${prefix}-${name}-in-${directionAlias}`]: {
|
|
316
|
-
|
|
315
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`
|
|
317
316
|
},
|
|
318
317
|
[`.${prefix}-${name}-out-${directionAlias}`]: {
|
|
319
|
-
|
|
318
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`
|
|
320
319
|
}
|
|
321
320
|
});
|
|
322
321
|
addUtilities({
|
|
323
322
|
[`.${prefix}-${name}-scroll-${directionAlias}`]: {
|
|
324
323
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
325
324
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(", "),
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
325
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
326
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
329
327
|
animationFillMode: "both",
|
|
330
328
|
[variableName("dx")]: dx,
|
|
331
329
|
[variableName("dy")]: dy
|
|
@@ -411,56 +409,40 @@ const animation = plugin.withOptions(
|
|
|
411
409
|
}
|
|
412
410
|
}
|
|
413
411
|
);
|
|
414
|
-
|
|
415
|
-
{
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
}
|
|
436
|
-
);
|
|
437
|
-
matchUtilities(
|
|
438
|
-
{
|
|
439
|
-
[`${prefix}-range-end`]: (value) => ({
|
|
440
|
-
[`--${prefix}-range-end`]: value
|
|
441
|
-
})
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
values: {
|
|
445
|
-
"entry-0": "entry 0%",
|
|
446
|
-
"entry-20": "entry 20%",
|
|
447
|
-
"entry-50": "entry 50%",
|
|
448
|
-
"entry-80": "entry 80%",
|
|
449
|
-
"entry-100": "entry 100%",
|
|
450
|
-
"contain-0": "contain 0%",
|
|
451
|
-
"cover-0": "cover 0%",
|
|
452
|
-
"cover-50": "cover 50%",
|
|
453
|
-
"cover-100": "cover 100%",
|
|
454
|
-
"exit-0": "exit 0%",
|
|
455
|
-
"exit-20": "exit 20%",
|
|
456
|
-
"exit-100": "exit 100%"
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
);
|
|
412
|
+
["start", "end"].forEach((direction) => {
|
|
413
|
+
["entry", "contain", "cover", "exit"].forEach((preset) => {
|
|
414
|
+
matchUtilities(
|
|
415
|
+
{
|
|
416
|
+
[`${prefix}-scroll-${direction}-${preset}`]: (value) => ({
|
|
417
|
+
[`--${prefix}-range-${direction}`]: `${preset} ${value}`
|
|
418
|
+
})
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
values: {
|
|
422
|
+
...theme("spacing"),
|
|
423
|
+
full: "100%",
|
|
424
|
+
"1/2": "50%",
|
|
425
|
+
"1/3": "33.333333%",
|
|
426
|
+
"2/3": "66.666667%",
|
|
427
|
+
"1/4": "25%",
|
|
428
|
+
"3/4": "75%"
|
|
429
|
+
},
|
|
430
|
+
supportsNegativeValues: true
|
|
431
|
+
}
|
|
432
|
+
);
|
|
433
|
+
});
|
|
434
|
+
});
|
|
460
435
|
addBase({
|
|
461
436
|
[`[class*="${prefix}-"]`]: {
|
|
462
437
|
animationName: Array.from(animationNames).map((name) => `var(--${prefix}-name-${name}, noop)`).join(", "),
|
|
463
|
-
["will-change"]: Array.from(animationNames).map((name) => `var(--${prefix}-dependencies-${name}, noop)`).join(", ")
|
|
438
|
+
["will-change"]: Array.from(animationNames).map((name) => `var(--${prefix}-dependencies-${name}, noop)`).join(", "),
|
|
439
|
+
animationPlayState: Array.from(animationNames).map((name) => `var(--${prefix}-play-state-${name}, running)`).join(", ")
|
|
440
|
+
}
|
|
441
|
+
});
|
|
442
|
+
addBase({
|
|
443
|
+
[`[class*="${prefix}-"][class*="-scroll"]`]: {
|
|
444
|
+
animationTimeline: Array.from(animationNames).map((name) => `var(--${prefix}-timeline-${name}, auto)`).join(", "),
|
|
445
|
+
animationRange: Array.from(animationNames).map((name) => `var(--${prefix}-range-${name}, normal)`).join(", ")
|
|
464
446
|
}
|
|
465
447
|
});
|
|
466
448
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@udixio/tailwind",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/node.js",
|
|
6
6
|
"module": "./dist/node.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"chalk": "^5.6.0",
|
|
32
32
|
"pathe": "^2.0.3",
|
|
33
33
|
"tslib": "^2.3.0",
|
|
34
|
-
"@udixio/theme": "2.
|
|
34
|
+
"@udixio/theme": "2.1.0"
|
|
35
35
|
},
|
|
36
36
|
"repository": {
|
|
37
37
|
"type": "git",
|
|
@@ -75,10 +75,10 @@ const createAnimationFunc =
|
|
|
75
75
|
animationFillMode: 'both',
|
|
76
76
|
},
|
|
77
77
|
[`.${prefix}-${name}, .${prefix}-${name}-in`]: {
|
|
78
|
-
|
|
78
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`,
|
|
79
79
|
},
|
|
80
80
|
[`.${prefix}-${name}-out`]: {
|
|
81
|
-
|
|
81
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`,
|
|
82
82
|
},
|
|
83
83
|
});
|
|
84
84
|
|
|
@@ -86,9 +86,8 @@ const createAnimationFunc =
|
|
|
86
86
|
[`.${prefix}-${name}-scroll`]: {
|
|
87
87
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
88
88
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(', '),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
89
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
90
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
92
91
|
animationFillMode: 'both',
|
|
93
92
|
},
|
|
94
93
|
});
|
|
@@ -405,10 +404,10 @@ export const animation = plugin.withOptions(
|
|
|
405
404
|
},
|
|
406
405
|
[`.${prefix}-${name}-${directionAlias}, .${prefix}-${name}-in-${directionAlias}`]:
|
|
407
406
|
{
|
|
408
|
-
|
|
407
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-in-state, paused)`,
|
|
409
408
|
},
|
|
410
409
|
[`.${prefix}-${name}-out-${directionAlias}`]: {
|
|
411
|
-
|
|
410
|
+
[`--${prefix}-play-state-${name}`]: `var(--${prefix}-out-state, paused)`,
|
|
412
411
|
},
|
|
413
412
|
});
|
|
414
413
|
|
|
@@ -416,9 +415,8 @@ export const animation = plugin.withOptions(
|
|
|
416
415
|
[`.${prefix}-${name}-scroll-${directionAlias}`]: {
|
|
417
416
|
[`--${prefix}-name-${name}`]: `${prefix}-${name}`,
|
|
418
417
|
[`--${prefix}-dependencies-${name}`]: dependencies.join(', '),
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
animationRangeEnd: `var(--${prefix}-range-end, cover 50%)`,
|
|
418
|
+
[`--${prefix}-timeline-${name}`]: `var(--${prefix}-timeline, view())`,
|
|
419
|
+
[`--${prefix}-range-${name}`]: `var(--${prefix}-range-start, entry 20%) var(--${prefix}-range-end, cover 50%)`,
|
|
422
420
|
animationFillMode: 'both',
|
|
423
421
|
|
|
424
422
|
[variableName('dx')]: dx,
|
|
@@ -514,55 +512,31 @@ export const animation = plugin.withOptions(
|
|
|
514
512
|
},
|
|
515
513
|
);
|
|
516
514
|
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
);
|
|
515
|
+
['start', 'end'].forEach((direction) => {
|
|
516
|
+
['entry', 'contain', 'cover', 'exit'].forEach((preset) => {
|
|
517
|
+
matchUtilities(
|
|
518
|
+
{
|
|
519
|
+
[`${prefix}-scroll-${direction}-${preset}`]: (value) => ({
|
|
520
|
+
[`--${prefix}-range-${direction}`]: `${preset} ${value}`,
|
|
521
|
+
}),
|
|
522
|
+
},
|
|
523
|
+
{
|
|
524
|
+
values: {
|
|
525
|
+
...theme('spacing'),
|
|
526
|
+
full: '100%',
|
|
527
|
+
'1/2': '50%',
|
|
528
|
+
'1/3': '33.333333%',
|
|
529
|
+
'2/3': '66.666667%',
|
|
530
|
+
'1/4': '25%',
|
|
531
|
+
'3/4': '75%',
|
|
532
|
+
},
|
|
533
|
+
supportsNegativeValues: true,
|
|
534
|
+
},
|
|
535
|
+
);
|
|
536
|
+
});
|
|
537
|
+
});
|
|
541
538
|
|
|
542
539
|
// Range end utilities (presets + arbitrary values via [..])
|
|
543
|
-
matchUtilities(
|
|
544
|
-
{
|
|
545
|
-
[`${prefix}-range-end`]: (value) => ({
|
|
546
|
-
[`--${prefix}-range-end`]: value,
|
|
547
|
-
}),
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
values: {
|
|
551
|
-
'entry-0': 'entry 0%',
|
|
552
|
-
'entry-20': 'entry 20%',
|
|
553
|
-
'entry-50': 'entry 50%',
|
|
554
|
-
'entry-80': 'entry 80%',
|
|
555
|
-
'entry-100': 'entry 100%',
|
|
556
|
-
'contain-0': 'contain 0%',
|
|
557
|
-
'cover-0': 'cover 0%',
|
|
558
|
-
'cover-50': 'cover 50%',
|
|
559
|
-
'cover-100': 'cover 100%',
|
|
560
|
-
'exit-0': 'exit 0%',
|
|
561
|
-
'exit-20': 'exit 20%',
|
|
562
|
-
'exit-100': 'exit 100%',
|
|
563
|
-
},
|
|
564
|
-
},
|
|
565
|
-
);
|
|
566
540
|
|
|
567
541
|
addBase({
|
|
568
542
|
[`[class*="${prefix}-"]`]: {
|
|
@@ -572,6 +546,19 @@ export const animation = plugin.withOptions(
|
|
|
572
546
|
['will-change']: Array.from(animationNames)
|
|
573
547
|
.map((name) => `var(--${prefix}-dependencies-${name}, noop)`)
|
|
574
548
|
.join(', '),
|
|
549
|
+
animationPlayState: Array.from(animationNames)
|
|
550
|
+
.map((name) => `var(--${prefix}-play-state-${name}, running)`)
|
|
551
|
+
.join(', '),
|
|
552
|
+
},
|
|
553
|
+
});
|
|
554
|
+
addBase({
|
|
555
|
+
[`[class*="${prefix}-"][class*="-scroll"]`]: {
|
|
556
|
+
animationTimeline: Array.from(animationNames)
|
|
557
|
+
.map((name) => `var(--${prefix}-timeline-${name}, auto)`)
|
|
558
|
+
.join(', '),
|
|
559
|
+
animationRange: Array.from(animationNames)
|
|
560
|
+
.map((name) => `var(--${prefix}-range-${name}, normal)`)
|
|
561
|
+
.join(', '),
|
|
575
562
|
},
|
|
576
563
|
});
|
|
577
564
|
};
|