@stylexjs/babel-plugin 0.17.4 → 0.18.0

package/lib/shared/common-types.d.ts

@@ -41,6 +41,7 @@ export type StyleXOptions = Readonly<{
   debug: null | undefined | boolean;
   definedStylexCSSVariables?: { [key: string]: unknown };
   dev: boolean;
+  propertyValidationMode?: 'throw' | 'warn' | 'silent';
   enableDebugClassNames?: null | undefined | boolean;
   enableDebugDataProp?: null | undefined | boolean;
   enableDevClassNames?: null | undefined | boolean;

package/lib/shared/common-types.js.flow

@@ -47,7 +47,9 @@ export type StyleXOptions = $ReadOnly<{
   classNamePrefix: string,
   debug: ?boolean,
   definedStylexCSSVariables?: { [key: string]: mixed },
+  env?: $ReadOnly<{ [string]: any }>,
   dev: boolean,
+  propertyValidationMode?: 'throw' | 'warn' | 'silent',
   enableDebugClassNames?: ?boolean,
   enableDebugDataProp?: ?boolean,
   enableDevClassNames?: ?boolean,

package/lib/shared/messages.d.ts

@@ -35,8 +35,6 @@ export declare const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only con
 export declare type ILLEGAL_PROP_ARRAY_VALUE = typeof ILLEGAL_PROP_ARRAY_VALUE;
 export declare const ILLEGAL_NAMESPACE_VALUE: 'A StyleX namespace must be an object.';
 export declare type ILLEGAL_NAMESPACE_VALUE = typeof ILLEGAL_NAMESPACE_VALUE;
-export declare const INVALID_CONST_KEY: 'Keys in defineConsts() cannot start with "--".';
-export declare type INVALID_CONST_KEY = typeof INVALID_CONST_KEY;
 export declare const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 export declare type INVALID_PSEUDO = typeof INVALID_PSEUDO;
 export declare const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';

package/lib/shared/messages.js.flow

@@ -26,7 +26,6 @@ declare export const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more
 declare export const ILLEGAL_PROP_VALUE: 'A style value can only contain an array, string or number.';
 declare export const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only contain strings or numbers.';
 declare export const ILLEGAL_NAMESPACE_VALUE: 'A StyleX namespace must be an object.';
-declare export const INVALID_CONST_KEY: 'Keys in defineConsts() cannot start with "--".';
 declare export const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 declare export const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';
 declare export const INVALID_MEDIA_QUERY_SYNTAX: 'Invalid media query syntax.';

package/lib/shared/preprocess-rules/application-order.d.ts

@@ -23,6 +23,7 @@ import type { TStyleValue } from '../common-types';
  * - [x] border-inline-start
  * - [x] border-left
  * - [x] border-radius
+ * - [x] corner-shape
  * - [x] border-right
  * - [x] border-style
  * - [x] border-top
@@ -74,6 +75,7 @@ import type { TStyleValue } from '../common-types';
  * - [x] border-inline-start
  * - [x] border-left
  * - [x] border-radius
+ * - [x] corner-shape
  * - [x] border-right
  * - [x] border-style
  * - [x] border-top

package/lib/shared/preprocess-rules/application-order.js.flow

@@ -24,6 +24,7 @@ import type { TStyleValue } from '../common-types';
  * - [x] border-inline-start
  * - [x] border-left
  * - [x] border-radius
+ * - [x] corner-shape
  * - [x] border-right
  * - [x] border-style
  * - [x] border-top

package/lib/shared/preprocess-rules/index.d.ts

@@ -13,6 +13,9 @@ export declare function getExpandedKeys(
 ): ReadonlyArray<string>;
 declare function flatMapExpandedShorthands(
   objEntry: Readonly<[string, TStyleValue]>,
-  options: Readonly<{ styleResolution: StyleXOptions['styleResolution'] }>,
+  options: Readonly<{
+    styleResolution: StyleXOptions['styleResolution'];
+    propertyValidationMode?: StyleXOptions['propertyValidationMode'];
+  }>,
 ): ReadonlyArray<[string, TStyleValue]>;
 export default flatMapExpandedShorthands;

package/lib/shared/preprocess-rules/index.js.flow

@@ -17,6 +17,7 @@ declare export default function flatMapExpandedShorthands(
   objEntry: $ReadOnly<[string, TStyleValue]>,
   options: $ReadOnly<{
     styleResolution: StyleXOptions['styleResolution'],
+    propertyValidationMode?: StyleXOptions['propertyValidationMode'],
     ...
   }>,
 ): $ReadOnlyArray<[string, TStyleValue]>;

package/lib/shared/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -27,6 +27,7 @@ export declare type LOGICAL_FLOAT_END_VAR = typeof LOGICAL_FLOAT_END_VAR;
  * - [x] border-inline-start
  * - [ ] border-left
  * - [x] border-radius
+ * - [ ] corner-shape
  * - [ ] border-right
  * - [x] border-style
  * - [ ] border-top
@@ -74,6 +75,7 @@ export declare type LOGICAL_FLOAT_END_VAR = typeof LOGICAL_FLOAT_END_VAR;
  * - [x] border-inline-start
  * - [ ] border-left
  * - [x] border-radius
+ * - [ ] corner-shape
  * - [ ] border-right
  * - [x] border-style
  * - [ ] border-top

package/lib/shared/preprocess-rules/legacy-expand-shorthands.js.flow

@@ -50,6 +50,7 @@ declare export const LOGICAL_FLOAT_END_VAR: '--stylex-logical-end';
  * - [x] border-inline-start
  * - [ ] border-left
  * - [x] border-radius
+ * - [ ] corner-shape
  * - [ ] border-right
  * - [x] border-style
  * - [ ] border-top

package/lib/shared/types/index.d.ts

@@ -7,6 +7,7 @@
  *
  */
 
+/* eslint-disable no-unused-vars, no-redeclare */
 type NestedWithNumbers =
   | number
   | string

package/lib/shared/utils/normalizers/zero-dimensions.d.ts

@@ -14,6 +14,6 @@
 
 declare function normalizeZeroDimensions(
   ast: PostCSSValueAST,
-  _: unknown,
+  key: unknown,
 ): PostCSSValueAST;
 export default normalizeZeroDimensions;

package/lib/shared/utils/normalizers/zero-dimensions.js.flow

@@ -14,5 +14,5 @@
 
 declare export default function normalizeZeroDimensions(
   ast: PostCSSValueAST,
-  _: mixed,
+  key: mixed,
 ): PostCSSValueAST;

package/lib/shared/when/when.d.ts

@@ -8,6 +8,7 @@
  */
 
 import type { StyleXOptions } from '../common-types';
+type WhenSelector = `:${string}` | `[${string}`;
 /**
  * Creates selector that observes if the given pseudo-class is
  * active on an ancestor with the "defaultMarker"
@@ -17,7 +18,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 export declare function ancestor(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -28,7 +29,7 @@ export declare function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 export declare function descendant(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -39,7 +40,7 @@ export declare function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 export declare function siblingBefore(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -50,7 +51,7 @@ export declare function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 export declare function siblingAfter(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -61,6 +62,6 @@ export declare function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 export declare function anySibling(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;

package/lib/shared/when/when.js.flow

@@ -9,6 +9,8 @@
 
 import type { StyleXOptions } from '../common-types';
 
+type WhenSelector = StringPrefix<':'> | StringPrefix<'['>;
+
 /**
  * Creates selector that observes if the given pseudo-class is
  * active on an ancestor with the "defaultMarker"
@@ -18,7 +20,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 declare export function ancestor(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -30,7 +32,7 @@ declare export function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 declare export function descendant(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -42,7 +44,7 @@ declare export function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 declare export function siblingBefore(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -54,7 +56,7 @@ declare export function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 declare export function siblingAfter(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -66,6 +68,6 @@ declare export function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 declare export function anySibling(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;

package/lib/utils/state-manager.d.ts

@@ -13,6 +13,7 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
+import type { FunctionConfig } from './evaluate-path';
 import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
@@ -50,6 +51,7 @@ export type StyleXOptions = Readonly<
           | null
           | undefined
           | Readonly<{ [$$Key$$: string]: string | ReadonlyArray<string> }>;
+        propertyValidationMode?: 'throw' | 'warn' | 'silent';
         enableDebugClassNames?: boolean;
         enableDebugDataProp?: boolean;
         enableDevClassNames?: boolean;
@@ -76,6 +78,7 @@ export type StyleXOptions = Readonly<
       | null
       | undefined
       | Readonly<{ [$$Key$$: string]: string | ReadonlyArray<string> }>;
+    propertyValidationMode?: 'throw' | 'warn' | 'silent';
     enableDebugClassNames?: boolean;
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
@@ -102,6 +105,7 @@ type StyleXStateOptions = Readonly<
   Omit<
     StyleXOptions,
     | keyof {
+        env: Readonly<{ [$$Key$$: string]: any }>;
         runtimeInjection:
           | (null | undefined | string)
           | Readonly<{ from: string; as: null | undefined | string }>;
@@ -112,6 +116,7 @@ type StyleXStateOptions = Readonly<
         rewriteAliases: boolean;
       }
   > & {
+    env: Readonly<{ [$$Key$$: string]: any }>;
     runtimeInjection:
       | (null | undefined | string)
       | Readonly<{ from: string; as: null | undefined | string }>;
@@ -141,6 +146,7 @@ declare class StateManager {
   readonly stylexViewTransitionClassImport: Set<string>;
   readonly stylexDefaultMarkerImport: Set<string>;
   readonly stylexWhenImport: Set<string>;
+  readonly stylexEnvImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;
@@ -154,6 +160,7 @@ declare class StateManager {
   get importPathString(): string;
   get importSources(): ReadonlyArray<string>;
   importAs(source: string): null | string;
+  applyStylexEnv(identifiers: FunctionConfig['identifiers']): void;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection():

package/lib/utils/state-manager.js.flow

@@ -13,6 +13,8 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
+import type { FunctionConfig } from './evaluate-path';
+
 import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
@@ -47,6 +49,7 @@ type ModuleResolution =
 export type StyleXOptions = $ReadOnly<{
   ...RuntimeOptions,
   aliases?: ?$ReadOnly<{ [string]: string | $ReadOnlyArray<string> }>,
+  propertyValidationMode?: 'throw' | 'warn' | 'silent',
   enableDebugClassNames?: boolean,
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
@@ -69,6 +72,7 @@ export type StyleXOptions = $ReadOnly<{
 
 type StyleXStateOptions = $ReadOnly<{
   ...StyleXOptions,
+  env: $ReadOnly<{ [string]: any }>,
   runtimeInjection: ?string | $ReadOnly<{ from: string, as: ?string }>,
   aliases?: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
   rewriteAliases: boolean,
@@ -95,6 +99,7 @@ declare export default class StateManager {
   +stylexViewTransitionClassImport: Set<string>;
   +stylexDefaultMarkerImport: Set<string>;
   +stylexWhenImport: Set<string>;
+  +stylexEnvImport: Set<string>;
   injectImportInserted: ?t.Identifier;
   // `stylex.create` calls
   +styleMap: Map<string, CompiledNamespaces>;
@@ -108,6 +113,7 @@ declare export default class StateManager {
   get importPathString(): string;
   get importSources(): $ReadOnlyArray<string>;
   importAs(source: string): null | string;
+  applyStylexEnv(identifiers: FunctionConfig['identifiers']): void;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection(): ?$ReadOnly<{ from: string, as?: ?string }>;

package/lib/visitors/inline-css.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+/**
+ * Transform inline-css call expressions like `css.color(value)`.
+ * These become arrow functions that return [compiledObj, inlineObj].
+ */
+export declare function transformInlineCSSCall(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+/**
+ * Transform inline-css member expressions like `css.display.flex`.
+ * These become compiled namespace objects: { [key]: className, $$css: true }
+ */
+export declare function transformInlineCSSMemberExpression(
+  path: NodePath<t.MemberExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/inline-css.js.flow

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+import type { NodePath } from '@babel/traverse';
+
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+/**
+ * Transform inline-css call expressions like `css.color(value)`.
+ * These become arrow functions that return [compiledObj, inlineObj].
+ */
+declare export function transformInlineCSSCall(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+
+/**
+ * Transform inline-css member expressions like `css.display.flex`.
+ * These become compiled namespace objects: { [key]: className, $$css: true }
+ */
+declare export function transformInlineCSSMemberExpression(
+  path: NodePath<t.MemberExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-define-consts.js.flow

@@ -8,7 +8,6 @@
  */
 
 import type { NodePath } from '@babel/traverse';
-
 import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.defineConsts` calls and transforms them.

package/lib/visitors/stylex-merge.js.flow

@@ -8,7 +8,6 @@
  */
 
 import type { NodePath } from '@babel/traverse';
-
 import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 declare export function skipStylexMergeChildren(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "browser": "lib/index.browser.js",
@@ -13,7 +13,7 @@
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
     "build": "rollup --config ./rollup.config.mjs",
-    "build-haste": "HASTE=true rollup --config ./rollup.config.mjs",
+    "build-haste": "cross-env HASTE=true rollup --config ./rollup.config.mjs",
     "build-watch": "rollup --config ./rollup.config.mjs --watch",
     "test": "jest --coverage"
   },
@@ -23,8 +23,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.17.4",
-    "@stylexjs/stylex": "0.17.4",
+    "@stylexjs/shared": "0.18.0",
+    "@stylexjs/stylex": "0.18.0",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -37,7 +37,7 @@
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "path-browserify": "^1.0.1",
     "rollup": "^4.24.0",
-    "scripts": "0.17.4"
+    "scripts": "0.18.0"
   },
   "files": [
     "flow_modules/*",