@stylexjs/stylex - npm Package Compare versions

Comparing version 0.2.0-beta.16 to 0.2.0-beta.17

lib/native/__tests__/stylex-test.js

 "use strict";
 
 var _stylex = require("../stylex");
-/**
- * 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 mockOptions = {
@@ -16,5 +9,5 @@ customProperties: {},
 };
-describe('styles', () => {
+describe("styles", () => {
   beforeEach(() => {
-    jest.spyOn(console, 'error');
+    jest.spyOn(console, "error");
     console.error.mockImplementation(() => {});
@@ -25,21 +18,50 @@ });
   });
-  test('background-image', () => {
+  test("animation-delay", () => {
     const styles = _stylex.stylex.create({
       root: {
-        backgroundImage: 'url(https://placehold.it/300/300'
+        animationDelay: "0.3s"
       }
     });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("animation-duration", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        animationDuration: "0.5s"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("background-image", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        backgroundImage: "url(https://placehold.it/300/300"
+      }
+    });
     _stylex.stylex.spread(styles.root, mockOptions);
     expect(console.error).toHaveBeenCalled();
   });
-  test('box-shadow', () => {
+  test("border-style", () => {
     const styles = _stylex.stylex.create({
       root: {
-        boxShadow: '1px 2px 3px 4px red'
+        borderStyle: "none",
+        borderWidth: 10
+      },
+      override: {
+        borderStyle: "solid"
       }
     });
     expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.spread([styles.root, styles.override], mockOptions)).toMatchSnapshot();
+  });
+  test("box-shadow", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        boxShadow: "1px 2px 3px 4px red"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
     const styles2 = _stylex.stylex.create({
       root: {
-        boxShadow: '1px 2px 3px 4px red, 2px 3px 4px 5px blue'
+        boxShadow: "1px 2px 3px 4px red, 2px 3px 4px 5px blue"
       }
@@ -51,3 +73,3 @@ });
       root: {
-        boxShadow: 'inset 1px 2px 3px 4px red'
+        boxShadow: "inset 1px 2px 3px 4px red"
       }
@@ -58,6 +80,6 @@ });
   });
-  test('direction', () => {
+  test("direction", () => {
     const styles = _stylex.stylex.create({
       root: {
-        direction: 'ltr'
+        direction: "ltr"
       }
@@ -68,3 +90,3 @@ });
       root: {
-        direction: 'rtl'
+        direction: "rtl"
       }
@@ -74,18 +96,18 @@ });
   });
-  test('font-size', () => {
+  test("font-size", () => {
     const styles = _stylex.stylex.create({
       root: {
-        fontSize: '2.5rem'
+        fontSize: "2.5rem"
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot('default');
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot("default");
     expect(_stylex.stylex.spread(styles.root, {
       ...mockOptions,
       fontScale: 2
-    })).toMatchSnapshot('fontScale:2');
+    })).toMatchSnapshot("fontScale:2");
   });
-  test('font-variant', () => {
+  test("font-variant", () => {
     const styles = _stylex.stylex.create({
       root: {
-        fontVariant: 'common-ligatures small-caps'
+        fontVariant: "common-ligatures small-caps"
       }
@@ -95,3 +117,3 @@ });
   });
-  test('font-weight', () => {
+  test("font-weight", () => {
     const styles = _stylex.stylex.create({
@@ -105,3 +127,3 @@ root: {
       root: {
-        fontWeight: 'bold'
+        fontWeight: "bold"
       }
@@ -111,3 +133,3 @@ });
   });
-  test('line-clamp', () => {
+  test("line-clamp", () => {
     const styles = _stylex.stylex.create({
@@ -120,30 +142,30 @@ root: {
   });
-  test('object-fit', () => {
+  test("object-fit", () => {
     const styles = _stylex.stylex.create({
       contain: {
-        objectFit: 'contain'
+        objectFit: "contain"
       },
       cover: {
-        objectFit: 'cover'
+        objectFit: "cover"
       },
       fill: {
-        objectFit: 'fill'
+        objectFit: "fill"
       },
       scaleDown: {
-        objectFit: 'scale-down'
+        objectFit: "scale-down"
       },
       none: {
-        objectFit: 'none'
+        objectFit: "none"
       }
     });
-    expect(_stylex.stylex.spread(styles.contain, mockOptions)).toMatchSnapshot('contain');
-    expect(_stylex.stylex.spread(styles.cover, mockOptions)).toMatchSnapshot('contain');
-    expect(_stylex.stylex.spread(styles.fill, mockOptions)).toMatchSnapshot('fill');
-    expect(_stylex.stylex.spread(styles.scaleDown, mockOptions)).toMatchSnapshot('scaleDown');
-    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot('none');
+    expect(_stylex.stylex.spread(styles.contain, mockOptions)).toMatchSnapshot("contain");
+    expect(_stylex.stylex.spread(styles.cover, mockOptions)).toMatchSnapshot("contain");
+    expect(_stylex.stylex.spread(styles.fill, mockOptions)).toMatchSnapshot("fill");
+    expect(_stylex.stylex.spread(styles.scaleDown, mockOptions)).toMatchSnapshot("scaleDown");
+    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot("none");
   });
-  test('pointer-events', () => {
+  test("pointer-events", () => {
     const styles = _stylex.stylex.create({
       root: {
-        pointerEvents: 'none'
+        pointerEvents: "none"
       }
@@ -153,31 +175,31 @@ });
   });
-  test('position', () => {
+  test("position", () => {
     const styles = _stylex.stylex.create({
       static: {
-        position: 'static'
+        position: "static"
       },
       relative: {
-        position: 'relative'
+        position: "relative"
       },
       absolute: {
-        position: 'absolute'
+        position: "absolute"
       },
       fixed: {
-        position: 'fixed'
+        position: "fixed"
       },
       sticky: {
-        position: 'sticky'
+        position: "sticky"
       }
     });
     expect(console.error).toHaveBeenCalledTimes(2);
-    expect(_stylex.stylex.spread(styles.static, mockOptions)).toMatchSnapshot('static');
-    expect(_stylex.stylex.spread(styles.relative, mockOptions)).toMatchSnapshot('relative');
-    expect(_stylex.stylex.spread(styles.absolute, mockOptions)).toMatchSnapshot('absolute');
-    expect(_stylex.stylex.spread(styles.fixed, mockOptions)).toMatchSnapshot('fixed');
-    expect(_stylex.stylex.spread(styles.sticky, mockOptions)).toMatchSnapshot('sticky');
+    expect(_stylex.stylex.spread(styles.static, mockOptions)).toMatchSnapshot("static");
+    expect(_stylex.stylex.spread(styles.relative, mockOptions)).toMatchSnapshot("relative");
+    expect(_stylex.stylex.spread(styles.absolute, mockOptions)).toMatchSnapshot("absolute");
+    expect(_stylex.stylex.spread(styles.fixed, mockOptions)).toMatchSnapshot("fixed");
+    expect(_stylex.stylex.spread(styles.sticky, mockOptions)).toMatchSnapshot("sticky");
   });
-  test('text-shadow', () => {
+  test("text-shadow", () => {
     const styles = _stylex.stylex.create({
       root: {
-        textShadow: '1px 2px 3px red'
+        textShadow: "1px 2px 3px red"
       }
@@ -188,3 +210,3 @@ });
       root: {
-        textShadow: '1px 2px 3px red, 2px 3px 4px blue'
+        textShadow: "1px 2px 3px red, 2px 3px 4px blue"
       }
@@ -195,24 +217,24 @@ });
   });
-  test('transform', () => {
+  test("transform", () => {
     const styles = _stylex.stylex.create({
       none: {
-        transform: 'none'
+        transform: "none"
       },
       matrix: {
-        transform: 'matrix(0.1, 1, -0.3, 1, 0, 0)'
+        transform: "matrix(0.1, 1, -0.3, 1, 0, 0)"
       },
       perspective: {
-        transform: 'perspective(10px)'
+        transform: "perspective(10px)"
       },
       rotate: {
-        transform: 'rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)'
+        transform: "rotate(10deg) rotateX(20deg) rotateY(30deg) rotateZ(40deg) rotate3d(0, 0.5, 1, 90deg)"
       },
       scale: {
-        transform: 'scale(1, 2) scaleX(1) scaleY(2) scaleZ(3) scale3d(1, 2, 3)'
+        transform: "scale(1, 2) scaleX(1) scaleY(2) scaleZ(3) scale3d(1, 2, 3)"
       },
       skew: {
-        transform: 'skew(10deg, 15deg) skewX(20deg) skewY(30deg)'
+        transform: "skew(10deg, 15deg) skewX(20deg) skewY(30deg)"
       },
       translate: {
-        transform: 'translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)'
+        transform: "translate(10px, 20px) translateX(11px) translateY(12px) translateZ(13px) translate3d(20px, 30px, 40px)"
       },
@@ -227,16 +249,16 @@ mixed: {
     });
-    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot('none');
-    expect(_stylex.stylex.spread(styles.matrix, mockOptions)).toMatchSnapshot('matrix');
-    expect(_stylex.stylex.spread(styles.perspective, mockOptions)).toMatchSnapshot('perspective');
-    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot('rotate');
-    expect(_stylex.stylex.spread(styles.scale, mockOptions)).toMatchSnapshot('scale');
-    expect(_stylex.stylex.spread(styles.skew, mockOptions)).toMatchSnapshot('skew');
-    expect(_stylex.stylex.spread(styles.translate, mockOptions)).toMatchSnapshot('translate');
-    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot('rotate');
-    expect(_stylex.stylex.spread(styles.mixed, mockOptions)).toMatchSnapshot('mixed');
+    expect(_stylex.stylex.spread(styles.none, mockOptions)).toMatchSnapshot("none");
+    expect(_stylex.stylex.spread(styles.matrix, mockOptions)).toMatchSnapshot("matrix");
+    expect(_stylex.stylex.spread(styles.perspective, mockOptions)).toMatchSnapshot("perspective");
+    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot("rotate");
+    expect(_stylex.stylex.spread(styles.scale, mockOptions)).toMatchSnapshot("scale");
+    expect(_stylex.stylex.spread(styles.skew, mockOptions)).toMatchSnapshot("skew");
+    expect(_stylex.stylex.spread(styles.translate, mockOptions)).toMatchSnapshot("translate");
+    expect(_stylex.stylex.spread(styles.rotate, mockOptions)).toMatchSnapshot("rotate");
+    expect(_stylex.stylex.spread(styles.mixed, mockOptions)).toMatchSnapshot("mixed");
   });
-  test('user-select', () => {
+  test("transition-delay", () => {
     const styles = _stylex.stylex.create({
       root: {
-        userSelect: 'none'
+        transitionDelay: "0.3s"
       }
@@ -246,16 +268,52 @@ });
   });
-  test('vertical-align', () => {
+  test("transition-duration", () => {
     const styles = _stylex.stylex.create({
+      root: {
+        transitionDuration: "0.5s"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("user-select", () => {
+    const styles = _stylex.stylex.create({
+      root: {
+        userSelect: "none"
+      }
+    });
+    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+  });
+  test("vertical-align", () => {
+    const styles = _stylex.stylex.create({
       middle: {
-        verticalAlign: 'middle'
+        verticalAlign: "middle"
       },
       top: {
-        verticalAlign: 'top'
+        verticalAlign: "top"
       }
     });
-    expect(_stylex.stylex.spread(styles.middle, mockOptions)).toMatchSnapshot('middle');
-    expect(_stylex.stylex.spread(styles.top, mockOptions)).toMatchSnapshot('top');
+    expect(_stylex.stylex.spread(styles.middle, mockOptions)).toMatchSnapshot("middle");
+    expect(_stylex.stylex.spread(styles.top, mockOptions)).toMatchSnapshot("top");
   });
-  test.skip('logical border short-forms', () => {
+  test("logical border radius", () => {
     const styles = _stylex.stylex.create({
+      startstart: {
+        borderStartStartRadius: 10
+      },
+      startend: {
+        borderStartEndRadius: 10
+      },
+      endstart: {
+        borderEndStartRadius: 10
+      },
+      endend: {
+        borderEndEndRadius: 10
+      }
+    });
+    expect(_stylex.stylex.spread(styles.startstart, mockOptions)).toMatchSnapshot("startstart");
+    expect(_stylex.stylex.spread(styles.startend, mockOptions)).toMatchSnapshot("startend");
+    expect(_stylex.stylex.spread(styles.endstart, mockOptions)).toMatchSnapshot("endstart");
+    expect(_stylex.stylex.spread(styles.endend, mockOptions)).toMatchSnapshot("endend");
+  });
+  test.skip("logical border short-forms", () => {
+    const styles = _stylex.stylex.create({
       root: {}
@@ -265,3 +323,3 @@ });
   });
-  test.skip('logical border long-forms', () => {
+  test.skip("logical border long-forms", () => {
     const styles = _stylex.stylex.create({
@@ -272,3 +330,3 @@ root: {}
   });
-  test.skip('logical inset short-forms', () => {
+  test.skip("logical inset short-forms", () => {
     const styles = _stylex.stylex.create({
@@ -282,6 +340,6 @@ root: {
   });
-  test.skip('logical text alignment', () => {
+  test.skip("logical text alignment", () => {
     const styles = _stylex.stylex.create({
       root: {
-        textAlign: 'start'
+        textAlign: "start"
       }
@@ -292,4 +350,4 @@ });
 });
-describe('length units', () => {
-  const unitsToTest = ['em', 'px', 'rem', 'vh', 'vmax', 'vmin', 'vw'];
+describe("length units", () => {
+  const unitsToTest = ["em", "px", "rem", "vh", "vmax", "vmin", "vw"];
   const value = 10;
@@ -318,5 +376,5 @@ for (const unitToTest of unitsToTest) {
 });
-describe('custom properties', () => {
+describe("custom properties", () => {
   beforeEach(() => {
-    jest.spyOn(console, 'error');
+    jest.spyOn(console, "error");
     console.error.mockImplementation(() => {});
@@ -327,3 +385,3 @@ });
   });
-  test('filters out the property and emits a warning when encountering a variable name which has not been provided', () => {
+  test("filters out the property and emits a warning when encountering a variable name which has not been provided", () => {
     const {
@@ -333,7 +391,7 @@ underTest
       underTest: {
-        width: 'var(--unprovided)'
+        width: "var(--unprovided)"
       }
     });
     expect(_stylex.stylex.spread(underTest, mockOptions)).toMatchSnapshot();
-    expect(console.error).toHaveBeenCalledWith('stylex: Unrecognized custom property "--unprovided"');
+    expect(console.error).toHaveBeenCalledWith("stylex: Unrecognized custom property \"--unprovided\"");
   });
@@ -345,4 +403,4 @@ test("resolves custom properties' values", () => {
       underTest: {
-        color: 'var(--slightly-darker-black)',
-        width: 'var(--the-best-width)'
+        color: "var(--slightly-darker-black)",
+        width: "var(--the-best-width)"
       }
@@ -353,3 +411,3 @@ });
       customProperties: {
-        slightlyDarkerBlack: '#333',
+        slightlyDarkerBlack: "#333",
         theBestWidth: 42
@@ -394,9 +452,9 @@ }
 });
-describe('media queries', () => {
-  test('matches a "min-width" query', () => {
-    expect('(min-width: 400px)').toMatchWindowDimensions({
+describe("media queries", () => {
+  test("matches a \"min-width\" query", () => {
+    expect("(min-width: 400px)").toMatchWindowDimensions({
       width: 450,
       height: 0
     });
-    expect('(min-width: 400px)').not.toMatchWindowDimensions({
+    expect("(min-width: 400px)").not.toMatchWindowDimensions({
       width: 350,
@@ -406,8 +464,8 @@ height: 0
   });
-  test('matches a "max-width" query', () => {
-    expect('(max-width: 400px)').toMatchWindowDimensions({
+  test("matches a \"max-width\" query", () => {
+    expect("(max-width: 400px)").toMatchWindowDimensions({
       width: 350,
       height: 0
     });
-    expect('(max-width: 400px)').not.toMatchWindowDimensions({
+    expect("(max-width: 400px)").not.toMatchWindowDimensions({
       width: 450,
@@ -417,8 +475,8 @@ height: 0
   });
-  test('matches a "min-height" query', () => {
-    expect('(min-height: 400px)').toMatchWindowDimensions({
+  test("matches a \"min-height\" query", () => {
+    expect("(min-height: 400px)").toMatchWindowDimensions({
       width: 0,
       height: 450
     });
-    expect('(min-height: 400px)').not.toMatchWindowDimensions({
+    expect("(min-height: 400px)").not.toMatchWindowDimensions({
       width: 0,
@@ -428,8 +486,8 @@ height: 350
   });
-  test('matches a "max-height" query', () => {
-    expect('(max-height: 400px)').toMatchWindowDimensions({
+  test("matches a \"max-height\" query", () => {
+    expect("(max-height: 400px)").toMatchWindowDimensions({
       width: 0,
       height: 350
     });
-    expect('(max-height: 400px)').not.toMatchWindowDimensions({
+    expect("(max-height: 400px)").not.toMatchWindowDimensions({
       width: 0,
@@ -440,7 +498,7 @@ height: 450
 });
-describe('unsupported style properties', () => {
+describe("unsupported style properties", () => {
   beforeEach(() => {
-    jest.spyOn(console, 'error');
+    jest.spyOn(console, "error");
     console.error.mockImplementation(() => {});
-    jest.spyOn(console, 'warn');
+    jest.spyOn(console, "warn");
     console.warn.mockImplementation(() => {});
@@ -452,3 +510,3 @@ });
   });
-  test('"filter"', () => {
+  test("\"filter\"", () => {
     const {
@@ -458,3 +516,3 @@ underTest
       underTest: {
-        filter: 'blur(1px)'
+        filter: "blur(1px)"
       }
@@ -465,3 +523,3 @@ });
   });
-  test('"marginStart"', () => {
+  test("\"marginStart\"", () => {
     const {
@@ -477,3 +535,3 @@ underTest
   });
-  test('"marginEnd"', () => {
+  test("\"marginEnd\"", () => {
     const {
@@ -489,3 +547,3 @@ underTest
   });
-  test('"marginHorizontal"', () => {
+  test("\"marginHorizontal\"", () => {
     const {
@@ -501,3 +559,3 @@ underTest
   });
-  test('"marginVertical"', () => {
+  test("\"marginVertical\"", () => {
     const {
@@ -513,3 +571,3 @@ underTest
   });
-  test('"paddingHorizontal"', () => {
+  test("\"paddingHorizontal\"", () => {
     const {
@@ -525,3 +583,3 @@ underTest
   });
-  test('"paddingVertical"', () => {
+  test("\"paddingVertical\"", () => {
     const {
@@ -537,3 +595,3 @@ underTest
   });
-  test('"transitionProperty" passthrough', () => {
+  test("\"transitionProperty\" passthrough", () => {
     const {
@@ -543,3 +601,3 @@ underTest
       underTest: {
-        transitionProperty: 'opacity'
+        transitionProperty: "opacity"
       }
@@ -549,3 +607,3 @@ });
       ...mockOptions,
-      passthroughProperties: ['transitionProperty']
+      passthroughProperties: ["transitionProperty"]
     })).toMatchSnapshot();
@@ -555,5 +613,5 @@ expect(console.error).not.toHaveBeenCalled();
 });
-describe('unsupported style values', () => {
+describe("unsupported style values", () => {
   beforeEach(() => {
-    jest.spyOn(console, 'error');
+    jest.spyOn(console, "error");
     console.error.mockImplementation(() => {});
@@ -564,3 +622,3 @@ });
   });
-  test('calc', () => {
+  test("calc", () => {
     const {
@@ -570,3 +628,3 @@ underTest
       underTest: {
-        width: 'calc(2 * 1rem)'
+        width: "calc(2 * 1rem)"
       }
@@ -577,3 +635,3 @@ });
   });
-  test('inherit', () => {
+  test("inherit", () => {
     const {
@@ -583,3 +641,3 @@ underTest
       underTest: {
-        fontSize: 'inherit'
+        fontSize: "inherit"
       }
@@ -590,3 +648,3 @@ });
   });
-  test('initial', () => {
+  test("initial", () => {
     const {
@@ -596,3 +654,3 @@ underTest
       underTest: {
-        fontSize: 'initial'
+        fontSize: "initial"
       }
@@ -599,0 +657,0 @@ });

lib/native/CSSCustomPropertyValue.js

@@ -8,11 +8,2 @@ "use strict";
 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\(--(.+)\)$/;
@@ -23,3 +14,3 @@ function camelize(s) {
 function isCustomPropertyValue(value) {
-  return typeof value === 'string' && CUSTOM_PROPERTY_REGEX.test(value);
+  return typeof value === "string" && CUSTOM_PROPERTY_REGEX.test(value);
 }
@@ -30,3 +21,3 @@ class CSSCustomPropertyValue {
     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");
     }
@@ -33,0 +24,0 @@ const [, kebabCasePropName] = found;

lib/native/CSSLengthUnitValue.d.ts

@@ -20,4 +20,4 @@ /**
     fontScale: number,
-    inheritedFontSize: null | undefined | number
+    inheritedFontSize: null | undefined | number,
   ): number;
 }

lib/native/CSSLengthUnitValue.js

@@ -7,13 +7,3 @@ "use strict";
 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 {
@@ -27,3 +17,2 @@ static parse(inp) {
     const parsedValue = parseFloat(value);
-    // $FlowFixMe
     return new CSSLengthUnitValue(parsedValue, unit);
@@ -40,3 +29,3 @@ }
     switch (unit) {
-      case 'em':
+      case "em":
         {
@@ -49,23 +38,23 @@ if (inheritedFontSize == null) {
         }
-      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":
         {
@@ -72,0 +61,0 @@ return viewportWidth * valuePercent;

lib/native/CSSMediaQuery.d.ts

@@ -19,3 +19,3 @@ /**
     styleObj: { readonly [$$Key$$: string]: unknown },
-    matchObj: MatchObject
+    matchObj: MatchObject,
   ): { [$$Key$$: string]: unknown };
@@ -22,0 +22,0 @@ query: string;

lib/native/CSSMediaQuery.js

@@ -9,12 +9,3 @@ "use strict";
 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 {
@@ -27,4 +18,2 @@ static isMediaQueryString(inp) {
     const result = {};
-
-    // collect all the media queries
     for (const [key, value] of Object.entries(styleObj)) {
@@ -37,5 +26,2 @@ if (value instanceof CSSMediaQuery) {
     }
-
-    // check the media queries to see if any apply and if they do,
-    // merge their styles into the result
     if (mediaQueries.length > 0) {
@@ -53,3 +39,3 @@ for (const mqInst of mediaQueries) {
   constructor(query, matchedStyle) {
-    this.query = query.replace(MQ_PREFIX, '');
+    this.query = query.replace(MQ_PREFIX, "");
     this.matchedStyle = matchedStyle;
@@ -66,4 +52,4 @@ }
       height,
-      orientation: width > height ? 'landscape' : 'portrait',
-      'aspect-ratio': width / height,
+      orientation: width > height ? "landscape" : "portrait",
+      "aspect-ratio": width / height,
       direction: direction
@@ -70,0 +56,0 @@ });

lib/native/errorMsg.js

@@ -8,11 +8,2 @@ "use strict";
 exports.warnMsg = warnMsg;
-/**
- * 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 errorMsg(msg) {
@@ -19,0 +10,0 @@ console.error(`stylex: ${msg}`);

lib/native/flattenStyle.js

@@ -7,11 +7,2 @@ "use strict";
 exports.flattenStyle = flattenStyle;
-/**
- * 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 flattenStyle() {
@@ -25,4 +16,3 @@ for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     const style = flatArray[i];
-    if (style != null && typeof style === 'object') {
-      // $FlowFixMe
+    if (style != null && typeof style === "object") {
       Object.assign(result, style);
@@ -29,0 +19,0 @@ }

lib/native/parseShadow.js

@@ -7,11 +7,2 @@ "use strict";
 exports.parseShadow = parseShadow;
-/**
- * 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 VALUES_REG = /,(?![^(]*\))/;
@@ -21,6 +12,6 @@ const PARTS_REG = /\s(?![^(]*\))/;
 function isLength(v) {
-  return v === '0' || LENGTH_REG.test(v);
+  return v === "0" || LENGTH_REG.test(v);
 }
 function toMaybeNum(v) {
-  if (!/px$/.test(v) && v !== '0') return v;
+  if (!/px$/.test(v) && v !== "0") return v;
   const n = parseFloat(v);
@@ -31,6 +22,6 @@ return !isNaN(n) ? n : v;
   const parts = str.split(PARTS_REG);
-  const inset = parts.includes('inset');
+  const inset = parts.includes("inset");
   const last = parts.slice(-1)[0];
   const color = !isLength(last) ? last : null;
-  const nums = parts.filter(n => n !== 'inset').filter(n => n !== color).map(toMaybeNum);
+  const nums = parts.filter(n => n !== "inset").filter(n => n !== color).map(toMaybeNum);
   const [offsetX, offsetY, blurRadius, spreadRadius] = nums;
@@ -37,0 +28,0 @@ return {

lib/native/stylex.d.ts

@@ -17,5 +17,5 @@ /**
 export declare function create<S extends { [$$Key$$: string]: {} }>(
-  styles: S
+  styles: S,
 ): { [$$Key$$: string]: {} };
-export declare var firstThatWorks: <T extends string | number>(
+export declare const firstThatWorks: <T extends string | number>(
   ...values: ReadonlyArray<T>
@@ -41,3 +41,3 @@ ) => T;
   style: null | undefined | { [key: string]: unknown },
-  $$PARAM_1$$: SpreadOptions
+  $$PARAM_1$$: SpreadOptions,
 ): { [$$Key$$: string]: {} };
@@ -50,3 +50,4 @@ export type IStyleX = {
 };
-export declare var stylex: IStyleX;
-export default stylex;
+export declare const stylex: IStyleX;
+declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

lib/native/stylex.js

@@ -17,47 +17,19 @@ "use strict";
 var _parseShadow = require("./parseShadow");
-/**
- * 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 stylePropertyAllowlistSet = new Set(['alignContent', 'alignItems', 'alignSelf', 'aspectRatio', 'backfaceVisibility', 'backgroundColor', 'borderBlockColor', 'borderBlockStyle', 'borderBlockWidth', 'borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth', 'borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderColor', 'borderInlineColor', 'borderInlineStyle', 'borderInlineWidth', 'borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth', 'borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth', 'borderEndColor', 'borderEndStyle', 'borderEndWidth', 'borderStartColor', 'borderStartStyle', 'borderStartWidth', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStartEndRadius', 'borderStartStartRadius', 'borderStyle', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'color', 'direction', 'display', 'end', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'fontVariant', 'gap', 'gapColumn', 'gapRow', 'height',
-// 'includeFontPadding', Android Only
-'inset', 'insetBlock', 'insetBlockEnd', 'insetBlockStart', 'insetInline', 'insetInlineEnd', 'insetInlineStart', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'margin', 'marginBlock', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginEnd', 'marginInline', 'marginInlineEnd', 'marginInlineStart', 'marginLeft', 'marginRight', 'marginStart', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'objectFit', 'opacity', 'overflow', 'padding', 'paddingBlock', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingEnd', 'paddingInline', 'paddingInlineEnd', 'paddingInlineStart', 'paddingLeft', 'paddingRight', 'paddingStart', 'paddingTop', 'pointerEvents', 'position', 'resizeMode', 'right', 'shadowColor', 'shadowOffset', 'shadowOpacity', 'shadowRadius', 'shadowWidth', 'start', 'textAlign', 'textDecorationLine', 'textDecorationColor',
-// iOS Only
-'textDecorationStyle',
-// iOS Only
-'textShadowColor', 'textShadowOffset', 'textShadowRadius', 'textTransform', 'tintColor', 'transform', 'top', 'userSelect', 'verticalAlign',
-// Android Only
-'width',
-// 'writingDirection', // iOS Only
-'zIndex']);
+var _parseTimeValue = require("./parseTimeValue");
+const stylePropertyAllowlistSet = new Set(["alignContent", "alignItems", "alignSelf", "animationDelay", "animationDuration", "aspectRatio", "backfaceVisibility", "backgroundColor", "borderBlockColor", "borderBlockStyle", "borderBlockWidth", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderEndEndRadius", "borderEndStartRadius", "borderColor", "borderInlineColor", "borderInlineStyle", "borderInlineWidth", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderEndColor", "borderEndStyle", "borderEndWidth", "borderStartColor", "borderStartStyle", "borderStartWidth", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "color", "direction", "display", "end", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontWeight", "fontVariant", "gap", "gapColumn", "gapRow", "height", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginEnd", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginStart", "marginTop", "maxHeight", "maxWidth", "minHeight", "minWidth", "objectFit", "opacity", "overflow", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingEnd", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingStart", "paddingTop", "pointerEvents", "position", "resizeMode", "right", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "shadowWidth", "start", "textAlign", "textDecorationLine", "textDecorationColor", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "textTransform", "tintColor", "transform", "transitionDelay", "transitionDuration", "top", "userSelect", "verticalAlign", "width", "zIndex"]);
 function isReactNativeStyleProp(propName) {
-  return stylePropertyAllowlistSet.has(propName) || propName.startsWith('--');
+  return stylePropertyAllowlistSet.has(propName) || propName.startsWith("--");
 }
 function isReactNativeStyleValue(propValue) {
-  if (typeof propValue === 'string') {
-    // RN doesn't have an inherit keyword
-    if (propValue === 'inherit') {
+  if (typeof propValue === "string") {
+    if (propValue === "inherit") {
       return false;
     }
-    // RN doesn't have an inherit keyword
-    if (propValue === 'initial') {
+    if (propValue === "initial") {
       return false;
     }
-    //if (propValue.endsWith('em')) {
-    //  return false;
-    //}
-    //if (propValue.endsWith('rem')) {
-    //  return false;
-    //}
-    // RN on android doesn't like explicitly specified px units
-    if (propValue.endsWith('px')) {
+    if (propValue.endsWith("px")) {
       return false;
     }
-    // RN doesn't support calc functions
-    if (propValue.includes('calc(')) {
+    if (propValue.includes("calc(")) {
       return false;
@@ -69,3 +41,3 @@ }
 function preprocessPropertyValue(propValue) {
-  if (typeof propValue === 'string') {
+  if (typeof propValue === "string") {
     if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
@@ -82,8 +54,6 @@ return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
 function preprocessCreate(style) {
-  // eslint-disable-next-line flowtype/no-flow-fix-me-comments
   const processedStyle = {};
   for (const propName in style) {
     const styleValue = style[propName];
-    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === 'object' && styleValue != null) {
-      // have to spread styleValue into a copied object to appease flow
+    if (_CSSMediaQuery.CSSMediaQuery.isMediaQueryString(propName) && typeof styleValue === "object" && styleValue != null) {
       const processsedSubStyle = preprocessCreate({
@@ -95,10 +65,8 @@ ...styleValue
     }
-    if (propName === 'backgroundImage') {
-      (0, _errorMsg.errorMsg)('"backgroundImage" is not supported in React Native.');
-    }
-    // React Native only supports non-standard box-shadow styles
-    else if (propName === 'boxShadow' && typeof styleValue === 'string') {
+    if (propName === "backgroundImage") {
+      (0, _errorMsg.errorMsg)("\"backgroundImage\" is not supported in React Native.");
+    } else if (propName === "boxShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)('Multiple "boxShadow" values are not supported in React Native.');
+        (0, _errorMsg.errorMsg)("Multiple \"boxShadow\" values are not supported in React Native.");
       }
@@ -112,6 +80,4 @@ const {
       } = parsedShadow[0];
-      // TODO: parse alpha color inputs => alpha + color
-      // errorMsg('"boxShadow" opacity is not implemented in React Native.');
       if (inset) {
-        (0, _errorMsg.errorMsg)('"boxShadow" value of "inset" is not supported in React Native.');
+        (0, _errorMsg.errorMsg)("\"boxShadow\" value of \"inset\" is not supported in React Native.");
       }
@@ -125,23 +91,18 @@ processedStyle.shadowColor = color;
       processedStyle.shadowRadius = blurRadius;
-    }
-    // Needed by React Native for Desktop
-    else if (propName === 'fontWeight' && typeof styleValue === 'number') {
-      // $FlowFixMe
+    } else if (propName === "fontWeight" && typeof styleValue === "number") {
       processedStyle[propName] = styleValue.toString();
-    } else if (propName === 'position') {
-      if (styleValue === 'fixed') {
-        processedStyle[propName] = 'absolute';
-        (0, _errorMsg.errorMsg)('"position" value of "fixed" is not supported in React Native. Falling back to "absolute".');
-      } else if (styleValue === 'sticky') {
-        processedStyle[propName] = 'relative';
-        (0, _errorMsg.errorMsg)('"position" value of "sticky" is not supported in React Native. Falling back to "relative".');
+    } else if (propName === "position") {
+      if (styleValue === "fixed") {
+        processedStyle[propName] = "absolute";
+        (0, _errorMsg.errorMsg)("\"position\" value of \"fixed\" is not supported in React Native. Falling back to \"absolute\".");
+      } else if (styleValue === "sticky") {
+        processedStyle[propName] = "relative";
+        (0, _errorMsg.errorMsg)("\"position\" value of \"sticky\" is not supported in React Native. Falling back to \"relative\".");
       } else {
         processedStyle[propName] = styleValue;
       }
-    }
-    // React Native only supports non-standard text-shadow styles
-    else if (propName === 'textShadow' && typeof styleValue === 'string') {
+    } else if (propName === "textShadow" && typeof styleValue === "string") {
       const parsedShadow = (0, _parseShadow.parseShadow)(styleValue);
       if (parsedShadow.length > 1) {
-        (0, _errorMsg.errorMsg)('Multiple "textShadow" values are not supported in React Native.');
+        (0, _errorMsg.errorMsg)("Multiple \"textShadow\" values are not supported in React Native.");
       }
@@ -160,13 +121,13 @@ const {
       processedStyle.textShadowRadius = blurRadius;
-    } else if (propName === 'marginHorizontal') {
-      (0, _errorMsg.warnMsg)('"marginHorizontal" is deprecated. Use "marginInline".');
+    } else if (propName === "marginHorizontal") {
+      (0, _errorMsg.warnMsg)("\"marginHorizontal\" is deprecated. Use \"marginInline\".");
       processedStyle.marginInline = styleValue;
-    } else if (propName === 'marginVertical') {
-      (0, _errorMsg.warnMsg)('"marginVertical" is deprecated. Use "marginBlock".');
+    } else if (propName === "marginVertical") {
+      (0, _errorMsg.warnMsg)("\"marginVertical\" is deprecated. Use \"marginBlock\".");
       processedStyle.marginBlock = styleValue;
-    } else if (propName === 'paddingHorizontal') {
-      (0, _errorMsg.warnMsg)('"paddingHorizontal" is deprecated. Use "paddingInline".');
+    } else if (propName === "paddingHorizontal") {
+      (0, _errorMsg.warnMsg)("\"paddingHorizontal\" is deprecated. Use \"paddingInline\".");
       processedStyle.paddingInline = styleValue;
-    } else if (propName === 'paddingVertical') {
-      (0, _errorMsg.warnMsg)('"paddingVertical" is deprecated. Use "paddingBlock".');
+    } else if (propName === "paddingVertical") {
+      (0, _errorMsg.warnMsg)("\"paddingVertical\" is deprecated. Use \"paddingBlock\".");
       processedStyle.paddingBlock = styleValue;
@@ -177,4 +138,2 @@ } else {
   }
-
-  // Process values that need to be resolved during render
   for (const prop in processedStyle) {
@@ -186,9 +145,2 @@ const processedStyleValue = preprocessPropertyValue(processedStyle[prop]);
 }
-
-/**
- * The create method shim should do initial transforms like
- * renaming/expanding/validating properties, essentially all the steps
- * which can be done at initialization-time (could potentially be done at
- * compile-time in the future).
- */
 function create(styles) {
@@ -206,9 +158,5 @@ const result = {};
 function keyframes() {
-  (0, _errorMsg.errorMsg)('keyframes are not supported in React Native.');
+  (0, _errorMsg.errorMsg)("keyframes are not supported in React Native.");
 }
-
-/**
- * The spread method shim
- */
-
+const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
 function spread(style, _ref) {
@@ -224,3 +172,2 @@ let {
   } = _ref;
-  /* eslint-disable prefer-const */
   let {
@@ -230,9 +177,5 @@ lineClamp,
   } = (0, _flattenStyle.flattenStyle)(style);
-  /* eslint-enable prefer-const */
-
   const nativeProps = {};
   for (const styleProp in flatStyle) {
     let styleValue = flatStyle[styleProp];
-
-    // resolve media queries
     if (styleValue instanceof _CSSMediaQuery.CSSMediaQuery) {
@@ -248,3 +191,2 @@ const maybeExistingMediaQuery = flatStyle[styleProp];
     }
-    // resolve custom property references
     if (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
@@ -259,3 +201,2 @@ const resolvedValue = customProperties[styleValue.name];
     }
-    // resolve viewport units
     if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
@@ -265,7 +206,2 @@ const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
     }
-
-    // Filter out any unexpected style property names so RN doesn't crash but give
-    // the developer a warning to let them know that there's a new prop we should either
-    // explicitly ignore or process in some way.
-    // NOTE: Any kind of prop name transformations should happen before this check.
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
@@ -276,7 +212,2 @@ (0, _errorMsg.errorMsg)(`Encountered unsupported style property "${styleProp}"`);
     }
-
-    // Similar filter to the prop name one above but instead operates on the property's
-    // value. Similarly, any sort of prop value transformations should happen before this
-    // filter.
-    // We check this at resolve time to ensure the render-time styles are safe.
     if (!isReactNativeStyleValue(styleValue)) {
@@ -295,7 +226,30 @@ (0, _errorMsg.errorMsg)(`Encounted unsupported style value "${String(styleValue)}" for property "${styleProp}"`);
     });
