@stylexjs/stylex 0.2.0-beta.16 → 0.2.0-beta.17

package/lib/StyleXTypes.js

@@ -1,10 +1 @@
-/**
- * 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';
+"use strict";

package/lib/StyleXTypes.js.flow

@@ -87,27 +87,20 @@ export type NestedCSSPropTypes = $ReadOnly<{
 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>>>
+  $ReadOnly<$Rest<NestedCSSPropTypes, $Exact<T>>>,
 >;
 
-export type Styles = $ReadOnly<{ [namespace: string]: Style, ... }>;
-
-export type Style = $ReadOnly<{
-  ...CSSProperties,
-  [pseudo: string]: CSSProperties,
-  ...
-}>;
-
-export type Rules = Style | CSSProperties;
-
 export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
-export type Theme = $ReadOnly<{ [constantName: string]: string, ... }>;
+export type LegacyTheme = $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>;
+export type MapNamespace<CSS: { ... }> = $ReadOnly<{
+  ...$ObjMapi<CSS, MapCSSValueToClassName>,
+  $$css: true,
+}>;
 // 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: {}>(
@@ -117,19 +110,75 @@ export type MapNamespace<CSS: { ... }> = $ObjMapi<CSS, MapCSSValueToClassName>;
 export type MapNamespaces = <CSS: { ... }>(CSS) => MapNamespace<CSS>;
 
 export type Stylex$Create = <S: { ... }>(
-  styles: S
+  styles: S,
 ) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
 
+export type CompiledStyles = $ReadOnly<{
+  $$css: true,
+  [key: string]:
+    | StyleXClassName
+    | $ReadOnly<{ [key: string]: StyleXClassName, ... }>,
+  ...
+}>;
+
 // This is the type for the variables object
 declare export opaque type StyleXVarsTheme<+Vars: { +[string]: string }>: Vars;
 
-export type Stylex$CreateVars = <+Vars: { +[string]: string }>(
-  styles: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
+declare export opaque type Theme<
+  +Tokens: { +[string]: mixed },
+  // eslint-disable-next-line no-unused-vars
+  +ID: string = string,
+>: $ReadOnly<{ [$Keys<Tokens>]: string }>;
+
+export type TokensFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
+  infer Tokens,
+>
+  ? Tokens
+  : empty;
+type IDFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
+  { +[string]: mixed },
+  infer ID,
+>
+  ? ID
+  : empty;
+
+export type FlattenTokens<
+  T: {
+    +[string]: string | { +default: string, +[string]: string },
+  },
+> = {
+  +[Key in keyof T]: T[Key] extends { +default: infer X, +[string]: infer Y }
+    ? X | Y
+    : T[Key],
+};
+
+export type StyleX$CreateVars = <
+  +DefaultTokens: {
+    +[string]: string | { default: string, +[string]: string },
+  },
+  +ID: string = string,
+>(
+  tokens: DefaultTokens,
+) => Theme<FlattenTokens<DefaultTokens>, ID>;
+
+export type Variant<
+  +T: Theme<{ +[string]: mixed }, string>,
+  +_Tag: string = string,
+> = $ReadOnly<{
+  $$css: true,
+  [string]: StyleXClassNameFor<string, IDFromTheme<T>>,
+}>;
 
-export type Stylex$OverrideVars = <+Vars: { +[string]: string }>(
-  styles: Vars & { __themeName__: string },
-  stylesOverride: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
+export type OverridesForTokenType<Config: { +[string]: mixed }> = {
+  [Key in keyof Config]:
+    | Config[Key]
+    | { +default: Config[Key], +[string]: Config[Key] },
+};
+
+export type StyleX$OverrideVars = <
+  +BaseTokens: Theme<{ +[string]: mixed }>,
+  +ID: string = string,
+>(
+  baseTokens: BaseTokens,
+  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
+) => Variant<BaseTokens, ID>;

package/lib/native/CSSCustomPropertyValue.js

@@ -5,27 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CSSCustomPropertyValue = void 0;
 exports.isCustomPropertyValue = isCustomPropertyValue;
-/**
- * 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.
- *
- * 
- */
-
 const CUSTOM_PROPERTY_REGEX = /^var\(--(.+)\)$/;
 function camelize(s) {
   return s.replace(/-./g, x => x.toUpperCase()[1]);
 }
 function isCustomPropertyValue(value) {
-  return typeof value === 'string' && CUSTOM_PROPERTY_REGEX.test(value);
+  return typeof value === "string" && CUSTOM_PROPERTY_REGEX.test(value);
 }
 class CSSCustomPropertyValue {
   constructor(value) {
     const found = value.match(CUSTOM_PROPERTY_REGEX);
     if (found == null) {
-      throw new Error('[stylex]: Unable to find custom property reference in input string');
+      throw new Error("[stylex]: Unable to find custom property reference in input string");
     }
     const [, kebabCasePropName] = found;
     this.name = camelize(kebabCasePropName);

package/lib/native/CSSLengthUnitValue.d.ts

@@ -17,6 +17,6 @@ export declare class CSSLengthUnitValue {
     viewportWidth: number,
     viewportHeight: number,
     fontScale: number,
-    inheritedFontSize: null | undefined | number
+    inheritedFontSize: null | undefined | number,
   ): number;
 }

package/lib/native/CSSLengthUnitValue.js

@@ -4,17 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CSSLengthUnitValue = void 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.
- *
- * 
- */
-
 const LENGTH_REGEX = /^([0-9]*[.]?[0-9]+)(em|px|rem|vh|vmax|vmin|vw)$/;
-// TODO: this only works on simple values
 class CSSLengthUnitValue {
   static parse(inp) {
     const match = inp.match(LENGTH_REGEX);
@@ -23,7 +13,6 @@ class CSSLengthUnitValue {
     }
     const [, value, unit] = match;
     const parsedValue = parseFloat(value);
-    // $FlowFixMe
     return new CSSLengthUnitValue(parsedValue, unit);
   }
   constructor(value, unit) {
@@ -35,7 +24,7 @@ class CSSLengthUnitValue {
     const value = this.value;
     const valuePercent = value / 100;
     switch (unit) {
-      case 'em':
+      case "em":
         {
           if (inheritedFontSize == null) {
             return fontScale * 16 * value;
@@ -43,27 +32,27 @@ class CSSLengthUnitValue {
             return inheritedFontSize * value;
           }
         }
-      case 'px':
+      case "px":
         {
           return value;
         }
-      case 'rem':
+      case "rem":
         {
           return fontScale * 16 * value;
         }
-      case 'vh':
+      case "vh":
         {
           return viewportHeight * valuePercent;
         }
-      case 'vmin':
+      case "vmin":
         {
           return Math.min(viewportWidth, viewportHeight) * valuePercent;
         }
-      case 'vmax':
+      case "vmax":
         {
           return Math.max(viewportWidth, viewportHeight) * valuePercent;
         }
-      case 'vw':
+      case "vw":
         {
           return viewportWidth * valuePercent;
         }

package/lib/native/CSSLengthUnitValue.js.flow

@@ -19,6 +19,6 @@ declare export class CSSLengthUnitValue {
     viewportWidth: number,
     viewportHeight: number,
     fontScale: number,
-    inheritedFontSize: ?number
+    inheritedFontSize: ?number,
   ): number;
 }

package/lib/native/CSSMediaQuery.d.ts

@@ -16,7 +16,7 @@ export declare class CSSMediaQuery {
   static isMediaQueryString(inp: string): boolean;
   static resolveMediaQueries(
     styleObj: { readonly [$$Key$$: string]: unknown },
-    matchObj: MatchObject
+    matchObj: MatchObject,
   ): { [$$Key$$: string]: unknown };
   query: string;
   matchedStyle: { [$$Key$$: string]: unknown };

package/lib/native/CSSMediaQuery.js

@@ -6,16 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CSSMediaQuery = void 0;
 var _cssMediaquery = _interopRequireDefault(require("css-mediaquery"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- * 
- */
-
-const MQ_PREFIX = '@media';
+const MQ_PREFIX = "@media";
 class CSSMediaQuery {
   static isMediaQueryString(inp) {
     return inp.startsWith(MQ_PREFIX);
@@ -23,8 +14,6 @@ class CSSMediaQuery {
   static resolveMediaQueries(styleObj, matchObj) {
     const mediaQueries = [];
     const result = {};
-
-    // collect all the media queries
     for (const [key, value] of Object.entries(styleObj)) {
       if (value instanceof CSSMediaQuery) {
         mediaQueries.push(value);
@@ -32,9 +21,6 @@ class CSSMediaQuery {
         result[key] = value;
       }
     }
-
-    // check the media queries to see if any apply and if they do,
-    // merge their styles into the result
     if (mediaQueries.length > 0) {
       for (const mqInst of mediaQueries) {
         const unresolvedMatchedStyle = mqInst.resolve(matchObj);
@@ -47,7 +33,7 @@ class CSSMediaQuery {
     return result;
   }
   constructor(query, matchedStyle) {
-    this.query = query.replace(MQ_PREFIX, '');
+    this.query = query.replace(MQ_PREFIX, "");
     this.matchedStyle = matchedStyle;
   }
   resolve(matchObject) {
@@ -59,8 +45,8 @@ class CSSMediaQuery {
     const matches = _cssMediaquery.default.match(this.query, {
       width,
       height,
-      orientation: width > height ? 'landscape' : 'portrait',
-      'aspect-ratio': width / height,
+      orientation: width > height ? "landscape" : "portrait",
+      "aspect-ratio": width / height,
       direction: direction
     });
     return matches ? this.matchedStyle : {};

package/lib/native/CSSMediaQuery.js.flow

@@ -17,7 +17,7 @@ declare export class CSSMediaQuery {
   static isMediaQueryString(inp: string): boolean;
   static resolveMediaQueries(
     styleObj: { +[string]: mixed },
-    matchObj: MatchObject
+    matchObj: MatchObject,
   ): { [string]: mixed };
   query: string;
   matchedStyle: { [string]: mixed };

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

@@ -75,6 +75,39 @@ exports[`length units 10 "vw" units are resolved to pixels 1`] = `
 }
 `;
 
+exports[`styles animation-delay 1`] = `
+{
+  "style": {
+    "animationDelay": 300,
+  },
+}
+`;
+
+exports[`styles animation-duration 1`] = `
+{
+  "style": {
+    "animationDuration": 500,
+  },
+}
+`;
+
+exports[`styles border-style 1`] = `
+{
+  "style": {
+    "borderWidth": 0,
+  },
+}
+`;
+
+exports[`styles border-style 2`] = `
+{
+  "style": {
+    "borderStyle": "solid",
+    "borderWidth": 10,
+  },
+}
+`;
+
 exports[`styles box-shadow 1`] = `
 {
   "style": {
@@ -151,6 +184,38 @@ exports[`styles line-clamp 1`] = `
 }
 `;
 
+exports[`styles logical border radius: endend 1`] = `
+{
+  "style": {
+    "borderBottomEndRadius": 10,
+  },
+}
+`;
+
+exports[`styles logical border radius: endstart 1`] = `
+{
+  "style": {
+    "borderBottomStartRadius": 10,
+  },
+}
+`;
+
+exports[`styles logical border radius: startend 1`] = `
+{
+  "style": {
+    "borderTopEndRadius": 10,
+  },
+}
+`;
+
+exports[`styles logical border radius: startstart 1`] = `
+{
+  "style": {
+    "borderTopStartRadius": 10,
+  },
+}
+`;
+
 exports[`styles object-fit: contain 1`] = `
 {
   "style": {
@@ -341,6 +406,22 @@ exports[`styles transform: translate 1`] = `
 }
 `;
 
+exports[`styles transition-delay 1`] = `
+{
+  "style": {
+    "transitionDelay": 300,
+  },
+}
+`;
+
+exports[`styles transition-duration 1`] = `
+{
+  "style": {
+    "transitionDuration": 500,
+  },
+}
+`;
+
 exports[`styles user-select 1`] = `
 {
   "style": {

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _parseTimeValue = require("../parseTimeValue");
+const WPT_TRANSITION_DELAY_TEST_CASES = [["10.2s", 10200], ["1s", 1000], ["0.1s", 100], ["0.01s", 10], ["0.001s", 1], ["0.009s", 9], ["0s", 0], [".0s", 0], [".3s", 300], ["-5s", -5000], ["10200ms", 10200], ["1000ms", 1000], ["100ms", 100], ["10ms", 10], ["9ms", 9], ["1ms", 1], ["0ms", 0], ["-500ms", -500], ["foobar", 0]];
+describe("parseTimeValue", () => {
+  it("parses time values to milliseconds", () => {
+    for (const [timeValue, expectedMilliseconds] of WPT_TRANSITION_DELAY_TEST_CASES) {
+      expect((0, _parseTimeValue.parseTimeValue)(timeValue)).toEqual(expectedMilliseconds);
+    }
+  });
+});