@stylexjs/stylex 0.1.0-beta.1

package/.babelrc.js

@@ -0,0 +1,40 @@
+function makeHaste() {
+  return {
+    visitor: {
+      ImportDeclaration(path) {
+        if (path.get('source').isStringLiteral()) {
+          const oldValue = path.get('source').node.value;
+          path.get('source').node.value = oldValue.slice(
+            oldValue.lastIndexOf('/') + 1
+          );
+        }
+      },
+    },
+  };
+}
+
+const presets = process.env['HASTE']
+  ? []
+  : [
+      [
+        '@babel/preset-env',
+        {
+          exclude: ['@babel/plugin-transform-typeof-symbol'],
+          targets: 'defaults',
+        },
+      ],
+      '@babel/preset-flow',
+      '@babel/preset-react',
+    ];
+
+const plugins = process.env['HASTE']
+  ? [makeHaste, '@babel/plugin-syntax-flow', '@babel/plugin-syntax-jsx']
+  : [];
+
+module.exports = {
+  assumptions: {
+    iterableIsArray: true,
+  },
+  presets,
+  plugins,
+};

package/__tests__/StyleXSheet-test.js

@@ -0,0 +1,101 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import { StyleXSheet } from '../src/StyleXSheet';
+
+const testOpts = {
+  rootTheme: undefined,
+  supportsVariables: true,
+};
+
+test('StyleXSheet.prototype.insert', () => {
+  const sheet = new StyleXSheet(testOpts);
+
+  expect(sheet.getRuleCount()).toBe(0);
+  sheet.inject();
+  expect(sheet.getRuleCount()).toBe(0);
+
+  sheet.insert('.a {}', 0);
+  expect(sheet.getRuleCount()).toBe(1);
+
+  sheet.insert('.b {}', 0);
+  expect(sheet.getRuleCount()).toBe(2);
+
+  sheet.insert('.b {}', 0);
+  expect(sheet.getRuleCount()).toBe(2);
+});
+
+test('StyleXSheet.prototype.insert respects priorities', () => {
+  const sheet = new StyleXSheet(testOpts);
+
+  sheet.insert('.last {}', 6);
+  sheet.insert('.third {}', 3);
+  sheet.insert('.first {}', 0);
+  sheet.insert('.second {}', 1);
+
+  expect(sheet.getCSS()).toMatchInlineSnapshot(`
+    ".first {}
+    .second {}
+    .third {}
+    .last {}"
+  `);
+});
+
+test('StyleXSheet.prototype.insert respects priority floats', () => {
+  const sheet = new StyleXSheet(testOpts);
+
+  sheet.insert('.fourth {}', 6.8);
+  sheet.insert('.third {}', 6.5);
+  sheet.insert('.second {}', 6);
+  sheet.insert('.first {}', 2);
+
+  expect(sheet.getCSS()).toMatchInlineSnapshot(`
+    ".first {}
+    .second {}
+    .third {}
+    .fourth {}"
+  `);
+});
+
+test('StyleXSheet.prototype.insert handles RTL rules with media queries', () => {
+  const sheet = new StyleXSheet(testOpts);
+
+  sheet.insert(
+    '@media (min-width: 1000px) { .foo {} }',
+    0,
+    '@media (min-width: 1000px) { .foo {} }'
+  );
+
+  expect(sheet.getCSS()).toMatchInlineSnapshot(`
+    "@media (min-width: 1000px) {html:not([dir='rtl'])  .foo {} }
+    @media (min-width: 1000px) {html[dir='rtl']  .foo {} }"
+  `);
+});
+
+test('inlines variables for older browsers', () => {
+  const sheet = new StyleXSheet({
+    rootDarkTheme: { foo: 'reallydark' },
+    rootTheme: { foo: 'bar' },
+    supportsVariables: false,
+  });
+
+  sheet.insert('.foo {color: var(--foo)}', 1);
+
+  expect(sheet.getCSS()).toMatchInlineSnapshot(`
+    ":root, .__fb-light-mode {
+      --foo: bar;
+    }
+    .__fb-dark-mode:root, .__fb-dark-mode {
+      --foo: reallydark;
+    }
+    .foo {color: bar}"
+  `);
+});

package/__tests__/stylex-test.js