-    // $FlowFixMe
+    if (flatStyle.borderStyle === "none") {
+      flatStyle.borderWidth = 0;
+      delete flatStyle.borderStyle;
+    }
+    if (flatStyle.borderStartStartRadius != null) {
+      flatStyle.borderTopStartRadius = flatStyle.borderStartStartRadius;
+      delete flatStyle.borderStartStartRadius;
+    }
+    if (flatStyle.borderEndStartRadius != null) {
+      flatStyle.borderBottomStartRadius = flatStyle.borderEndStartRadius;
+      delete flatStyle.borderEndStartRadius;
+    }
+    if (flatStyle.borderStartEndRadius != null) {
+      flatStyle.borderTopEndRadius = flatStyle.borderStartEndRadius;
+      delete flatStyle.borderStartEndRadius;
+    }
+    if (flatStyle.borderEndEndRadius != null) {
+      flatStyle.borderBottomEndRadius = flatStyle.borderEndEndRadius;
+      delete flatStyle.borderEndEndRadius;
+    }
+    for (const timeValuedProperty of timeValuedProperties) {
+      if (typeof flatStyle[timeValuedProperty] === "string") {
+        flatStyle[timeValuedProperty] = (0, _parseTimeValue.parseTimeValue)(flatStyle[timeValuedProperty]);
+      }
+    }
     nativeProps.style = flatStyle;
   }
   if (lineClamp != null) {
-    // $FlowFixMe
     nativeProps.numberOfLines = lineClamp;
@@ -302,0 +256,0 @@ }

