@stylexjs/shared 0.1.0-beta.1

package/lib/generate-css-rule.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateCSSRule;
+var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
+var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
+var _genCSSRule = _interopRequireDefault(require("./utils/genCSSRule"));
+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.
+ *
+ * 
+ */
+
+function generateCSSRule(className, key, value, pseudo) {
+  const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
+  const ltrPairs = pairs.map(_generateLtr.default);
+  const ltrDecls = ltrPairs.map(pair => pair.join(':')).join(';');
+  const rtlDecls = pairs.map(_generateRtl.default).filter(Boolean).map(pair => pair.join(':')).join(';');
+  const ltrRule = (0, _genCSSRule.default)(className, ltrDecls, pseudo);
+  const rtlRule = !rtlDecls ? null : (0, _genCSSRule.default)(className, rtlDecls, pseudo);
+  let priority = 1;
+  if (pseudo != null) {
+    if (pseudo[0] === '@') {
+      priority = 2;
+    } else if (pseudo[0] === ':') {
+      priority = pseudoPriorities[pseudo] ?? 2;
+      if (pseudo.startsWith(':nth-child')) {
+        priority = 6;
+      }
+      if (pseudo.startsWith(':nth-of-type')) {
+        priority = 7;
+      }
+    }
+  }
+  if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
+    // Bump priority for physical left/right values.
+    priority += 0.1;
+  }
+  return {
+    priority,
+    ltr: ltrRule,
+    rtl: rtlRule
+  };
+}
+const pseudoPriorities = {
+  // Might become unsupported:
+  ':first-child': 3,
+  ':last-child': 4,
+  ':only-child': 5,
+  ':nth-child': 6,
+  ':nth-of-type': 7,
+  ':hover': 8,
+  ':focus': 9,
+  ':active': 10,
+  ':disabled': 11,
+  '::placeholder': 12,
+  '::thumb': 13
+};

package/lib/hash.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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.
+ *
+ * 
+ */
+
+/* eslint-disable default-case */
+/* eslint-disable no-fallthrough */
+
+/**
+ * JS Implementation of MurmurHash2
+ *
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ *
+ * @param {string} str ASCII only
+ * @param {number} seed Positive integer only
+ * @return {number} 32-bit positive integer hash
+ */
+function murmurhash2_32_gc(str, seed) {
+  let l = str.length,
+    h = seed ^ l,
+    i = 0,
+    k;
+  while (l >= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
+    k ^= k >>> 24;
+    k = (k & 0xffff) * 0x5bd1e995 + (((k >>> 16) * 0x5bd1e995 & 0xffff) << 16);
+    h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16) ^ k;
+    l -= 4;
+    ++i;
+  }
+  switch (l) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
+  }
+  h ^= h >>> 13;
+  h = (h & 0xffff) * 0x5bd1e995 + (((h >>> 16) * 0x5bd1e995 & 0xffff) << 16);
+  h ^= h >>> 15;
+  return h >>> 0;
+}
+const hash = str => murmurhash2_32_gc(str, 1).toString(36);
+var _default = hash;
+exports.default = _default;

