@lynx-js/types 3.3.2 → 3.4.3

package/CHANGELOG.md

@@ -1,28 +1,8 @@
 # CHANGELOG
 
-## 3.5.0
-- Add a new `flowIds` subfield to the TraceOption parameter in the Trace API to support one-to-many trace associations.
-- Refactor event definitions for improved IDE compatibility.
-
-## 3.4.9
-- Add more interface for `scroll-view`.
-
-## 3.4.8
-- Introduce `disabled` for input and textarea.
-
-## 3.4.6
-- fix `TextCodecHelper` defines.
-- Update `fetch` defines for chunk streaming.
-
-## 3.4.5
-- Complete the documentation for image related APIs.
-
-## 3.4.4
-- Complete the documentation for text related APIs.
-
 ## 3.4.3
 - Add `font-variation-settings`,`font-feature-settings` and `font-optical-sizing` CSS properties.
-- Add `experimental-recycle-available-item-before-layout` and `enable-dynamic-span-count` property for list.
+- Add `experimental-recycle-available-item-before-layout` property for list.
 
 ## 3.4.2
 - And `lynx.fetchBundle` api defines.
@@ -41,19 +21,24 @@
 
 - Introduce <input> and <textarea>
 
-## 3.3.2
-- SelectorQuery FieldsParams adds query attribute
-- Revert automatically generated cssTypes
+## 3.3.4
+
 - Add typing for the runtime interfaces.
-- Codegen longhand and shorthand properties from css_defines
+
+## 3.3.3
+
+- [Infra][Types] Codegen longhand and shorthand properties from css_defines
 - Add `experimental-recycle-sticky-item` and `sticky-buffer-count` for list
 - Add `experimental-update-sticky-for-diff` for list
 - Add ReloadBundleEntry to standardize the timing of reload behavior.
+
+## 3.3.2
+
 - Add typing for MessageEvent.
 
 ## 3.3.1
 
-- Codegen csstype.d.ts from css_defines
+- [Infra][Types] Codegen csstype.d.ts from css_defines
 - Rename `visibleCellsAfterUpdate` to `visibleItemAfterUpdate` for `list`
 - Rename `visibleCellsBeforeUpdate` to `visibleItemBeforeUpdate` for `list`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.3.2",
+  "version": "3.4.3",
   "description": "",
   "keywords": [
     "lynx",

package/types/background-thread/fetch.d.ts

@@ -74,10 +74,6 @@ export declare var Request: {
   new (input: RequestInfo | URL, init?: RequestInit): Request;
 };
 
-export interface LynxExtension {
-  useStreaming?: boolean;
-}
-
 /**
  * @description This Fetch API interface represents the response to a request.
  * @see https://developer.mozilla.org/docs/Web/API/Response
@@ -99,11 +95,6 @@ export interface RequestInit {
    * @since 2.18
    */
   method?: string;
-  /**
-   * @description Lynx extension, currently used for requesting chunk streaming
-   * @since 3.4
-   */
-  lynxExtension?: LynxExtension;
 }
 
 /**
@@ -142,12 +133,6 @@ export interface Response extends Body {
    * @since 2.18
    */
   readonly url: string;
-  /**
-   * @description body of ReadableStream
-   * @see https://developer.mozilla.org/docs/Web/API/Response/body
-   * @since 3.4
-   */
-  readonly body: ReadableStream;
   /**
    * @description clone()
    * @see https://developer.mozilla.org/docs/Web/API/Response/clone

package/types/background-thread/index.d.ts

@@ -9,4 +9,3 @@ export * from './nodes-ref';
 export * from './performance';
 export * from './native-modules';
 export * from './lynx-performance-entry';
-export * from './text-encoder-decoder';

package/types/background-thread/lynx.d.ts

@@ -7,7 +7,7 @@ import { AnimationElement } from './animation';
 import { BeforePublishEvent, GlobalEventEmitter, IntersectionObserver } from './event';
 import { SelectorQuery } from './nodes-ref';
 import { Performance } from './performance';
-import { Response, RequestInit } from './fetch';
+import { Response } from './fetch';
 
 export * from './fetch';
 

package/types/background-thread/nodes-ref.d.ts

@@ -47,7 +47,6 @@ export interface FieldsParams {
   index?: boolean;
   class?: boolean;
   attribute?: boolean;
-  query?:boolean;
 }
 
 export interface FieldsData {
@@ -57,7 +56,6 @@ export interface FieldsData {
   index: number;
   class: Array<string>;
   attribute: Record<string, unknown>;
-  query:SelectorQuery;
 }
 
 export type PathCallback = (data: PathData, status: { data: string; code: number }) => void;

package/types/background-thread/text-encoder-decoder.d.ts

@@ -1,16 +1,22 @@
-// Copyright 2025 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-export interface ITextCodecHelper {
-  /**
-   * @description decode array buffer to string
-   * @since 3.4
-   */
-  decode(input: ArrayBuffer): string;
-  /**
-   * @description encode string to array buffer
-   * @since 3.4
-   */
-  encode(input: string): ArrayBuffer;
+export interface TextEncoder {
+    encode(str: string): ArrayBuffer;
+    encoding: 'utf-8';
 }