lib/stylex-inject.d.ts

@@ -13,4 +13,4 @@ /**
   priority: number,
-  rtlRule: null | undefined | string
+  rtlRule: null | undefined | string,
 ): void;
 export default inject;

lib/stylex-inject.js

@@ -8,11 +8,2 @@ "use strict";
 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) {
@@ -19,0 +10,0 @@ let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;

lib/stylex.d.ts

@@ -13,19 +13,17 @@ /**
   Stylex$Create,
-  Stylex$CreateVars,
-  Stylex$OverrideVars,
+  StyleX$CreateVars,
+  StyleX$OverrideVars,
   StyleXArray,
   MapNamespace,
+  CompiledStyles,
 } from './StyleXTypes';
+export type { Theme, Variant } from './StyleXTypes';
 import injectStyle from './stylex-inject';
-type DedupeStyles = Readonly<{
-  $$css: true;
-  [key: string]: string | Readonly<{ [key: string]: string }>;
-}>;
 export declare function spread(
   styles: StyleXArray<
-    | (null | undefined | DedupeStyles)
+    | (null | undefined | CompiledStyles)
     | boolean
     | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
   >,
-  _options?: {}
+  _options?: {},
 ): Readonly<{
@@ -36,20 +34,20 @@ className: string;
 type Stylex$Include = <
-  TStyles extends { readonly [$$Key$$: string]: string | number }
+  TStyles extends { readonly [$$Key$$: string]: string | number },
 >(
-  _styles: MapNamespace<TStyles>
+  _styles: MapNamespace<TStyles>,
 ) => TStyles;
-export declare var create: Stylex$Create;
-export declare var unstable_createVars: Stylex$CreateVars;
-export declare var unstable_overrideVars: Stylex$OverrideVars;
-export declare var include: Stylex$Include;
-export declare var keyframes: (_keyframes: Keyframes) => string;
-export declare var firstThatWorks: <T extends string | number>(
+export declare const create: Stylex$Create;
+export declare const unstable_createVars: StyleX$CreateVars;
+export declare const unstable_overrideVars: StyleX$OverrideVars;
+export declare const include: Stylex$Include;
+export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare const firstThatWorks: <T extends string | number>(
   ..._styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
-export declare var inject: typeof injectStyle;
-export declare var UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
+export declare const inject: typeof injectStyle;
+export declare const UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
 type IStyleX = {
   (
     ...styles: ReadonlyArray<
-      StyleXArray<(null | undefined | DedupeStyles) | boolean>
+      StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
@@ -59,7 +57,7 @@ ): string;
     styles: StyleXArray<
-      | (null | undefined | DedupeStyles)
+      | (null | undefined | CompiledStyles)
       | boolean
       | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
     >,
-    _options?: {}
+    _options?: {},
   ) => Readonly<{
@@ -70,4 +68,4 @@ className: string;
   create: Stylex$Create;
-  unstable_createVars: Stylex$CreateVars;
-  unstable_overrideVars: Stylex$OverrideVars;
+  unstable_createVars: StyleX$CreateVars;
+  unstable_overrideVars: StyleX$OverrideVars;
   include: Stylex$Include;
@@ -80,3 +78,3 @@ firstThatWorks: <T extends string | number>(
     priority: number,
-    rtlRule: null | undefined | string
+    rtlRule: null | undefined | string,
   ) => void;
@@ -88,2 +86,2 @@ keyframes: (keyframes: Keyframes) => string;
 export default $$EXPORT_DEFAULT_DECLARATION$$;
-export declare var stylex: IStyleX;
+export declare const stylex: IStyleX;

lib/stylex.js

@@ -1,12 +0,3 @@
-/**
- * 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';
-
 Object.defineProperty(exports, "__esModule", {
@@ -29,12 +20,12 @@ value: true
 function stylexCreate(_styles) {
-  throw new Error('stylex.create should never be called. It should be compiled away.');
+  throw new Error("stylex.create should never be called. It should be compiled away.");
 }
 function stylexCreateVars(_styles) {
-  throw new Error('stylex.createVars should never be called. It should be compiled away.');
+  throw new Error("stylex.createVars should never be called. It should be compiled away.");
 }
 function stylexOverrideVars(_styles) {
-  throw new Error('stylex.overrideVars should never be called. It should be compiled away.');
+  throw new Error("stylex.overrideVars 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.');
+  throw new Error("stylex.extends should never be called. It should be compiled away.");
 }
@@ -50,7 +41,7 @@ const create = stylexCreate;
 const keyframes = _keyframes => {
-  throw new Error('stylex.keyframes should never be called');
+  throw new Error("stylex.keyframes should never be called");
 };
 exports.keyframes = keyframes;
 const firstThatWorks = function () {
-  throw new Error('stylex.firstThatWorks should never be called.');
+  throw new Error("stylex.firstThatWorks should never be called.");
 };
@@ -61,3 +52,3 @@ exports.firstThatWorks = firstThatWorks;
 const UNSUPPORTED_PROPERTY = _props => {
-  throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
+  throw new Error("stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.");
 };
@@ -64,0 +55,0 @@ exports.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;

lib/StyleXCSSTypes.js

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

lib/StyleXSheet.d.ts

@@ -10,3 +10,3 @@ /**
 
-import type { Theme } from './StyleXTypes';
+import type { LegacyTheme as Theme } from './StyleXTypes';
 type SheetOptions = Readonly<{
@@ -47,5 +47,5 @@ rootDarkTheme?: Theme;
     priority: number,
-    rawRTLRule: null | undefined | string
+    rawRTLRule: null | undefined | string,
   ): void;
 }
-export declare var styleSheet: StyleXSheet;
+export declare const styleSheet: StyleXSheet;

lib/StyleXSheet.js

@@ -1,12 +0,3 @@
-/**
- * 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';
-
 Object.defineProperty(exports, "__esModule", {
@@ -18,9 +9,4 @@ value: true
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// import rtlDetect from 'rtl-detect';
-
-const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
-const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
-/**
- * Take a theme and generate it's accompanying CSS variables
- */
+const LIGHT_MODE_CLASS_NAME = "__fb-light-mode";
+const DARK_MODE_CLASS_NAME = "__fb-dark-mode";
 function buildTheme(selector, theme) {
@@ -33,35 +19,18 @@ const lines = [];
   }