package/lib/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export type TRawValue = number | string | Array<number | string>;
+
+export type TStyleValue = number | string | Array<number | string>;
+export type TNestableStyleValue =
+  | TStyleValue
+  | { readonly [key: string]: TStyleValue };
+
+export type RawStyles = $ReadOnly<{
+  [key: string]: TNestableStyleValue;
+}>;
+
+export type InjectableStyle = {
+  readonly priority: number;
+  readonly ltr: string;
+  readonly rtl?: string;
+};
+
+export type StyleRule = readonly [string, string, InjectableStyle];
+
+export type CompiledStyles = {
+  readonly [key: string]: string | { readonly [key: string]: string };
+};
+export type MutableCompiledStyles = {
+  [key: string]: string | { [key: string]: string };
+};
+
+export type CompiledNamespaces = { readonly [key: string]: CompiledStyles };
+
+export type MutableCompiledNamespaces = {
+  [key: string]: MutableCompiledStyles;
+};
+
+export function create<N extends { readonly [key: string]: RawStyles }>(
+  namespaces: N,
+  options?: StyleXOptions
+): readonly [CompiledNamespaces, { readonly [key: string]: InjectableStyle }];
+
+export function keyframes<
+  Obj extends {
+    readonly [key: string]: { readonly [k: string]: string | number };
+  }
+>(animation: Obj, options?: StyleXOptions): readonly [string, InjectableStyle];
+
+export function include(animation: {
+  readonly [key: string]: string | number;
+}): readonly { [key: string]: IncludedStyles };
+
+export class IncludedStyles {
+  astNode: any;
+}
+
+export type StyleXOptions = {
+  dev: boolean;
+  test: boolean;
+  stylexSheetName?: string | undefined;
+  classNamePrefix: string;
+  definedStylexCSSVariables?: { [key: string]: any };
+  [key: string]: any;
+};
+
+export function firstThatWorks<T>(...args: T[]): T[];
+
+export const messages: {
+  ILLEGAL_ARGUMENT_LENGTH: string;
+  NON_STATIC_VALUE: string;
+  ESCAPED_STYLEX_VALUE: string;
+  UNBOUND_STYLEX_CALL_VALUE: string;
+  ONLY_TOP_LEVEL: string;
+  NON_OBJECT_FOR_STYLEX_CALL: string;
+  UNKNOWN_PROP_KEY: string;
+  INVALID_PSEUDO: string;
+  ILLEGAL_NAMESPACE_TYPE: string;
+  UNKNOWN_NAMESPACE: string;
+  ILLEGAL_NESTED_PSEUDO: string;
+  ILLEGAL_PROP_VALUE: string;
+  ILLEGAL_PROP_ARRAY_VALUE: string;
+  ILLEGAL_NAMESPACE_VALUE: string;
+  INVALID_SPREAD: string;
+  LINT_UNCLOSED_FUNCTION: string;
+  LOCAL_ONLY: string;
+  UNEXPECTED_ARGUMENT: string;
+  EXPECTED_FUNCTION_CALL: string;
+};

