@astryxdesign/cli 0.1.0 → 0.1.1-canary.129bf0e

package/templates/pages/library/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState, useMemo} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, useMemo, type CSSProperties} from 'react';
 import {Layout, LayoutHeader, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -320,21 +319,19 @@ const ITEMS: LibraryItem[] = [
   },
 ];
 
-const styles = stylex.create({
-  thumbnailWrapper: {
-    position: 'relative',
-    aspectRatio: '16/9',
-    overflow: 'clip',
-    flexShrink: 0,
-  },
-  thumbnailImage: {
-    position: 'absolute',
-    inset: 0,
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const thumbnailWrapper: CSSProperties = {
+  position: 'relative',
+  aspectRatio: '16/9',
+  overflow: 'clip',
+  flexShrink: 0,
+};
+const thumbnailImage: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 // =============================================================================
 // Side Nav
@@ -343,12 +340,8 @@ const styles = stylex.create({
 function LibraryCard({item}: {item: LibraryItem}) {
   return (
     <Card padding={0}>
-      <div {...stylex.props(styles.thumbnailWrapper)}>
-        <img
-          src={item.imageUrl}
-          alt={item.name}
-          {...stylex.props(styles.thumbnailImage)}
-        />
+      <div style={thumbnailWrapper}>
+        <img src={item.imageUrl} alt={item.name} style={thumbnailImage} />
       </div>
       <Section variant="transparent" padding={4}>
         <VStack gap={1}>

package/templates/pages/login/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -13,22 +12,19 @@ import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Banner} from '@astryxdesign/core/Banner';
 import {CubeIcon} from '@heroicons/react/24/outline';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // Standalone auth page paints its own body background (no host shell).
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  // Cap the column at 400px but let it shrink to fit narrow screens (Stack
-  // has no maxWidth prop, so it's set here).
-  content: {
-    width: '100%',
-    maxWidth: 400,
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// Cap the column at 400px but let it shrink to fit narrow screens (Stack
+// has no maxWidth prop, so it's set here).
+const contentStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 400,
+};
 
 export default function LoginPage() {
   const [email, setEmail] = useState('');
@@ -47,8 +43,8 @@ export default function LoginPage() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
-      <VStack gap={4} hAlign="center" xstyle={styles.content}>
+    <Center axis="both" style={pageStyle}>
+      <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">
           <Icon icon={CubeIcon} size="lg" />

package/templates/pages/login-card/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {CubeIcon} from '@heroicons/react/24/outline';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
@@ -14,7 +13,6 @@ import {Card} from '@astryxdesign/core/Card';
 import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // Brand sign-in marks — no heroicons or template-assets equivalent.
 const AppleIcon = (props: React.SVGProps<SVGSVGElement>) => (
@@ -57,19 +55,17 @@ const GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => (
 );
 
 // Standalone auth page paints its own body background (no host shell).
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  // Cap the column at 400px but let it shrink to fit narrow screens (Stack
-  // has no maxWidth prop, so it's set here).
-  content: {
-    width: '100%',
-    maxWidth: 400,
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+// Cap the column at 400px but let it shrink to fit narrow screens (Stack
+// has no maxWidth prop, so it's set here).
+const contentStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 400,
+};
 
 export default function LoginSimple() {
   const [email, setEmail] = useState('');
@@ -91,8 +87,8 @@ export default function LoginSimple() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
-      <VStack gap={4} hAlign="center" xstyle={styles.content}>
+    <Center axis="both" style={pageStyle}>
+      <VStack gap={4} hAlign="center" style={contentStyle}>
         {/* Logo */}
         <VStack gap={2} hAlign="center">
           <Icon icon={CubeIcon} size="lg" />

package/templates/pages/login-split/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {VStack, HStack, StackItem} from '@astryxdesign/core/Layout';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Center} from '@astryxdesign/core/Center';
@@ -17,7 +16,6 @@ import {TextInput} from '@astryxdesign/core/TextInput';
 import {Button} from '@astryxdesign/core/Button';
 import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const COVER_IMAGE_URL =
   'https://lookaside.facebook.com/assets/astryx/light-working-vertical-1.png';
@@ -34,47 +32,50 @@ const COLUMN_MIN_WIDTH = 240;
 // below 2×MIN + 32(gap) = 512px. The container query reorders the image and
 // tightens the inset at that same point, keyed to the card width (not the
 // window) so it never desyncs.
-const STACK_QUERY = '@container login-split (max-width: 511px)';
+// minHeight:100% fills the host so the centered card never leaves an unpainted
+// band; padding keeps it off the surface edges.
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundColor: 'var(--color-background-body)',
+  padding: 'var(--spacing-6)',
+};
+const cardWrap: CSSProperties = {
+  width: '100%',
+  maxWidth: 1000,
+  marginInline: 'auto',
+};
+const coverImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
-const styles = stylex.create({
-  // minHeight:100% fills the host so the centered card never leaves an unpainted
-  // band; padding keeps it off the surface edges.
-  page: {
-    minHeight: '100%',
-    backgroundColor: colorVars['--color-background-body'],
-    padding: spacingVars['--spacing-6'],
-  },
-  cardWrap: {
-    width: '100%',
-    maxWidth: 1000,
-    marginInline: 'auto',
-  },
-  // Pad the grid, not the Card: the form's Section escapes Card's
-  // --container-padding-* vars, which would cancel the inset on the form side.
-  // containerType makes this the query container for STACK_QUERY.
-  splitGrid: {
-    containerType: 'inline-size',
-    containerName: 'login-split',
-    padding: {
-      default: spacingVars['--spacing-8'],
-      [STACK_QUERY]: spacingVars['--spacing-4'],
-    },
-  },
-  imageCell: {
-    // Fill the track: the image's Card is content-width by default.
-    width: '100%',
-    // order:-1 moves the image above the form when stacked.
-    order: {
-      default: 0,
-      [STACK_QUERY]: -1,
-    },
-  },
-  coverImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover' as const,
-  },
-});
+// The container query lives in a plain <style> tag so it needs NO CSS compiler.
+// - Pad the grid, not the Card: the form's Section escapes Card's
+//   --container-padding-* vars, which would cancel the inset on the form side.
+//   container-type makes the grid the query container for the stack point.
+// - repeat:'fit' (auto-fit) collapses the two columns to one below 511px; the
+//   query reorders the image (order:-1) and tightens the inset at that point,
+//   keyed to the card width (not the window) so it never desyncs.
+const LOGIN_SPLIT_CSS = `
+.login-split-grid {
+  container-type: inline-size;
+  container-name: login-split;
+  padding: var(--spacing-8);
+}
+.login-split-image {
+  width: 100%;
+  order: 0;
+}
+@container login-split (max-width: 511px) {
+  .login-split-grid {
+    padding: var(--spacing-4);
+  }
+  .login-split-image {
+    order: -1;
+  }
+}
+`;
 
 export default function LoginTwoColumn() {
   const [email, setEmail] = useState('');
@@ -97,15 +98,16 @@ export default function LoginTwoColumn() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
+    <Center axis="both" style={pageStyle}>
+      <style>{LOGIN_SPLIT_CSS}</style>
       <VStack gap={4} width="100%">
-        <div {...stylex.props(styles.cardWrap)}>
+        <div style={cardWrap}>
           <Card padding={0} width="100%">
             <Grid
               columns={{minWidth: COLUMN_MIN_WIDTH, repeat: 'fit'}}
               gap={8}
               align="stretch"
-              xstyle={styles.splitGrid}>
+              className="login-split-grid">
               {/* Form */}
               <Section variant="transparent" padding={0} height="100%">
                 <VStack gap={4} height="100%">
@@ -237,14 +239,14 @@ export default function LoginTwoColumn() {
 
               {/* Cover image — the transparent Card clips it to rounded
                   corners (overflow:clip + radius), so the image needs no radius. */}
-              <div {...stylex.props(styles.imageCell)}>
+              <div className="login-split-image">
                 <Card
                   variant="transparent"
                   padding={0}
                   width="100%"
                   height="100%">
                   <img
-                    {...stylex.props(styles.coverImage)}
+                    style={coverImage}
                     src={COVER_IMAGE_URL}
                     alt="Two people working at a desk"
                   />

package/templates/pages/login-sso/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {ShieldCheckIcon} from '@heroicons/react/24/outline';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
@@ -16,7 +15,6 @@ import {Link} from '@astryxdesign/core/Link';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Avatar} from '@astryxdesign/core/Avatar';
-import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -24,15 +22,13 @@ import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 
 const BG_URL = 'https://lookaside.facebook.com/assets/astryx/building.png';
 
-const styles = stylex.create({
-  page: {
-    minHeight: '100%',
-    backgroundImage: `url(${BG_URL})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    padding: spacingVars['--spacing-6'],
-  },
-});
+const pageStyle: CSSProperties = {
+  minHeight: '100%',
+  backgroundImage: `url(${BG_URL})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  padding: 'var(--spacing-6)',
+};
 
 type SSOProvider = {
   name: string;
@@ -102,7 +98,7 @@ export default function LoginSSO() {
   };
 
   return (
-    <Center axis="both" xstyle={styles.page}>
+    <Center axis="both" style={pageStyle}>
       <Card padding={8} width="100%" maxWidth={400}>
         <VStack gap={4} hAlign="stretch">
           {/* ── Step 1: Email entry ── */}

package/templates/pages/mixed-gallery/page.tsx

@@ -2,54 +2,59 @@
 
 'use client';
 
+import type {CSSProperties} from 'react';
 import {VStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
-import * as stylex from '@stylexjs/stylex';
 
 // ─── Styles ────────────────────────────────────────────────────────────────
 // The masonry needs a responsive column count AND a hero that spans 2 columns
 // on desktop but goes full-width on mobile. Grid forces grid-template-columns
 // inline, so a responsive span can't be expressed through its props — this is a
 // @container grid (the sanctioned Astryx pattern for container-responsive layout).
-// Image fill + radius are also custom because Astryx has no image primitive (#2582).
+// The container query lives in a plain <style> tag below so it needs NO CSS
+// compiler. Image fill + radius are custom because Astryx has no image
+// primitive (#2582).
 
-const styles = stylex.create({
-  // Named inline-size container on the page column so the grid responds to the
-  // available content width (works inside the sandbox's resizable preview).
-  container: {
-    containerType: 'inline-size',
-    containerName: 'gallery',
-  },
-  // 3 columns on desktop, dropping straight to 1 column below 720px (no 2-col
-  // middle state). minmax(0, 1fr) (not 1fr) so tracks split evenly and ignore
-  // the images' intrinsic min-width.
-  grid: {
-    display: 'grid',
-    gap: 'var(--spacing-3)',
-    gridTemplateColumns: {
-      default: 'repeat(3, minmax(0, 1fr))',
-      '@container gallery (max-width: 720px)': 'minmax(0, 1fr)',
-    },
-  },
-  // Hero spans 2 columns on desktop, then fills the row once it's single-column.
-  hero: {
-    gridColumn: {
-      default: 'span 2',
-      '@container gallery (max-width: 720px)': '1 / -1',
-    },
-  },
-  // Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
-  img: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-  // Rounds the image corners. No radius prop on AspectRatio (#2582).
-  clip: {
-    borderRadius: 'var(--radius-element)',
-  },
-});
+// Named inline-size container on the page column so the grid responds to the
+// available content width (works inside the sandbox's resizable preview).
+const containerStyle: CSSProperties = {
+  containerType: 'inline-size',
+  containerName: 'gallery',
+};
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+const imgStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
+// Rounds the image corners. No radius prop on AspectRatio (#2582).
+const clipStyle: CSSProperties = {
+  borderRadius: 'var(--radius-element)',
+};
+
+// 3 columns on desktop, dropping straight to 1 column below 720px (no 2-col
+// middle state). minmax(0, 1fr) (not 1fr) so tracks split evenly and ignore the
+// images' intrinsic min-width. The hero spans 2 columns on desktop, then fills
+// the row once it's single-column.
+const GALLERY_CSS = `
+.mixed-gallery-grid {
+  display: grid;
+  gap: var(--spacing-3);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.mixed-gallery-hero {
+  grid-column: span 2;
+}
+@container gallery (max-width: 720px) {
+  .mixed-gallery-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .mixed-gallery-hero {
+    grid-column: 1 / -1;
+  }
+}
+`;
 
 // ─── Gallery Data ───────────────────────────────────────────────────────────
 
@@ -89,15 +94,15 @@ const IMAGES: GalleryImage[] = [
 function GalleryCard({
   image,
   ratio,
-  xstyle,
+  className,
 }: {
   image: GalleryImage;
   ratio: number;
-  xstyle?: stylex.StyleXStyles;
+  className?: string;
 }) {
   return (
-    <AspectRatio ratio={ratio} xstyle={[styles.clip, xstyle]}>
-      <img src={image.src} alt={image.title} {...stylex.props(styles.img)} />
+    <AspectRatio ratio={ratio} className={className} style={clipStyle}>
+      <img src={image.src} alt={image.title} style={imgStyle} />
     </AspectRatio>
   );
 }
@@ -111,7 +116,8 @@ export default function MixedGalleryTemplate() {
       contentWidth={1400}
       content={
         <LayoutContent padding={6}>
-          <VStack gap={6} xstyle={styles.container}>
+          <style>{GALLERY_CSS}</style>
+          <VStack gap={6} style={containerStyle}>
             {/* Header */}
             <VStack gap={2} hAlign="center">
               <Heading level={1} justify="center">
@@ -129,12 +135,12 @@ export default function MixedGalleryTemplate() {
                 (being 2 columns wide) it matches the row height exactly. All
                 rows are therefore the same height. Responsive via @container:
                 3 columns → 1 column at ≤720px. */}
-            <div {...stylex.props(styles.grid)}>
+            <div className="mixed-gallery-grid">
               {/* Hero — spans 2 columns; 3:1 keeps it level with the sidebar */}
               <GalleryCard
                 image={IMAGES[0]}
                 ratio={3 / 1}
-                xstyle={styles.hero}
+                className="mixed-gallery-hero"
               />
 
               {/* Sidebar — same height as the hero */}