Remove 'Dynamic styles inside pseudo elements' warning

StyleX now supports dynamic styles inside ::before/::after pseudo
elements (facebook/stylex#1396 is closed). Remove the bail/error
warning that fired when tryHandleDynamicPseudoElementViaCustomProperty
could not handle a case — instead, fall through to the remaining
interpolation handlers.

The custom property workaround itself is preserved as one valid
strategy; cases it cannot handle now proceed to other handlers
instead of bailing the entire declaration.

Co-authored-by: Kenneth Skovhus <skovhus@users.noreply.github.com>

Author: cursoragent

src/internal/logger.ts

@@ -47,7 +47,6 @@ export type WarningType =
   | "Resolved border helper value could not be expanded to longhand properties"
   | "Resolved conditional border variant could not be expanded to longhand properties"
   | "createGlobalStyle is not supported in StyleX. Global styles should be handled separately (e.g., in a CSS file or using CSS reset libraries)"
-  | "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396"
   | "Failed to parse theme expressions"
   | "Heterogeneous background values (mix of gradients and colors) not currently supported"
   | "Higher-order styled factory wrappers (e.g. hoc(styled)) are not supported"

src/internal/lower-rules/rule-interpolated-declaration.ts

@@ -319,22 +319,10 @@ export function handleInterpolatedDeclaration(args: InterpolatedDeclarationConte
     ) {
       continue;
     }
-    // Dynamic styles inside ::before/::after pseudo-elements are not natively supported
-    // by StyleX (see https://github.com/facebook/stylex/issues/1396).
-    // Workaround: use CSS custom properties set as inline styles on the parent element,
-    // referenced via var() in the pseudo-element's static StyleX styles.
     if (isPseudoElementSelector(pseudoElement)) {
       if (tryHandleDynamicPseudoElementViaCustomProperty(args)) {
         continue;
       }
-      warnings.push({
-        severity: "error",
-        type: "Dynamic styles inside pseudo elements (::before/::after) are not supported by StyleX. See https://github.com/facebook/stylex/issues/1396",
-        loc: decl.loc,
-        context: { pseudoElement },
-      });
-      bail = true;
-      break;
     }
     if (
       tryHandleInterpolatedBorder(
@@ -2326,7 +2314,8 @@ function isPseudoElementSelector(pseudoElement: string | null): boolean {
  *   Output: StyleX  → `"::after": { backgroundColor: "var(--Badge-after-backgroundColor)" }`
  *           Inline  → `style={{ "--Badge-after-backgroundColor": $badgeColor }}`
  *
- * Bails (returns false) for unsupported shapes: multi-slot interpolations or CSS shorthands.
+ * Returns false for shapes it cannot handle (multi-slot interpolations, CSS shorthands,
+ * theme access); callers fall through to other handlers.
  */
 function tryHandleDynamicPseudoElementViaCustomProperty(
   args: InterpolatedDeclarationContext,

test-cases/selector-dynamicPseudoElement.input.tsx

@@ -2,9 +2,8 @@ import styled from "styled-components";
 
 /**
  * Test case for dynamic styles in pseudo elements (::before / ::after).
- * Uses CSS custom properties as a workaround for StyleX's limitation
- * with dynamic values inside pseudo elements.
- * See: https://github.com/facebook/stylex/issues/1396
+ * Uses CSS custom properties on the parent element, referenced via var()
+ * in the pseudo-element's static StyleX styles.
  */
 const Badge = styled.span<{ $badgeColor: string }>`
   position: relative;

test-cases/selector-dynamicPseudoElement.output.tsx

@@ -7,9 +7,8 @@ type BadgeProps = React.PropsWithChildren<{
 
 /**
  * Test case for dynamic styles in pseudo elements (::before / ::after).
- * Uses CSS custom properties as a workaround for StyleX's limitation
- * with dynamic values inside pseudo elements.
- * See: https://github.com/facebook/stylex/issues/1396
+ * Uses CSS custom properties on the parent element, referenced via var()
+ * in the pseudo-element's static StyleX styles.
  */
 function Badge(props: BadgeProps) {
   const { children, badgeColor } = props;