-  lines.push('}');
-  return lines.join('\n');
+  lines.push("}");
+  return lines.join("\n");
 }
-
-/**
- * Create a <style> tag and add it to the head.
- */
 function makeStyleTag() {
-  const tag = document.createElement('style');
-  tag.setAttribute('type', 'text/css');
-  tag.setAttribute('data-stylex', 'true');
-  const head = document.head || document.getElementsByTagName('head')[0];
-  (0, _invariant.default)(head, 'expected head');
+  const tag = document.createElement("style");
+  tag.setAttribute("type", "text/css");
+  tag.setAttribute("data-stylex", "true");
+  const head = document.head || document.getElementsByTagName("head")[0];
+  (0, _invariant.default)(head, "expected head");
   head.appendChild(tag);
   return tag;
 }
-
-/**
- * Check if the browser supports CSS variables
- */
 function doesSupportCSSVariables() {
-  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
+  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports("--fake-var:0");
 }
-
-// Regex to replace var(--foo) with an inlined version
 const VARIABLE_MATCH = /var\(--(.*?)\)/g;
-
-// Stylesheet options
-
-/**
- * This class manages the CSS stylesheet for the page and the injection of new
- * CSS rules.
- */
 class StyleXSheet {
@@ -82,14 +51,5 @@ static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
   }
