@stylexjs/stylex 0.1.0-beta.6 → 0.2.0-beta.10

package/README.md

@@ -0,0 +1,245 @@
+# @stylexjs/stylex
+
+## Installation
+
+To start playing with StyleX without having to set up any build settings you can install just two packages:
+
+```sh
+npm install --save @stylexjs/stylex
+```
+
+### Compiler
+
+StyleX is designed to extract styles to a static CSS style sheet during an app's build process. StyleX provides a Babel plugin along with plugin integrations for Webpack, Rollup and NextJS.
+
+```sh
+npm install --save-dev @stylexjs/babel-plugin
+```
+
+For more information on working with the compiler, please see the documentation for [`@stylexjs/babel-plugin`](https://www.npmjs.com/package/@stylexjs/babel-plugin).
+
+### Runtime compiler
+
+The runtime compiler should only be used for development and testing purposes.
+
+```sh
+npm install --save-dev @stylexjs/dev-runtime
+```
+
+Import `@stylexjs/dev-runtime` in your JS entry-point to set everything up.
+
+```ts
+import inject from '@stylexjs/dev-runtime';
+
+if (process.env.NODE_ENV !== 'production') {
+  inject({
+    // configuration options
+    classNamePrefix: 'x-',
+    dev: true,
+    test: false,
+  });
+}
+```
+
+For more information on working with the compiler, please see the documentation for [`@stylexjs/dev-runtime`](https://www.npmjs.com/package/@stylexjs/dev-runtime).
+
+## API
+
+### stylex.create()
+
+Styles are defined as a map of CSS rules using `stylex.create()`. In the example below, there are 2 different CSS rules. The names "root" and "highlighted" are arbitrary names given to the rules.
+
+```tsx
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  root: {
+    width: '100%',
+    color: 'rgb(60,60,60)',
+  },
+  highlighted: {
+    color: 'yellow',
+  }
+});
+```
+
+Pseudo-classes and Media Queries can be nested within style definitions:
+
+```tsx
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  root: {
+    width: '100%',
+    color: 'rgb(60,60,60)',
+    '@media (min-width: 800px)': {
+      maxWidth: '800px',
+    },
+  },
+  highlighted: {
+    color: 'yellow',
+    ':hover': {
+      opacity: '0.9',
+    }
+  }
+});
+```
+
+The compiler will extract the rules to CSS and replace the rules in the source code with a "compiled style" object.
+
+### stylex.apply()
+
+Applying style rules to specific elements is done using `stylex.apply()`. Each argument to this function must be a reference to a compiled style object, or an array of compiled style objects. The function merges styles from left to right.
+
+```tsx
+<div {...stylex.apply(styles.root, styles.highlighted)} />
+```
+
+The `stylex.apply` function returns React DOM style props as required to render an HTML element. StyleX styles can still be passed to other components via props, but only the components rendering HTML elements will use `stylex.apply()`. For example:
+
+```tsx
+const styles = stylex.create({
+  internalRoot: {
+    padding: 10
+  },
+  exportedRoot: {
+    position: 'relative'
+  }
+});
+
+function InternalComponent(props) {
+  return <div {...props} {...stylex.apply([ styles.internalRoot, props.style ])} />
+}
+
+export function ExportedComponent(props) {
+  return <InternalComponent style={[ styles.exportedRoot, props.style ]} />
+}
+```
+
+Styles can be conditionally included using standard JavaScript.
+
+```tsx
+<div {...stylex.apply(styles.root, isHighlighted && styles.highlighted)} />
+```
+
+And the local merging of styles can be used to control the relative priority of rules. For example, to allow a component's local styles to take priority over style property values passed in via props.
+
+```tsx
+<div {...stylex.apply(props.style, styles.root)} />
+```
+
+You can even mix compiled styles with inline styles
+
+```tsx
+<div {...stylex.apply(styles.root, { opacity })} />
+```
+
+### stylex.firstThatWorks()
+
+Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful for engines that may not support a specific style property.
+
+```tsx
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  header: {
+    position: stylex.firstThatWorks('sticky', '-webkit-sticky', 'fixed'),
+  },
+});
+```
+
+This is equivalent to defining CSS as follows:
+
+```css
+.header {
+  position: fixed;
+  position: -webkit-sticky;
+  position: sticky;
+}
+```
+
+## Types
+
+StyleX comes with full support for Static Types.
+
+### `XStyle<>`
+
+The most common type you might need to use is `XStyle<>`. This lets you accept an object of arbitrary StyleX styles.
+
+```tsx
+type Props = {
+  ...
+  style?: XStyle<>,
+};
+
+function MyComponent({style, ...}: Props) {
+  return (
+    <div {...stylex.apply(localStyles.foo, localStyles.bar, style)} />
+  );
+}
+```
+
+### `XStyleWithout<>`
+
+To disallow specific style properties, use the `XStyleWithout<>` type.
+
+```tsx
+type Props = {
+  // ...
+  style?: XStyleWithout<{
+    postion: unknown,
+    display: unknown
+  }>
+};
+```
+
+### `XStyleValue<>`
+
+To accept specific style properties only, use the `XStyle<{...}>` and `XStyleValue` types. For example, to allow only color-related style props:
+
+```tsx
+type Props = {
+  // ...
+  style?: XStyle<{
+    color?: StyleXValue,
+    backgroundColor?: StyleXValue,
+    borderColor?: StyleXValue,
+    borderTopColor?: StyleXValue,
+    borderEndColor?: StyleXValue,
+    borderBottomColor?: StyleXValue,
+    borderStartColor?: StyleXValue,
+  }>,
+};
+```
+
+### `XStyleValueFor<>`
+
+To limit the possible values for style properties, use the `XStyleValueFor<>` type.  Pass in a type argument with a union of literal types that provide the set of possible values that the style property can have. For example, if a component should accept `marginTop` but only accept one of `0`, `4`, or `8` pixels as values.
+
+```tsx
+type Props = {
+  ...
+  style?: XStyle<{
+    marginTop: XStyleValueFor<0 | 4 | 8>
+  }>,
+};
+```
+
+## How StyleX works
+
+StyleX produces atomic styles, which means that each CSS rule contains only a single declaration and uses a unique class name. For example:
+
+```tsx
+import stylex from '@stylexjs/stylex';
+
+const styles = stylex.create({
+  root: {
+    width: '100%',
+    color: 'red',
+  }
+}
+```
+
+From this code, StyleX will generate 2 classes. One for the `width: '100%'` declaration, and one for the `color: 'red'` declaration. If you use the declaration `width: '100%'` anywhere else in your application, it will *reuse the same CSS class* rather than creating a new one.
+
+One of the benefits of this approach is that the generated CSS file grows *logarithmically* as you add new styled components to your app. As more style declarations are added to components, they are more likely to already be in use elsehwere in the app. As a result of this CSS optimization, the generated CSS style sheet for an app is usually small enough to be contained in a single file and used across routes, avoiding style recalculation and layout thrashing as users navigate through your app.

package/lib/StyleXSheet.js

@@ -15,7 +15,8 @@ Object.defineProperty(exports, "__esModule", {
 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; }
+// import rtlDetect from 'rtl-detect';
+
 const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
 const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
 /**
@@ -62,6 +63,8 @@ const VARIABLE_MATCH = /var\(--(.*?)\)/g;
  * CSS rules.
  */
 class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
+  static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
   constructor(opts) {
     this.tag = null;
     this.injected = false;
@@ -265,8 +268,6 @@ class StyleXSheet {
  * 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}`;

package/lib/stylex.d.ts

@@ -38,17 +38,14 @@ export type CompiledNamespaceSet = {
   readonly [K in string]: CompiledNamespace;
 };
 
-type Stylex$Create = <S extends StyleXNamespaceSet>(
+type Stylex$Create = <S extends NamespaceSet>(
   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]>
+      ? ClassNameFor<P, S[K][P]>
       : {
-          readonly [F in keyof S[K][P]]: StyleXClassNameFor<
-            `${P}+${F}`,
-            S[K][P][F]
-          >;
+          readonly [F in keyof S[K][P]]: ClassNameFor<`${P}+${F}`, S[K][P][F]>;
         };
   };
 }>;
@@ -56,19 +53,17 @@ type Stylex$Create = <S extends StyleXNamespaceSet>(
 type StylexInclude = <S extends CompiledNamespace>(
   compiledNamespace: S
 ) => {
-  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V>
-    ? V
-    : Uncompiled<S[K]>;
+  readonly [K in keyof S]: S[K] extends ClassNameFor<K, infer V> ? V : S[K];
 };
 
-type Stylex$Keyframes = <S extends StyleXNamespaceSet>(
-  animationConfig: S
-) => string;
+type Stylex$Keyframes = <S extends NamespaceSet>(animationConfig: S) => string;
 
-type stylex = {
+type NestedArray<T> = T | Array<T | NestedArray<T>>;
+
+declare let stylex: {
   (
     ...styles: ReadonlyArray<
-      StyleXArray<(CompiledNamespace | null | undefined) | boolean>
+      NestedArray<(CompiledNamespace | null | undefined) | boolean>
     >
   ): string;
   create: Stylex$Create;
@@ -79,6 +74,14 @@ type stylex = {
     rtlRule: string | null | undefined
   ) => void;
   keyframes: Stylex$Keyframes;
+  spread: (
+    ...styles: ReadonlyArray<
+      NestedArray<(Object | CompiledNamespace | null | undefined) | boolean>
+    >
+  ) => {
+    className: string;
+    style: { [key: string]: string | number };
+  };
 };
 
 export default stylex;

package/lib/stylex.js

@@ -12,95 +12,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = exports.UNSUPPORTED_PROPERTY = void 0;
+exports.spread = spread;
+exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
+var _styleq = require("styleq");
 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;
+function spread() {
   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;
+  const [className, style] = (0, _styleq.styleq)(styles);
+  return {
+    className,
+    style
+  };
 }
 function stylexCreate(_styles) {
   throw new Error('stylex.create should never be called. It should be compiled away.');
@@ -108,17 +34,39 @@ function stylexCreate(_styles) {
 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 => {
+const create = stylexCreate;
+exports.create = create;
+const include = stylexIncludes;
+exports.include = include;
+const keyframes = _keyframes => {
   throw new Error('stylex.keyframes should never be called');
 };
-stylex.firstThatWorks = function () {
+exports.keyframes = keyframes;
+const firstThatWorks = function () {
   throw new Error('stylex.firstThatWorks should never be called.');
 };
-stylex.inject = _stylexInject.default;
-stylex.UNSUPPORTED_PROPERTY = props => {
+exports.firstThatWorks = firstThatWorks;
+const inject = _stylexInject.default;
+exports.inject = inject;
+const UNSUPPORTED_PROPERTY = _props => {
   throw new Error('stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.');
 };
-var _default = stylex;
-exports.default = _default;
+exports.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+function _stylex() {
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
+  }
+  const [className] = (0, _styleq.styleq)(styles);
+  return className;
+}
+_stylex.spread = spread;
+_stylex.create = create;
+_stylex.include = include;
+_stylex.keyframes = keyframes;
+_stylex.firstThatWorks = firstThatWorks;
+_stylex.inject = inject;
+_stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+var _default = _stylex;
+exports.default = _default;
+const stylex = _stylex;
+exports.stylex = stylex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.1.0-beta.6",
+  "version": "0.2.0-beta.10",
   "description": "A minimal runtime styling library for web.",
   "main": "lib/stylex.js",
   "types": "lib/stylex.d.ts",
@@ -14,10 +14,8 @@
   },
   "dependencies": {
     "invariant": "^2.2.4",
-    "utility-types": "^3.10.0"
-  },
-  "devDependencies": {
-    "benchmark": "^2.1.4"
+    "utility-types": "^3.10.0",
+    "styleq": "0.1.3"
   },
   "jest": {},
   "files": [