@astryxdesign/cli 0.1.0-canary.f94dd07 → 0.1.1-canary.a514b99

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 */}

package/templates/pages/payment-form/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,
@@ -36,12 +35,6 @@ import {ShieldCheckIcon} from '@heroicons/react/24/outline';
 import {LockClosedIcon} from '@heroicons/react/24/outline';
 import {CheckCircleIcon} from '@heroicons/react/24/outline';
 import {TruckIcon} from '@heroicons/react/24/outline';
-import {
-  colorVars,
-  spacingVars,
-  radiusVars,
-  borderVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
@@ -156,51 +149,48 @@ const TAX = 18.4;
 const fmt = (n: number) => `$${n.toFixed(2)}`;
 
 // ── Styles ────────────────────────────────────────────────────────────────────
+// Plain inline styles using Astryx design-token CSS variables (declared at
+// :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
-const styles = stylex.create({
-  fullWidth: {width: '100%'},
-  // LayoutContent clips overflow by default, which traps position:sticky
-  // children (the sticky order summary). With height="auto" the page scrolls
-  // at the window, so let overflow be visible here so sticky can pin.
-  visibleOverflow: {overflow: 'visible'},
-  // Form column flex-basis so the two checkout columns share width evenly.
-  formColBasis: {flexBasis: 0},
-  // Space the Order Summary content below its collapsible trigger title.
-  summaryContent: {paddingBlockStart: spacingVars['--spacing-2']},
-  // Order-summary column: sticky beside the form on desktop.
-  summarySticky: {
-    flexBasis: 0,
-    position: 'sticky',
-    top: spacingVars['--spacing-4'],
-    alignSelf: 'flex-start',
-  },
-  // On mobile the summary moves above the form.
-  summaryMobileOrder: {order: -1},
-  // Express-checkout brand buttons (fixed brand colors).
-  paypalButton: {backgroundColor: '#FFC439', borderColor: '#FFC439'},
-  // Official Google Pay dark button: black background with the unaltered
-  // dark-variant mark (white "Google Pay" text + full-color G), per the
-  // Google Pay brand guidelines.
-  gpayButton: {backgroundColor: '#000', borderColor: '#000'},
-  // Brand logos inside the express-checkout buttons.
-  paypalLogo: {height: spacingVars['--spacing-5'], width: 'auto'},
-  // Unaltered Google Pay mark (no filter/recolor — brand requirement),
-  // sized so it keeps comfortable clear space inside the lg button.
-  gpayLogo: {
-    height: spacingVars['--spacing-5'],
-    width: 'auto',
-  },
-  // Accepted card-network marks (Visa/Mastercard/Amex), shared style.
-  cardLogo: {
-    height: spacingVars['--spacing-7'],
-    width: 'auto',
-    borderRadius: radiusVars['--radius-element'],
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderColor: colorVars['--color-border'],
-    backgroundColor: colorVars['--color-background-surface'],
-  },
-});
+const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
+// Form column flex-basis so the two checkout columns share width evenly.
+const formColBasis: CSSProperties = {flexBasis: 0};
+// Space the Order Summary content below its collapsible trigger title.
+const summaryContent: CSSProperties = {paddingBlockStart: 'var(--spacing-2)'};
+// Order-summary column: sticky beside the form on desktop.
+const summarySticky: CSSProperties = {
+  flexBasis: 0,
+  position: 'sticky',
+  top: 'var(--spacing-4)',
+  alignSelf: 'flex-start',
+};
+// On mobile the summary moves above the form.
+const summaryMobileOrder: CSSProperties = {order: -1};
+// Express-checkout brand buttons (fixed brand colors).
+const paypalButton: CSSProperties = {
+  backgroundColor: '#FFC439',
+  borderColor: '#FFC439',
+};
+// Official Google Pay dark button: black background with the unaltered
+// dark-variant mark (white "Google Pay" text + full-color G), per the
+// Google Pay brand guidelines.
+const gpayButton: CSSProperties = {backgroundColor: '#000', borderColor: '#000'};
+// Brand logos inside the express-checkout buttons.
+const brandLogo: CSSProperties = {height: 'var(--spacing-5)', width: 'auto'};
+// Accepted card-network marks (Visa/Mastercard/Amex), shared style.
+const cardLogo: CSSProperties = {
+  height: 'var(--spacing-7)',
+  width: 'auto',
+  borderRadius: 'var(--radius-element)',
+  borderWidth: 'var(--border-width)',
+  borderStyle: 'solid',
+  borderColor: 'var(--color-border)',
+  backgroundColor: 'var(--color-background-surface)',
+};
 
 export default function PaymentFormPage() {
   const isMobile = useMediaQuery('(max-width: 767px)');
@@ -278,7 +268,7 @@ export default function PaymentFormPage() {
     <Layout
       height="auto"
       content={
-        <LayoutContent padding={0} xstyle={styles.visibleOverflow}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"
@@ -306,7 +296,7 @@ export default function PaymentFormPage() {
                   vAlign="start">
                   <StackItem
                     size="fill"
-                    xstyle={isMobile ? undefined : styles.formColBasis}>
+                    style={isMobile ? undefined : formColBasis}>
                     <VStack gap={8}>
                       {/* Sign in */}
                       <VStack gap={1}>
@@ -509,11 +499,11 @@ export default function PaymentFormPage() {
                               variant="primary"
                               size="lg"
                               onClick={() => {}}
-                              xstyle={styles.paypalButton}>
+                              style={paypalButton}>
                               <img
                                 src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png"
                                 alt="PayPal"
-                                {...stylex.props(styles.paypalLogo)}
+                                style={brandLogo}
                               />
                             </Button>
                             {/* Google Pay */}
@@ -522,11 +512,11 @@ export default function PaymentFormPage() {
                               variant="primary"
                               size="lg"
                               onClick={() => {}}
-                              xstyle={styles.gpayButton}>
+                              style={gpayButton}>
                               <img
                                 src="https://pay.google.com/about/static_kcs/images/logos/google-pay-logo.svg"
                                 alt="Google Pay"
-                                {...stylex.props(styles.gpayLogo)}
+                                style={brandLogo}
                               />
                             </Button>
                           </Grid>
@@ -552,17 +542,17 @@ export default function PaymentFormPage() {
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/visa.svg"
                               alt="Visa"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/mastercard.svg"
                               alt="Mastercard"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/amex.svg"
                               alt="Amex"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                           </HStack>
                           <TextInput
@@ -719,7 +709,7 @@ export default function PaymentFormPage() {
                               placeholder="Enter promo code"
                               value={promo}
                               onChange={setPromo}
-                              xstyle={styles.fullWidth}
+                              style={fullWidth}
                             />
                           </StackItem>
                           <Button
@@ -811,14 +801,14 @@ export default function PaymentFormPage() {
                             label="Place Order"
                             variant="primary"
                             size="lg"
-                            xstyle={styles.fullWidth}
+                            style={fullWidth}
                             onClick={() => setSubmitted(true)}
                           />
                           <Button
                             label="Continue Shopping"
                             variant="secondary"
                             size="lg"
-                            xstyle={styles.fullWidth}
+                            style={fullWidth}
                             onClick={() => {}}
                           />
                         </VStack>
@@ -843,18 +833,14 @@ export default function PaymentFormPage() {
 
                   <StackItem
                     size="fill"
-                    xstyle={
-                      isMobile
-                        ? styles.summaryMobileOrder
-                        : styles.summarySticky
-                    }>
+                    style={isMobile ? summaryMobileOrder : summarySticky}>
                     <Card padding={5}>
                       <VStack gap={4}>
                         {/* Accordion header — clickable on mobile only */}
                         <Collapsible
                           trigger="Order Summary"
                           defaultIsOpen={true}>
-                          <VStack gap={4} xstyle={styles.summaryContent}>
+                          <VStack gap={4} style={summaryContent}>
                             {/* Line items */}
                             {ORDER_ITEMS.map(item => (
                               <VStack key={item.id} gap={3}>

package/templates/pages/product-detail/page.tsx

@@ -24,36 +24,34 @@ import {Divider} from '@astryxdesign/core/Divider';
 import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {SelectableCard} from '@astryxdesign/core/SelectableCard';
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 
 // Custom CSS here is limited to what Astryx components can't express today:
 // - image fill + corner radius (no Image primitive — #2582)
 // - the sticky info column (no sticky prop on Astryx layout primitives — #2613)
-const pageStyles = stylex.create({
-  // Keeps the info column in view while the gallery scrolls. No sticky prop on
-  // Astryx layout primitives.
-  stickyInfo: {
-    position: 'sticky',
-    top: 'var(--spacing-8)',
-    alignSelf: 'start',
-  },
-  // Fills the AspectRatio box + rounds corners. No objectFit/radius props on
-  // AspectRatio (#2582).
-  heroImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    borderRadius: 'var(--radius-container)',
-  },
-  // Fills the thumbnail card. Corner radius + selection ring come from
-  // SelectableCard; the image only needs to fill and cover (#2582).
-  thumbImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    display: 'block',
-  },
-});
+// Keeps the info column in view while the gallery scrolls. No sticky prop on
+// Astryx layout primitives.
+const stickyInfo: CSSProperties = {
+  position: 'sticky',
+  top: 'var(--spacing-8)',
+  alignSelf: 'start',
+};
+// Fills the AspectRatio box + rounds corners. No objectFit/radius props on
+// AspectRatio (#2582).
+const heroImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'var(--radius-container)',
+};
+// Fills the thumbnail card. Corner radius + selection ring come from
+// SelectableCard; the image only needs to fill and cover (#2582).
+const thumbImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
 
 import {MinusIcon, PlusIcon, StarIcon} from '@heroicons/react/24/outline';
 import {StarIcon as StarIconSolid} from '@heroicons/react/24/solid';
@@ -133,11 +131,7 @@ function ImageGallery({
   return (
     <VStack gap={3}>
       <AspectRatio ratio={4 / 5}>
-        <img
-          {...stylex.props(pageStyles.heroImage)}
-          src={heroSrc}
-          alt={PRODUCT.name}
-        />
+        <img style={heroImage} src={heroSrc} alt={PRODUCT.name} />
       </AspectRatio>
       <Grid columns={3} gap={2}>
         {thumbnails.map((src, i) => (
@@ -151,7 +145,7 @@ function ImageGallery({
               width="100%"
               height="100%">
               <img
-                {...stylex.props(pageStyles.thumbImage)}
+                style={thumbImage}
                 src={src}
                 alt={`Product image ${i + 1}`}
               />
@@ -301,7 +295,7 @@ export default function ProductDetailTemplate() {
               selected={selectedThumb}
               onSelect={setSelectedThumb}
             />
-            <VStack gap={0} xstyle={pageStyles.stickyInfo}>
+            <VStack gap={0} style={stickyInfo}>
               <ProductInfo />
             </VStack>
           </Grid>

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

@@ -10,19 +10,17 @@ import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {ArrowRightIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
 // The only custom CSS is the image fill — there is no Image primitive to
 // fill the AspectRatio box with `object-fit` (#2582).
 
-const styles = stylex.create({
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const image: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 // ─── Product Data ───────────────────────────────────────────────────────────
 
@@ -100,11 +98,7 @@ function ProductCard({product}: {product: Product}) {
     <VStack gap={3}>
       <Card padding={0}>
         <AspectRatio ratio={1}>
-          <img
-            src={product.image}
-            alt={product.name}
-            {...stylex.props(styles.image)}
-          />
+          <img src={product.image} alt={product.name} style={image} />
         </AspectRatio>
       </Card>
       <VStack gap={1}>