package/lib/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.create = exports.IncludedStyles = void 0;
+var _stylexCreate = _interopRequireDefault(require("./stylex-create"));
+var _stylexKeyframes = _interopRequireDefault(require("./stylex-keyframes"));
+var _stylexInclude = _interopRequireWildcard(require("./stylex-include"));
+var _stylexFirstThatWorks = _interopRequireDefault(require("./stylex-first-that-works"));
+var m = _interopRequireWildcard(require("./messages"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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.
+ *
+ * 
+ */
+
+// All functions exposed from `stylex` are defined in a way that can be run
+// entirely in the browser.
+
+// These are the implementations of those functions.
+
+const create = _stylexCreate.default;
+exports.create = create;
+const keyframes = _stylexKeyframes.default;
+exports.keyframes = keyframes;
+const include = _stylexInclude.default;
+exports.include = include;
+const messages = m;
+exports.messages = messages;
+const IncludedStyles = _stylexInclude.IncludedStyles;
+exports.IncludedStyles = IncludedStyles;
+const firstThatWorks = _stylexFirstThatWorks.default;
+exports.firstThatWorks = firstThatWorks;

package/lib/messages.js

@@ -0,0 +1,56 @@
+/**
+ * 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';
+
+// This file contains constants to be used within Error messages.
+// The URLs within will eventually be replaced by links to the documenation website for Stylex.
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0;
+const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
+exports.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
+const NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
+exports.NON_STATIC_VALUE = NON_STATIC_VALUE;
+const ESCAPED_STYLEX_VALUE = 'Escaping a stylex.create() value is not allowed.';
+exports.ESCAPED_STYLEX_VALUE = ESCAPED_STYLEX_VALUE;
+const UNBOUND_STYLEX_CALL_VALUE = 'stylex.create calls must be bound to a bare variable.';
+exports.UNBOUND_STYLEX_CALL_VALUE = UNBOUND_STYLEX_CALL_VALUE;
+const ONLY_TOP_LEVEL = 'stylex.create() is only allowed at the root of a program.';
+exports.ONLY_TOP_LEVEL = ONLY_TOP_LEVEL;
+const NON_OBJECT_FOR_STYLEX_CALL = 'stylex.create() can only accept a style object.';
+exports.NON_OBJECT_FOR_STYLEX_CALL = NON_OBJECT_FOR_STYLEX_CALL;
+const UNKNOWN_PROP_KEY = 'Unknown property key';
+exports.UNKNOWN_PROP_KEY = UNKNOWN_PROP_KEY;
+const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
+exports.INVALID_PSEUDO = INVALID_PSEUDO;
+const ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.';
+exports.ILLEGAL_NAMESPACE_TYPE = ILLEGAL_NAMESPACE_TYPE;
+const UNKNOWN_NAMESPACE = 'Unknown namespace';
+exports.UNKNOWN_NAMESPACE = UNKNOWN_NAMESPACE;
+const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested.";
+exports.ILLEGAL_NESTED_PSEUDO = ILLEGAL_NESTED_PSEUDO;
+const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
+exports.ILLEGAL_PROP_VALUE = ILLEGAL_PROP_VALUE;
+const ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
+exports.ILLEGAL_PROP_ARRAY_VALUE = ILLEGAL_PROP_ARRAY_VALUE;
+const ILLEGAL_NAMESPACE_VALUE = 'A stylex namespace must be an object.';
+exports.ILLEGAL_NAMESPACE_VALUE = ILLEGAL_NAMESPACE_VALUE;
+const INVALID_SPREAD = 'Imported styles spread with a stylex.create call must be type cast as `XStyle<>` to verify their type.';
+exports.INVALID_SPREAD = INVALID_SPREAD;
+const LINT_UNCLOSED_FUNCTION = 'Rule contains an unclosed function';
+exports.LINT_UNCLOSED_FUNCTION = LINT_UNCLOSED_FUNCTION;
+const LOCAL_ONLY = 'The return value of stylex.create() should not be exported.';
+exports.LOCAL_ONLY = LOCAL_ONLY;
+const UNEXPECTED_ARGUMENT = 'Unexpected argument passed to the stylex() function.';
+exports.UNEXPECTED_ARGUMENT = UNEXPECTED_ARGUMENT;
+const EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
+exports.EXPECTED_FUNCTION_CALL = EXPECTED_FUNCTION_CALL;
+const NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
+exports.NO_PARENT_PATH = NO_PARENT_PATH;

package/lib/physical-rtl/generate-ltr.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateLTR;
+/**
+ * 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 logicalToPhysical = {
+  start: 'left',
+  end: 'right'
+};
+const propertyToLTR = {
+  'margin-start': _ref => {
+    let [key, val] = _ref;
+    return ['margin-left', val];
+  },
+  // 'margin-inline-start': ([key, val]) => ['margin-left', val],
+  'margin-end': _ref2 => {
+    let [key, val] = _ref2;
+    return ['margin-right', val];
+  },
+  // 'margin-inline-end': ([key, val]: [string, string]) => ['margin-right', val],
+  'padding-start': _ref3 => {
+    let [key, val] = _ref3;
+    return ['padding-left', val];
+  },
+  // 'padding-inline-start': ([key, val]: [string, string]) => ['padding-left', val],
+  'padding-end': _ref4 => {
+    let [key, val] = _ref4;
+    return ['padding-right', val];
+  },
+  // 'padding-inline-end': ([key, val]: [string, string]) => ['padding-right', val],
+  'border-start': _ref5 => {
+    let [key, val] = _ref5;
+    return ['border-left', val];
+  },
+  // 'border-inline-start': ([key, val]: [string, string]) => ['border-left', val],
+  'border-end': _ref6 => {
+    let [key, val] = _ref6;
+    return ['border-right', val];
+  },
+  // 'border-inline-end': ([key, val]: [string, string]) => ['border-right', val],
+  'border-start-width': _ref7 => {
+    let [key, val] = _ref7;
+    return ['border-left-width', val];
+  },
+  // 'border-inline-start-width': ([key, val]: [string, string]) => ['border-left-width', val],
+  'border-end-width': _ref8 => {
+    let [key, val] = _ref8;
+    return ['border-right-width', val];
+  },
+  // 'border-inline-end-width': ([key, val]: [string, string]) => ['border-right-width', val],
+  'border-start-color': _ref9 => {
+    let [key, val] = _ref9;
+    return ['border-left-color', val];
+  },
+  // 'border-inline-start-color': ([key, val]: [string, string]) => ['border-left-color', val],
+  'border-end-color': _ref10 => {
+    let [key, val] = _ref10;
+    return ['border-right-color', val];
+  },
+  // 'border-inline-end-color': ([key, val]: [string, string]) => ['border-right-color', val],
+  'border-start-style': _ref11 => {
+    let [key, val] = _ref11;
+    return ['border-left-style', val];
+  },
+  // 'border-inline-start-style': ([key, val]: [string, string]) => ['border-left-style', val],
+  'border-end-style': _ref12 => {
+    let [key, val] = _ref12;
+    return ['border-right-style', val];
+  },
+  // 'border-inline-end-style': ([key, val]: [string, string]) => ['border-right-style', val],
+  'border-top-start-radius': _ref13 => {
+    let [key, val] = _ref13;
+    return ['border-top-left-radius', val];
+  },
+  // 'border-start-start-radius': ([key, val]: [string, string]) => ['border-top-left-radius', val],
+  'border-bottom-start-radius': _ref14 => {
+    let [key, val] = _ref14;
+    return ['border-bottom-left-radius', val];
+  },
+  // 'border-end-start-radius': ([key, val]: [string, string]) => ['border-bottom-left-radius', val],
+  'border-top-end-radius': _ref15 => {
+    let [key, val] = _ref15;
+    return ['border-top-right-radius', val];
+  },
+  // 'border-start-end-radius': ([key, val]: [string, string]) => ['border-top-right-radius', val],
+  'border-bottom-end-radius': _ref16 => {
+    let [key, val] = _ref16;
+    return ['border-bottom-right-radius', val];
+  },
+  // 'border-end-end-radius': ([key, val]: [string, string]) => ['border-bottom-right-radius', val],
+  'text-align': _ref17 => {
+    let [key, val] = _ref17;
+    return [key, logicalToPhysical[val] ?? val];
+  },
+  float: _ref18 => {
+    let [key, val] = _ref18;
+    return [key, logicalToPhysical[val] ?? val];
+  },
+  clear: _ref19 => {
+    let [key, val] = _ref19;
+    return [key, logicalToPhysical[val] ?? val];
+  },
+  start: _ref20 => {
+    let [key, val] = _ref20;
+    return ['left', val];
+  },
+  // 'inset-inline-start': ([key, val]: [string, string]) => ['left', val],
+  end: _ref21 => {
+    let [key, val] = _ref21;
+    return ['right', val];
+  },
+  // 'inset-inline-end': ([key, val]) => ['right', val],
+  'background-position': _ref22 => {
+    let [key, val] = _ref22;
+    return [key, val.split(' ').map(word => word === 'start' ? 'left' : word === 'end' ? 'right' : word).join(' ')];
+  }
+};
+function generateLTR(pair) {
+  const [key] = pair;
+  if (propertyToLTR[key]) {
+    return propertyToLTR[key](pair);
+  }
+  return pair;
+}

package/lib/physical-rtl/generate-rtl.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateRTL;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+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 cursorFlip = {
+  'e-resize': 'w-resize',
+  'w-resize': 'e-resize',
+  'ne-resize': 'nw-resize',
+  'nesw-resize': 'nwse-resize',
+  'nw-resize': 'ne-resize',
+  'nwse-resize': 'nesw-resize',
+  'se-resize': 'sw-resize',
+  'sw-resize': 'se-resize'
+};
+function splitByDivisor(value) {
+  const ast = (0, _postcssValueParser.default)(value);
+  const groups = [];
+  let currGroup = [];
+  function push() {
+    if (currGroup.length === 0) {
+      return;
+    }
+    groups.push(_postcssValueParser.default.stringify(currGroup));
+    currGroup = [];
+  }
+  for (const node of ast.nodes) {
+    if (node.type === 'div') {
+      push();
+    } else {
+      currGroup.push(node);
+    }
+  }
+  push();
+  return groups;
+}
+function flipSign(value) {
+  if (value === '0') {
+    return value;
+  } else {
+    return value[0] === '-' ? value.slice(1) : '-' + value;
+  }
+}
+function flipShadow(value) {
+  const defs = splitByDivisor(value);
+  const builtDefs = [];
+  for (const def of defs) {
+    const parts = def.split(' ');
+    const index = _postcssValueParser.default.unit(parts[0]) === false ? 1 : 0;
+    if (index < parts.length) {
+      parts[index] = flipSign(parts[index]);
+    }
+    builtDefs.push(parts.join(' '));
+  }
+  const rtl = builtDefs.join(', ');
+  if (rtl !== value) {
+    return rtl;
+  }
+}
+
+// Should we be flipping shadows at all?
+// I think the better approach would be to let engineers use
+// CSS-vars directly.
+const shadowsFlip = {
+  'box-shadow': _ref => {
+    let [key, val] = _ref;
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  },
+  'text-shadow': _ref2 => {
+    let [key, val] = _ref2;
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  }
+};
+const logicalToPhysical = {
+  start: 'right',
+  end: 'left'
+};
+const propertyToRTL = {
+  'margin-start': _ref3 => {
+    let [key, val] = _ref3;
+    return ['margin-right', val];
+  },
+  // 'margin-inline-start': ([key, val]: [string, string]) => ['margin-right', val],
+  'margin-end': _ref4 => {
+    let [key, val] = _ref4;
+    return ['margin-left', val];
+  },
+  // 'margin-inline-end': ([key, val]: [string, string]) => ['margin-left', val],
+  'padding-start': _ref5 => {
+    let [key, val] = _ref5;
+    return ['padding-right', val];
+  },
+  // 'padding-inline-start': ([key, val]: [string, string]) => ['padding-right', val],
+  'padding-end': _ref6 => {
+    let [key, val] = _ref6;
+    return ['padding-left', val];
+  },
+  // 'padding-inline-end': ([key, val]: [string, string]) => ['padding-left', val],
+  'border-start': _ref7 => {
+    let [key, val] = _ref7;
+    return ['border-right', val];
+  },
+  // 'border-inline-start': ([key, val]: [string, string]) => ['border-right', val],
+  'border-end': _ref8 => {
+    let [key, val] = _ref8;
+    return ['border-left', val];
+  },
+  // 'border-inline-end': ([key, val]: [string, string]) => ['border-left', val],
+  'border-start-width': _ref9 => {
+    let [key, val] = _ref9;
+    return ['border-right-width', val];
+  },
+  // 'border-inline-start-width': ([key, val]: [string, string]) => ['border-right-width', val],
+  'border-end-width': _ref10 => {
+    let [key, val] = _ref10;
+    return ['border-left-width', val];
+  },
+  // 'border-inline-end-width': ([key, val]: [string, string]) => ['border-left-width', val],
+  'border-start-color': _ref11 => {
+    let [key, val] = _ref11;
+    return ['border-right-color', val];
+  },
+  // 'border-inline-start-color': ([key, val]: [string, string]) => ['border-right-color', val],
+  'border-end-color': _ref12 => {
+    let [key, val] = _ref12;
+    return ['border-left-color', val];
+  },
+  // 'border-inline-end-color': ([key, val]: [string, string]) => ['border-left-color', val],
+  'border-start-style': _ref13 => {
+    let [key, val] = _ref13;
+    return ['border-right-style', val];
+  },
+  // 'border-inline-start-style': ([key, val]: [string, string]) => ['border-right-style', val],
+  'border-end-style': _ref14 => {
+    let [key, val] = _ref14;
+    return ['border-left-style', val];
+  },
+  // 'border-inline-end-style': ([key, val]: [string, string]) => ['border-left-style', val],
+  'border-top-start-radius': _ref15 => {
+    let [key, val] = _ref15;
+    return ['border-top-right-radius', val];
+  },
+  // 'border-start-start-radius': ([key, val]: [string, string]) => ['border-top-right-radius', val],
+  'border-bottom-start-radius': _ref16 => {
+    let [key, val] = _ref16;
+    return ['border-bottom-right-radius', val];
+  },
+  // 'border-end-start-radius': ([key, val]: [string, string]) => ['border-bottom-right-radius', val],
+  'border-top-end-radius': _ref17 => {
+    let [key, val] = _ref17;
+    return ['border-top-left-radius', val];
+  },
+  // 'border-start-end-radius': ([key, val]: [string, string]) => ['border-top-left-radius', val],
+  'border-bottom-end-radius': _ref18 => {
+    let [key, val] = _ref18;
+    return ['border-bottom-left-radius', val];
+  },
+  // 'border-end-end-radius': ([key, val]: [string, string]) => ['border-bottom-left-radius', val],
+  'text-align': _ref19 => {
+    let [key, val] = _ref19;
+    return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
+  },
+  float: _ref20 => {
+    let [key, val] = _ref20;
+    return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
+  },
+  clear: _ref21 => {
+    let [key, val] = _ref21;
+    return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
+  },
+  start: _ref22 => {
+    let [key, val] = _ref22;
+    return ['right', val];
+  },
+  // 'inset-inline-start': ([key, val]: [string, string]) => ['right', val],
+  end: _ref23 => {
+    let [key, val] = _ref23;
+    return ['left', val];
+  },
+  // 'inset-inline-end': ([key, val]: [string, string]) => ['left', val],
+  'background-position': _ref24 => {
+    let [key, val] = _ref24;
+    const words = val.split(' ');
+    if (!words.includes('start') && !words.includes('end')) {
+      return null;
+    }
+    return [key, words.map(word => word === 'start' ? 'right' : word === 'end' ? 'left' : word).join(' ')];
+  },
+  cursor: _ref25 => {
+    let [key, val] = _ref25;
+    return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
+  },
+  ...shadowsFlip
+};
+function generateRTL(_ref26) {
+  let [key, value] = _ref26;
+  if (propertyToRTL[key]) {
+    return propertyToRTL[key]([key, value]);
+  }
+  return null;
+}