@stylexjs/stylex 0.2.0-beta.11 → 0.2.0-beta.13

package/lib/StyleXSheet.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { Theme } from './StyleXTypes';
+type SheetOptions = Readonly<{
+  rootDarkTheme?: Theme;
+  rootTheme?: Theme;
+  supportsVariables?: boolean;
+}>;
+/**
+ * This class manages the CSS stylesheet for the page and the injection of new
+ * CSS rules.
+ */
+export declare class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME: string;
+  static DARK_MODE_CLASS_NAME: string;
+  constructor(opts: SheetOptions);
+  rootTheme: null | undefined | Theme;
+  rootDarkTheme: null | undefined | Theme;
+  supportsVariables: boolean;
+  rules: Array<string>;
+  injected: boolean;
+  tag: null | undefined | HTMLStyleElement;
+  ruleForPriority: Map<number, string>;
+  getVariableMatch(): RegExp;
+  isHeadless(): boolean;
+  getTag(): HTMLStyleElement;
+  getCSS(): string;
+  getRulePosition(rule: string): number;
+  getRuleCount(): number;
+  inject(): void;
+  injectTheme(): void;
+  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
+  delete(rule: string): void;
+  normalizeRule(rule: string): string;
+  getInsertPositionForPriority(priority: number): number;
+  insert(
+    rawLTRRule: string,
+    priority: number,
+    rawRTLRule: null | undefined | string
+  ): void;
+}
+export declare var styleSheet: StyleXSheet;

package/lib/StyleXSheet.js.flow

@@ -0,0 +1,49 @@
+/**
+ * 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 { Theme } from './StyleXTypes';
+
+// Stylesheet options
+type SheetOptions = $ReadOnly<{
+  rootDarkTheme?: Theme,
+  rootTheme?: Theme,
+  supportsVariables?: boolean,
+}>;
+
+/**
+ * This class manages the CSS stylesheet for the page and the injection of new
+ * CSS rules.
+ */
+declare export class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME: string;
+  static DARK_MODE_CLASS_NAME: string;
+  constructor(opts: SheetOptions): void;
+  rootTheme: ?Theme;
+  rootDarkTheme: ?Theme;
+  supportsVariables: boolean;
+  rules: Array<string>;
+  injected: boolean;
+  tag: ?HTMLStyleElement;
+  ruleForPriority: Map<number, string>;
+  getVariableMatch(): RegExp;
+  isHeadless(): boolean;
+  getTag(): HTMLStyleElement;
+  getCSS(): string;
+  getRulePosition(rule: string): number;
+  getRuleCount(): number;
+  inject(): void;
+  injectTheme(): void;
+  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
+  delete(rule: string): void;
+  normalizeRule(rule: string): string;
+  getInsertPositionForPriority(priority: number): number;
+  insert(rawLTRRule: string, priority: number, rawRTLRule: ?string): void;
+}
+
+declare export var styleSheet: StyleXSheet;

package/lib/StyleXTypes.d.ts

