@stylexjs/shared 0.1.0-beta.1

package/.babelrc

@@ -0,0 +1,16 @@
+{
+    "assumptions": {
+      "iterableIsArray": true
+    },
+    "presets": [
+      ["@babel/preset-env", {
+        "exclude": [
+          "@babel/plugin-transform-typeof-symbol"
+        ],
+        "targets": "defaults"
+      }],
+      "@babel/preset-flow",
+      "@babel/preset-react"
+    ]
+  }
+  

package/__tests__/stylex-create-test.js

@@ -0,0 +1,386 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ *
+ */
+
+import styleXCreate from '../src/stylex-create';
+
+describe('stylex-create-test', () => {
+  test('color:red', () => {
+    expect(
+      styleXCreate({
+        default: {
+          backgroundColor: 'red',
+          color: 'blue',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "backgroundColor": "xrkmrrc",
+            "color": "xju2f9n",
+          },
+        },
+        {
+          "xju2f9n": {
+            "ltr": ".xju2f9n{color:blue}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xrkmrrc": {
+            "ltr": ".xrkmrrc{background-color:red}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('padding shorthand', () => {
+    expect(
+      styleXCreate({
+        short: {
+          padding: 'calc((100% - 50px) * 0.5) var(--rightpadding, 20px)',
+          paddingTop: 0,
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "short": {
+            "paddingBottom": "x18xuxqe",
+            "paddingEnd": "xcrpjku",
+            "paddingStart": "xyv1419",
+            "paddingTop": "xexx8yu",
+          },
+        },
+        {
+          "x18xuxqe": {
+            "ltr": ".x18xuxqe{padding-bottom:calc((100% - 50px) * .5)}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xcrpjku": {
+            "ltr": ".xcrpjku{padding-right:var(--rightpadding,20px)}",
+            "priority": 1,
+            "rtl": ".xcrpjku{padding-left:var(--rightpadding,20px)}",
+          },
+          "xexx8yu": {
+            "ltr": ".xexx8yu{padding-top:0}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xyv1419": {
+            "ltr": ".xyv1419{padding-left:var(--rightpadding,20px)}",
+            "priority": 1,
+            "rtl": ".xyv1419{padding-right:var(--rightpadding,20px)}",
+          },
+        },
+      ]
+    `);
+  });
+
+  test('transforms style object with custom property', () => {
+    expect(
+      styleXCreate({
+        default: {
+          '--background-color': 'red',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "--background-color": "xgau0yw",
+          },
+        },
+        {
+          "xgau0yw": {
+            "ltr": ".xgau0yw{--background-color:red}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('transforms style object with custom propety as value', () => {
+    expect(
+      styleXCreate({
+        default: {
+          '--final-color': 'var(--background-color)',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "--final-color": "x13tgbkp",
+          },
+        },
+        {
+          "x13tgbkp": {
+            "ltr": ".x13tgbkp{--final-color:var(--background-color)}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('transforms multiple namespaces', () => {
+    expect(
+      styleXCreate({
+        default: {
+          backgroundColor: 'red',
+        },
+
+        default2: {
+          color: 'blue',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "backgroundColor": "xrkmrrc",
+          },
+          "default2": {
+            "color": "xju2f9n",
+          },
+        },
+        {
+          "xju2f9n": {
+            "ltr": ".xju2f9n{color:blue}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xrkmrrc": {
+            "ltr": ".xrkmrrc{background-color:red}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('does not transform attr() value', () => {
+    expect(
+      styleXCreate({
+        default: {
+          content: 'attr(some-attribute)',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "content": "xd71okc",
+          },
+        },
+        {
+          "xd71okc": {
+            "ltr": ".xd71okc{content:attr(some-attribute)}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('transforms nested pseudo-class to CSS', () => {
+    expect(
+      styleXCreate({
+        default: {
+          ':hover': {
+            backgroundColor: 'red',
+            color: 'blue',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            ":hover_backgroundColor": "x1gykpug",
+            ":hover_color": "x17z2mba",
+          },
+        },
+        {
+          "x17z2mba": {
+            "ltr": ".x17z2mba:hover{color:blue}",
+            "priority": 8,
+            "rtl": null,
+          },
+          "x1gykpug": {
+            "ltr": ".x1gykpug:hover{background-color:red}",
+            "priority": 8,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  // This API will not launch as an array, but internally we can continue to use arrays
+  test('transforms array values as fallbacks', () => {
+    expect(
+      styleXCreate({
+        default: {
+          position: ['sticky', 'fixed'],
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "position": "x1ruww2u",
+          },
+        },
+        {
+          "x1ruww2u": {
+            "ltr": ".x1ruww2u{position:sticky;position:fixed}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+
+  test('tranforms valid shorthands', () => {
+    expect(
+      styleXCreate({
+        default: {
+          overflow: 'hidden',
+          borderStyle: 'dashed',
+          borderWidth: 1,
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "borderBottomStyle": "xpvcztv",
+            "borderBottomWidth": "xso031l",
+            "borderEndStyle": "x157eodl",
+            "borderEndWidth": "xm81vs4",
+            "borderStartStyle": "x1q04ism",
+            "borderStartWidth": "xy80clv",
+            "borderTopStyle": "xlya59e",
+            "borderTopWidth": "x178xt8z",
+            "overflowX": "x6ikm8r",
+            "overflowY": "x10wlt62",
+          },
+        },
+        {
+          "x10wlt62": {
+            "ltr": ".x10wlt62{overflow-y:hidden}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "x157eodl": {
+            "ltr": ".x157eodl{border-right-style:dashed}",
+            "priority": 1,
+            "rtl": ".x157eodl{border-left-style:dashed}",
+          },
+          "x178xt8z": {
+            "ltr": ".x178xt8z{border-top-width:1px}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "x1q04ism": {
+            "ltr": ".x1q04ism{border-left-style:dashed}",
+            "priority": 1,
+            "rtl": ".x1q04ism{border-right-style:dashed}",
+          },
+          "x6ikm8r": {
+            "ltr": ".x6ikm8r{overflow-x:hidden}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xlya59e": {
+            "ltr": ".xlya59e{border-top-style:dashed}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xm81vs4": {
+            "ltr": ".xm81vs4{border-right-width:1px}",
+            "priority": 1,
+            "rtl": ".xm81vs4{border-left-width:1px}",
+          },
+          "xpvcztv": {
+            "ltr": ".xpvcztv{border-bottom-style:dashed}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xso031l": {
+            "ltr": ".xso031l{border-bottom-width:1px}",
+            "priority": 1,
+            "rtl": null,
+          },
+          "xy80clv": {
+            "ltr": ".xy80clv{border-left-width:1px}",
+            "priority": 1,
+            "rtl": ".xy80clv{border-right-width:1px}",
+          },
+        },
+      ]
+    `);
+  });
+
+  test('transforms media queries', () => {
+    expect(
+      styleXCreate({
+        default: {
+          backgroundColor: 'red',
+          '@media (min-width: 1000px)': {
+            backgroundColor: 'blue',
+          },
+
+          '@media (min-width: 2000px)': {
+            backgroundColor: 'purple',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "default": {
+            "@media (min-width: 1000px)_backgroundColor": "xc445zv",
+            "@media (min-width: 2000px)_backgroundColor": "x1ssfqz5",
+            "backgroundColor": "xrkmrrc",
+          },
+        },
+        {
+          "x1ssfqz5": {
+            "ltr": "@media (min-width: 2000px){.x1ssfqz5.x1ssfqz5{background-color:purple}}",
+            "priority": 2,
+            "rtl": null,
+          },
+          "xc445zv": {
+            "ltr": "@media (min-width: 1000px){.xc445zv.xc445zv{background-color:blue}}",
+            "priority": 2,
+            "rtl": null,
+          },
+          "xrkmrrc": {
+            "ltr": ".xrkmrrc{background-color:red}",
+            "priority": 1,
+            "rtl": null,
+          },
+        },
+      ]
+    `);
+  });
+});

package/__tests__/stylex-keyframes-test.js

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ *
+ */
+
+import styleXKeyframes from '../src/stylex-keyframes';
+
+describe('stylex-keyframes test', () => {
+  test('converts keyframes to CSS', () => {
+    expect(
+      styleXKeyframes({
+        from: {
+          backgroundColor: 'red',
+        },
+
+        to: {
+          backgroundColor: 'blue',
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        "xbopttm-B",
+        {
+          "ltr": "@keyframes xbopttm-B{from{background-color:red;}to{background-color:blue;}}",
+          "priority": 1,
+          "rtl": null,
+        },
+      ]
+    `);
+  });
+
+  test('generates RTL-specific keyframes', () => {
+    expect(
+      styleXKeyframes({
+        from: {
+          start: 0,
+        },
+
+        to: {
+          start: 500,
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      [
+        "x1lvx8r0-B",
+        {
+          "ltr": "@keyframes x1lvx8r0-B{from{left:0;}to{left:500px;}}",
+          "priority": 1,
+          "rtl": "@keyframes x1lvx8r0-B{from{right:0;}to{right:500px;}}",
+        },
+      ]
+    `);
+  });
+});

package/lib/common-types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/convert-to-className.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = convertToClassName;
+var _hash = _interopRequireDefault(require("./hash"));
+var _dashify = _interopRequireDefault(require("./utils/dashify"));
+var _transformValue = _interopRequireDefault(require("./transform-value"));
+var _generateCssRule = _interopRequireDefault(require("./generate-css-rule"));
+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.
+ *
+ * 
+ */
+
+// This function takes a single style rule and transforms it into a CSS rule.
+// [color: 'red'] => ['color', 'classname-for-color-red', CSSRULE{ltr, rtl, priority}]
+//
+// It converts the camelCased style key to a dash-separated key.
+// Handles RTL-flipping
+// Hashes to get a className
+// Returns the final key, className a CSS Rule
+function convertToClassName(objEntry, pseudo) {
+  let {
+    stylexSheetName = '<>',
+    classNamePrefix = 'x'
+  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const [key, rawValue] = objEntry;
+  const dashedKey = (0, _dashify.default)(key);
+  const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue)) : (0, _transformValue.default)(key, rawValue);
+  const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + (pseudo ?? 'null') : dashedKey + value + (pseudo ?? 'null');
+  const className = classNamePrefix + (0, _hash.default)(stylexSheetName + stringToHash);
+  const cssRules = (0, _generateCssRule.default)(className, dashedKey, value, pseudo);
+  return [key, className, cssRules];
+}

package/lib/expand-shorthands.js

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = flatMapExpandedShorthands;
+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.
+ *
+ * 
+ */
+
+function printNode(node) {
+  switch (node.type) {
+    case 'word':
+    case 'string':
+      return `${node.value}`;
+    case 'function':
+      return `${node.value}(${node.nodes.map(printNode).join('')})`;
+    default:
+      return node.value;
+  }
+}
+
+// Using split(' ') Isn't enough bcause of values like calc.
+function splitValue(str) {
+  if (Array.isArray(str)) {
+    return str;
+  }
+  const parsed = (0, _postcssValueParser.default)(str.trim());
+  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
+  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
+    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
+  }
+  return nodes;
+}
+
+// TODO: to be added later.
+// const aliases = {
+//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
+//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
+//   marginInline: (rawValue) => [
+//     ['marginStart', rawValue],
+//     ['marginEnd', rawValue],
+//   ],
+//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
+//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
+//   paddingInline: (rawValue) => [
+//     ['paddingStart', rawValue],
+//     ['paddingEnd', rawValue],
+//   ],
+//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
+//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
+//   // // This will need to change.
+//   // 'borderInline': (rawValue) => [
+//   //   ['borderStart', rawValue],
+//   //   ['borderEnd', rawValue],
+//   // ],
+// };
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+const expansions = {
+  // ...aliases,
+  border: rawValue => {
+    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
+  },
+  /*
+  // Add this later, as this will be a breaking change
+  border: (rawValue: string) => {
+    if (typeof rawValue === 'number') {
+      return expansions.borderWidth(rawValue);
+    }
+    const [width, style, color] = splitValue(rawValue);
+    return [
+      ...expansions.borderWidth(width),
+      ...expansions.borderStyle(style),
+      ...expansions.borderColor(color),
+    ];
+  }
+  */
+  borderColor: rawValue => {
+    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
+    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
+  },
+  borderHorizontal: rawValue => {
+    return [['borderStart', rawValue], ['borderEnd', rawValue]];
+  },
+  borderStyle: rawValue => {
+    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
+    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
+  },
+  borderVertical: rawValue => {
+    return [['borderTop', rawValue], ['borderBottom', rawValue]];
+  },
+  borderWidth: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+  },
+  borderRadius: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? splitValue(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
+
+    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+  },
+  margin: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+  },
+  marginHorizontal: rawValue => {
+    return [['marginStart', rawValue], ['marginEnd', rawValue]];
+  },
+  marginVertical: rawValue => {
+    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+  },
+  overflow: rawValue => {
+    const [x, y = x] = splitValue(rawValue);
+    return [['overflowX', x], ['overflowY', y]];
+  },
+  padding: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+  },
+  paddingHorizontal: rawValue => {
+    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+  },
+  paddingVertical: rawValue => {
+    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  }
+};
+function flatMapExpandedShorthands(objEntry) {
+  const [key, value] = objEntry;
+  const expansion = expansions[key];
+  if (expansion) {
+    if (Array.isArray(value)) {
+      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
+    }
+    return expansion(value);
+  }
+  return [objEntry];
+}