@@ -0,0 +1,202 @@
+/**
+ * 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.
+ *
+ * @noflow
+ */
+
+'use strict';
+
+import { styleSheet } from '../src/StyleXSheet';
+import stylex from '../src/stylex';
+
+// TODO: priorities need testing
+test('stylex.inject', () => {
+  const prevCount = styleSheet.getRuleCount();
+  stylex.inject('hey {}', 0);
+  expect(styleSheet.getRuleCount()).toBeGreaterThan(prevCount);
+});
+
+describe('stylex', () => {
+  test('basic resolve', () => {
+    expect(stylex({ a: 'aaa', b: 'bbb' })).toBe('aaa bbb');
+  });
+
+  test('merge order', () => {
+    expect(
+      stylex([
+        { a: 'a', ':hover': { aa: 'aa' } },
+        { b: 'b' },
+        { c: 'c', ':hover': { cc: 'cc' } },
+      ])
+    ).toBe('a aa b c cc');
+  });
+
+  test('with a top-level array of simple overridden classes', () => {
+    expect(
+      stylex([
+        {
+          backgroundColor: 'nu7423ey',
+        },
+        {
+          backgroundColor: 'gh25dzvf',
+        },
+      ])
+    ).toEqual('gh25dzvf');
+  });
+
+  test('with nested arrays and pseudoClasses overriding things', () => {
+    expect(
+      stylex([
+        {
+          backgroundColor: 'nu7423ey',
+        },
+        [
+          {
+            backgroundColor: 'abcdefg',
+            ':hover': {
+              backgroundColor: 'ksdfmwjs',
+            },
+          },
+        ],
+        {
+          color: 'gofk2cf1',
+          ':hover': {
+            backgroundColor: 'rse6dlih',
+          },
+        },
+      ])
+    ).toEqual('abcdefg gofk2cf1 rse6dlih');
+  });
+
+  test('with just pseudoclasses', () => {
+    expect(
+      stylex(
+        {
+          ':hover': {
+            backgroundColor: 'rse6dlih',
+          },
+        },
+        {
+          ':hover': {
+            color: 'gofk2cf1',
+          },
+        }
+      )
+    ).toEqual('rse6dlih gofk2cf1');
+  });
+
+  test('with complicated set of arguments', () => {
+    const styles = [
+      {
+        backgroundColor: 'nu7423ey',
+        borderColor: 'tpe1esc0',
+        borderStyle: 'gewhe1h2',
+        borderWidth: 'gcovof34',
+        boxSizing: 'bdao358l',
+        display: 'rse6dlih',
+        listStyle: 's5oniofx',
+        marginTop: 'm8h3af8h',
+        marginEnd: 'l7ghb35v',
+        marginBottom: 'kjdc1dyq',
+        marginStart: 'kmwttqpk',
+        paddingTop: 'srn514ro',
+        paddingEnd: 'oxkhqvkx',
+        paddingBottom: 'rl78xhln',
+        paddingStart: 'nch0832m',
+        WebkitTapHighlightColor: 'qi72231t',
+        textAlign: 'cr00lzj9',
+        textDecoration: 'rn8ck1ys',
+        whiteSpace: 'n3t5jt4f',
+        wordWrap: 'gh25dzvf',
+        zIndex: 'g4tp4svg',
+      },
+      false,
+      false,
+      false,
+      false,
+      [
+        {
+          cursor: 'fsf7x5fv',
+          touchAction: 's3jn8y49',
+        },
+        false,
+        {
+          outline: 'icdlwmnq',
+        },
+        [
+          {
+            WebkitTapHighlightColor: 'oajrlxb2',
+            cursor: 'nhd2j8a9',
+            touchAction: 'f1sip0of',
+          },
+          false,
+          false,
+          {
+            textDecoration: 'esuyzwwr',
+            ':hover': {
+              textDecoration: 'p8dawk7l',
+            },
+          },
+          false,
+          [
+            {
+              backgroundColor: 'g5ia77u1',
+              border: 'e4t7hp5w',
+              color: 'gmql0nx0',
+              cursor: 'nhd2j8a9',
+              display: 'q9uorilb',
+              fontFamily: 'ihxqhq3m',
+              fontSize: 'l94mrbxd',
+              lineHeight: 'aenfhxwr',
+              marginTop: 'kvgmc6g5',
+              marginEnd: 'cxmmr5t8',
+              marginBottom: 'oygrvhab',
+              marginStart: 'hcukyx3x',
+              paddingTop: 'jb3vyjys',
+              paddingEnd: 'rz4wbd8a',
+              paddingBottom: 'qt6c0cv9',
+              paddingStart: 'a8nywdso',
+              textAlign: 'i1ao9s8h',
+              textDecoration: 'myohyog2',
+              ':hover': {
+                color: 'ksdfmwjs',
+                textDecoration: 'gofk2cf1',
+              },
+              ':active': {
+                transform: 'lsqurvkf',
+                transition: 'bj9fd4vl',
+              },
+            },
+            {
+              display: 'a8c37x1j',
+              width: 'k4urcfbm',
+            },
+            [
+              {
+                ':active': {
+                  transform: 'tm8avpzi',
+                },
+              },
+            ],
+          ],
+        ],
+      ],
+    ];
+
+    const value = stylex(styles);
+    const repeat = stylex(styles);
+
+    // Check the cached-derived result is correct
+    expect(value).toEqual(repeat);
+
+    expect(value.split(' ').sort().join(' ')).toEqual(
+      'g5ia77u1 tpe1esc0 gewhe1h2 gcovof34 bdao358l a8c37x1j s5oniofx kvgmc6g5 cxmmr5t8 oygrvhab hcukyx3x jb3vyjys rz4wbd8a qt6c0cv9 a8nywdso oajrlxb2 i1ao9s8h myohyog2 n3t5jt4f gh25dzvf g4tp4svg nhd2j8a9 f1sip0of icdlwmnq e4t7hp5w gmql0nx0 ihxqhq3m l94mrbxd aenfhxwr k4urcfbm gofk2cf1 ksdfmwjs tm8avpzi bj9fd4vl'
+        .split(' ')
+        .sort()
+        .join(' ')
+    );
+  });
+});