@@ -0,0 +1,174 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { CSSProperties } from './StyleXCSSTypes';
+export declare type StyleXClassNameFor<_K, _V> = string;
+export type StyleXClassNameForValue<V> = StyleXClassNameFor<unknown, V>;
+export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, unknown>;
+export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
+export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
+type CSSPropTypes = Readonly</**
+ * > 21 | type CSSPropTypes = $ReadOnly<$ObjMap<CSSProperties, () => StyleXClassName>>;
+ *      |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
+ **/
+any>;
+export type NestedCSSPropTypes = Readonly<
+  Omit<
+    CSSPropTypes,
+    keyof ({
+      ':active'?: StyleXClassName;
+      ':focus'?: StyleXClassName;
+      ':focus-visible'?: StyleXClassName;
+      ':hover'?: StyleXClassName;
+      ':disabled'?: StyleXClassName;
+      ':empty'?: StyleXClassName;
+      ':first-child'?: StyleXClassName;
+      ':last-child'?: StyleXClassName;
+      '::before'?: StyleXClassName;
+      '::after'?: StyleXClassName;
+      '::placeholder'?: StyleXClassName;
+      '::-webkit-scrollbar'?: StyleXClassName;
+      '@media (max-width: 564px)'?: StyleXClassName;
+      '@media (min-height: 700px)'?: StyleXClassName;
+      '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
+      '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
+      '@media (min-height: 790px)'?: StyleXClassName;
+      '@media (max-width: 648px)'?: StyleXClassName;
+      '@media (max-width: 899px)'?: StyleXClassName;
+      '@media (max-width: 900px)'?: StyleXClassName;
+      '@media (min-width: 900px)'?: StyleXClassName;
+      '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
+      '@media (max-width: 1099px)'?: StyleXClassName;
+      '@media (max-width: 1199px)'?: StyleXClassName;
+      '@media (max-width: 1259px)'?: StyleXClassName;
+      '@media (min-width: 1290px)'?: StyleXClassName;
+      '@media (max-width: 420px)'?: StyleXClassName;
+      '@media (max-width: 500px)'?: StyleXClassName;
+      '@media (pointer: coarse)'?: StyleXClassName;
+      '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
+      '@media print'?: StyleXClassName;
+      '@media (max-width: 767px)'?: StyleXClassName;
+      '@media (min-width: 768px)'?: StyleXClassName;
+      '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
+      '@media (max-width: 1024px)'?: StyleXClassName;
+      '@media (min-width: 1025px)'?: StyleXClassName;
+      '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
+      '@media (max-width: 1920px)'?: StyleXClassName;
+      '@media (min-width: 1921px)'?: StyleXClassName;
+      '@media (min-width: 1500px)'?: StyleXClassName;
+      '@media (min-width: 1800px)'?: StyleXClassName;
+      '@media (min-width: 2250px)'?: StyleXClassName;
+      '::-webkit-search-decoration'?: StyleXClassName;
+      '::-webkit-search-cancel-button'?: StyleXClassName;
+      '::-webkit-search-results-button'?: StyleXClassName;
+      '::-webkit-search-results-decoration'?: StyleXClassName;
+      '@media (min-width: 950px)'?: StyleXClassName;
+      '@media (min-width: 1440px)'?: StyleXClassName;
+      '@media (min-width: 1920px)'?: StyleXClassName;
+      '@media (min-width: 800px)'?: StyleXClassName;
+      '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
+    })
+  > & {
+    ':active'?: StyleXClassName;
+    ':focus'?: StyleXClassName;
+    ':focus-visible'?: StyleXClassName;
+    ':hover'?: StyleXClassName;
+    ':disabled'?: StyleXClassName;
+    ':empty'?: StyleXClassName;
+    ':first-child'?: StyleXClassName;
+    ':last-child'?: StyleXClassName;
+    '::before'?: StyleXClassName;
+    '::after'?: StyleXClassName;
+    '::placeholder'?: StyleXClassName;
+    '::-webkit-scrollbar'?: StyleXClassName;
+    '@media (max-width: 564px)'?: StyleXClassName;
+    '@media (min-height: 700px)'?: StyleXClassName;
+    '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
+    '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
+    '@media (min-height: 790px)'?: StyleXClassName;
+    '@media (max-width: 648px)'?: StyleXClassName;
+    '@media (max-width: 899px)'?: StyleXClassName;
+    '@media (max-width: 900px)'?: StyleXClassName;
+    '@media (min-width: 900px)'?: StyleXClassName;
+    '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
+    '@media (max-width: 1099px)'?: StyleXClassName;
+    '@media (max-width: 1199px)'?: StyleXClassName;
+    '@media (max-width: 1259px)'?: StyleXClassName;
+    '@media (min-width: 1290px)'?: StyleXClassName;
+    '@media (max-width: 420px)'?: StyleXClassName;
+    '@media (max-width: 500px)'?: StyleXClassName;
+    '@media (pointer: coarse)'?: StyleXClassName;
+    '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
+    '@media print'?: StyleXClassName;
+    '@media (max-width: 767px)'?: StyleXClassName;
+    '@media (min-width: 768px)'?: StyleXClassName;
+    '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
+    '@media (max-width: 1024px)'?: StyleXClassName;
+    '@media (min-width: 1025px)'?: StyleXClassName;
+    '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
+    '@media (max-width: 1920px)'?: StyleXClassName;
+    '@media (min-width: 1921px)'?: StyleXClassName;
+    '@media (min-width: 1500px)'?: StyleXClassName;
+    '@media (min-width: 1800px)'?: StyleXClassName;
+    '@media (min-width: 2250px)'?: StyleXClassName;
+    '::-webkit-search-decoration'?: StyleXClassName;
+    '::-webkit-search-cancel-button'?: StyleXClassName;
+    '::-webkit-search-results-button'?: StyleXClassName;
+    '::-webkit-search-results-decoration'?: StyleXClassName;
+    '@media (min-width: 950px)'?: StyleXClassName;
+    '@media (min-width: 1440px)'?: StyleXClassName;
+    '@media (min-width: 1920px)'?: StyleXClassName;
+    '@media (min-width: 800px)'?: StyleXClassName;
+    '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
+  }
+>;
+export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
+export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
+  false | (null | undefined | T)
+>;
+export type XStyleWithout<T extends { [$$Key$$: string]: void }> = XStyle<
+  Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
+>;
+export type Styles = Readonly<{ [namespace: string]: Style }>;
+export type Style = Readonly</**
+ * > 95 | export type Style = $ReadOnly<{
+ *      |                               ^
+ * > 96 |   [pseudo: string]: CSSProperties,
+ *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * > 97 |   ...CSSProperties,
+ *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * > 98 |   ...
+ *      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ * > 99 | }>;
+ *      | ^^ Unsupported feature: Translating "object types with spreads, indexers and/or call properties at the same time" is currently not supported.
+ **/
+any>;
+export type Rules = Style | CSSProperties;
+export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
+export type Theme = Readonly<{ [constantName: string]: string }>;
+type MapCSSValueToClassName = <K, V>(
+  $$PARAM_0$$: K,
+  $$PARAM_1$$: V
+) => StyleXClassNameFor<K, V>;
+export type MapNamespace<CSS extends {}> =
+  /**
+   * > 110 | export type MapNamespace<CSS: { ... }> = $ObjMapi<CSS, MapCSSValueToClassName>;
+   *       |                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapi" is currently not supported.
+   **/
+  any;
+export type MapNamespaces = <CSS extends {}>(
+  $$PARAM_0$$: CSS
+) => MapNamespace<CSS>;
+export type Stylex$Create = <S extends {}>(
+  styles: S
+) => Readonly</**
+ * > 121 | ) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
+ *       |                ^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
+ **/
+any>;

