@stylexjs/stylex 0.2.0-beta.9 → 0.4.0

package/lib/StyleXTypes.js.flow

@@ -0,0 +1,187 @@
+/**
+ * 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 }>
+    | StyleXVar<string | number>,
+}>;
+
+type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<T: TTokens> = {
+  +[Key in keyof T]: T[Key] extends { +default: infer X, +[string]: infer Y }
+    ? UnwrapVars<X | Y>
+    : UnwrapVars<T[Key]>,
+};
+
+export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
+declare export opaque 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/stylex-inject.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.
+ *
+ *
+ */
+
+declare function inject(
+  ltrRule: string,
+  priority: number,
+  rtlRule: null | undefined | string,
+): void;
+export default inject;

package/lib/stylex-inject.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = inject;
 var _StyleXSheet = require("./StyleXSheet");
-/**
- * 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.
- *
- * 
- */
-
 function inject(ltrRule, priority) {
   let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);

package/lib/stylex-inject.js.flow

@@ -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.
+ *
+ * @flow strict
+ */
+
+declare export default function inject(
+  ltrRule: string,
+  priority: number,
+  rtlRule: ?string,
+): void;

package/lib/stylex.d.ts

@@ -3,77 +3,145 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
+ *
  */
 
-import { $ReadOnly } from 'utility-types';
-
-// Simulating an opaque type
-declare const classNameSymbol: unique symbol;
-
-export type ClassNameFor<K, V> = string & {
-  _tag: typeof classNameSymbol;
-  _key: K;
-  _value: V;
-};
-
-export type ClassNameForKey<K> = ClassNameFor<K, string | number>;
-export type ClassNameForValue<V> = ClassNameFor<string, V>;
-export type ClassName = ClassNameFor<string, string | number>;
-
-export type Namespace = {
-  readonly [K in string]: string | number | { [K in string]: string | number };
-};
-
-export type CompiledNamespace = {
-  readonly [K in string]:
-    | ClassNameFor<K, string | number>
-    | { [J in string]: ClassNameFor<`${K}+${J}`, string | number> };
-};
-
-export type NamespaceSet = {
-  readonly [K in string]: Namespace;
-};
-
-export type CompiledNamespaceSet = {
-  readonly [K in string]: CompiledNamespace;
-};
-
-type Stylex$Create = <S extends NamespaceSet>(
-  styles: S
-) => $ReadOnly<{
-  readonly [K in keyof S]: {
-    readonly [P in keyof S[K]]: S[K][P] extends string | number
-      ? ClassNameFor<P, S[K][P]>
-      : {
-          readonly [F in keyof S[K][P]]: ClassNameFor<`${P}+${F}`, S[K][P][F]>;
-        };
-  };
+import type {
+  Keyframes,
+  Stylex$Create,
+  StyleX$DefineVars,
+  StyleX$CreateTheme,
+  StyleXArray,
+  CompiledStyles,
+  InlineStyles,
+  StyleXClassNameFor,
+} from './StyleXTypes';
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
+export declare function props(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{
+  className?: string;
+  style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
-
-type StylexInclude = <S extends CompiledNamespace>(
-  compiledNamespace: S
+type Stylex$Include = <
+  TStyles extends {
+    readonly [$$Key$$: string]: StyleXClassNameFor<string, unknown>;
+  },
+>(
+  styles: TStyles,
 ) => {
-  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V> ? V : S[K];
+  readonly [Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
+    unknown,
+    infer V
+  >
+    ? V
+    : string;
 };
-
-type Stylex$Keyframes = <S extends NamespaceSet>(animationConfig: S) => string;
-
-type NestedArray<T> = T | Array<T | NestedArray<T>>;
-
-declare let stylex: {
+export declare const create: Stylex$Create;
+export declare const defineVars: StyleX$DefineVars;
+export declare const createTheme: StyleX$CreateTheme;
+export declare const include: Stylex$Include;
+type ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      readonly default: T;
+      readonly [$$Key$$: string]: ValueWithDefault<T>;
+    }>;
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax | ReadonlyArray<CSSSyntax>;
+interface ICSSType<T extends string | number> {
+  readonly value: ValueWithDefault<T>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare const types: {
+  angle: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  color: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  url: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  image: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  integer: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  lengthPercentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  length: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  percentage: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  number: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  resolution: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  time: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
+  transformFunction: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+  transformList: <T extends number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>;
+};
+export declare const keyframes: (keyframes: Keyframes) => string;
+export declare const firstThatWorks: <T extends string | number>(
+  ...styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
+type IStyleX = {
   (
     ...styles: ReadonlyArray<
-      NestedArray<(CompiledNamespace | null | undefined) | boolean>
+      StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
   ): string;
+  props: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{
+    className?: string;
+    style?: Readonly<{ [$$Key$$: string]: string | number }>;
+  }>;
   create: Stylex$Create;
-  include: StylexInclude;
-  inject: (
-    ltrRule: string,
-    priority: number,
-    rtlRule: string | null | undefined
-  ) => void;
-  keyframes: Stylex$Keyframes;
+  defineVars: StyleX$DefineVars;
+  createTheme: StyleX$CreateTheme;
+  include: Stylex$Include;
+  types: typeof types;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
+  keyframes: (keyframes: Keyframes) => string;
+  __customProperties?: { [$$Key$$: string]: unknown };
 };
-
-export default stylex;
+export declare const stylex: IStyleX;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/stylex.js

@@ -1,71 +1,138 @@
-/**
- * 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.
- *
- * 
- */
-
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNSUPPORTED_PROPERTY = void 0;
-exports.apply = apply;
-exports.stylex = exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = void 0;
-var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
+exports.__monkey_patch__ = __monkey_patch__;
+exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.props = props;
+exports.types = exports.stylex = void 0;
 var _styleq = require("styleq");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const stylex = function stylex() {
+function props() {
+  const options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  const [className] = (0, _styleq.styleq)(styles);
-  return className;
-};
-exports.stylex = stylex;
-function apply() {
-  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    styles[_key2] = arguments[_key2];
+  if (__implementations.props) {
+    return __implementations.props.call(options, styles);
   }
   const [className, style] = (0, _styleq.styleq)(styles);
-  return {
-    className,
-    style
-  };
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  return result;
 }
-stylex.apply = apply;
-function stylexCreate(_styles) {
+function stylexCreate(styles) {
+  if (__implementations.create != null) {
+    const create = __implementations.create;
+    return create(styles);
+  }
   throw new Error('stylex.create should never be called. It should be compiled away.');
 }
-function stylexIncludes(_styles) {
-  throw new Error('stylex.extends should never be called. It should be compiled away.');
+function stylexDefineVars(styles) {
+  if (__implementations.defineVars) {
+    return __implementations.defineVars(styles);
+  }
+  throw new Error('stylex.defineVars should never be called. It should be compiled away.');
 }
-const create = stylexCreate;
-exports.create = create;
-stylex.create = create;
-const include = stylexIncludes;
-exports.include = include;
-stylex.include = include;
-const keyframes = _keyframes => {
+const stylexCreateTheme = (baseTokens, overrides) => {
+  if (__implementations.createTheme) {
+    return __implementations.createTheme(baseTokens, overrides);
+  }
+  throw new Error('stylex.createTheme should never be called. It should be compiled away.');
+};
+const stylexInclude = styles => {
+  if (__implementations.include) {
+    return __implementations.include(styles);
+  }
+  throw new Error('stylex.extends should never be called. It should be compiled away.');
+};
+const create = exports.create = stylexCreate;
+const defineVars = exports.defineVars = stylexDefineVars;
+const createTheme = exports.createTheme = stylexCreateTheme;
+const include = exports.include = stylexInclude;
+const types = exports.types = {
+  angle: _v => {
+    throw new Error(errorForType('angle'));
+  },
+  color: _v => {
+    throw new Error(errorForType('color'));
+  },
+  url: _v => {
+    throw new Error(errorForType('url'));
+  },
+  image: _v => {
+    throw new Error(errorForType('image'));
+  },
+  integer: _v => {
+    throw new Error(errorForType('integer'));
+  },
+  lengthPercentage: _v => {
+    throw new Error(errorForType('lengthPercentage'));
+  },
+  length: _v => {
+    throw new Error(errorForType('length'));
+  },
+  percentage: _v => {
+    throw new Error(errorForType('percentage'));
+  },
+  number: _v => {
+    throw new Error(errorForType('number'));
+  },
+  resolution: _v => {
+    throw new Error(errorForType('resolution'));
+  },
+  time: _v => {
+    throw new Error(errorForType('time'));
+  },
+  transformFunction: _v => {
+    throw new Error(errorForType('transformFunction'));
+  },
+  transformList: _v => {
+    throw new Error(errorForType('transformList'));
+  }
+};
+const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
+const keyframes = keyframes => {
+  if (__implementations.keyframes) {
+    return __implementations.keyframes(keyframes);
+  }
   throw new Error('stylex.keyframes should never be called');
 };
 exports.keyframes = keyframes;
-stylex.keyframes = keyframes;
 const firstThatWorks = function () {
+  if (__implementations.firstThatWorks) {
+    return __implementations.firstThatWorks(...arguments);
+  }
   throw new Error('stylex.firstThatWorks should never be called.');
 };
 exports.firstThatWorks = firstThatWorks;
-stylex.firstThatWorks = firstThatWorks;
-const inject = _stylexInject.default;
-exports.inject = inject;
-stylex.inject = inject;
-const UNSUPPORTED_PROPERTY = props => {
-  throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
-};
-exports.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
-stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
-var _default = stylex;
-exports.default = _default;
+function _stylex() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className] = (0, _styleq.styleq)(styles);
+  return className;
+}
+_stylex.props = props;
+_stylex.create = create;
+_stylex.defineVars = defineVars;
+_stylex.createTheme = createTheme;
+_stylex.include = include;
+_stylex.keyframes = keyframes;
+_stylex.firstThatWorks = firstThatWorks;
+_stylex.types = types;
+const __implementations = {};
+function __monkey_patch__(key, implementation) {
+  if (key === 'types') {
+    Object.assign(types, implementation);
+  } else {
+    __implementations[key] = implementation;
+  }
+}
+const stylex = exports.stylex = _stylex;
+var _default = exports.default = _stylex;