package/benchmark.js

@@ -0,0 +1,144 @@
+/**
+ * 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 stylex = require('./lib/stylex').default;
+const Benchmark = require('benchmark');
+const suite = new Benchmark.Suite();
+const test = (...args) => suite.add(...args);
+
+const basicStyleFixture1 = {
+  backgroundColor: 'nu7423ey',
+};
+
+const basicStyleFixture2 = {
+  backgroundColor: 'gh25dzvf',
+};
+
+const bigStyleFixture = {
+  backgroundColor: 'nu7423ey',
+  borderColor: 'tpe1esc0',
+  borderStyle: 'gewhe1h2',
+  borderWidth: 'gcovof34',
+  boxSizing: 'bdao358l',
+  display: 'rse6dlih',
+  listStyle: 's5oniofx',
+  marginTop: 'm8h3af8h',
+  marginEnd: 'l7ghb35v',
+  marginBottom: 'kjdc1dyq',
+  marginStart: 'kmwttqpk',
+  paddingTop: 'srn514ro',
+  paddingEnd: 'oxkhqvkx',
+  paddingBottom: 'rl78xhln',
+  paddingStart: 'nch0832m',
+  textAlign: 'cr00lzj9',
+  textDecoration: 'rn8ck1ys',
+  whiteSpace: 'n3t5jt4f',
+  wordWrap: 'gh25dzvf',
+  zIndex: 'g4tp4svg',
+};
+
+const bigStyleWithPseudosFixture = {
+  backgroundColor: 'g5ia77u1',
+  border: 'e4t7hp5w',
+  color: 'gmql0nx0',
+  cursor: 'nhd2j8a9',
+  display: 'q9uorilb',
+  fontFamily: 'ihxqhq3m',
+  fontSize: 'l94mrbxd',
+  lineHeight: 'aenfhxwr',
+  marginTop: 'kvgmc6g5',
+  marginEnd: 'cxmmr5t8',
+  marginBottom: 'oygrvhab',
+  marginStart: 'hcukyx3x',
+  paddingTop: 'jb3vyjys',
+  paddingEnd: 'rz4wbd8a',
+  paddingBottom: 'qt6c0cv9',
+  paddingStart: 'a8nywdso',
+  textAlign: 'i1ao9s8h',
+  textDecoration: 'myohyog2',
+  ':hover': {
+    color: 'ksdfmwjs',
+    textDecoration: 'gofk2cf1',
+  },
+  ':active': {
+    transform: 'lsqurvkf',
+    transition: 'bj9fd4vl',
+  },
+};
+
+test('stylex(): basic', () => {
+  stylex(basicStyleFixture1);
+});
+
+test('stylex(): complex', () => {
+  stylex(bigStyleFixture);
+});
+
+test('stylex(): basic merge (args)', () => {
+  stylex(basicStyleFixture1, basicStyleFixture2);
+});
+
+test('stylex(): basic merge (array)', () => {
+  stylex([basicStyleFixture1, basicStyleFixture2]);
+});
+
+const complexNestedStyleFixture = [
+  bigStyleFixture,
+  false,
+  false,
+  false,
+  false,
+  [
+    {
+      cursor: 'fsf7x5fv',
+      touchAction: 's3jn8y49',
+    },
+    false,
+    {
+      outline: 'icdlwmnq',
+    },
+    [
+      {
+        cursor: 'nhd2j8a9',
+        touchAction: 'f1sip0of',
+      },
+      false,
+      false,
+      {
+        textDecoration: 'esuyzwwr',
+        ':hover': {
+          textDecoration: 'p8dawk7l',
+        },
+      },
+      false,
+      [
+        bigStyleWithPseudosFixture,
+        {
+          display: 'a8c37x1j',
+          width: 'k4urcfbm',
+        },
+        [
+          {
+            ':active': {
+              transform: 'tm8avpzi',
+            },
+          },
+        ],
+      ],
+    ],
+  ],
+];
+
+test('stylex(): complex merge (array)', () => {
+  stylex([complexNestedStyleFixture]);
+});
+
+suite.on('cycle', (event) => {
+  console.log(String(event.target));
+});
+
+suite.run();

package/lib/StyleXCSSTypes.js

@@ -0,0 +1,10 @@
+/**
+ * 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';

package/lib/StyleXSheet.js

@@ -0,0 +1,284 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styleSheet = exports.StyleXSheet = void 0;
+var _invariant = _interopRequireDefault(require("invariant"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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
+ */
+function buildTheme(selector, theme) {
+  const lines = [];
+  lines.push(`${selector} {`);
+  for (const key in theme) {
+    const value = theme[key];
+    lines.push(`  --${key}: ${value};`);
+  }
+  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');
+  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');
+}
+
+// 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 {
+  constructor(opts) {
+    this.tag = null;
+    this.injected = false;
+    this.ruleForPriority = new Map();
+    this.rules = [];
+    this.rootTheme = opts.rootTheme;
+    this.rootDarkTheme = opts.rootDarkTheme;
+    this.supportsVariables = opts.supportsVariables ?? doesSupportCSSVariables();
+  }
+  getVariableMatch() {
+    return VARIABLE_MATCH;
+  }
+
+  /**
+   * 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;
+  }
+
+  /**
+   * Get the stylesheet tag. Throw if none exists.
+   */
+  getTag() {
+    const {
+      tag
+    } = this;
+    (0, _invariant.default)(tag != null, 'expected tag');
+    return tag;
+  }
+
+  /**
+   * Get the current stylesheet CSS.
+   */
+  getCSS() {
+    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) {
+      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) {
+      this.injectTheme();
+      return;
+    }
+
+    // Create style tag if in browser
+    this.tag = makeStyleTag();
+    this.injectTheme();
+  }
+
+  /**
+   * Inject the theme styles
+   */
+  injectTheme() {
+    if (this.rootTheme != null) {
+      this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
+    }
+    if (this.rootDarkTheme != null) {
+      this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
+    }
+  }
+
+  /**
+   * Inject custom theme styles (only for internal testing)
+   */
+  __injectCustomThemeForTesting(selector, theme) {
+    if (theme != null) {
+      this.insert(buildTheme(selector, theme), 0);
+    }
+  }
+
+  /**
+   * 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);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    (0, _invariant.default)(sheet, 'expected sheet');
+    sheet.deleteRule(index);
+  }
+
+  /**
+   *
+   */
+  normalizeRule(rule) {
+    const {
+      rootTheme
+    } = this;
+    if (this.supportsVariables || rootTheme == null) {
+      return rule;
+    }
+    return rule.replace(VARIABLE_MATCH, (_match, name) => {
+      return rootTheme[name];
+    });
+  }
+
+  /**
+   * 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);
+    if (priorityRule != null) {
+      return this.rules.indexOf(priorityRule) + 1;
+    }
+
+    // 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) {
+      this.inject();
+    }
+    if (rawRTLRule != null) {
+      this.insert(addAncestorSelector(rawLTRRule, "html:not([dir='rtl'])"), priority);
+      this.insert(addAncestorSelector(rawRTLRule, "html[dir='rtl']"), priority);
+      return;
+    }
+    const rawRule = rawLTRRule;
+
+    // Don't insert this rule if it already exists
+    if (this.rules.includes(rawRule)) {
+      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);
+    if (this.isHeadless()) {
+      return;
+    }
+    const tag = this.getTag();
+    const sheet = tag.sheet;
+    if (sheet != null) {
+      try {
+        sheet.insertRule(rule, insertPos);
+      } catch {
+        // Ignore: error likely due to inserting prefixed rules (e.g. `::-moz-range-thumb`).
+      }
+    }
+    // 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;
+_defineProperty(StyleXSheet, "LIGHT_MODE_CLASS_NAME", LIGHT_MODE_CLASS_NAME);
+_defineProperty(StyleXSheet, "DARK_MODE_CLASS_NAME", DARK_MODE_CLASS_NAME);
+function addAncestorSelector(selector, ancestorSelector) {
+  if (!selector.startsWith('@')) {
+    return `${ancestorSelector} ${selector}`;
+  }
+  const firstBracketIndex = selector.indexOf('{');
+  const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
+  const rest = selector.slice(firstBracketIndex + 1);
+  return `${mediaQueryPart}${ancestorSelector} ${rest}`;
+}
+const styleSheet = new StyleXSheet({
+  supportsVariables: true,
+  rootTheme: {},
+  rootDarkTheme: {}
+});
+exports.styleSheet = styleSheet;

package/lib/StyleXTypes.js

@@ -0,0 +1,10 @@
+/**
+ * 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';

package/lib/stylex-inject.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = inject;
+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) {
+  let rtlRule = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  _StyleXSheet.styleSheet.insert(ltrRule, priority, rtlRule);
+}

package/lib/stylex.d.ts

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ */
+
+import { $ReadOnly } from 'utility-types';
+
+// Simulating an opaque type
+declare const classNameSymbol: unique symbol;
+
+export type ClassNameFor<K, V> = string & {
+  _tag: typeof classNameSymbol;
+  _key: K;
+  _value: V;
+};
+
+export type ClassNameForKey<K> = ClassNameFor<K, string | number>;
+export type ClassNameForValue<V> = ClassNameFor<string, V>;
+export type ClassName = ClassNameFor<string, string | number>;
+
+export type Namespace = {
+  readonly [K in string]: string | number | { [K in string]: string | number };
+};
+
+export type CompiledNamespace = {
+  readonly [K in string]:
+    | ClassNameFor<K, string | number>
+    | { [J in string]: ClassNameFor<`${K}+${J}`, string | number> };
+};
+
+export type NamespaceSet = {
+  readonly [K in string]: Namespace;
+};
+
+export type CompiledNamespaceSet = {
+  readonly [K in string]: CompiledNamespace;
+};
+
+type Stylex$Create = <S extends StyleXNamespaceSet>(
+  styles: S
+) => $ReadOnly<{
+  readonly [K in keyof S]: {
+    readonly [P in keyof S[K]]: S[K][P] extends string | number
+      ? StyleXClassNameFor<P, S[K][P]>
+      : {
+          readonly [F in keyof S[K][P]]: StyleXClassNameFor<
+            `${P}+${F}`,
+            S[K][P][F]
+          >;
+        };
+  };
+}>;
+
+type StylexInclude = <S extends CompiledNamespace>(
+  compiledNamespace: S
+) => {
+  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V>
+    ? V
+    : Uncompiled<S[K]>;
+};
+
+type Stylex$Keyframes = <S extends StyleXNamespaceSet>(
+  animationConfig: S
+) => string;
+
+type stylex = {
+  (
+    ...styles: ReadonlyArray<
+      StyleXArray<(CompiledNamespace | null | undefined) | boolean>
+    >
+  ): string;
+  create: Stylex$Create;
+  include: StylexInclude;
+  inject: (
+    ltrRule: string,
+    priority: number,
+    rtlRule: string | null | undefined
+  ) => void;
+  keyframes: Stylex$Keyframes;
+};
+
+export default stylex;

