@stylexjs/stylex 0.2.0-beta.8 → 0.3.0

package/lib/StyleXTypes.js.flow

@@ -0,0 +1,184 @@
+/**
+ * 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 CSSPropertiesWithExtras = $ReadOnly<{
+  ...CSSProperties,
+  '::before'?: CSSProperties,
+  '::after'?: CSSProperties,
+  '::backdrop'?: CSSProperties,
+  '::cue'?: CSSProperties,
+  '::cue-region'?: CSSProperties,
+  '::first-letter'?: CSSProperties,
+  '::first-line'?: CSSProperties,
+  '::file-selector-button'?: CSSProperties,
+  '::grammar-error'?: CSSProperties,
+  '::marker'?: CSSProperties,
+  '::placeholder'?: CSSProperties,
+  '::selection'?: CSSProperties,
+  '::spelling-error'?: CSSProperties,
+  '::target-text'?: CSSProperties,
+  '::-webkit-scrollbar'?: CSSProperties,
+  // webkit styles used for Search in Safari
+  '::-webkit-search-decoration'?: CSSProperties,
+  '::-webkit-search-cancel-button'?: CSSProperties,
+  '::-webkit-search-results-button'?: CSSProperties,
+  '::-webkit-search-results-decoration'?: CSSProperties,
+}>;
+
+export type NestedCSSPropTypes = $ReadOnly<{
+  [Key in keyof CSSPropertiesWithExtras]?: StyleXClassNameForKey<Key>,
+}>;
+
+export type StyleXSingleStyle = false | ?NestedCSSPropTypes;
+export type XStyle<+T = NestedCSSPropTypes> = StyleXArray<
+  false | ?$ReadOnly<{ ...T, $$css: true }>,
+>;
+export type XStyleWithout<+T: { +[string]: mixed }> = XStyle<
+  $ReadOnly<$Rest<NestedCSSPropTypes, $Exact<T>>>,
+>;
+
+export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
+
+export type LegacyThemeStyles = $ReadOnly<{
+  [constantName: string]: string,
+  ...
+}>;
+
+type ComplexStyleValueType<+T> = T extends StyleXVar<infer U>
+  ? U
+  : T extends string | number | null
+    ? T
+    : T extends $ReadOnlyArray<infer U>
+      ? U
+      : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
+        ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+        : $ReadOnly<T>;
+
+type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
+}>;
+export type MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._MapNamespace<CSS>,
+  $$css: true,
+}>;
+export type MapNamespaces<+S: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => $ReadOnly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>,
+}>;
+export type Stylex$Create = <S: { +[string]: mixed }>(
+  styles: S,
+) => MapNamespaces<S>;
+
+export type CompiledStyles = $ReadOnly<{
+  $$css: true,
+  [key: string]: StyleXClassName,
+}>;
+export type InlineStyles = $ReadOnly<{
+  $$css?: void,
+  [key: string]: string,
+}>;
+
+type _GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  [Key in keyof CSS]: CSS[Key] extends { +[string]: mixed }
+    ? StyleXClassNameFor<Key, $ReadOnly<CSS[Key]>>
+    : StyleXClassNameFor<Key, CSS[Key]>,
+}>;
+type GenStylePropType<+CSS: { +[string]: mixed }> = $ReadOnly<{
+  ..._GenStylePropType<CSS>,
+  $$css: true,
+}>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<false | ?GenStylePropType<$ReadOnly<CSS>>>;
+
+export type StaticStylesWithout<+CSS: { +[string]: mixed }> = StaticStyles<
+  $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
+>;
+
+export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
+  StyleXArray<
+    | ?false
+    | GenStylePropType<$ReadOnly<CSS>>
+    | $ReadOnly<[GenStylePropType<$ReadOnly<CSS>>, InlineStyles]>,
+  >;
+
+export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
+  $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
+>;
+
+// This is the type for the variables object
+declare export opaque type StyleXVar<+Val: mixed>;
+
+declare export opaque type VarGroup<
+  +Tokens: { +[string]: mixed },
+  +_ID: string = string,
+>: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
+
+export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> =
+  T extends VarGroup<infer Tokens extends { +[string]: mixed }>
+    ? Tokens
+    : empty;
+type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = T extends VarGroup<
+  { +[string]: mixed },
+  infer ID,
+>
+  ? ID
+  : empty;
+
+type TTokens = $ReadOnly<{
+  [string]:
+    | number
+    | string
+    | $ReadOnly<{ default: number | string, [string]: number | string }>,
+}>;
+
+export type FlattenTokens<T: TTokens> = {
+  +[Key in keyof T]: T[Key] extends { +default: infer X, +[string]: infer Y }
+    ? X | Y
+    : T[Key],
+};
+
+export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+export type Theme<
+  +T: VarGroup<{ +[string]: mixed }, string>,
+  +_Tag: string = string,
+> = $ReadOnly<{
+  $$css: true,
+  [string]: StyleXClassNameFor<string, IDFromVarGroup<T>>,
+}>;
+
+export type OverridesForTokenType<Config: { +[string]: mixed }> = {
+  [Key in keyof Config]:
+    | Config[Key]
+    | { +default: Config[Key], +[string]: Config[Key] },
+};
+
+export type StyleX$CreateTheme = <
+  BaseTokens: VarGroup<{ +[string]: mixed }>,
+  ID: string = string,
+>(
+  baseTokens: BaseTokens,
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/native/CSSCustomPropertyValue.d.ts

@@ -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.
+ *
+ *
+ */
+
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+export declare function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
+export declare class CSSCustomPropertyValue {
+  name: string;
+  defaultValue: unknown;
+  constructor(kebabCasePropName: string, fallback: unknown);
+}