package/lib/StyleXTypes.js.flow

@@ -0,0 +1,121 @@
+/**
+ * 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 { CSSProperties } from './StyleXCSSTypes';
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare export opaque type StyleXClassNameFor<+_K, +_V>: string;
+export type StyleXClassNameForValue<+V> = StyleXClassNameFor<mixed, V>;
+export type StyleXClassNameForKey<+K> = StyleXClassNameFor<K, mixed>;
+export type StyleXClassName = StyleXClassNameFor<mixed, mixed>;
+
+// Type for arbitrarily nested Array.
+export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
+
+type CSSPropTypes = $ReadOnly<$ObjMap<CSSProperties, () => StyleXClassName>>;
+export type NestedCSSPropTypes = $ReadOnly<{
+  ...$Exact<CSSPropTypes>,
+  // NOTE: the actual type should be nested objects.
+  // fix after the types in stylex.js are fixed.
+  ':active'?: StyleXClassName,
+  ':focus'?: StyleXClassName,
+  ':focus-visible'?: StyleXClassName,
+  ':hover'?: StyleXClassName,
+  ':disabled'?: StyleXClassName,
+  ':empty'?: StyleXClassName,
+  ':first-child'?: StyleXClassName,
+  ':last-child'?: StyleXClassName,
+  '::before'?: StyleXClassName,
+  '::after'?: StyleXClassName,
+  '::placeholder'?: StyleXClassName,
+  '::-webkit-scrollbar'?: StyleXClassName,
+  // Find a better way to do this. Being forced to add every media query.
+  '@media (max-width: 564px)'?: StyleXClassName,
+  '@media (min-height: 700px)'?: StyleXClassName,
+  '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName,
+  '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName,
+  '@media (min-height: 790px)'?: StyleXClassName,
+  '@media (max-width: 648px)'?: StyleXClassName,
+  '@media (max-width: 899px)'?: StyleXClassName,
+  '@media (max-width: 900px)'?: StyleXClassName,
+  '@media (min-width: 900px)'?: StyleXClassName,
+  '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName,
+  '@media (max-width: 1099px)'?: StyleXClassName,
+  '@media (max-width: 1199px)'?: StyleXClassName,
+  '@media (max-width: 1259px)'?: StyleXClassName,
+  '@media (min-width: 1290px)'?: StyleXClassName,
+  '@media (max-width: 420px)'?: StyleXClassName,
+  '@media (max-width: 500px)'?: StyleXClassName,
+  '@media (pointer: coarse)'?: StyleXClassName,
+  '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName,
+  '@media print'?: StyleXClassName,
+  // Media queries used for Oculus Web Design Systems (OCDS components).
+  '@media (max-width: 767px)'?: StyleXClassName,
+  '@media (min-width: 768px)'?: StyleXClassName,
+  '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName,
+  '@media (max-width: 1024px)'?: StyleXClassName,
+  '@media (min-width: 1025px)'?: StyleXClassName,
+  '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName,
+  '@media (max-width: 1920px)'?: StyleXClassName,
+  '@media (min-width: 1921px)'?: StyleXClassName,
+  // Media queries used for Intern Data Products
+  '@media (min-width: 1500px)'?: StyleXClassName,
+  '@media (min-width: 1800px)'?: StyleXClassName,
+  '@media (min-width: 2250px)'?: StyleXClassName,
+  // webkit styles used for Search in Safari
+  '::-webkit-search-decoration'?: StyleXClassName,
+  '::-webkit-search-cancel-button'?: StyleXClassName,
+  '::-webkit-search-results-button'?: StyleXClassName,
+  '::-webkit-search-results-decoration'?: StyleXClassName,
+  // Media queries used for the logged out header
+  '@media (min-width: 950px)'?: StyleXClassName,
+  // Media queries used for bizweb
+  '@media (min-width: 1440px)'?: StyleXClassName,
+  '@media (min-width: 1920px)'?: StyleXClassName,
+  // Media queries used for fbai
+  '@media (min-width: 800px)'?: StyleXClassName,
+  // Media queries used for messengerkidsdotcom
+  '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName,
+}>;
+
+export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
+export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<false | ?T>;
+export type XStyleWithout<+T: { [string]: void, ... }> = XStyle<
+  $ReadOnly<$Rest<NestedCSSPropTypes, $Exact<T>>>
+>;
+
+export type Styles = $ReadOnly<{ [namespace: string]: Style, ... }>;
+
+export type Style = $ReadOnly<{
+  [pseudo: string]: CSSProperties,
+  ...CSSProperties,
+  ...
+}>;
+
+export type Rules = Style | CSSProperties;
+
+export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
+
+export type Theme = $ReadOnly<{ [constantName: string]: string, ... }>;
+
+// type CSSValue = string | number | $ReadOnlyArray<mixed>;
+type MapCSSValueToClassName = <K, V>(K, V) => StyleXClassNameFor<K, V>;
+
+export type MapNamespace<CSS: { ... }> = $ObjMapi<CSS, MapCSSValueToClassName>;
+// NOTE: Flow was confused by nested ObjMap so for now, nested styles
+// are typed incorrectly to be a string. This won't matter for the time being.
+// type MapStyleToClassName = (<Rule: {}>(
+//   Rule,
+// ) => $ObjMap<Rule, MapCSSValueToClassName>) &
+//   MapCSSValueToClassName;
+export type MapNamespaces = <CSS: { ... }>(CSS) => MapNamespace<CSS>;
+
+export type Stylex$Create = <S: { ... }>(
+  styles: S
+) => $ReadOnly<$ObjMap<S, MapNamespaces>>;

package/lib/native/CSSCustomPropertyValue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export declare function isCustomPropertyValue(value: unknown): boolean;
+export declare class CSSCustomPropertyValue {
+  name: string;
+  constructor(value: string);
+}

package/lib/native/CSSCustomPropertyValue.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+
+declare export function isCustomPropertyValue(value: mixed): boolean;
+
+declare export class CSSCustomPropertyValue {
+  name: string;
+  constructor(value: string): void;
+}

package/lib/native/CSSLengthUnitValue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
+export declare class CSSLengthUnitValue {
+  static parse(inp: string): CSSLengthUnitValue | null;
+  value: number;
+  unit: CSSLengthUnitType;
+  constructor(value: number, unit: CSSLengthUnitType);
+  resolvePixelValue(
+    viewportWidth: number,
+    viewportHeight: number,
+    fontScale: number,
+    inheritedFontSize: null | undefined | number
+  ): number;
+}

package/lib/native/CSSLengthUnitValue.js.flow

@@ -0,0 +1,24 @@
+/**
+ * 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
+ */
+
+type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
+
+// TODO: this only works on simple values
+declare export class CSSLengthUnitValue {
+  static parse(inp: string): CSSLengthUnitValue | null;
+  value: number;
+  unit: CSSLengthUnitType;
+  constructor(value: number, unit: CSSLengthUnitType): void;
+  resolvePixelValue(
+    viewportWidth: number,
+    viewportHeight: number,
+    fontScale: number,
+    inheritedFontSize: ?number
+  ): number;
+}