package/lib/stylex.js

@@ -0,0 +1,124 @@
+/**
+ * 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';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const enableCache = true;
+const cache = enableCache ? new WeakMap() : null;
+function stylex() {
+  // Keep a set of property commits to the className
+  const definedProperties = [];
+  let className = '';
+  let nextCache = cache;
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  while (styles.length) {
+    // Push nested styles back onto the stack to be processed
+    const possibleStyle = styles.pop();
+    if (Array.isArray(possibleStyle)) {
+      for (let i = 0; i < possibleStyle.length; i++) {
+        styles.push(possibleStyle[i]);
+      }
+      continue;
+    }
+
+    // Process an individual style object
+    const styleObj = possibleStyle;
+    if (styleObj != null && typeof styleObj === 'object') {
+      // Build up the class names defined by this object
+      let classNameChunk = '';
+      if (nextCache != null && nextCache.has(styleObj)) {
+        // Cache: read
+        const cacheEntry = nextCache.get(styleObj);
+        if (cacheEntry != null) {
+          classNameChunk = cacheEntry.classNameChunk;
+          definedProperties.push(...cacheEntry.definedPropertiesChunk);
+          nextCache = cacheEntry.next;
+        }
+      } else {
+        // Record the properties this object defines (and that haven't already
+        // been defined by later objects.)
+        const definedPropertiesChunk = [];
+        for (const prop in styleObj) {
+          const value = styleObj[prop];
+          // Style declarations, e.g., opacity: 's3fkgpd'
+          if (typeof value === 'string') {
+            // Skip adding to the chunks if property has already been seen
+            if (!definedProperties.includes(prop)) {
+              definedProperties.push(prop);
+              definedPropertiesChunk.push(prop);
+              classNameChunk += classNameChunk ? ' ' + value : value;
+            }
+          }
+          // Style conditions, e.g., ':hover', '@media', etc.
+          // TODO: remove if #98 is fixed
+          else if (typeof value === 'object') {
+            const condition = prop;
+            const nestedStyleObject = value;
+            for (const conditionalProp in nestedStyleObject) {
+              const conditionalValue = nestedStyleObject[conditionalProp];
+              const conditionalProperty = condition + conditionalProp;
+              // Skip if conditional property has already been seen
+              if (!definedProperties.includes(conditionalProperty)) {
+                definedProperties.push(conditionalProperty);
+                definedPropertiesChunk.push(conditionalProperty);
+                classNameChunk += classNameChunk ? ' ' + conditionalValue : conditionalValue;
+              }
+            }
+          }
+        }
+        // Cache: write
+        if (nextCache != null) {
+          const emptyCache = new WeakMap();
+          nextCache.set(styleObj, {
+            classNameChunk,
+            definedPropertiesChunk,
+            next: emptyCache
+          });
+          nextCache = emptyCache;
+        }
+      }
+
+      // Order of classes in chunks matches property-iteration order of style
+      // object. Order of chunks matches passed order of styles from first to
+      // last (which we iterate over in reverse).
+      if (classNameChunk) {
+        className = className ? classNameChunk + ' ' + className : classNameChunk;
+      }
+    }
+  }
+  return className;
+}
+function stylexCreate(_styles) {
+  throw new Error('stylex.create 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.');
+}
+stylex.create = stylexCreate;
+stylex.include = stylexIncludes;
+stylex.keyframes = _keyframes => {
+  throw new Error('stylex.keyframes should never be called');
+};
+stylex.firstThatWorks = function () {
+  throw new Error('stylex.firstThatWorks should never be called.');
+};
+stylex.inject = _stylexInject.default;
+stylex.UNSUPPORTED_PROPERTY = props => {
+  throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
+};
+var _default = stylex;
+exports.default = _default;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@stylexjs/stylex",
+  "version": "0.1.0-beta.1",
+  "description": "A minimal runtime styling library for web.",
+  "main": "lib/stylex.js",
+  "types": "lib/stylex.d.ts",
+  "repository": "https://www.github.com/facebookexternal/stylex",
+  "author": "Naman Goel <nmn@fb.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "babel src/ --out-dir lib/ --copy-files",
+    "build-haste": "HASTE=true babel src/ --out-dir lib/ --copy-files",
+    "test": "jest"
+  },
+  "dependencies": {
+    "invariant": "^2.2.4",
+    "utility-types": "^3.10.0"
+  },
+  "devDependencies": {
+    "benchmark": "^2.1.4"
+  },
+  "jest": {}
+}