-
-  /**
-   * Check if we have don't have access to the dom
-   */
   isHeadless() {
-    var _globalThis$document;
-    return this.tag == null || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body) == null;
+    return this.tag == null || globalThis?.document?.body == null;
   }
-
-  /**
-   * Get the stylesheet tag. Throw if none exists.
-   */
   getTag() {
@@ -99,32 +59,15 @@ const {
     } = this;
-    (0, _invariant.default)(tag != null, 'expected tag');
+    (0, _invariant.default)(tag != null, "expected tag");
     return tag;
   }
-
-  /**
-   * Get the current stylesheet CSS.
-   */
   getCSS() {
-    return this.rules.join('\n');
+    return this.rules.join("\n");
   }
-
-  /**
-   * Get the position of the rule in the stylesheet.
-   */
   getRulePosition(rule) {
     return this.rules.indexOf(rule);
   }
-
-  /**
-   * Count of the current rules in the stylesheet. Used in tests.
-   */
   getRuleCount() {
     return this.rules.length;
   }
-
-  /**
-   * Inject a style tag into the document head
-   */
   inject() {
-    var _globalThis$document2;
     if (this.injected) {
@@ -134,17 +77,9 @@ return;
     this.injected = true;
-
-    // Running in a server environment
-    if (((_globalThis$document2 = globalThis.document) === null || _globalThis$document2 === void 0 ? void 0 : _globalThis$document2.body) == null) {
+    if (globalThis.document?.body == null) {
       this.injectTheme();
       return;
     }
-
-    // Create style tag if in browser
     this.tag = makeStyleTag();
     this.injectTheme();
   }
-
-  /**
-   * Inject the theme styles
-   */
   injectTheme() {
@@ -158,6 +93,2 @@ if (this.rootTheme != null) {
   }
-
-  /**
-   * Inject custom theme styles (only for internal testing)
-   */
   __injectCustomThemeForTesting(selector, theme) {
@@ -168,12 +99,5 @@ if (theme != null) {
   }
-
-  /**
-   * Delete the requested rule from the stylesheet
-   */
   delete(rule) {
-    // Get the index of this rule
     const index = this.rules.indexOf(rule);
     (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
-
-    // Remove the rule from our index
     this.rules.splice(index, 1);
@@ -185,9 +109,5 @@ if (this.isHeadless()) {
     const sheet = tag.sheet;
-    (0, _invariant.default)(sheet, 'expected sheet');
+    (0, _invariant.default)(sheet, "expected sheet");
     sheet.deleteRule(index);
   }
-
-  /**
-   *
-   */
   normalizeRule(rule) {
@@ -204,11 +124,3 @@ const {
   }
-
-  /**
-   * Get the rule position a rule should be inserted at according to the
-   * specified priority.
-   */
   getInsertPositionForPriority(priority) {
-    // If there's an end rule associated with this priority, then get the next
-    // rule which will belong to the next priority
-    // The rule will be inserted before it and assigned to the current priority
     const priorityRule = this.ruleForPriority.get(priority);
@@ -218,22 +130,10 @@ if (priorityRule != null) {
     }
-
-    // If we've never created this priority before, then let's find the highest
-    // priority to target
     const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
-
-    // If there's no priorities then place us at the start
     if (priorities.length === 0) {
       return this.getRuleCount();
     }
-
-    // Place us next to the next highest priority
     const lastPriority = priorities.pop();
     return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
   }
-
-  /**
-   * Insert a rule into the stylesheet.
-   */
   insert(rawLTRRule, priority, rawRTLRule) {
-    // Inject the stylesheet if it hasn't already been
     if (this.injected === false) {
@@ -248,4 +148,2 @@ this.inject();
     const rawRule = rawLTRRule;
-
-    // Don't insert this rule if it already exists
     if (this.rules.includes(rawRule)) {
@@ -255,8 +153,4 @@ return;
     const rule = this.normalizeRule(rawRule);
-
-    // Get the position where we should insert the rule
     const insertPos = this.getInsertPositionForPriority(priority);
     this.rules.splice(insertPos, 0, rule);
-
-    // Set this rule as the end of the priority group
     this.ruleForPriority.set(priority, rule);
@@ -271,19 +165,12 @@ if (this.isHeadless()) {
         sheet.insertRule(rule, insertPos);
-      } catch {
-        // Ignore: error likely due to inserting prefixed rules (e.g. `::-moz-range-thumb`).
-      }
+      } catch {}
     }
-    // Ignore the case where sheet == null. It's an edge-case Edge 17 bug.
   }
 }
-
-/**
- * Adds an ancestor selector in a media-query-aware way.
- */
 exports.StyleXSheet = StyleXSheet;
 function addAncestorSelector(selector, ancestorSelector) {
-  if (!selector.startsWith('@')) {
+  if (!selector.startsWith("@")) {
     return `${ancestorSelector} ${selector}`;
   }
-  const firstBracketIndex = selector.indexOf('{');
+  const firstBracketIndex = selector.indexOf("{");
   const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
@@ -290,0 +177,0 @@ const rest = selector.slice(firstBracketIndex + 1);

lib/StyleXTypes.d.ts

@@ -6,127 +6,65 @@ /**
  * LICENSE file in the root directory of this source tree.
- *
- *
  */
 
 import type { CSSProperties } from './StyleXCSSTypes';
-export declare type StyleXClassNameFor<_K, _V> = string;
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare const StyleXClassNameTag: unique symbol;
+export type StyleXClassNameFor<K, V> = string & {
+  _opaque: typeof StyleXClassNameTag;
+  key: K;
+  value: V;
+};
+
 export type StyleXClassNameForValue<V> = StyleXClassNameFor<unknown, V>;
 export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, unknown>;
 export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
+// Type for arbitrarily nested Array.
 export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
-type CSSPropTypes = Readonly</**
- * > 21 | type CSSPropTypes = $ReadOnly<$ObjMap<CSSProperties, () => StyleXClassName>>;
- *      |                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
- **/
-any>;
-export type NestedCSSPropTypes = Readonly<
-  Omit<
-    CSSPropTypes,
-    keyof ({
-      ':active'?: StyleXClassName;
-      ':focus'?: StyleXClassName;
-      ':focus-visible'?: StyleXClassName;
-      ':hover'?: StyleXClassName;
-      ':disabled'?: StyleXClassName;
-      ':empty'?: StyleXClassName;
-      ':first-child'?: StyleXClassName;
-      ':last-child'?: StyleXClassName;
-      '::before'?: StyleXClassName;
-      '::after'?: StyleXClassName;
-      '::placeholder'?: StyleXClassName;
-      '::-webkit-scrollbar'?: StyleXClassName;
-      '@media (max-width: 564px)'?: StyleXClassName;
-      '@media (min-height: 700px)'?: StyleXClassName;
-      '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
-      '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
-      '@media (min-height: 790px)'?: StyleXClassName;
-      '@media (max-width: 648px)'?: StyleXClassName;
-      '@media (max-width: 899px)'?: StyleXClassName;
-      '@media (max-width: 900px)'?: StyleXClassName;
-      '@media (min-width: 900px)'?: StyleXClassName;
-      '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
-      '@media (max-width: 1099px)'?: StyleXClassName;
-      '@media (max-width: 1199px)'?: StyleXClassName;
-      '@media (max-width: 1259px)'?: StyleXClassName;
-      '@media (min-width: 1290px)'?: StyleXClassName;
-      '@media (max-width: 420px)'?: StyleXClassName;
-      '@media (max-width: 500px)'?: StyleXClassName;
-      '@media (pointer: coarse)'?: StyleXClassName;
-      '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
-      '@media print'?: StyleXClassName;
-      '@media (max-width: 767px)'?: StyleXClassName;
-      '@media (min-width: 768px)'?: StyleXClassName;
-      '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
-      '@media (max-width: 1024px)'?: StyleXClassName;
-      '@media (min-width: 1025px)'?: StyleXClassName;
-      '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
-      '@media (max-width: 1920px)'?: StyleXClassName;
-      '@media (min-width: 1921px)'?: StyleXClassName;
-      '@media (min-width: 1500px)'?: StyleXClassName;
-      '@media (min-width: 1800px)'?: StyleXClassName;
-      '@media (min-width: 2250px)'?: StyleXClassName;
-      '::-webkit-search-decoration'?: StyleXClassName;
-      '::-webkit-search-cancel-button'?: StyleXClassName;
-      '::-webkit-search-results-button'?: StyleXClassName;
-      '::-webkit-search-results-decoration'?: StyleXClassName;
-      '@media (min-width: 950px)'?: StyleXClassName;
-      '@media (min-width: 1440px)'?: StyleXClassName;
-      '@media (min-width: 1920px)'?: StyleXClassName;
-      '@media (min-width: 800px)'?: StyleXClassName;
-      '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
-    })
-  > & {
-    ':active'?: StyleXClassName;
-    ':focus'?: StyleXClassName;
-    ':focus-visible'?: StyleXClassName;
-    ':hover'?: StyleXClassName;
-    ':disabled'?: StyleXClassName;
-    ':empty'?: StyleXClassName;
-    ':first-child'?: StyleXClassName;
-    ':last-child'?: StyleXClassName;
-    '::before'?: StyleXClassName;
-    '::after'?: StyleXClassName;
-    '::placeholder'?: StyleXClassName;
-    '::-webkit-scrollbar'?: StyleXClassName;
-    '@media (max-width: 564px)'?: StyleXClassName;
-    '@media (min-height: 700px)'?: StyleXClassName;
-    '@media (min-height: 700px) and (max-height: 789px)'?: StyleXClassName;
-    '@media (min-height: 753px) and (max-height: 789px)'?: StyleXClassName;
-    '@media (min-height: 790px)'?: StyleXClassName;
-    '@media (max-width: 648px)'?: StyleXClassName;
-    '@media (max-width: 899px)'?: StyleXClassName;
-    '@media (max-width: 900px)'?: StyleXClassName;
-    '@media (min-width: 900px)'?: StyleXClassName;
-    '@media (min-width: 900px) and (max-width: 1259px)'?: StyleXClassName;
-    '@media (max-width: 1099px)'?: StyleXClassName;
-    '@media (max-width: 1199px)'?: StyleXClassName;
-    '@media (max-width: 1259px)'?: StyleXClassName;
-    '@media (min-width: 1290px)'?: StyleXClassName;
-    '@media (max-width: 420px)'?: StyleXClassName;
-    '@media (max-width: 500px)'?: StyleXClassName;
-    '@media (pointer: coarse)'?: StyleXClassName;
-    '@media (-webkit-min-device-pixel-ratio: 0)'?: StyleXClassName;
-    '@media print'?: StyleXClassName;
-    '@media (max-width: 767px)'?: StyleXClassName;
-    '@media (min-width: 768px)'?: StyleXClassName;
-    '@media (min-width: 768px) and (max-width: 1024px)'?: StyleXClassName;
-    '@media (max-width: 1024px)'?: StyleXClassName;
-    '@media (min-width: 1025px)'?: StyleXClassName;
-    '@media (min-width: 1025px) and (max-width: 1920px)'?: StyleXClassName;
-    '@media (max-width: 1920px)'?: StyleXClassName;
-    '@media (min-width: 1921px)'?: StyleXClassName;
-    '@media (min-width: 1500px)'?: StyleXClassName;
-    '@media (min-width: 1800px)'?: StyleXClassName;
-    '@media (min-width: 2250px)'?: StyleXClassName;
-    '::-webkit-search-decoration'?: StyleXClassName;
-    '::-webkit-search-cancel-button'?: StyleXClassName;
-    '::-webkit-search-results-button'?: StyleXClassName;
-    '::-webkit-search-results-decoration'?: StyleXClassName;
-    '@media (min-width: 950px)'?: StyleXClassName;
-    '@media (min-width: 1440px)'?: StyleXClassName;
-    '@media (min-width: 1920px)'?: StyleXClassName;
-    '@media (min-width: 800px)'?: StyleXClassName;
-    '@media (max-width: 1024px) and (min-width: 501px)'?: StyleXClassName;
-  }
->;
+
+type CSSPropTypes = {
+  [Key in keyof CSSProperties]: StyleXClassNameFor<Key, CSSProperties[Key]>;
+};
+
+export type NestedCSSPropTypes = CSSPropTypes &
+  Readonly<{
+    // NOTE: the actual type should be nested objects.
+    // fix after the types in stylex.js are fixed.
+    ':active': StyleXClassName;
+    ':focus': StyleXClassName;
+    ':focus-visible': StyleXClassName;
+    ':hover': StyleXClassName;
+    ':disabled': StyleXClassName;
+    ':empty': StyleXClassName;
+    ':first-child': StyleXClassName;
+    ':last-child': StyleXClassName;
+    '::before': StyleXClassName;
+    '::after': StyleXClassName;
+    '::placeholder': StyleXClassName;
+    '::-webkit-scrollbar': StyleXClassName;
+
+    [key: `@media (max-width: ${number}px)`]: StyleXClassName;
+    [key: `@media (min-width: ${number}px)`]: StyleXClassName;
+    [
+      key: `@media (min-width: ${number}px) and (max-width: ${number}px)`
+    ]: StyleXClassName;
+
+    [key: `@media (max-height: ${number}px)`]: StyleXClassName;
+    [key: `@media (min-height: ${number}px)`]: StyleXClassName;
+    [
+      key: `@media (min-height: ${number}px) and (max-height: ${number}px)`
+    ]: StyleXClassName;
+
+    [
+      key: `@media (-webkit-min-device-pixel-ratio: ${number})`
+    ]: StyleXClassName;
+    '@media print': StyleXClassName;
+
+    // webkit styles used for Search in Safari
+    '::-webkit-search-decoration': StyleXClassName;
+    '::-webkit-search-cancel-button': StyleXClassName;
+    '::-webkit-search-results-button': StyleXClassName;
+    '::-webkit-search-results-decoration': StyleXClassName;
+  }>;
+
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
@@ -139,66 +77,91 @@ export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
 >;
-export type Styles = Readonly<{ [namespace: string]: Style }>;
-export type Style = Readonly</**
- * > 95 | export type Style = $ReadOnly<{
- *      |                               ^
- * > 96 |   ...CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 97 |   [pseudo: string]: CSSProperties,
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 98 |   ...
- *      | ^^^^^^^^^^^^^^^^^^^
- * > 99 | }>;
- *      | ^^ Unsupported feature: Translating "object types with spreads, indexers and/or call properties at the same time" is currently not supported.
- **/
-any>;
-export type Rules = Style | CSSProperties;
+
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type Theme = Readonly<{ [constantName: string]: string }>;
-type MapCSSValueToClassName = <K, V>(
-  $$PARAM_0$$: K,
-  $$PARAM_1$$: V
-) => StyleXClassNameFor<K, V>;
-export type MapNamespace<CSS extends {}> =
-  /**
-   * > 110 | export type MapNamespace<CSS: { ... }> = $ObjMapi<CSS, MapCSSValueToClassName>;
-   *       |                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapi" is currently not supported.
-   **/
-  any;
-export type MapNamespaces = <CSS extends {}>(
-  $$PARAM_0$$: CSS
-) => MapNamespace<CSS>;
-export type Stylex$Create = <S extends {}>(
-  styles: S
-) => Readonly</**
- * > 121 | ) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
- *       |                ^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
- **/
-any>;
-export declare type StyleXVarsTheme<
-  Vars extends { readonly [$$Key$$: string]: string }
-> = Vars;
-export type Stylex$CreateVars = <
-  Vars extends { readonly [$$Key$$: string]: string }
+export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+
+type RawStyles = {
+  [key: string]: null | string | number | Array<string | number> | RawStyles;
+};
+
+type CompiledNamespace<N extends RawStyles> = {
+  [K in keyof N]: N[K] extends string | number | null
+    ? StyleXClassNameFor<K, N[K]>
+    : N[K] extends ReadonlyArray<infer T>
+    ? StyleXClassNameFor<K, T>
+    : K extends `:${string}` | `@${string}`
+    ? N[K] extends RawStyles
+      ? CompiledNamespace<N[K]>
+      : StyleXClassNameFor<K, N[K]>
+    : N[K] extends { [key: string]: infer T }
+    ? StyleXClassNameFor<K, T> // TODO: Handle nested objects
+    : never;
+};
+
+export type Stylex$Create = <const S extends { [n: string]: RawStyles }>(
+  styles: S,
+) => Readonly<{
+  [N in keyof S]: CompiledNamespace<S[N]>;
+}>;
+
+export type CompiledStyles = Readonly<{
+  [key: string]: StyleXClassName | Readonly<{ [key: string]: StyleXClassName }>;
+}>;
+
+type TTokens = {
+  [key: string]: string | { default: string; [key: string]: string };
+};
+
+export type FlattenTokens<
+  T extends {
+    [key: string]: string | { default: string; [key: string]: string };
+  },
+> = {
+  [Key in keyof T]: T[Key] extends { default: infer X } & {
+    [key: Exclude<string, 'default'>]: infer Y;
+  }
+    ? X | Y
+    : T[Key];
+};
+
+export type Theme<
+  Tokens extends { [key: string]: unknown },
+  ID extends symbol = symbol,
+> = Readonly<{
+  [_Key in Exclude<keyof Tokens, '_opaque' | '_tokens'>]: string;
+}> & {
+  _opaque: ID;
+  _tokens: Tokens;
+};
+
+export type TokensFromTheme<T extends Theme<TTokens>> = T['_tokens'];
+
+export type IDFromTheme<T extends Theme<TTokens>> = T['_opaque'];
+
+export type StyleX$CreateVars = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
 >(
-  styles: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<
-  Readonly</**
-   * > 129 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
-   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
-   **/
-  any>
->;
-export type Stylex$OverrideVars = <
-  Vars extends { readonly [$$Key$$: string]: string }
+  tokens: DefaultTokens,
+) => Theme<FlattenTokens<DefaultTokens>, ID>;
+
+export type Variant<
+  T extends Theme<TTokens, symbol>,
+  // eslint-disable-next-line no-unused-vars
+  Tag extends symbol = symbol,
+> = Readonly<{
+  [Key: symbol]: StyleXClassNameFor<string, IDFromTheme<T>>;
+}> & { _opaque: Tag };
+
+type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+  [Key in keyof Config]:
+    | Config[Key]
+    | { default: Config[Key]; [atRule: string]: Config[Key] };
+};
+
+export type StyleX$OverrideVars = <
+  BaseTokens extends Theme<any>,
+  ID extends symbol = symbol,
 >(
-  styles: Vars & { __themeName__: string },
-  stylesOverride: Vars,
-  config?: { themeName: string }
-) => StyleXVarsTheme<
-  Readonly</**
-   * > 135 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
-   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
-   **/
-  any>
->;
+  baseTokens: BaseTokens,
+  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
+) => Variant<BaseTokens, ID>;

lib/StyleXTypes.js

@@ -1,10 +0,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.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.16",
+  "version": "0.2.0-beta.17",
   "description": "A library for defining styles for optimized user interfaces.",
@@ -23,3 +23,3 @@ "main": "lib/stylex.js",
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.16"
+    "@stylexjs/scripts": "0.2.0-beta.17"
   },
@@ -26,0 +26,0 @@ "jest": {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

44

increased by10%

Worsened metrics

Total package byte prevSize

147938

decreased by-2.55%

Lines of code

2647

decreased by-6.1%

No dependency changes