package/lib/native/CSSMediaQuery.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export type MatchObject = {
+  width: number;
+  height: number;
+  direction: 'ltr' | 'rtl';
+};
+export declare class CSSMediaQuery {
+  static isMediaQueryString(inp: string): boolean;
+  static resolveMediaQueries(
+    styleObj: { readonly [$$Key$$: string]: unknown },
+    matchObj: MatchObject
+  ): { [$$Key$$: string]: unknown };
+  query: string;
+  matchedStyle: { [$$Key$$: string]: unknown };
+  constructor(query: string, matchedStyle: { [$$Key$$: string]: unknown });
+  resolve(matchObject: MatchObject): { [$$Key$$: string]: unknown };
+}

package/lib/native/CSSMediaQuery.js.flow

@@ -0,0 +1,26 @@
+/**
+ * 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
+ */
+
+export type MatchObject = {
+  width: number,
+  height: number,
+  direction: 'ltr' | 'rtl',
+};
+
+declare export class CSSMediaQuery {
+  static isMediaQueryString(inp: string): boolean;
+  static resolveMediaQueries(
+    styleObj: { +[string]: mixed },
+    matchObj: MatchObject
+  ): { [string]: mixed };
+  query: string;
+  matchedStyle: { [string]: mixed };
+  constructor(query: string, matchedStyle: { [string]: mixed }): void;
+  resolve(matchObject: MatchObject): { [string]: mixed };
+}

