@react-x11/components 0.16.1 → 0.17.0

package/dist/html/css/style.js

@@ -16,6 +16,7 @@ import { AUTO, alphaOf, fourSides, inkColor, isTransparent, keywordFontSize, par
 import { parseUrl, readIdent, startsIdent } from './parse.js';
 import { parseContent, parseCounterList, parseListStyleType, parseQuotes, } from './content.js';
 import { parseRotate, parseScale, parseTransform } from './transform.js';
+import { ANIMATION_LONGHANDS, NO_ANIMATIONS, animationLonghand, parseAnimation, } from './animation.js';
 import { LIGHT_DARK, SYSTEM_COLOR, lightDark, systemColors, usedColorScheme, } from './color.js';
 import { svgPaint } from './shapes.js';
 /** Whether a length is one `padding` takes: not `auto`, not negative. A
@@ -339,6 +340,7 @@ export function initialStyle(look, scale = 1) {
         scale: null,
         transform: null,
         transformOrigin: [{ pct: 50 }, { pct: 50 }],
+        animations: NO_ANIMATIONS,
         zIndex: AUTO,
         verticalAlign: 'baseline',
         width: AUTO,
@@ -654,13 +656,23 @@ const BORDER_WIDTH_KEYWORDS = {
     medium: 3,
     thick: 5,
 };
-/** `-webkit-` names that are the multicol properties' own. */
-const MULTICOL_ALIASES = {
+/** `-webkit-` names that are the multicol properties' own, and the
+ *  animation's. */
+const PREFIXED_ALIASES = {
     '-webkit-columns': 'columns',
     '-webkit-column-count': 'column-count',
     '-webkit-column-width': 'column-width',
     '-webkit-column-gap': 'column-gap',
     '-webkit-column-break-inside': 'break-inside',
+    '-webkit-animation': 'animation',
+    '-webkit-animation-name': 'animation-name',
+    '-webkit-animation-duration': 'animation-duration',
+    '-webkit-animation-timing-function': 'animation-timing-function',
+    '-webkit-animation-delay': 'animation-delay',
+    '-webkit-animation-iteration-count': 'animation-iteration-count',
+    '-webkit-animation-direction': 'animation-direction',
+    '-webkit-animation-fill-mode': 'animation-fill-mode',
+    '-webkit-animation-play-state': 'animation-play-state',
 };
 /**
  * Apply one declaration to a style, in place.
@@ -672,11 +684,11 @@ const MULTICOL_ALIASES = {
  */
 export function applyDeclaration(style, parent, prop, rawValue, ctx) {
     const written = prop.toLowerCase();
-    // the multicol properties under the names WebKit had them by, which
-    // Blink still reads, each an alias of the property (`-webkit-column-
-    // count` in its `css_properties.json5`): a page written for it alone
-    // names no other
-    const name = MULTICOL_ALIASES[written] ?? written;
+    // the multicol and animation properties under the names WebKit had them
+    // by, which Blink still reads, each an alias of the property (`-webkit-
+    // column-count` in its `css_properties.json5`): a page written for it
+    // alone names no other
+    const name = PREFIXED_ALIASES[written] ?? written;
     let value = rawValue.trim();
     if (!value)
         return;
@@ -1165,6 +1177,25 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
                 style.opacity = a;
             return;
         }
+        case 'animation': {
+            const animations = parseAnimation(value);
+            if (animations)
+                style.animations = animations;
+            return;
+        }
+        case 'animation-name':
+        case 'animation-duration':
+        case 'animation-timing-function':
+        case 'animation-delay':
+        case 'animation-iteration-count':
+        case 'animation-direction':
+        case 'animation-fill-mode':
+        case 'animation-play-state': {
+            const animations = animationLonghand(style.animations, ANIMATION_LONGHANDS[name], value);
+            if (animations)
+                style.animations = animations;
+            return;
+        }
         case 'translate': {
             // `none`, or across, down, and a depth nothing here has
             if (value.trim().toLowerCase() === 'none') {
@@ -4884,6 +4915,14 @@ export function initialOne(style, initial, name) {
         style.mask = { ...style.mask, [list]: initial.mask[list] };
         return;
     }
+    const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+    if (animation) {
+        style.animations = {
+            ...style.animations,
+            [animation]: initial.animations[animation],
+        };
+        return;
+    }
     const keys = INHERIT_TARGETS[name];
     if (!keys)
         return;
@@ -4897,6 +4936,15 @@ function inheritOne(style, parent, name) {
         style.mask = { ...style.mask, [list]: parent.mask[list] };
         return;
     }
+    // each longhand of the animation is a list of its own, as the mask's are
+    const animation = ANIMATION_LONGHANDS[PREFIXED_ALIASES[name] ?? name];
+    if (animation) {
+        style.animations = {
+            ...style.animations,
+            [animation]: parent.animations[animation],
+        };
+        return;
+    }
     const keys = INHERIT_TARGETS[name];
     if (!keys)
         return;
@@ -4947,6 +4995,8 @@ const INHERIT_TARGETS = {
     'border-image': ['borderImage'],
     mask: ['mask'],
     '-webkit-mask': ['mask'],
+    animation: ['animations'],
+    '-webkit-animation': ['animations'],
     'border-image-source': ['borderImage'],
     'border-image-slice': ['borderImage'],
     'border-image-width': ['borderImage'],