@stylexjs/stylex 0.1.0-beta.3 → 0.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.4",
   "description": "A minimal runtime styling library for web.",
   "main": "lib/stylex.js",
   "types": "lib/stylex.d.ts",
@@ -19,5 +19,8 @@
   "devDependencies": {
     "benchmark": "^2.1.4"
   },
-  "jest": {}
+  "jest": {},
+  "files": [
+    "lib/*"
+  ]
 }

package/.babelrc.js

@@ -1,40 +0,0 @@
-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

@@ -1,101 +0,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.
- *
- * @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

@@ -1,202 +0,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.
- *
- * @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

@@ -1,144 +0,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.
- */
-
-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();