package/lib/native/CSSCustomPropertyValue.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSCustomPropertyValue = void 0;
+exports.createCSSCustomPropertyValue = createCSSCustomPropertyValue;
+const CUSTOM_PROPERTY_REGEX = /^var\(--([\w-]+) *(?:\)|, *(.+)\))$/;
+function camelize(s) {
+  return s.replace(/-./g, x => x.toUpperCase()[1]);
+}
+function createCSSCustomPropertyValue(value) {
+  if (typeof value === 'string') {
+    const match = CUSTOM_PROPERTY_REGEX.exec(value);
+    if (match) {
+      return new CSSCustomPropertyValue(match[1], match[2]);
+    }
+  }
+  return null;
+}
+class CSSCustomPropertyValue {
+  constructor(kebabCasePropName, fallback) {
+    this.name = camelize(kebabCasePropName);
+    this.defaultValue = fallback ?? null;
+  }
+}
+exports.CSSCustomPropertyValue = CSSCustomPropertyValue;

package/lib/native/CSSCustomPropertyValue.js.flow

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+declare export function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
+
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
+declare export class CSSCustomPropertyValue {
+  name: string;
+  defaultValue: mixed;
+  constructor(kebabCasePropName: string, fallback: mixed): void;
+}

package/lib/native/CSSLengthUnitValue.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.
+ *
+ *
+ */
+
+import type { SpreadOptions } from './SpreadOptions';
+type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
+export declare class CSSLengthUnitValue {
+  static parse(inp: string): [number, CSSLengthUnitType] | null;
+  value: number;
+  unit: CSSLengthUnitType;
+  constructor(value: number, unit: CSSLengthUnitType);
+  resolvePixelValue(options: SpreadOptions): number;
+}

package/lib/native/CSSLengthUnitValue.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSLengthUnitValue = void 0;
+const LENGTH_REGEX = /^([0-9]*[.]?[0-9]+)(em|px|rem|vh|vmax|vmin|vw)$/;
+class CSSLengthUnitValue {
+  static parse(inp) {
+    const match = inp.match(LENGTH_REGEX);
+    if (match == null) {
+      return null;
+    }
+    const [, value, unit] = match;
+    const parsedValue = parseFloat(value);
+    return [parsedValue, unit];
+  }
+  constructor(value, unit) {
+    this.value = value;
+    this.unit = unit;
+  }
+  resolvePixelValue(options) {
+    const {
+      viewportWidth,
+      viewportHeight,
+      fontScale = 1,
+      inheritedFontSize
+    } = options;
+    const unit = this.unit;
+    const value = this.value;
+    const valuePercent = value / 100;
+    switch (unit) {
+      case 'em':
+        {
+          if (inheritedFontSize == null) {
+            return fontScale * 16 * value;
+          } else {
+            return inheritedFontSize * value;
+          }
+        }
+      case 'px':
+        {
+          return value;
+        }
+      case 'rem':
+        {
+          return fontScale * 16 * value;
+        }
+      case 'vh':
+        {
+          return viewportHeight * valuePercent;
+        }
+      case 'vmin':
+        {
+          return Math.min(viewportWidth, viewportHeight) * valuePercent;
+        }
+      case 'vmax':
+        {
+          return Math.max(viewportWidth, viewportHeight) * valuePercent;
+        }
+      case 'vw':
+        {
+          return viewportWidth * valuePercent;
+        }
+      default:
+        {
+          console.error(`[stylex]: Unsupported unit of "${unit}"`);
+          return 0;
+        }
+    }
+  }
+}
+exports.CSSLengthUnitValue = CSSLengthUnitValue;

