Fix documentation typos and errors (#32)

packages/babel-plugin/README.md

@@ -5,8 +5,6 @@ In addition to transforming JS code, this plugin also produces an Array of CSS r
 generated from all JS files within your project should be concatenated together and converted to a CSS
 file using the `processStyles` function which is also exported from the same module.
 
-(NOTE: StyleX only uses RTL-friendly logical values of `start` and `end` and disallows using `left` and `right` entirely.)
-
 `@stylexjs/babel-plugin` is fairly lightweight. It pre-computes `stylex` related functions like
 `stylex.create` and `stylex.keyframes` by converting the argument AST to a JS object and transforming them
 by passing them to the functions of the corresponding names within `@stylex/shared`

packages/eslint-plugin/README.md

@@ -1,12 +1,14 @@
-# ESLint Plugin for stylex
+# @stylexjs/eslint-plugin
 
 The ESLint rule is a standalone ESLint plugin that mostly maintains an `allowlist` for valid styles and their valid values.
 
 This was originally created from Flow types which is why it's currently not very powerful.
 
-## Installing the plugin
+## Installation
 
-`$ npm i @stylexjs/eslint-plugin@beta --save-dev`
+```sh
+npm install --save-dev @stylexjs/eslint-plugin
+```
 
 ## Enable Flow Types
 

packages/shared/README.md

@@ -4,8 +4,8 @@ This package contains most of the core JavaScript logic for stylex.
 
 It exports two primary functions `create` and `keyframes`.
 
-1. `create` - takes a map of style rules. The return value include: a) the map with each style value replaced by a unique, reproducible, hashed className string, and b) a list of the CSS styles to be inserted into the document.
-2. `keyframes` - takes a `@keyframes` animation as JS object. Returns a hashed string and the style ot be injected.
+1. `create` - takes a map of style rules. The return value includes: a) the map with each style value replaced by a unique, reproducible, hashed `className` string, and b) a list of the CSS styles to be inserted into the document.
+2. `keyframes` - takes a `@keyframes` animation as JS object. Returns a hashed string and the style to be injected.
 
 #### ⭐️ `create`
 

packages/stylex/README.md

@@ -84,14 +84,14 @@ const styles = stylex.create({
   root: {
     width: '100%',
     color: 'rgb(60,60,60)',
-    '@media (min-width: 800px)': {
-      maxWidth: '800px',
+    maxWidth: {
+      '@media (min-width: 800px)': '800px',
     },
   },
   highlighted: {
     color: 'yellow',
-    ':hover': {
-      opacity: '0.9',
+    opacity: {
+      ':hover': '0.9',
     },
   },
 });
@@ -127,7 +127,7 @@ const styles = stylex.create({
 
 function InternalComponent(props) {
   return (
-    <div {...props} {...stylex.props([styles.internalRoot, props.style])} />
+    <div {...props} {...stylex.props(styles.internalRoot, props.style)} />
   );
 }
 
@@ -150,12 +150,6 @@ style property values passed in via props.
 <div {...stylex.props(props.style, styles.root)} />
 ```
 
-You can even mix compiled styles with inline styles
-
-```tsx
-<div {...stylex.props(styles.root, { opacity })} />
-```
-
 ### stylex.firstThatWorks()
 
 Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful
@@ -185,15 +179,15 @@ This is equivalent to defining CSS as follows:
 
 StyleX comes with full support for Static Types.
 
-### `XStyle<>`
+### `StyleXStyles<>`
 
-The most common type you might need to use is `XStyle<>`. This lets you accept
+The most common type you might need to use is `StyleXStyles<>`. This lets you accept
 an object of arbitrary StyleX styles.
 
 ```tsx
 type Props = {
   ...
-  style?: XStyle<>,
+  style?: StyleXStyles<>,
 };
 
 function MyComponent({style, ...}: Props) {
@@ -203,53 +197,34 @@ function MyComponent({style, ...}: Props) {
 }
 ```
 
-### `XStyleWithout<>`
+### `StyleXStylesWithout<>`
 
-To disallow specific style properties, use the `XStyleWithout<>` type.
+To disallow specific style properties, use the `StyleXStylesWithout<>` type.
 
 ```tsx
 type Props = {
   // ...
-  style?: XStyleWithout<{
+  style?: StyleXStylesWithout<{
     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<>`
+### `StaticStyles<>`
 
-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
+To constrain the styles to specific properties and values, use the `StaticStyles<>`
+type. 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>
+  style?: StaticStyles<{
+    marginTop?: 0 | 4 | 8;
   }>,
 };
 ```