@udixio/tailwind 2.3.2 → 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 +10 -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 +1 -1
- package/src/plugins-tailwind/animation.ts +44 -57
package/CHANGELOG.md
CHANGED
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
|
@@ -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
|
};
|