package/lib/native/CSSLengthUnitValue.js.flow

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSMediaQuery = void 0;
+var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MQ_PREFIX = '@media';
+class CSSMediaQuery {
+  static isMediaQueryString(inp) {
+    return inp.startsWith(MQ_PREFIX);
+  }
+  static resolveMediaQueries(styleObj, matchObj) {
+    const mediaQueries = [];
+    const result = {};
+    for (const [key, value] of Object.entries(styleObj)) {
+      if (value instanceof CSSMediaQuery) {
+        mediaQueries.push(value);
+      } else {
+        result[key] = value;
+      }
+    }
+    if (mediaQueries.length > 0) {
+      for (const mqInst of mediaQueries) {
+        const unresolvedMatchedStyle = mqInst.resolve(matchObj);
+        const resolvedMatchedStyle = this.resolveMediaQueries(unresolvedMatchedStyle, matchObj);
+        for (const propName in resolvedMatchedStyle) {
+          result[propName] = resolvedMatchedStyle[propName];
+        }
+      }
+    }
+    return result;
+  }
+  constructor(query, matchedStyle) {
+    this.query = query.replace(MQ_PREFIX, '');
+    this.matchedStyle = matchedStyle;
+  }
+  resolve(matchObject) {
+    const {
+      width,
+      height,
+      direction
+    } = matchObject;
+    const matches = _cssMediaquery.default.match(this.query, {
+      width,
+      height,
+      orientation: width > height ? 'landscape' : 'portrait',
+      'aspect-ratio': width / height,
+      direction: direction
+    });
+    return matches ? this.matchedStyle : {};
+  }
+}
+exports.CSSMediaQuery = CSSMediaQuery;

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/SpreadOptions.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 SpreadOptions = Readonly<{
+  customProperties: {};
+  inheritedFontSize: null | undefined | number;
+  fontScale: number | void;
+  hover?: null | undefined | boolean;
+  passthroughProperties: Array<string>;
+  viewportHeight: number;
+  viewportWidth: number;
+  writingDirection: 'ltr' | 'rtl';
+}>;

package/lib/native/SpreadOptions.js

@@ -0,0 +1 @@
+"use strict";

package/lib/native/SpreadOptions.js.flow

@@ -0,0 +1,19 @@
+/**
+ * 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 SpreadOptions = $ReadOnly<{
+  customProperties: {},
+  inheritedFontSize: ?number,
+  fontScale: number | void,
+  hover?: ?boolean,
+  passthroughProperties: Array<string>,
+  viewportHeight: number,
+  viewportWidth: number,
+  writingDirection: 'ltr' | 'rtl',
+}>;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`stylex CSSCustomProperty value test falls back to a default value with spaces 1`] = `
+{
+  "style": {
+    "shadowColor": "0px 0px 0px black",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses a variable with a default value with spaces 1`] = `
+{
+  "style": {
+    "shadowColor": "5px 5px 5px black",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses and falls back to a default value containing spaces and embedded variables 1`] = `
+{
+  "style": {
+    "shadowColor": "var(--boxShadowVarNotFound",
+    "shadowOffset": {
+      "height": undefined,
+      "width": undefined,
+    },
+    "shadowOpacity": 1,
+  },
+}
+`;
+
+exports[`stylex CSSCustomProperty value test parses and falls back to default value containing a variable 1`] = `
+{
+  "style": {
+    "color": "blue",
+  },
+}
+`;