@stylexjs/stylex 0.3.0 → 0.4.0

package/README.md

@@ -84,14 +84,14 @@ const styles = stylex.create({
   root: {
     width: '100%',
     color: 'rgb(60,60,60)',
-    '@media (min-width: 800px)': {
-      maxWidth: '800px',
+    maxWidth: {
+      '@media (min-width: 800px)': '800px',
     },
   },
   highlighted: {
     color: 'yellow',
-    ':hover': {
-      opacity: '0.9',
+    opacity: {
+      ':hover': '0.9',
     },
   },
 });
@@ -127,7 +127,7 @@ const styles = stylex.create({
 
 function InternalComponent(props) {
   return (
-    <div {...props} {...stylex.props([styles.internalRoot, props.style])} />
+    <div {...props} {...stylex.props(styles.internalRoot, props.style)} />
   );
 }
 
@@ -150,12 +150,6 @@ style property values passed in via props.
 <div {...stylex.props(props.style, styles.root)} />
 ```
 
-You can even mix compiled styles with inline styles
-
-```tsx
-<div {...stylex.props(styles.root, { opacity })} />
-```
-
 ### stylex.firstThatWorks()
 
 Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful
@@ -185,15 +179,15 @@ This is equivalent to defining CSS as follows:
 
 StyleX comes with full support for Static Types.
 
-### `XStyle<>`
+### `StyleXStyles<>`
 
-The most common type you might need to use is `XStyle<>`. This lets you accept
+The most common type you might need to use is `StyleXStyles<>`. This lets you accept
 an object of arbitrary StyleX styles.
 
 ```tsx
 type Props = {
   ...
-  style?: XStyle<>,
+  style?: StyleXStyles<>,
 };
 
 function MyComponent({style, ...}: Props) {
@@ -203,53 +197,34 @@ function MyComponent({style, ...}: Props) {
 }
 ```
 
-### `XStyleWithout<>`
+### `StyleXStylesWithout<>`
 
-To disallow specific style properties, use the `XStyleWithout<>` type.
+To disallow specific style properties, use the `StyleXStylesWithout<>` type.
 
 ```tsx
 type Props = {
   // ...
-  style?: XStyleWithout<{
-    postion: unknown;
+  style?: StyleXStylesWithout<{
+    position: unknown;
     display: unknown;
   }>;
 };
 ```
 
-### `XStyleValue<>`
-
-To accept specific style properties only, use the `XStyle<{...}>` and
-`XStyleValue` types. For example, to allow only color-related style props:
 
-```tsx
-type Props = {
-  // ...
-  style?: XStyle<{
-    color?: StyleXValue;
-    backgroundColor?: StyleXValue;
-    borderColor?: StyleXValue;
-    borderTopColor?: StyleXValue;
-    borderEndColor?: StyleXValue;
-    borderBottomColor?: StyleXValue;
-    borderStartColor?: StyleXValue;
-  }>;
-};
-```
 
-### `XStyleValueFor<>`
+### `StaticStyles<>`
 
-To limit the possible values for style properties, use the `XStyleValueFor<>`
-type. Pass in a type argument with a union of literal types that provide the set
-of possible values that the style property can have. For example, if a component
+To constrain the styles to specific properties and values, use the `StaticStyles<>`
+type. For example, if a component
 should accept `marginTop` but only accept one of `0`, `4`, or `8` pixels as
 values.
 
 ```tsx
 type Props = {
   ...
-  style?: XStyle<{
-    marginTop: XStyleValueFor<0 | 4 | 8>
+  style?: StaticStyles<{
+    marginTop?: 0 | 4 | 8;
   }>,
 };
 ```
@@ -278,7 +253,7 @@ the same CSS class_ rather than creating a new one.
 One of the benefits of this approach is that the generated CSS file grows
 _logarithmically_ as you add new styled components to your app. As more style
 declarations are added to components, they are more likely to already be in use
-elsehwere in the app. As a result of this CSS optimization, the generated CSS
+elsewhere in the app. As a result of this CSS optimization, the generated CSS
 style sheet for an app is usually small enough to be contained in a single file
 and used across routes, avoiding style recalculation and layout thrashing as
 users navigate through your app.

package/lib/StyleXCSSTypes.d.ts

@@ -333,7 +333,9 @@ type fontWeight =
   | 600
   | 700
   | 800
-  | 900;
+  | 900
+  | string
+  | number;
 type gap = number | string;
 type grid = gridTemplate | string;
 type gridArea = gridLine | string;

package/lib/StyleXCSSTypes.js.flow

@@ -335,7 +335,9 @@ type fontWeight =
   | 600
   | 700
   | 800
-  | 900;
+  | 900
+  | string
+  | number;
 type gap = number | string;
 type grid = gridTemplate | string;
 type gridArea = gridLine | string;
@@ -866,7 +868,7 @@ export type CSSProperties = $ReadOnly<{
   // NOTE: adding a non-CSS property here for support themes in Stylex.
   theme?: all | string,
 
-  // ...$Exact<SupportedVendorSpecificCSSProperties>, for Typescript compatibility
+  // ...$Exact<SupportedVendorSpecificCSSProperties>, for TypeScript compatibility
   MozOsxFontSmoothing?: all | 'grayscale',
   WebkitAppearance?: all | appearance,
   WebkitFontSmoothing?: all | 'antialiased',

package/lib/StyleXSheet.js

@@ -138,7 +138,7 @@ class StyleXSheet {
     if (this.rules.includes(rawRule)) {
       return;
     }
-    const rule = this.normalizeRule(rawRule);
+    const rule = this.normalizeRule(addSpecificityLevel(rawRule, Math.floor(priority / 1000)));
     const insertPos = this.getInsertPositionForPriority(priority);
     this.rules.splice(insertPos, 0, rule);
     this.ruleForPriority.set(priority, rule);
@@ -149,8 +149,10 @@ class StyleXSheet {
     const sheet = tag.sheet;
     if (sheet != null) {
       try {
-        sheet.insertRule(rule, insertPos);
-      } catch {}
+        sheet.insertRule(rule, Math.min(insertPos, sheet.cssRules.length));
+      } catch (err) {
+        console.error('insertRule error', err, rule, insertPos);
+      }
     }
   }
 }
@@ -164,6 +166,18 @@ function addAncestorSelector(selector, ancestorSelector) {
   const rest = selector.slice(firstBracketIndex + 1);
   return `${mediaQueryPart}${ancestorSelector} ${rest}`;
 }
+function addSpecificityLevel(selector, index) {
+  if (selector.startsWith('@keyframes')) {
+    return selector;
+  }
+  const pseudo = Array.from({
+    length: index
+  }).map(() => ':not(#\\#)').join('');
+  const lastOpenCurly = selector.includes('::') ? selector.indexOf('::') : selector.lastIndexOf('{');
+  const beforeCurly = selector.slice(0, lastOpenCurly);
+  const afterCurly = selector.slice(lastOpenCurly);
+  return `${beforeCurly}${pseudo}${afterCurly}`;
+}
 const styleSheet = exports.styleSheet = new StyleXSheet({
   supportsVariables: true,
   rootTheme: {},

package/lib/StyleXTypes.d.ts

@@ -73,7 +73,7 @@ export type NestedCSSPropTypes = Partial<
   }>
 >;
 
-type UserAuthoredStyles = { [key: string]: unknown };
+type UserAuthoredStyles = CSSPropertiesWithExtras | { [key: string]: unknown };
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 // NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
 
@@ -178,8 +178,11 @@ type TTokens = Readonly<{
   [key: string]: string | { [key: string]: string };
 }>;
 
+type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
 export type FlattenTokens<T extends TTokens> = Readonly<{
-  [Key in keyof T]: T[Key] extends { [key: string]: infer X } ? X : T[Key];
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? UnwrapVars<X>
+    : UnwrapVars<T[Key]>;
 }>;
 
 export type StyleX$DefineVars = <
@@ -189,16 +192,19 @@ export type StyleX$DefineVars = <
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
+declare class ThemeKey<out VG extends VarGroup> extends String {
+  private varGroup: VG;
+}
 export type Theme<
   T extends VarGroup<unknown, symbol>,
   Tag extends symbol = symbol,
 > = Tag &
   Readonly<{
-    theme: StyleXClassNameFor<string, IDFromVarGroup<T>>;
+    theme: StyleXClassNameFor<ThemeKey<T>, IDFromVarGroup<T>>;
   }>;
 
 type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
-  [Key in keyof Config]:
+  [Key in keyof Config]?:
     | Config[Key]
     | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
 };

package/lib/StyleXTypes.js.flow

@@ -148,29 +148,32 @@ type TTokens = $ReadOnly<{
   [string]:
     | number
     | string
-    | $ReadOnly<{ default: number | string, [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 }
-    ? X | Y
-    : T[Key],
+    ? UnwrapVars<X | Y>
+    : UnwrapVars<T[Key]>,
 };
 
 export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
 ) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-export type Theme<
+// opaque type ThemeKey<+_VG: VarGroup<{ +[string]: mixed }>>: string = string;
+declare export opaque type Theme<
   +T: VarGroup<{ +[string]: mixed }, string>,
   +_Tag: string = string,
-> = $ReadOnly<{
+>: $ReadOnly<{
   $$css: true,
   [string]: StyleXClassNameFor<string, IDFromVarGroup<T>>,
 }>;
 
 export type OverridesForTokenType<Config: { +[string]: mixed }> = {
-  [Key in keyof Config]:
+  [Key in keyof Config]?:
     | Config[Key]
     | { +default: Config[Key], +[string]: Config[Key] },
 };

package/lib/stylex.d.ts

@@ -25,7 +25,6 @@ export type {
   StaticStyles,
   StaticStylesWithout,
 } from './StyleXTypes';
-import injectStyle from './stylex-inject';
 export declare function props(
   this: null | undefined | unknown,
   ...styles: ReadonlyArray<
@@ -113,7 +112,6 @@ 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<
@@ -141,11 +139,6 @@ type IStyleX = {
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>;
-  inject: (
-    ltrRule: string,
-    priority: number,
-    rtlRule: null | undefined | string,
-  ) => void;
   keyframes: (keyframes: Keyframes) => string;
   __customProperties?: { [$$Key$$: string]: unknown };
 };

package/lib/stylex.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.__monkey_patch__ = __monkey_patch__;
-exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+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 _stylexInject = _interopRequireDefault(require("./stylex-inject"));
 var _styleq = require("styleq");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function props() {
   const options = this;
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -113,7 +111,6 @@ const firstThatWorks = function () {
   throw new Error('stylex.firstThatWorks should never be called.');
 };
 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];
@@ -128,7 +125,6 @@ _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) {

package/lib/stylex.js.flow

@@ -27,7 +27,6 @@ export type {
   StaticStylesWithout,
 } from './StyleXTypes';
 
-import injectStyle from './stylex-inject';
 declare export function props(
   this: ?mixed,
   ...styles: $ReadOnlyArray<
@@ -117,8 +116,6 @@ 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: (
@@ -140,7 +137,6 @@ type IStyleX = {
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>
   ) => $ReadOnlyArray<T>,
-  inject: (ltrRule: string, priority: number, rtlRule: ?string) => void,
   keyframes: (keyframes: Keyframes) => string,
   __customProperties?: { [string]: mixed },
   ...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "types": "lib/stylex.d.ts",
@@ -19,7 +19,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.3.0"
+    "@stylexjs/scripts": "0.4.0"
   },
   "jest": {},
   "files": [

package/lib/native/CSSCustomPropertyValue.d.ts

@@ -1,26 +0,0 @@
-/**
- * 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

@@ -1,27 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,73 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-/**
- * 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

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,55 +0,0 @@
-"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;