package/lib/native/__tests__/__snapshots__/stylex-test.js.snap

@@ -365,6 +365,16 @@ exports[`styles vertical-align: top 1`] = `
 }
 `;
 
+exports[`unsupported style properties "filter" 1`] = `{}`;
+
+exports[`unsupported style properties "transitionProperty" passthrough 1`] = `
+{
+  "style": {
+    "transitionProperty": "opacity",
+  },
+}
+`;
+
 exports[`unsupported style values calc 1`] = `{}`;
 
 exports[`unsupported style values inherit 1`] = `{}`;

package/lib/native/__tests__/stylex-test.js

@@ -409,6 +409,40 @@ describe('media queries', () => {
     });
   });
 });
+describe('unsupported style properties', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error');
+    console.error.mockImplementation(() => {});
+  });
+  afterEach(() => {
+    console.error.mockRestore();
+  });
+  test('"filter"', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        filter: 'blur(1px)'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
+    expect(console.error).toHaveBeenCalled();
+  });
+  test('"transitionProperty" passthrough', () => {
+    const {
+      underTest
+    } = _stylex.stylex.create({
+      underTest: {
+        transitionProperty: 'opacity'
+      }
+    });
+    expect(_stylex.stylex.spread(underTest, {
+      ...mockOptions,
+      passthroughProperties: ['transitionProperty']
+    })).toMatchSnapshot();
+    expect(console.error).not.toHaveBeenCalled();
+  });
+});
 describe('unsupported style values', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error');

package/lib/native/errorMsg.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export declare function errorMsg(msg: string): void;

package/lib/native/errorMsg.js.flow

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+
+declare export function errorMsg(msg: string): void;

package/lib/native/flattenStyle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+type InlineStyle = { [key: string]: unknown };
+type StylesArray<T> = T | ReadonlyArray<StylesArray<T>>;
+type Styles = StylesArray<InlineStyle | false | void | null>;
+export declare function flattenStyle(...styles: Array<Styles>): {
+  [key: string]: any;
+};

package/lib/native/flattenStyle.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+type InlineStyle = {
+  [key: string]: mixed,
+};
+
+type StylesArray<+T> = T | $ReadOnlyArray<StylesArray<T>>;
+
+type Styles = StylesArray<InlineStyle | false | void | null>;
+
+declare export function flattenStyle(...styles: Array<Styles>): {
+  [key: string]: any,
+};

package/lib/native/parseShadow.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+type ParsedShadow = {
+  inset: boolean;
+  offsetX: number | string;
+  offsetY: number | string;
+  blurRadius: number | string;
+  spreadRadius: number | string;
+  color: string | null;
+};
+export declare function parseShadow(str: string): Array<ParsedShadow>;