@stylexjs/stylex 0.2.0-beta.21 → 0.2.0-beta.23

package/lib/native/CSSMediaQuery.js

@@ -6,7 +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 }; }
-const MQ_PREFIX = "@media";
+const MQ_PREFIX = '@media';
 class CSSMediaQuery {
   static isMediaQueryString(inp) {
     return inp.startsWith(MQ_PREFIX);
@@ -33,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) {
@@ -45,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/SpreadOptions.d.ts

@@ -7,12 +7,13 @@
  *
  */
 
-export type SpreadOptions = {
+export type SpreadOptions = Readonly<{
   customProperties: {};
   inheritedFontSize: null | undefined | number;
   fontScale: number | void;
+  hover?: null | undefined | boolean;
   passthroughProperties: Array<string>;
   viewportHeight: number;
   viewportWidth: number;
   writingDirection: 'ltr' | 'rtl';
-};
+}>;

package/lib/native/SpreadOptions.js.flow

@@ -7,12 +7,13 @@
  * @flow strict
  */
 
-export type SpreadOptions = {|
+export type SpreadOptions = $ReadOnly<{
   customProperties: {},
   inheritedFontSize: ?number,
   fontScale: number | void,
+  hover?: ?boolean,
   passthroughProperties: Array<string>,
   viewportHeight: number,
   viewportWidth: number,
   writingDirection: 'ltr' | 'rtl',
-|};
+}>;

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

@@ -530,6 +530,22 @@ exports[`logical styles textAlign: start 1`] = `
 }
 `;
 
+exports[`styles :hover syntax: hovered 1`] = `
+{
+  "style": {
+    "backgroundColor": "blue",
+  },
+}
+`;
+
+exports[`styles :hover syntax: not hovered 1`] = `
+{
+  "style": {
+    "backgroundColor": "red",
+  },
+}
+`;
+
 exports[`styles animation-delay 1`] = `
 {
   "style": {

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

@@ -1,9 +1,9 @@
 "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", () => {
+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);
     }

package/lib/native/__tests__/stylex-css-var-test.js

@@ -3,15 +3,15 @@
 var _stylex = require("../stylex");
 const mockOptions = {
   customProperties: {
-    testVar: "red",
-    testVar2: "blue",
-    boxShadowVar1: "5px 5px 5px black",
+    testVar: 'red',
+    testVar2: 'blue',
+    boxShadowVar1: '5px 5px 5px black',
     rawNumber: 10,
-    pixelNumber: "10px",
-    emNumber: "10em",
-    refToRawNumber: "var(--rawNumber)",
-    refToPixelNumber: "var(--pixelNumber)",
-    refToRefToRawNumber: "var(--refToRawNumber)"
+    pixelNumber: '10px',
+    emNumber: '10em',
+    refToRawNumber: 'var(--rawNumber)',
+    refToPixelNumber: 'var(--pixelNumber)',
+    refToRefToRawNumber: 'var(--refToRawNumber)'
   },
   viewportHeight: 600,
   viewportWidth: 320
@@ -22,127 +22,127 @@ function resolveColorValue(colorValue) {
       color: colorValue
     }
   });
-  return _stylex.stylex.spread(styles.root, mockOptions).style.color;
+  return _stylex.stylex.props.call(mockOptions, styles.root).style.color;
 }
-describe("stylex CSSCustomProperty value test", () => {
+describe('stylex CSSCustomProperty value test', () => {
   beforeEach(() => {
-    jest.spyOn(console, "warn");
+    jest.spyOn(console, 'warn');
     console.warn.mockImplementation(() => {});
   });
   afterEach(() => {
     console.warn.mockRestore();
   });
-  test("parses a basic variable correctly", () => {
-    expect(resolveColorValue("var(--testVar)")).toEqual("red");
+  test('parses a basic variable correctly', () => {
+    expect(resolveColorValue('var(--testVar)')).toEqual('red');
   });
-  test("parses kebab case to camel case", () => {
-    expect(resolveColorValue("var(--test-var)")).toEqual("red");
+  test('parses kebab case to camel case', () => {
+    expect(resolveColorValue('var(--test-var)')).toEqual('red');
   });
-  test("parses a variable with a default value", () => {
-    expect(resolveColorValue("var(--testVar, blue)")).toEqual("red");
-    expect(resolveColorValue("var(--notFound, blue)")).toEqual("blue");
+  test('parses a variable with a default value', () => {
+    expect(resolveColorValue('var(--testVar, blue)')).toEqual('red');
+    expect(resolveColorValue('var(--notFound, blue)')).toEqual('blue');
   });
-  test("parses kebab case with a default value", () => {
-    expect(resolveColorValue("var(--test-var, blue)")).toEqual("red");
-    expect(resolveColorValue("var(--not-found, blue)")).toEqual("blue");
+  test('parses kebab case with a default value', () => {
+    expect(resolveColorValue('var(--test-var, blue)')).toEqual('red');
+    expect(resolveColorValue('var(--not-found, blue)')).toEqual('blue');
   });
-  test("parses a variable with a default value with spaces", () => {
+  test('parses a variable with a default value with spaces', () => {
     const styles = _stylex.stylex.create({
       root: {
-        boxShadow: "var(--boxShadowVar1, 0px 0px 0px black)"
+        boxShadow: 'var(--boxShadowVar1, 0px 0px 0px black)'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
-  test("falls back to a default value with spaces", () => {
+  test('falls back to a default value with spaces', () => {
     const styles = _stylex.stylex.create({
       root: {
-        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px black)"
+        boxShadow: 'var(--boxShadowVarNotFound, 0px 0px 0px black)'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
-  test("parses and falls back to default value containing a variable", () => {
+  test('parses and falls back to default value containing a variable', () => {
     const styles = _stylex.stylex.create({
       root: {
-        color: "var(--colorNotFound, var(--testVar2))"
+        color: 'var(--colorNotFound, var(--testVar2))'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
-  test("parses and falls back to a default value containing spaces and embedded variables", () => {
+  test('parses and falls back to a default value containing spaces and embedded variables', () => {
     const styles = _stylex.stylex.create({
       root: {
-        boxShadow: "var(--boxShadowVarNotFound, 0px 0px 0px var(--testVar2))"
+        boxShadow: 'var(--boxShadowVarNotFound, 0px 0px 0px var(--testVar2))'
       }
     });
-    expect(_stylex.stylex.spread(styles.root, mockOptions)).toMatchSnapshot();
+    expect(_stylex.stylex.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
-  test("does not parse malformed vars", () => {
-    expect(resolveColorValue("var(--testUnfinished")).toEqual("var(--testUnfinished");
-    expect(resolveColorValue("var(bad--input)")).toEqual("var(bad--input)");
-    expect(resolveColorValue("--testMulti")).toEqual("--testMulti");
-    expect(resolveColorValue("var ( --testMulti)")).toEqual("var ( --testMulti)");
+  test('does not parse malformed vars', () => {
+    expect(resolveColorValue('var(--testUnfinished')).toEqual('var(--testUnfinished');
+    expect(resolveColorValue('var(bad--input)')).toEqual('var(bad--input)');
+    expect(resolveColorValue('--testMulti')).toEqual('--testMulti');
+    expect(resolveColorValue('var ( --testMulti)')).toEqual('var ( --testMulti)');
   });
-  test("basic value lookup works", () => {
+  test('basic value lookup works', () => {
     const styles = _stylex.stylex.create({
       root: {
         borderWidth: 10
       },
       withVars: {
-        borderWidth: "var(--rawNumber)"
+        borderWidth: 'var(--rawNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
-  test("value lookup with pixel prop conversion", () => {
+  test('value lookup with pixel prop conversion', () => {
     const styles = _stylex.stylex.create({
       root: {
-        borderWidth: "10px"
+        borderWidth: '10px'
       },
       withVars: {
-        borderWidth: "var(--pixelNumber)"
+        borderWidth: 'var(--pixelNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
-  test("value lookup with em prop conversion", () => {
+  test('value lookup with em prop conversion', () => {
     const styles = _stylex.stylex.create({
       root: {
-        fontSize: "10em"
+        fontSize: '10em'
       },
       withVars: {
-        fontSize: "var(--emNumber)"
+        fontSize: 'var(--emNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.fontSize).toEqual(160);
-    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.fontSize).toEqual(rootStyle.fontSize);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.fontSize).toEqual(rootStyle.fontSize);
   });
-  test("prop lookup with ref", () => {
+  test('prop lookup with ref', () => {
     const styles = _stylex.stylex.create({
       root: {
-        borderWidth: "var(--refToRawNumber)"
+        borderWidth: 'var(--refToRawNumber)'
       },
       withVars: {
-        borderWidth: "var(--refToPixelNumber)"
+        borderWidth: 'var(--refToPixelNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
-    expect(_stylex.stylex.spread(styles.withVars, mockOptions).style.borderWidth).toEqual(rootStyle.borderWidth);
+    expect(_stylex.stylex.props.call(mockOptions, styles.withVars).style.borderWidth).toEqual(rootStyle.borderWidth);
   });
-  test("prop lookup with ref to ref", () => {
+  test('prop lookup with ref to ref', () => {
     const styles = _stylex.stylex.create({
       root: {
-        borderWidth: "var(--refToRefToRawNumber)"
+        borderWidth: 'var(--refToRefToRawNumber)'
       }
     });
-    const rootStyle = _stylex.stylex.spread(styles.root, mockOptions).style;
+    const rootStyle = _stylex.stylex.props.call(mockOptions, styles.root).style;
     expect(rootStyle.borderWidth).toEqual(10);
   });
 });