+
+type TypedArray =
+  | Int8Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Int16Array
+  | Uint16Array
+  | Int32Array
+  | Uint32Array
+  | Float32Array
+  | Float64Array;
+
+export interface TextDecoder {
+    decode(buffer: ArrayBuffer | TypedArray | DataView): string;
+    encoding: 'utf-8';
+    fatal: false;
+    ignoreBOM: true;
+}

package/types/common/csstype.d.ts

@@ -2,106 +2,244 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import * as CSS from 'csstype';
+/**
+ * This file is auto-generated from CSS define files in the css_defines directory.
+ * Each property's type is determined by:
+ * 1. For enum types: Uses the values array from the CSS define file
+ * 2. For properties with keywords: Uses the keywords array as enum values, with (string & {}) for open-ended types
+ * 3. For other types: Uses string type
+ */
 
-export type Modify<T, R> = Omit<T, keyof R> & R;
+export type CSSProperties = {
+  // layout
+  flexFlow?: string;
+  marginInlineStart?: string;
+  marginInlineEnd?: string;
+  paddingInlineStart?: string;
+  paddingInlineEnd?: string;
+  gridTemplateColumns?: string;
+  gridTemplateRows?: string;
+  gridAutoColumns?: string;
+  gridAutoRows?: string;
+  gridColumnSpan?: number;
+  gridRowSpan?: number;
+  gridColumnStart?: string;
+  gridColumnEnd?: string;
+  gridRowStart?: string;
+  gridRowEnd?: string;
+  gridColumnGap?: string;
+  gridRowGap?: string;
+  gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+  maskPosition?: string;
+  display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
+  padding?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  margin?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  flex?: string;
+  position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: string;
+  flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  backgroundPosition?: string;
+
+  // typography
+  outline?: string;
+  outlineColor?: string;
+  outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  outlineWidth?: string;
+  textDecorationColor?: string;
+  linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
+  borderInlineStartColor?: string;
+  borderInlineEndColor?: string;
+  borderInlineStartWidth?: string;
+  borderInlineEndWidth?: string;
+  borderInlineStartStyle?: string;
+  borderInlineEndStyle?: string;
+  relativeAlignInlineStart?: string;
+  relativeAlignInlineEnd?: string;
+  relativeInlineStartOf?: number;
+  relativeInlineEndOf?: number;
+  insetInlineStart?: string;
+  insetInlineEnd?: string;
+  linearDirection?: string;
+  textIndent?: string;
+  textStroke?: string;
+  textStrokeWidth?: string;
+  textStrokeColor?: string;
+  XAutoFontSize?: string;
+  XAutoFontSizePresetSizes?: string;
+  fontVariationSettings?: string;
+  fontFeatureSettings?: string;
+  fontOpticalSizing?: 'none' | 'auto';
+  textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | 'justify';
+  lineHeight?: string;
+  textOverflow?: 'clip' | 'ellipsis';
+  fontSize?: string;
+  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  fontFamily?: string;
+  fontStyle?: 'normal' | 'italic' | 'oblique';
+  lineSpacing?: string;
+  linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  linearWeightSum?: number;
+  linearWeight?: number;
+  linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
+  linearLayoutGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'fill-vertical' | 'fill-horizontal' | 'center' | 'stretch' | 'start' | 'end';
+  adaptFontSize?: string;
+  textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
+  textShadow?: string;
+
+  // visual
+  borderTopColor?: string;
+  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';
+  backgroundRepeat?: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat' | 'round' | 'space';
+  backgroundSize?: string;
+  border?: string;
+  borderRight?: string;
+  borderLeft?: string;
+  borderTop?: string;
+  borderBottom?: string;
+  borderBottomColor?: string;
+  borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  borderRadius?: string;
+  backgroundClip?: 'border-box' | 'content-box' | 'padding-box' | 'text';
+  caretColor?: string;
+  borderTopLeftRadius?: string;
+  borderBottomLeftRadius?: string;
+  borderTopRightRadius?: string;
+  borderBottomRightRadius?: string;
+  borderStartStartRadius?: string;
+  borderEndStartRadius?: string;
+  borderStartEndRadius?: string;
+  borderEndEndRadius?: string;
+  borderWidth?: string;
+  borderLeftWidth?: string;
+  borderRightWidth?: string;
+  borderTopWidth?: string;
+  borderBottomWidth?: string;
+  XAnimationColorInterpolation?: 'auto' | 'sRGB' | 'linearRGB';
+  XHandleColor?: string;
+  color?: string;
+  background?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+  borderLeftColor?: string;
+  borderRightColor?: string;
+  backgroundImage?: string;
+
+  // animation
+  transition?: string;
+  transitionProperty?: 'none' | 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | 'width' | 'height' | 'background-color' | 'visibility' | 'left' | 'top' | 'right' | 'bottom' | 'transform' | 'all' | (string & {});
+  transitionDuration?: string;
+  transitionDelay?: string;
+  transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+  implicitAnimation?: string;
+  enterTransitionName?: string;
+  exitTransitionName?: string;
+  pauseTransitionName?: string;
+  resumeTransitionName?: string;
+  animation?: string;
+  animationName?: string;
+  animationDuration?: string;
+  animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+  animationDelay?: string;
+  animationIterationCount?: string;
+  animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+  animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+  animationPlayState?: 'paused' | 'running';
+  layoutAnimationCreateDuration?: string;
+  layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+  layoutAnimationCreateDelay?: string;
+  layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+  layoutAnimationDeleteDuration?: string;
+  layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+  layoutAnimationDeleteDelay?: string;
+  layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+  layoutAnimationUpdateDuration?: string;
+  layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+  layoutAnimationUpdateDelay?: string;
 
-export type CSSProperties = Modify<
-  CSS.Properties<string | number>,
-  {
-    position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
-    boxSizing?: 'border-box' | 'content-box' | 'auto';
-    display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
-    overflow?: 'hidden' | 'visible' | (string & {});
-    whiteSpace?: 'normal' | 'nowrap';
-    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';
-    textOverflow?: 'clip' | 'ellipsis';
-    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-    flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
-    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
-    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
-    fontStyle?: 'normal' | 'italic' | 'oblique';
-    transform?:
-      | 'translate'
-      | 'translateX'
-      | 'translateY'
-      | 'translateZ'
-      | 'translate'
-      | 'translate3d'
-      | 'translate3D'
-      | 'rotate'
-      | 'rotateX'
-      | 'rotateY'
-      | 'rotateZ'
-      | 'scale'
-      | 'scaleX'
-      | 'scaleY'
-      | (string & {});
-    animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
-    linearDirection?: 'column' | 'row' | 'column-reverse' | 'row-reverse';
-    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
-    linearWeight?: number;
-    linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
-    linearLayoutGravity?:
-      | 'none'
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right'
-      | 'center-vertical'
-      | 'center-horizontal'
-      | 'fill-vertical'
-      | 'fill-horizontal'
-      | 'center'
-      | 'stretch'
-      | 'start'
-      | 'end';
-    layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
-    layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
-    layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
-    visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
-    transitionProperty?:
-      | 'none'
-      | 'opacity'
-      | 'scaleX'
-      | 'scaleY'
-      | 'scaleXY'
-      | 'width'
-      | 'height'
-      | 'background-color'
-      | 'visibility'
-      | 'left'
-      | 'top'
-      | 'right'
-      | 'bottom'
-      | 'transform'
-      | 'all'
-      | (string & {});
-    transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    overflowX?: 'hidden' | 'visible' | (string & {});
-    overflowY?: 'hidden' | 'visible' | (string & {});
-    wordBreak?: 'normal' | 'break-all' | 'keep-all';
-    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
-    direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
-    relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
-    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
-    listMainAxisGap?: 'grayscale' | (string & {});
-    fontVariationSettings?: string;
-    fontFeatureSettings?: string;
-    fontOpticalSizing?: 'none' | 'auto';
-  }
->;
+  // other
+  top?: string;
+  visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
+  content?: string;
+  overflowX?: 'hidden' | 'visible' | (string & {});
+  overflowY?: 'hidden' | 'visible' | (string & {});
+  wordBreak?: 'normal' | 'break-all' | 'keep-all';
+  verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
+  direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
+  relativeId?: number;
+  relativeAlignTop?: string;
+  relativeAlignRight?: string;
+  relativeAlignBottom?: string;
+  relativeAlignLeft?: string;
+  relativeTopOf?: number;
+  relativeRightOf?: number;
+  relativeBottomOf?: number;
+  relativeLeftOf?: number;
+  relativeLayoutOnce?: string;
+  relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
+  zIndex?: number;
+  maskImage?: string;
+  justifyItems?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
+  justifySelf?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
+  filter?: string;
+  listMainAxisGap?: 'grayscale' | (string & {});
+  listCrossAxisGap?: string;
+  perspective?: 'number' | 'vw' | 'vh' | 'default' | 'px';
+  cursor?: string;
+  clipPath?: string;
+  mask?: string;
+  left?: string;
+  maskRepeat?: string;
+  maskClip?: string;
+  maskOrigin?: string;
+  maskSize?: string;
+  gap?: string;
+  columnGap?: string;
+  rowGap?: string;
+  imageRendering?: 'auto' | 'crisp-edges' | 'pixelated';
+  hyphens?: 'none' | 'manual' | 'auto';
+  XAppRegion?: 'none' | 'drag' | 'no-drag';
+  XHandleSize?: string;
+  offsetDistance?: number;
+  offsetPath?: string;
+  offsetRotate?: string;
+  opacity?: number;
+  overflow?: 'hidden' | 'visible' | (string & {});
+  height?: string;
+  width?: string;
+  maxWidth?: string;
+  minWidth?: string;
+  right?: string;
+  maxHeight?: string;
+  minHeight?: string;
+  bottom?: string;
+  whiteSpace?: 'normal' | 'nowrap';
+  letterSpacing?: string;
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
+  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
+  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
+  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
+  boxSizing?: 'border-box' | 'content-box' | 'auto';
+  transform?: 'translate' | 'translateX' | 'translateY' | 'translateZ' | 'translate' | 'translate3d' | 'translate3D' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | (string & {});
+  order?: number;
+  boxShadow?: string;
+  transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
+  aspectRatio?: string;
+};
 
 export type Shorthands = 
   // layout
