@stylexjs/stylex 0.18.1 → 0.18.2

package/lib/cjs/stylex.d.ts

@@ -30,6 +30,7 @@ import type {
   StyleX$When,
   MapNamespace,
   StyleX$DefineMarker,
+  StyleX$Env,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -82,6 +83,16 @@ export declare function props(
   'data-style-src'?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
+export declare function attrs(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
@@ -92,7 +103,7 @@ export declare const defaultMarker: () => MapNamespace<
 export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
 export declare type when = typeof when;
-export declare const env: Readonly<{ [$$Key$$: string]: unknown }>;
+export declare const env: StyleX$Env;
 export declare type env = typeof env;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
@@ -146,7 +157,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme;
   defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
-  env: Readonly<{ [$$Key$$: string]: unknown }>;
+  env: StyleX$Env;
   defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
   defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(
@@ -168,6 +179,16 @@ type IStyleX = {
     'data-style-src'?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
+  attrs: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   when: typeof when;

package/lib/cjs/stylex.js

@@ -172,6 +172,25 @@ function props(...styles) {
   }
   return result;
 }
+const toKebabCase = str => str.replace(/([A-Z])/g, '-$1').toLowerCase();
+function attrs(...styles) {
+  const {
+    className,
+    style,
+    'data-style-src': dataStyleSrc
+  } = props.apply(this, styles);
+  const result = {};
+  if (className != null) {
+    result.class = className;
+  }
+  if (style != null) {
+    result.style = Object.entries(style).map(([key, value]) => `${toKebabCase(key)}:${value}`).join(';');
+  }
+  if (dataStyleSrc != null) {
+    result['data-style-src'] = dataStyleSrc;
+  }
+  return result;
+}
 const viewTransitionClass = _viewTransitionClass => {
   throw errorForFn('viewTransitionClass');
 };
@@ -251,12 +270,14 @@ _legacyMerge.firstThatWorks = firstThatWorks;
 _legacyMerge.keyframes = keyframes;
 _legacyMerge.positionTry = positionTry;
 _legacyMerge.props = props;
+_legacyMerge.attrs = attrs;
 _legacyMerge.types = types;
 _legacyMerge.when = when;
 _legacyMerge.viewTransitionClass = viewTransitionClass;
 _legacyMerge.env = env;
 const legacyMerge = _legacyMerge;
 
+exports.attrs = attrs;
 exports.create = create;
 exports.createTheme = createTheme;
 exports.defaultMarker = defaultMarker;

package/lib/cjs/stylex.js.flow

@@ -30,6 +30,7 @@ import type {
   StyleX$When,
   MapNamespace,
   StyleX$DefineMarker,
+  StyleX$Env,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -83,6 +84,19 @@ declare export function props(
   style?: Readonly<{ [string]: string | number }>,
 }>;
 
+declare export function attrs(
+  this: ?unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): Readonly<{
+  class?: string,
+  'data-style-src'?: string,
+  style?: string,
+}>;
+
 declare export const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
@@ -95,7 +109,7 @@ declare export const defaultMarker: () => MapNamespace<
 
 declare export const when: StyleX$When;
 
-declare export const env: $ReadOnly<{ [string]: mixed }>;
+declare export const env: StyleX$Env;
 
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
@@ -137,7 +151,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme,
   defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
-  env: $ReadOnly<{ [string]: mixed }>,
+  env: StyleX$Env,
   defaultMarker: () => MapNamespace<
     Readonly<{
       marker: 'default-marker',
@@ -161,6 +175,18 @@ type IStyleX = {
     'data-style-src'?: string,
     style?: Readonly<{ [string]: string | number }>,
   }>,
+  attrs: (
+    this: ?unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => Readonly<{
+    class?: string,
+    'data-style-src'?: string,
+    style?: string,
+  }>,
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,

package/lib/cjs/types/StyleXTypes.d.ts

@@ -354,3 +354,9 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-any-sibling(${Pseudo}, ${MarkerSymbol})`;
 };
+
+export interface Register {}
+
+export type StyleX$Env = Register extends { env: infer TEnv }
+  ? TEnv
+  : Readonly<{ [key: string]: unknown }>;

package/lib/cjs/types/StyleXTypes.js.flow

@@ -279,3 +279,5 @@ export type StyleX$When = {
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };
+
+export type StyleX$Env = $ReadOnly<{ [string]: mixed }>;

package/lib/es/stylex.d.ts

@@ -30,6 +30,7 @@ import type {
   StyleX$When,
   MapNamespace,
   StyleX$DefineMarker,
+  StyleX$Env,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -82,6 +83,16 @@ export declare function props(
   'data-style-src'?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
+export declare function attrs(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
 export declare const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
@@ -92,7 +103,7 @@ export declare const defaultMarker: () => MapNamespace<
 export declare type defaultMarker = typeof defaultMarker;
 export declare const when: StyleX$When;
 export declare type when = typeof when;
-export declare const env: Readonly<{ [$$Key$$: string]: unknown }>;
+export declare const env: StyleX$Env;
 export declare type env = typeof env;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
@@ -146,7 +157,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme;
   defineConsts: StyleX$DefineConsts;
   defineVars: StyleX$DefineVars;
-  env: Readonly<{ [$$Key$$: string]: unknown }>;
+  env: StyleX$Env;
   defaultMarker: () => MapNamespace<Readonly<{ marker: 'default-marker' }>>;
   defineMarker: StyleX$DefineMarker;
   firstThatWorks: <T extends string | number>(
@@ -168,6 +179,16 @@ type IStyleX = {
     'data-style-src'?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
+  attrs: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   when: typeof when;

package/lib/es/stylex.js.flow

@@ -30,6 +30,7 @@ import type {
   StyleX$When,
   MapNamespace,
   StyleX$DefineMarker,
+  StyleX$Env,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -83,6 +84,19 @@ declare export function props(
   style?: Readonly<{ [string]: string | number }>,
 }>;
 
+declare export function attrs(
+  this: ?unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): Readonly<{
+  class?: string,
+  'data-style-src'?: string,
+  style?: string,
+}>;
+
 declare export const viewTransitionClass: (
   _viewTransitionClass: ViewTransitionClass,
 ) => string;
@@ -95,7 +109,7 @@ declare export const defaultMarker: () => MapNamespace<
 
 declare export const when: StyleX$When;
 
-declare export const env: $ReadOnly<{ [string]: mixed }>;
+declare export const env: StyleX$Env;
 
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
@@ -137,7 +151,7 @@ type IStyleX = {
   createTheme: StyleX$CreateTheme,
   defineConsts: StyleX$DefineConsts,
   defineVars: StyleX$DefineVars,
-  env: $ReadOnly<{ [string]: mixed }>,
+  env: StyleX$Env,
   defaultMarker: () => MapNamespace<
     Readonly<{
       marker: 'default-marker',
@@ -161,6 +175,18 @@ type IStyleX = {
     'data-style-src'?: string,
     style?: Readonly<{ [string]: string | number }>,
   }>,
+  attrs: (
+    this: ?unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | Readonly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => Readonly<{
+    class?: string,
+    'data-style-src'?: string,
+    style?: string,
+  }>,
   viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   when: typeof when,

package/lib/es/stylex.mjs

@@ -170,6 +170,25 @@ function props(...styles) {
   }
   return result;
 }
+const toKebabCase = str => str.replace(/([A-Z])/g, '-$1').toLowerCase();
+function attrs(...styles) {
+  const {
+    className,
+    style,
+    'data-style-src': dataStyleSrc
+  } = props.apply(this, styles);
+  const result = {};
+  if (className != null) {
+    result.class = className;
+  }
+  if (style != null) {
+    result.style = Object.entries(style).map(([key, value]) => `${toKebabCase(key)}:${value}`).join(';');
+  }
+  if (dataStyleSrc != null) {
+    result['data-style-src'] = dataStyleSrc;
+  }
+  return result;
+}
 const viewTransitionClass = _viewTransitionClass => {
   throw errorForFn('viewTransitionClass');
 };
@@ -249,10 +268,11 @@ _legacyMerge.firstThatWorks = firstThatWorks;
 _legacyMerge.keyframes = keyframes;
 _legacyMerge.positionTry = positionTry;
 _legacyMerge.props = props;
+_legacyMerge.attrs = attrs;
 _legacyMerge.types = types;
 _legacyMerge.when = when;
 _legacyMerge.viewTransitionClass = viewTransitionClass;
 _legacyMerge.env = env;
 const legacyMerge = _legacyMerge;
 
-export { create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };
+export { attrs, create, createTheme, defaultMarker, defineConsts, defineMarker, defineVars, env, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass, when };

package/lib/es/types/StyleXTypes.d.ts

@@ -354,3 +354,9 @@ export type StyleX$When = {
     // @ts-expect-error - Trying to use a symbol in a string is not normally allowed
   ) => `:where-any-sibling(${Pseudo}, ${MarkerSymbol})`;
 };
+
+export interface Register {}
+
+export type StyleX$Env = Register extends { env: infer TEnv }
+  ? TEnv
+  : Readonly<{ [key: string]: unknown }>;

package/lib/es/types/StyleXTypes.js.flow

@@ -279,3 +279,5 @@ export type StyleX$When = {
     _customMarker?: MapNamespace<{ +marker: 'custom-marker' }>,
   ) => ':where-any-sibling',
 };
+
+export type StyleX$Env = $ReadOnly<{ [string]: mixed }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -60,7 +60,7 @@
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "cross-env": "^10.1.0",
     "rollup": "^4.59.0",
-    "scripts": "0.18.1"
+    "scripts": "0.18.2"
   },
   "files": [
     "lib/*"