@stylexjs/shared 0.2.0-beta.8 → 0.3.0

package/lib/preprocess-rules/property-specificity.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: _value => {
+    throw new Error('animation is not supported');
+  },
+  background: _value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: _rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: _rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  borderBlock: _rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  borderTop: _rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  borderInlineEnd: _rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  borderRight: _rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  borderBottom: _rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  borderInlineStart: _rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  borderLeft: _rawValue => {
+    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
+  }
+};
+const aliases = {
+  borderHorizontal: shorthands.borderInline,
+  borderVertical: shorthands.borderBlock,
+  borderBlockStart: shorthands.borderTop,
+  borderEnd: shorthands.borderInlineEnd,
+  borderBlockEnd: shorthands.borderBottom,
+  borderStart: shorthands.borderInlineStart,
+  blockSize: val => [['height', val]],
+  inlineSize: val => [['width', val]],
+  minBlockSize: val => [['minHeight', val]],
+  minInlineSize: val => [['minWidth', val]],
+  maxBlockSize: val => [['maxHeight', val]],
+  maxInlineSize: val => [['maxWidth', val]],
+  borderHorizontalWidth: val => [['borderInlineWidth', val]],
+  borderHorizontalStyle: val => [['borderInlineStyle', val]],
+  borderHorizontalColor: val => [['borderInlineColor', val]],
+  borderVerticalWidth: val => [['borderBlockWidth', val]],
+  borderVerticalStyle: val => [['borderBlockStyle', val]],
+  borderVerticalColor: val => [['borderBlockColor', val]],
+  borderBlockStartColor: value => [['borderTopColor', value]],
+  borderBlockEndColor: value => [['borderBottomColor', value]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', value]],
+  borderStartColor: val => [['borderInlineStartColor', val]],
+  borderEndColor: val => [['borderInlineEndColor', val]],
+  borderStartStyle: val => [['borderInlineStartStyle', val]],
+  borderEndStyle: val => [['borderInlineEndStyle', val]],
+  borderStartWidth: val => [['borderInlineStartWidth', val]],
+  borderEndWidth: val => [['borderInlineEndWidth', val]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  containIntrinsicBlockSize: value => [['containIntrinsicHeight', value]],
+  containIntrinsicInlineSize: value => [['containIntrinsicWidth', value]],
+  marginBlockStart: value => [['marginTop', value]],
+  marginBlockEnd: value => [['marginBottom', value]],
+  marginStart: val => [['marginInlineStart', val]],
+  marginEnd: val => [['marginInlineEnd', val]],
+  marginHorizontal: val => [['marginInline', val]],
+  marginVertical: val => [['marginBlock', val]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: val => [['paddingInlineStart', val]],
+  paddingEnd: val => [['paddingInlineEnd', val]],
+  paddingHorizontal: val => [['paddingInline', val]],
+  paddingVertical: val => [['paddingBlock', val]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: val => [['insetInlineStart', val]],
+  end: val => [['insetInlineEnd', val]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = exports.default = expansions;

package/lib/preprocess-rules/property-specificity.js.flow

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type { TStyleValue } from '../common-types';
+
+/// # Handle CSS shorthands in a React Native compatible way.
+///
+/// This means:
+/// - disallowing certain properties altogether by throwing errors
+/// - disallowing multiple values within many shorthands
+/// - Treating certain non-standard properties as aliases for real CSS properties
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare const shorthands: {
+  all: (_: TStyleValue) => TReturn,
+  animation: (_value: TStyleValue) => TReturn,
+  background: (_value: TStyleValue) => TReturn,
+  border: (_rawValue: TStyleValue) => TReturn,
+  borderInline: (_rawValue: TStyleValue) => TReturn,
+  borderBlock: (_rawValue: TStyleValue) => TReturn,
+  borderTop: (_rawValue: TStyleValue) => TReturn,
+  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
+  borderRight: (_rawValue: TStyleValue) => TReturn,
+  borderBottom: (_rawValue: TStyleValue) => TReturn,
+  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
+  borderLeft: (_rawValue: TStyleValue) => TReturn,
+};
+
+declare const aliases: {
+  borderHorizontal: $FlowFixMe,
+  borderVertical: $FlowFixMe,
+  borderBlockStart: $FlowFixMe,
+  borderEnd: $FlowFixMe,
+  borderBlockEnd: $FlowFixMe,
+  borderStart: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderHorizontalWidth: (val: TStyleValue) => TReturn,
+  borderHorizontalStyle: (val: TStyleValue) => TReturn,
+  borderHorizontalColor: (val: TStyleValue) => TReturn,
+  borderVerticalWidth: (val: TStyleValue) => TReturn,
+  borderVerticalStyle: (val: TStyleValue) => TReturn,
+  borderVerticalColor: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (value: TStyleValue) => TReturn,
+  borderBlockEndColor: (value: TStyleValue) => TReturn,
+  borderBlockStartStyle: (value: TStyleValue) => TReturn,
+  borderBlockEndStyle: (value: TStyleValue) => TReturn,
+  borderBlockStartWidth: (value: TStyleValue) => TReturn,
+  borderBlockEndWidth: (value: TStyleValue) => TReturn,
+  borderStartColor: (val: TStyleValue) => TReturn,
+  borderEndColor: (val: TStyleValue) => TReturn,
+  borderStartStyle: (val: TStyleValue) => TReturn,
+  borderEndStyle: (val: TStyleValue) => TReturn,
+  borderStartWidth: (val: TStyleValue) => TReturn,
+  borderEndWidth: (val: TStyleValue) => TReturn,
+  borderTopStartRadius: (value: TStyleValue) => TReturn,
+  borderTopEndRadius: (value: TStyleValue) => TReturn,
+  borderBottomStartRadius: (value: TStyleValue) => TReturn,
+  borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn,
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn,
+  marginBlockStart: (value: TStyleValue) => TReturn,
+  marginBlockEnd: (value: TStyleValue) => TReturn,
+  marginStart: (val: TStyleValue) => TReturn,
+  marginEnd: (val: TStyleValue) => TReturn,
+  marginHorizontal: (val: TStyleValue) => TReturn,
+  marginVertical: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn,
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
+  paddingStart: (val: TStyleValue) => TReturn,
+  paddingEnd: (val: TStyleValue) => TReturn,
+  paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingVertical: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  insetBlockStart: (value: TStyleValue) => TReturn,
+  insetBlockEnd: (value: TStyleValue) => TReturn,
+  start: (val: TStyleValue) => TReturn,
+  end: (val: TStyleValue) => TReturn,
+};
+
+declare export default $ReadOnly<{
+  ...typeof shorthands,
+  ...typeof aliases,
+}>;

package/lib/properties/CSS Animations.json

@@ -0,0 +1,445 @@
+[
+  {
+    "syntax": "<single-animation>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-iteration-count",
+      "animation-direction",
+      "animation-fill-mode",
+      "animation-play-state",
+      "animation-timeline"
+    ],
+    "appliesto": "allElements",
+    "computed": [
+      "animation-name",
+      "animation-duration",
+      "animation-timing-function",
+      "animation-delay",
+      "animation-direction",
+      "animation-iteration-count",
+      "animation-fill-mode",
+      "animation-play-state",
+      "animation-timeline"
+    ],
+    "order": "perGrammar",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation",
+    "property": "animation",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-composition>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "replace",
+    "appliesto": "allElements",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-composition",
+    "property": "animation-composition",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<time>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "0s",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-delay",
+    "property": "animation-delay",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-direction>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "normal",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-direction",
+    "property": "animation-direction",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<time>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "0s",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-duration",
+    "property": "animation-duration",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-fill-mode>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-fill-mode",
+    "property": "animation-fill-mode",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-iteration-count>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "1",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-iteration-count",
+    "property": "animation-iteration-count",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ none | <keyframes-name> ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-name",
+    "property": "animation-name",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-play-state>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "running",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-play-state",
+    "property": "animation-play-state",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "appliesto": "allElements",
+    "computed": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range",
+    "property": "animation-range",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "normal",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range-end",
+    "property": "animation-range-end",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "normal",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range-start",
+    "property": "animation-range-start",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<easing-function>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "ease",
+    "appliesto": "allElementsAndPseudos",
+    "computed": "asSpecified",
+    "order": "uniqueOrder",
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timing-function",
+    "property": "animation-timing-function",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "<single-animation-timeline>#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "auto",
+    "appliesto": "allElements",
+    "computed": "listEachItemIdentifierOrNoneAuto",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timeline",
+    "property": "animation-timeline",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": [
+      "scroll-timeline-name",
+      "scroll-timeline-axis"
+    ],
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "scroll-timeline-name",
+      "scroll-timeline-axis"
+    ],
+    "appliesto": "scrollContainers",
+    "computed": [
+      "scroll-timeline-name",
+      "scroll-timeline-axis"
+    ],
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline",
+    "property": "scroll-timeline",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ block | inline | x | y ]#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "block",
+    "appliesto": "scrollContainers",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-axis",
+    "property": "scroll-timeline-axis",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "none | <dashed-ident>#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "scrollContainers",
+    "computed": "noneOrOrderedListOfIdentifiers",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-name",
+    "property": "scroll-timeline-name",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "none | <dashed-ident>#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElements",
+    "computed": "noneOrOrderedListOfIdentifiers",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-scope",
+    "property": "timeline-scope",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ <'view-timeline-name'> <'view-timeline-axis'>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "appliesto": "allElements",
+    "computed": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline",
+    "property": "view-timeline",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ block | inline | x | y ]#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "block",
+    "appliesto": "allElements",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-axis",
+    "property": "view-timeline-axis",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "[ [ auto | <length-percentage> ]{1,2} ]#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "relativeToCorrespondingDimensionOfRelevantScrollport",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "auto",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfPairsOfAutoOrLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-inset",
+    "property": "view-timeline-inset",
+    "group": "CSS Animations"
+  },
+  {
+    "syntax": "none | <dashed-ident>#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElements",
+    "computed": "noneOrOrderedListOfIdentifiers",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-name",
+    "property": "view-timeline-name",
+    "group": "CSS Animations"
+  }
+]