Skip to content

Commit

Permalink
Add @ts and @TS
Browse files Browse the repository at this point in the history
  • Loading branch information
yuanchuan committed Apr 8, 2024
1 parent d8f5d2b commit 9708005
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 8 deletions.
8 changes: 8 additions & 0 deletions src/function.js
Expand Up @@ -563,6 +563,14 @@ const Expose = add_alias({
return calc_with(`var(--${utime.name})`);
},

ts() {
return calc_with(`calc(var(--${utime.name}) / 1000)`);
},

TS() {
return calc_with(`calc(var(--${UTime.name}) / 1000)`);
},

UT() {
return calc_with(`var(--${UTime.name})`);
},
Expand Down
17 changes: 10 additions & 7 deletions src/generator/css.js
Expand Up @@ -250,7 +250,8 @@ class Rules {

check_uniforms(name) {
switch (name) {
case 'ut': case 'UT': case 't': case 'T': this.uniforms.time = true; break;
case 'ut': case 'UT': case 't': case 'T': case 'ts': case 'TS':
this.uniforms.time = true; break;
case 'ux': this.uniforms.mousex = true; break;
case 'uy': this.uniforms.mousey = true; break;
case 'uw': this.uniforms.width = true; break;
Expand Down Expand Up @@ -794,19 +795,21 @@ class Rules {
}

if (this.uniforms.time) {
let n = 'animation-name';
let t = utime.ticks;
let un = utime.name;
let Un = UTime.name;
this.styles.container += `
:host,.host {
animation:${utime.animation()},${UTime.animation(DELAY + 'ms')};
}
`;
this.styles.keyframes += `
@keyframes ${utime['animation-name']} {
from {--${utime.name}:0}
to {--${utime.name}:${Math.trunc(utime.ticks/(1000/60))}}
@keyframes ${utime[n]} {
from {--${un}:0} to {--${un}:${t}}
}
@keyframes ${UTime['animation-name']} {
from {--${UTime.name}:0}
to {--${UTime.name}:${utime.ticks}}
@keyframes ${UTime[n]} {
from {--${Un}:0} to {--${Un}:${t}}
}
`;
}
Expand Down
3 changes: 2 additions & 1 deletion src/uniforms.js
@@ -1,10 +1,11 @@
function create_time_uniform(name) {
let ticks = 1000 * 60 * 60 * 24; /* 24 hours in ms */
let steps = ticks / (1000 / 60);
let aname = `${name}-animation`;
return {
name, ticks,
'animation-name': aname,
animation: (delay='0s') => `${ticks}ms linear ${delay} infinite ${aname}`
animation: (delay='0s') => `${ticks}ms steps(${steps}) ${delay} infinite ${aname}`
}
}

Expand Down

0 comments on commit 9708005

Please sign in to comment.