@udixio/tailwind 2.3.1 → 2.3.3
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 +20 -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-DNLSzX2F.cjs → tailwind.plugin-BVo4TZ6g.cjs} +42 -60
- package/dist/{tailwind.plugin-Bv15RDPq.js → tailwind.plugin-CNzjEOdG.js} +42 -60
- package/package.json +1 -1
- package/src/plugins-tailwind/animation.ts +47 -60
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
## 2.3.3 (2025-10-16)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **animation:** unify variable structure for scroll animations ([3f73978](https://github.com/Udixio/UI/commit/3f73978))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Joël VIGREUX
|
|
10
|
+
|
|
11
|
+
## 2.3.2 (2025-10-16)
|
|
12
|
+
|
|
13
|
+
### 🩹 Fixes
|
|
14
|
+
|
|
15
|
+
- **animation:** update variable names for consistency with CSS conventions ([b13c01c](https://github.com/Udixio/UI/commit/b13c01c))
|
|
16
|
+
|
|
17
|
+
### ❤️ Thank You
|
|
18
|
+
|
|
19
|
+
- Joël VIGREUX
|
|
20
|
+
|
|
1
21
|
## 2.3.1 (2025-10-16)
|
|
2
22
|
|
|
3
23
|
### 🩹 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
|
|
@@ -338,7 +336,7 @@ const animation = plugin.withOptions(
|
|
|
338
336
|
matchUtilities(
|
|
339
337
|
{
|
|
340
338
|
[`${prefix}-duration`]: (value) => ({
|
|
341
|
-
[
|
|
339
|
+
[`--${prefix}-duration`]: value
|
|
342
340
|
})
|
|
343
341
|
},
|
|
344
342
|
{
|
|
@@ -358,7 +356,7 @@ const animation = plugin.withOptions(
|
|
|
358
356
|
}
|
|
359
357
|
);
|
|
360
358
|
matchUtilities(
|
|
361
|
-
{ [`${prefix}-delay`]: (value) => ({ [
|
|
359
|
+
{ [`${prefix}-delay`]: (value) => ({ [`--${prefix}-delay`]: value }) },
|
|
362
360
|
{
|
|
363
361
|
values: {
|
|
364
362
|
0: "0ms",
|
|
@@ -377,7 +375,7 @@ const animation = plugin.withOptions(
|
|
|
377
375
|
}
|
|
378
376
|
);
|
|
379
377
|
matchUtilities(
|
|
380
|
-
{ [`${prefix}-ease`]: (value) => ({ [
|
|
378
|
+
{ [`${prefix}-ease`]: (value) => ({ [`--${prefix}-ease`]: value }) },
|
|
381
379
|
{
|
|
382
380
|
values: {
|
|
383
381
|
linear: "linear",
|
|
@@ -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
|
|
@@ -337,7 +335,7 @@ const animation = plugin.withOptions(
|
|
|
337
335
|
matchUtilities(
|
|
338
336
|
{
|
|
339
337
|
[`${prefix}-duration`]: (value) => ({
|
|
340
|
-
[
|
|
338
|
+
[`--${prefix}-duration`]: value
|
|
341
339
|
})
|
|
342
340
|
},
|
|
343
341
|
{
|
|
@@ -357,7 +355,7 @@ const animation = plugin.withOptions(
|
|
|
357
355
|
}
|
|
358
356
|
);
|
|
359
357
|
matchUtilities(
|
|
360
|
-
{ [`${prefix}-delay`]: (value) => ({ [
|
|
358
|
+
{ [`${prefix}-delay`]: (value) => ({ [`--${prefix}-delay`]: value }) },
|
|
361
359
|
{
|
|
362
360
|
values: {
|
|
363
361
|
0: "0ms",
|
|
@@ -376,7 +374,7 @@ const animation = plugin.withOptions(
|
|
|
376
374
|
}
|
|
377
375
|
);
|
|
378
376
|
matchUtilities(
|
|
379
|
-
{ [`${prefix}-ease`]: (value) => ({ [
|
|
377
|
+
{ [`${prefix}-ease`]: (value) => ({ [`--${prefix}-ease`]: value }) },
|
|
380
378
|
{
|
|
381
379
|
values: {
|
|
382
380
|
linear: "linear",
|
|
@@ -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
|
@@ -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,
|
|
@@ -433,7 +431,7 @@ export const animation = plugin.withOptions(
|
|
|
433
431
|
matchUtilities(
|
|
434
432
|
{
|
|
435
433
|
[`${prefix}-duration`]: (value) => ({
|
|
436
|
-
[
|
|
434
|
+
[`--${prefix}-duration`]: value,
|
|
437
435
|
}),
|
|
438
436
|
},
|
|
439
437
|
{
|
|
@@ -454,7 +452,7 @@ export const animation = plugin.withOptions(
|
|
|
454
452
|
);
|
|
455
453
|
|
|
456
454
|
matchUtilities(
|
|
457
|
-
{ [`${prefix}-delay`]: (value) => ({ [
|
|
455
|
+
{ [`${prefix}-delay`]: (value) => ({ [`--${prefix}-delay`]: value }) },
|
|
458
456
|
{
|
|
459
457
|
values: {
|
|
460
458
|
0: '0ms',
|
|
@@ -474,7 +472,7 @@ export const animation = plugin.withOptions(
|
|
|
474
472
|
);
|
|
475
473
|
|
|
476
474
|
matchUtilities(
|
|
477
|
-
{ [`${prefix}-ease`]: (value) => ({ [
|
|
475
|
+
{ [`${prefix}-ease`]: (value) => ({ [`--${prefix}-ease`]: value }) },
|
|
478
476
|
{
|
|
479
477
|
values: {
|
|
480
478
|
linear: 'linear',
|
|
@@ -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
|
};
|