Add native support for css.types.* functions

These functions pass the value straight through on native.

Fix #331

Author: necolas

apps/examples/src/components/tokens.stylex.js

@@ -19,7 +19,7 @@ export const tokens: StyleVars<
     inputPlaceholderColor: string
   }>
 > = css.defineVars({
-  squareColor: 'red',
+  squareColor: css.types.color('red'),
   textColor: {
     default: 'darkred',
     '@media (prefers-color-scheme: dark)': 'lightred'

packages/react-strict-dom/src/native/stylex/index.js

@@ -641,3 +641,78 @@ export function props(
 
   return nativeProps;
 }
+
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>
+    }>;
+
+export const types = {
+  angle: <T: string | 0 = string | 0>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  color: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  image: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  integer: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  length: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  lengthPercentage: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  number: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  percentage: <T: number | string = number | string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  resolution: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  time: <T: string | 0 = string | 0>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  transformFunction: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  transformList: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  },
+  url: <T: string = string>(
+    value: ValueWithDefault<T>
+  ): ValueWithDefault<T> => {
+    return value;
+  }
+};

packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native

@@ -1,5 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`css.types.* types.angle: tokens 1`] = `
+{
+  "angle": "var(--angle__id__6)",
+}
+`;
+
+exports[`css.types.* types.color: tokens 1`] = `
+{
+  "color": "var(--color__id__7)",
+}
+`;
+
+exports[`css.types.* types.image: tokens 1`] = `
+{
+  "image": "var(--image__id__8)",
+}
+`;
+
+exports[`css.types.* types.integer: tokens 1`] = `
+{
+  "integer": "var(--integer__id__9)",
+}
+`;
+
+exports[`css.types.* types.length: tokens 1`] = `
+{
+  "length": "var(--length__id__10)",
+}
+`;
+
+exports[`css.types.* types.lengthPercentage: tokens 1`] = `
+{
+  "lengthPercentage": "var(--lengthPercentage__id__11)",
+}
+`;
+
+exports[`css.types.* types.number: tokens 1`] = `
+{
+  "number": "var(--number__id__12)",
+}
+`;
+
+exports[`css.types.* types.percentage: tokens 1`] = `
+{
+  "percentage": "var(--percentage__id__13)",
+}
+`;
+
+exports[`css.types.* types.resolution: tokens 1`] = `
+{
+  "resolution": "var(--resolution__id__14)",
+}
+`;
+
+exports[`css.types.* types.time: tokens 1`] = `
+{
+  "time": "var(--time__id__15)",
+}
+`;
+
+exports[`css.types.* types.transformFunction: tokens 1`] = `
+{
+  "transformFunction": "var(--transformFunction__id__16)",
+}
+`;
+
+exports[`css.types.* types.url: tokens 1`] = `
+{
+  "url": "var(--url__id__17)",
+}
+`;
+
 exports[`properties: custom property css.createTheme: css.__customProperties 1`] = `
 {
   "rootColor__id__1": "red",

packages/react-strict-dom/tests/css-test.native.js

@@ -1822,3 +1822,92 @@ describe('queries: @media', () => {
     expect(props.style.color).toBe('white');
   });
 });
+
+describe('css.types.*', () => {
+  test('types.angle', () => {
+    const tokens = css.defineVars({
+      angle: css.types.angle('40deg')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.color', () => {
+    const tokens = css.defineVars({
+      color: css.types.color({
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': 'lightblue'
+      })
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.image', () => {
+    const tokens = css.defineVars({
+      image: css.types.image('./jpg')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.integer', () => {
+    const tokens = css.defineVars({
+      integer: css.types.integer(4)
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.length', () => {
+    const tokens = css.defineVars({
+      length: css.types.length('4px')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.lengthPercentage', () => {
+    const tokens = css.defineVars({
+      lengthPercentage: css.types.lengthPercentage('100%')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.number', () => {
+    const tokens = css.defineVars({
+      number: css.types.number(4.4)
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.percentage', () => {
+    const tokens = css.defineVars({
+      percentage: css.types.percentage('100%')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.resolution', () => {
+    const tokens = css.defineVars({
+      resolution: css.types.resolution('96dpi')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.time', () => {
+    const tokens = css.defineVars({
+      time: css.types.time('1s')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.transformFunction', () => {
+    const tokens = css.defineVars({
+      transformFunction: css.types.transformFunction('translateX(10px)')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+
+  test('types.url', () => {
+    const tokens = css.defineVars({
+      url: css.types.url('https://foobar.com')
+    });
+    expect(tokens).toMatchSnapshot('tokens');
+  });
+});