From 43aaa00cfa900881da237b9ff3988e64d19a81a5 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Jul 2025 10:34:02 -0700 Subject: [PATCH 1/2] Avoid calling `super()` on native This is currently a source of lost performance on native. --- .../src/native/stylex/typed-om/CSSUnparsedValue.js | 5 ++--- .../src/native/stylex/typed-om/CSSVariableReferenceValue.js | 6 ++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js index 0389d3a8..901c283e 100644 --- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js +++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js @@ -8,7 +8,6 @@ */ import valueParser from 'postcss-value-parser'; -import { CSSStyleValue } from './CSSStyleValue'; import { CSSVariableReferenceValue } from './CSSVariableReferenceValue'; import { errorMsg, warnMsg } from '../../../shared/logUtils'; @@ -39,7 +38,7 @@ function splitComponentValueListByComma( const memoizedValues = new Map(); // https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue -export class CSSUnparsedValue extends CSSStyleValue { +export class CSSUnparsedValue /*extends CSSStyleValue*/ { static #resolveVariableName(input: PostCSSValueASTNode[]): string | null { const cleanedInput = input.filter((i) => i.type === 'word'); if (cleanedInput.length !== 1) { @@ -148,7 +147,7 @@ export class CSSUnparsedValue extends CSSStyleValue { #tokens: CSSUnparsedSegment[]; constructor(members: CSSUnparsedSegment[]) { - super(); + // No super() call because it's slow in Hermes this.#tokens = members; } diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js index 50e68c3f..7333458f 100644 --- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js +++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js @@ -9,10 +9,8 @@ import type { CSSUnparsedValue } from './CSSUnparsedValue'; -import { CSSStyleValue } from './CSSStyleValue'; - // https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue -export class CSSVariableReferenceValue extends CSSStyleValue { +export class CSSVariableReferenceValue /*extends CSSStyleValue*/ { // https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string static #validateVariableName(variable: string): void { if (!variable.startsWith('--')) { @@ -27,7 +25,7 @@ export class CSSVariableReferenceValue extends CSSStyleValue { if (__DEV__) { CSSVariableReferenceValue.#validateVariableName(variable); } - super(); + // No super() call because it's slow in Hermes this.#variable = variable; this.#fallback = fallback ?? null; } From 8c4190392aa3b839f9c10db9067f67185378d792 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 24 Jul 2025 10:36:46 -0700 Subject: [PATCH 2/2] Avoid private class fields This is currently a source of lost performance on native. --- .../stylex/typed-om/CSSUnparsedValue.js | 24 +++++++++---------- .../typed-om/CSSVariableReferenceValue.js | 22 ++++++++--------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js index 901c283e..048eee1f 100644 --- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js +++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSUnparsedValue.js @@ -39,7 +39,7 @@ const memoizedValues = new Map(); // https://drafts.css-houdini.org/css-typed-om-1/#cssunparsedvalue export class CSSUnparsedValue /*extends CSSStyleValue*/ { - static #resolveVariableName(input: PostCSSValueASTNode[]): string | null { + static _resolveVariableName(input: PostCSSValueASTNode[]): string | null { const cleanedInput = input.filter((i) => i.type === 'word'); if (cleanedInput.length !== 1) { return null; @@ -47,7 +47,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ { return valueParser.stringify(cleanedInput[0]); } - static #resolveUnparsedValue( + static _resolveUnparsedValue( input: PostCSSValueASTNode[], depth: number = 0 ): CSSUnparsedValue { @@ -77,7 +77,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ { if (currentValue.type === 'function') { if (currentValue.value === 'var') { const args = splitComponentValueListByComma(currentValue.nodes); - const variableName = CSSUnparsedValue.#resolveVariableName(args[0]); + const variableName = CSSUnparsedValue._resolveVariableName(args[0]); if (variableName == null) { if (__DEV__) { warnMsg( @@ -91,7 +91,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ { const fallbackValue = args[1] != null - ? CSSUnparsedValue.#resolveUnparsedValue(args[1], depth + 1) + ? CSSUnparsedValue._resolveUnparsedValue(args[1], depth + 1) : undefined; try { @@ -109,7 +109,7 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ { } else { // stringify the function manually but still attempt to resolve the args appendString(`${currentValue.value}(`); - const functionArgs = CSSUnparsedValue.#resolveUnparsedValue( + const functionArgs = CSSUnparsedValue._resolveUnparsedValue( currentValue.nodes, depth + 1 ); @@ -139,32 +139,32 @@ export class CSSUnparsedValue /*extends CSSStyleValue*/ { } const componentValueList = valueParser(input).nodes; const parsedValue = - CSSUnparsedValue.#resolveUnparsedValue(componentValueList); + CSSUnparsedValue._resolveUnparsedValue(componentValueList); memoizedValues.set(input, parsedValue); return parsedValue; } - #tokens: CSSUnparsedSegment[]; + _tokens: CSSUnparsedSegment[]; constructor(members: CSSUnparsedSegment[]) { // No super() call because it's slow in Hermes - this.#tokens = members; + this._tokens = members; } get(index: number): CSSUnparsedSegment { - return this.#tokens[index]; + return this._tokens[index]; } get size(): number { - return this.#tokens.length; + return this._tokens.length; } values(): Iterator { - return this.#tokens.values(); + return this._tokens.values(); } toString(): string { - return this.#tokens + return this._tokens .map((t) => t.toString()) .join('') .trim(); diff --git a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js index 7333458f..e0ca3bc8 100644 --- a/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js +++ b/packages/react-strict-dom/src/native/stylex/typed-om/CSSVariableReferenceValue.js @@ -12,39 +12,39 @@ import type { CSSUnparsedValue } from './CSSUnparsedValue'; // https://drafts.css-houdini.org/css-typed-om-1/#cssvariablereferencevalue export class CSSVariableReferenceValue /*extends CSSStyleValue*/ { // https://drafts.css-houdini.org/css-typed-om-1/#custom-property-name-string - static #validateVariableName(variable: string): void { + static _validateVariableName(variable: string): void { if (!variable.startsWith('--')) { throw new TypeError(`Invalid custom property name: ${variable}`); } } - #variable: string; - #fallback: CSSUnparsedValue | null; + _variable: string; + _fallback: CSSUnparsedValue | null; constructor(variable: string, fallback?: CSSUnparsedValue) { if (__DEV__) { - CSSVariableReferenceValue.#validateVariableName(variable); + CSSVariableReferenceValue._validateVariableName(variable); } // No super() call because it's slow in Hermes - this.#variable = variable; - this.#fallback = fallback ?? null; + this._variable = variable; + this._fallback = fallback ?? null; } get variable(): string { - return this.#variable; + return this._variable; } set variable(variable: string): void { - this.#variable = variable; + this._variable = variable; } get fallback(): CSSUnparsedValue | null { - return this.#fallback; + return this._fallback; } toString(): string { - return `var(${this.#variable}${ - this.#fallback ? `, ${this.#fallback.toString()}` : '' + return `var(${this._variable}${ + this._fallback ? `, ${this._fallback.toString()}` : '' })`; } }