@@ -126,8 +264,5 @@ export type Longhands =
   // other
   "top" | "visibility" | "content" | "overflowX" | "overflowY" | "wordBreak" | "verticalAlign" | "direction" | "relativeId" | "relativeAlignTop" | "relativeAlignRight" | "relativeAlignBottom" | "relativeAlignLeft" | "relativeTopOf" | "relativeRightOf" | "relativeBottomOf" | "relativeLeftOf" | "relativeLayoutOnce" | "relativeCenter" | "zIndex" | "maskImage" | "justifyItems" | "justifySelf" | "filter" | "listMainAxisGap" | "listCrossAxisGap" | "perspective" | "cursor" | "clipPath" | "left" | "maskRepeat" | "maskClip" | "maskOrigin" | "maskSize" | "columnGap" | "rowGap" | "imageRendering" | "hyphens" | "XAppRegion" | "XHandleSize" | "offsetDistance" | "offsetPath" | "offsetRotate" | "opacity" | "height" | "width" | "maxWidth" | "minWidth" | "right" | "maxHeight" | "minHeight" | "bottom" | "letterSpacing" | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "boxSizing" | "transform" | "order" | "boxShadow" | "transformOrigin" | "aspectRatio";
 
-// Since `Shorthands` and `Longhands` are auto generated, there may be properties
-// such as `gridColumnSpan` is not manually defined in `CSSProperties` yet.
-// Use `& keyof CSSProperties` to ensure only the defined keys are included to avoid type error.
-export type CSSPropertiesWithShorthands = Pick<CSSProperties, Shorthands & keyof CSSProperties>;
-export type CSSPropertiesWithLonghands = Pick<CSSProperties, Longhands & keyof CSSProperties>;
+export type CSSPropertiesWithShorthands = Pick<CSSProperties, Shorthands>;
+export type CSSPropertiesWithLonghands = Pick<CSSProperties, Longhands>;

package/types/common/element/element.d.ts

@@ -10,19 +10,17 @@ import { ImageProps, ImageUIMethods } from './image';
 import { ListItemProps, ListProps, ListRowProps, ListUIMethods } from './list';
 import { PageProps } from './page';
 import { ScrollViewProps, ScrollViewUIMethods } from './scroll-view';
-import { TextProps, TextUIMethods } from './text';
+import { TextProps } from './text';
 import { ViewProps } from './view';
 import { InputProps, InputUIMethods } from './input';
 import { TextAreaProps, TextAreaUIMethods } from './textarea';
 
-
 export interface UIMethods {
   'list': ListUIMethods;
   'scroll-view': ScrollViewUIMethods;
   'image': ImageUIMethods;
   'input': InputUIMethods;
   'textarea': TextAreaUIMethods;
-  'text': TextUIMethods;
 }
 
 type LynxComponentProps = ComponentProps;