@stylexjs/stylex 0.5.0-alpha.4 → 0.5.1

package/README.md

@@ -62,7 +62,7 @@ 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';
+import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   root: {
@@ -78,7 +78,7 @@ const styles = stylex.create({
 Pseudo-classes and Media Queries can be nested within style definitions:
 
 ```tsx
-import stylex from '@stylexjs/stylex';
+import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   root: {
@@ -156,7 +156,7 @@ 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';
+import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   header: {
@@ -211,8 +211,6 @@ type Props = {
 };
 ```
 
-
-
 ### `StaticStyles<>`
 
 To constrain the styles to specific properties and values, use the `StaticStyles<>`
@@ -235,7 +233,7 @@ 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';
+import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   root: {

package/lib/StyleXCSSTypes.d.ts

@@ -237,6 +237,7 @@ type display =
   | 'inline-flex'
   | 'grid'
   | 'inline-grid'
+  | '-webkit-box'
   | 'run-in'
   | 'ruby'
   | 'ruby-base'
@@ -469,7 +470,7 @@ type MsOverflowStyle =
   | '-ms-autohiding-scrollbar';
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
-type opacity = number;
+type opacity = number | string;
 type order = number;
 type orphans = number;
 type outline = string;
@@ -1289,7 +1290,6 @@ export type CSSProperties = Readonly<{
   mathDepth?: all | number | string;
   mathShift?: all | 'normal' | 'compact';
   mathStyle?: all | 'normal' | 'compact';
-  scrollbarWidth?: all | string | number;
   scrollBehavior?: all | scrollBehavior;
   scrollMargin?: all | number | string;
   scrollMarginTop?: all | number | string;
@@ -1320,7 +1320,8 @@ export type CSSProperties = Readonly<{
   scrollTimelineAxis?: all | 'block' | 'inline' | 'x' | 'y';
   scrollTimelineName?: all | string;
   scrollbarColor?: all | color;
-  scrollbarWidth?: all | width;
+  scrollbarGutter?: all | 'auto' | 'stable' | 'stable both-edges';
+  scrollbarWidth?: all | 'auto' | 'thin' | 'none';
   shapeImageThreshold?: all | shapeImageThreshold;
   shapeMargin?: all | shapeMargin;
   shapeOutside?: all | shapeOutside;
@@ -1413,4 +1414,5 @@ export type CSSProperties = Readonly<{
   wordWrap?: all | wordWrap;
   writingMode?: all | writingMode;
   zIndex?: all | zIndex;
+  zoom?: all | 'normal' | number | string;
 }>;

package/lib/StyleXCSSTypes.js.flow

@@ -239,6 +239,7 @@ type display =
   | 'inline-flex'
   | 'grid'
   | 'inline-grid'
+  | '-webkit-box'
   | 'run-in'
   | 'ruby'
   | 'ruby-base'
@@ -474,7 +475,7 @@ type MsOverflowStyle =
   | '-ms-autohiding-scrollbar';
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
-type opacity = number;
+type opacity = number | string;
 type order = number;
 type orphans = number;
 type outline = string;
@@ -1362,7 +1363,6 @@ export type CSSProperties = $ReadOnly<{
   mathShift?: all | 'normal' | 'compact',
   mathStyle?: all | 'normal' | 'compact',
 
-  scrollbarWidth?: all | string | number,
   scrollBehavior?: all | scrollBehavior,
 
   scrollMargin?: all | number | string,
@@ -1398,7 +1398,8 @@ export type CSSProperties = $ReadOnly<{
   scrollTimelineName?: all | string,
 
   scrollbarColor?: all | color,
-  scrollbarWidth?: all | width,
+  scrollbarGutter?: all | 'auto' | 'stable' | 'stable both-edges',
+  scrollbarWidth?: all | 'auto' | 'thin' | 'none',
 
   shapeImageThreshold?: all | shapeImageThreshold,
   shapeMargin?: all | shapeMargin,
@@ -1502,4 +1503,6 @@ export type CSSProperties = $ReadOnly<{
   wordWrap?: all | wordWrap,
   writingMode?: all | writingMode,
   zIndex?: all | zIndex,
+
+  zoom?: all | 'normal' | number | string,
 }>;

package/lib/StyleXTypes.d.ts

@@ -55,6 +55,12 @@ type CSSPropertiesWithExtras = Partial<
       '::spelling-error': CSSProperties;
       '::target-text': CSSProperties;
       '::-webkit-scrollbar'?: CSSProperties;
+      '::-webkit-scrollbar-button'?: CSSProperties;
+      '::-webkit-scrollbar-thumb'?: CSSProperties;
+      '::-webkit-scrollbar-track'?: CSSProperties;
+      '::-webkit-scrollbar-track-piece'?: CSSProperties;
+      '::-webkit-scrollbar-corner'?: CSSProperties;
+      '::-webkit-resizer'?: CSSProperties;
       // webkit styles used for Search in Safari
       '::-webkit-search-decoration'?: CSSProperties;
       '::-webkit-search-cancel-button'?: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.5.0-alpha.4",
+  "version": "0.5.1",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -46,7 +46,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.5.0-alpha.4"
+    "@stylexjs/scripts": "0.5.1"
   },
   "jest": {},
   "files": [