@stylexjs/stylex 0.2.0-beta.8 → 0.3.0

package/lib/stylex.d.ts

@@ -3,77 +3,152 @@
  *
  * 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';
+import injectStyle from './stylex-inject';
+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>;
+export declare const inject: typeof injectStyle;
+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;
+  defineVars: StyleX$DefineVars;
+  createTheme: StyleX$CreateTheme;
+  include: Stylex$Include;
+  types: typeof types;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
   inject: (
     ltrRule: string,
     priority: number,
-    rtlRule: string | null | undefined
+    rtlRule: null | undefined | string,
   ) => void;
-  keyframes: Stylex$Keyframes;
+  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,110 +1,142 @@
-/**
- * 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.default = void 0;
+exports.__monkey_patch__ = __monkey_patch__;
+exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.props = props;
+exports.types = exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
+var _styleq = require("styleq");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const enableCache = true;
-const cache = enableCache ? new WeakMap() : null;
-function stylex() {
-  // Keep a set of property commits to the className
-  const definedProperties = [];
-  let className = '';
-  let nextCache = cache;
+function props() {
+  const options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
   }
-  while (styles.length) {
-    // Push nested styles back onto the stack to be processed
-    const possibleStyle = styles.pop();
-    if (Array.isArray(possibleStyle)) {
-      for (let i = 0; i < possibleStyle.length; i++) {
-        styles.push(possibleStyle[i]);
-      }
-      continue;
-    }
-
-    // Process an individual style object
-    const styleObj = possibleStyle;
-    if (styleObj != null && typeof styleObj === 'object') {
-      // Build up the class names defined by this object
-      let classNameChunk = '';
-      if (nextCache != null && nextCache.has(styleObj)) {
-        // Cache: read
-        const cacheEntry = nextCache.get(styleObj);
-        if (cacheEntry != null) {
-          classNameChunk = cacheEntry.classNameChunk;
-          definedProperties.push(...cacheEntry.definedPropertiesChunk);
-          nextCache = cacheEntry.next;
-        }
-      } else {
-        // Record the properties this object defines (and that haven't already
-        // been defined by later objects.)
-        const definedPropertiesChunk = [];
-        for (const prop in styleObj) {
-          const value = styleObj[prop];
-          // Style declarations, e.g., opacity: 's3fkgpd'
-          if (typeof value === 'string' || value === null) {
-            // Skip adding to the chunks if property has already been seen
-            if (!definedProperties.includes(prop)) {
-              definedProperties.push(prop);
-              definedPropertiesChunk.push(prop);
-              if (typeof value === 'string') {
-                classNameChunk += classNameChunk ? ' ' + value : value;
-              }
-            }
-          }
-        }
-        // Cache: write
-        if (nextCache != null) {
-          const emptyCache = new WeakMap();
-          nextCache.set(styleObj, {
-            classNameChunk,
-            definedPropertiesChunk,
-            next: emptyCache
-          });
-          nextCache = emptyCache;
-        }
-      }
-
-      // Order of classes in chunks matches property-iteration order of style
-      // object. Order of chunks matches passed order of styles from first to
-      // last (which we iterate over in reverse).
-      if (classNameChunk) {
-        className = className ? classNameChunk + ' ' + className : classNameChunk;
-      }
-    }
+  if (__implementations.props) {
+    return __implementations.props.call(options, styles);
   }
-  return className;
+  const [className, style] = (0, _styleq.styleq)(styles);
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  return result;
 }
-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.');
 }
-stylex.create = stylexCreate;
-stylex.include = stylexIncludes;
-stylex.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');
 };
-stylex.firstThatWorks = function () {
+exports.keyframes = keyframes;
+const firstThatWorks = function () {
+  if (__implementations.firstThatWorks) {
+    return __implementations.firstThatWorks(...arguments);
+  }
   throw new Error('stylex.firstThatWorks should never be called.');
 };
-stylex.inject = _stylexInject.default;
-stylex.UNSUPPORTED_PROPERTY = props => {
-  throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
-};
-var _default = stylex;
-exports.default = _default;
+exports.firstThatWorks = firstThatWorks;
+const inject = exports.inject = _stylexInject.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.inject = inject;
+_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;

package/lib/stylex.js.flow

@@ -0,0 +1,151 @@
+/**
+ * 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 {
+  Keyframes,
+  Stylex$Create,
+  StyleX$DefineVars,
+  StyleX$CreateTheme,
+  StyleXArray,
+  CompiledStyles,
+  InlineStyles,
+  StyleXClassNameFor,
+} from './StyleXTypes';
+
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
+
+import injectStyle from './stylex-inject';
+declare export function props(
+  this: ?mixed,
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): $ReadOnly<{
+  className?: string,
+  style?: $ReadOnly<{ [string]: string | number }>,
+}>;
+
+type Stylex$Include = <
+  TStyles: { +[string]: StyleXClassNameFor<string, mixed> },
+>(
+  styles: TStyles,
+) => {
+  +[Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
+    mixed,
+    infer V,
+  >
+    ? V
+    : string,
+};
+
+declare export const create: Stylex$Create;
+
+declare export const defineVars: StyleX$DefineVars;
+
+declare export const createTheme: StyleX$CreateTheme;
+
+declare export const include: Stylex$Include;
+
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      +default: T,
+      +[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: string | number> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+}
+
+declare export const types: {
+  angle: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  color: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  url: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  image: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  integer: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  lengthPercentage: <T: number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>,
+  length: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  percentage: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  number: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  resolution: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  time: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  transformFunction: <T: number | string>(
+    _v: ValueWithDefault<T>,
+  ) => ICSSType<T>,
+  transformList: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+};
+declare export const keyframes: (keyframes: Keyframes) => string;
+
+declare export const firstThatWorks: <T: string | number>(
+  ...styles: $ReadOnlyArray<T>
+) => $ReadOnlyArray<T>;
+
+declare export const inject: typeof injectStyle;
+
+type IStyleX = {
+  (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
+  props: (
+    this: ?mixed,
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => $ReadOnly<{
+    className?: string,
+    style?: $ReadOnly<{ [string]: string | number }>,
+  }>,
+  create: Stylex$Create,
+  defineVars: StyleX$DefineVars,
+  createTheme: StyleX$CreateTheme,
+  include: Stylex$Include,
+  types: typeof types,
+  firstThatWorks: <T: string | number>(
+    ...v: $ReadOnlyArray<T>
+  ) => $ReadOnlyArray<T>,
+  inject: (ltrRule: string, priority: number, rtlRule: ?string) => void,
+  keyframes: (keyframes: Keyframes) => string,
+  __customProperties?: { [string]: mixed },
+  ...
+};
+
+
+declare export const stylex: IStyleX;
+declare export default IStyleX;

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.8",
-  "description": "A minimal runtime styling library for web.",
+  "version": "0.3.0",
+  "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "types": "lib/stylex.d.ts",
-  "repository": "https://www.github.com/facebookexternal/stylex",
-  "author": "Naman Goel <nmn@fb.com>",
+  "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
-    "build-haste": "HASTE=true babel src/ --out-dir lib/ --copy-files",
+    "build-haste": "rewrite-imports -i src/ -o lib/",
     "test": "jest"
   },
   "dependencies": {
+    "css-mediaquery": "^0.1.2",
     "invariant": "^2.2.4",
+    "styleq": "0.1.3",
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "benchmark": "^2.1.4"
+    "@stylexjs/scripts": "0.3.0"
   },
   "jest": {},
   "files": [