@akinon/pz-theme 2.0.93-rc.0 → 2.0.94-beta.0

package/src/blocks/slider-block.tsx

@@ -12,7 +12,8 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
-import { isNarrowBreakpoint } from '../utils/breakpoints';
+import { DESKTOP_MIN_WIDTH, isNarrowBreakpoint } from '../utils/breakpoints';
+import { useCarouselSsr } from '../utils/carousel-ssr';
 import { BlockRendererProps } from './block-renderer-registry';
 
 import { postToEditor } from '../editor-bridge';
@@ -115,14 +116,35 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const mobilePeek = parseNumber(getResponsiveValue(slidePeek, 'mobile', 0), 0);
   const partialVisible = desktopPeek > 0 || mobilePeek > 0;
 
+  /**
+   * Where this slider's two bands meet, and why the number moved.
+   *
+   * It was hard-coded here as 768 — `desktop: { min: 768 }`, `mobile: { max:
+   * 768 }` — while every other reader of the same block drew the line at 1024.
+   * `isNarrowBreakpoint` just below picks this slider's `slidesToSlide` at
+   * 1024, `generateElementCSS` emits the block's own padding and max-width
+   * against `MOBILE_MEDIA_QUERY` (max-width 1023), and the sibling renderer
+   * `posts-slider-section` already used the shared constants. So between 768
+   * and 1023 one slider showed the DESKTOP item count inside a box the
+   * stylesheet had already sized as mobile — the exact drift `utils/breakpoints`
+   * exists to end, and a disagreement the gated stylesheet below would have
+   * inherited had this stayed as it was.
+   *
+   * This does change what a 768-1023 viewport sees: the mobile item count,
+   * which is what the rest of the block was already telling it to expect.
+   *
+   * The band edges overlapped on the old numbers (768 satisfied both `min` and
+   * `max`, and `setItemsToShow` let the last matching key win). They are
+   * adjacent now, so exactly one band claims every width.
+   */
   const carouselResponsive = {
     desktop: {
-      breakpoint: { max: 4000, min: 768 },
+      breakpoint: { max: 4000, min: DESKTOP_MIN_WIDTH },
       items: desktopItems,
       ...(desktopPeek > 0 ? { partialVisibilityGutter: desktopPeek } : {})
     },
     mobile: {
-      breakpoint: { max: 768, min: 0 },
+      breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: 0 },
       items: mobileItems,
       ...(mobilePeek > 0 ? { partialVisibilityGutter: mobilePeek } : {})
     }
@@ -156,6 +178,23 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const slideGap = parseNumber(getConfigEntry('slide-gap'), 16);
   const slidePadding = slideGap / 2;
 
+  /*
+   * Hoisted out of the JSX because the SSR gate has to be keyed to the exact
+   * same string: a change here remounts the carousel, a remount puts the
+   * library back into its pre-measurement state, and the gated stylesheet has
+   * to come back with it. Two copies of this template literal would eventually
+   * disagree.
+   */
+  const carouselKey = `${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`;
+
+  // Server-render the slides. Without this the track ships empty and the whole
+  // band is 0px tall until hydration — see `utils/carousel-ssr`.
+  const carouselSsr = useCarouselSsr({
+    id: block.id,
+    remountKey: carouselKey,
+    responsive: carouselResponsive
+  });
+
   /**
    * Edge treatment, the same vocabulary the slider SECTIONS grew — this block
    * is a second, independent renderer of the same carousel (a Featured Brand
@@ -668,17 +707,50 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
         clsx('relative z-10 w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
       )}
       style={sectionStyles}
+      {...carouselSsr.gateProps}
     >
       <div style={{ position: 'relative' }}>
         <Carousel
           ref={carouselRef}
-          key={`${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+          key={carouselKey}
           responsive={carouselResponsive}
+          /*
+           * `deviceType` is a CONSTANT LITERAL and must stay one. It names a
+           * key of the responsive map above.
+           *
+           * NOT for the reason it looks like. `currentBreakpoint` starts at
+           * `'desktop'` on both sides, so the client's FIRST render agrees
+           * with the server either way — passing it would not trip React's
+           * hydration check, and a reader who tests only that will conclude it
+           * is safe. The harm lands after mount: the effect in
+           * `theme-placeholder-wrapper` measures the viewport and moves the
+           * prop, and the library reads `responsive[deviceType]` on its own
+           * schedule rather than on prop change. A moving `deviceType` also
+           * names a key that may not exist in a map the designer collapsed to
+           * one band. See `utils/carousel-ssr`.
+           */
+          {...carouselSsr.carouselProps}
           partialVisible={partialVisible}
           slidesToSlide={currentSlidesToSlide}
           swipeable={true}
           draggable={true}
-          arrows={isDesigner ? false : Boolean(showArrows) && !arrowsOutside}
+          /*
+           * `visibleCount > itemsShown` is what keeps the server and the
+           * mounted library agreeing. The library decides for itself whether
+           * an arrow can move anything, but only once it has measured — so
+           * without this a slider holding fewer slides than it shows would
+           * paint an arrow in the SSR markup and then lose it at hydration,
+           * a flicker in exactly the window this file exists to clean up.
+           * `posts-slider-section` folds the same test into its own
+           * `showArrows`.
+           */
+          arrows={
+            isDesigner
+              ? false
+              : Boolean(showArrows) &&
+                !arrowsOutside &&
+                visibleCount > itemsShown
+          }
           showDots={Boolean(showDots)}
           renderDotsOutside={Boolean(showDots)}
           infinite={Boolean(useInfinite)}
@@ -686,7 +758,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           rewindWithAnimation={Boolean(useInfinite)}
           autoPlay={Boolean(useAutoPlay)}
           autoPlaySpeed={autoPlaySpeed}
-          containerClass="slider-carousel"
+          containerClass={`slider-carousel ${carouselSsr.scopeClass}`}
           dotListClass="slider-dots"
           /*
            * Spread conditionally so a slider that has not opted in is handed
@@ -699,12 +771,18 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
               }
             : {})}
           customLeftArrow={
-            !isDesigner && showArrows && !arrowsOutside ? (
+            !isDesigner &&
+            showArrows &&
+            !arrowsOutside &&
+            visibleCount > itemsShown ? (
               <CustomLeftArrow />
             ) : undefined
           }
           customRightArrow={
-            !isDesigner && showArrows && !arrowsOutside ? (
+            !isDesigner &&
+            showArrows &&
+            !arrowsOutside &&
+            visibleCount > itemsShown ? (
               <CustomRightArrow />
             ) : undefined
           }
@@ -831,6 +909,15 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           </>
         ) : null}
       </div>
+
+      {/*
+        LAST, not first. It is `display:none` either way and these rules are
+        order-independent, but rendered ahead of the carousel it would occupy
+        child index 0 for exactly one paint and shift every sibling index —
+        a hazard for anything reading children positionally, bought for
+        nothing.
+      */}
+      {carouselSsr.gateStyle}
     </div>
   );
 };

package/src/blocks/video-block.tsx

@@ -249,16 +249,55 @@ const VideoBlock = ({
     );
   }
 
+  /**
+   * Read through the breakpoint, the way `aspect-ratio` above already is.
+   *
+   * The editor stores every one of these per breakpoint — `{ desktop: false }`,
+   * not `false`. So `properties.controls !== false` was comparing an OBJECT to
+   * `false`, which is never equal, and controls were on for every video whatever
+   * the merchant chose. Nobody saw it because nothing painted a video before
+   * hydration; with the slides now server-rendered, a cold load would paint a
+   * full-width native control bar under the header.
+   *
+   * `poster` had the mirror of the same defect: `typeof properties.poster ===
+   * 'string'` is false for the per-breakpoint object the editor writes, so a
+   * poster a merchant typed was stored, shown in the panel and silently
+   * dropped.
+   *
+   * `autoplay`, `loop` and `muted` are DELIBERATELY left reading raw. They have
+   * the same defect pointing the other way: their stored value is an object,
+   * an object is truthy, and only the bug makes them true. Reading them
+   * correctly here would switch autoplay and loop OFF on every composition
+   * already published — a behaviour change that needs its own ticket, not a
+   * side effect of this one. `buildEmbedParams` reads all four raw for the
+   * same reason, and is left alone with them.
+   *
+   * `playsInline` is a FOURTH exclusion, and named here so its absence reads
+   * as a decision rather than an oversight. Its defect is identical to
+   * `controls` — same shape, same direction, same element — but the
+   * consequence is not: reading it correctly would let a merchant's stored
+   * `false` through, and an iPhone would then take the video fullscreen on
+   * play instead of keeping it in the page. That is a shopper-visible
+   * playback change on every placed composition, which belongs with the
+   * autoplay ticket. The control bar this ticket exists to remove is a
+   * painting problem; fullscreen playback is not.
+   */
+  const controls =
+    getResponsiveValue(properties.controls, currentBreakpoint, true) !== false;
+  const poster = getResponsiveValue(
+    properties.poster,
+    currentBreakpoint,
+    undefined
+  );
+
   return (
     <video
       src={parsed.src}
-      controls={properties.controls !== false}
+      controls={controls}
       autoPlay={properties.autoplay}
       loop={properties.loop}
       muted={properties.muted}
-      poster={
-        typeof properties.poster === 'string' ? properties.poster : undefined
-      }
+      poster={typeof poster === 'string' && poster ? poster : undefined}
       // Without it iOS opens the video full screen, which is never what an
       // inline background clip is for.
       playsInline={properties.playsInline !== false}

package/src/sections/posts-slider-section.tsx

@@ -19,6 +19,7 @@ import {
   SECTION_CONTENT_ATTRIBUTE
 } from '../utils';
 import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../utils/breakpoints';
+import { useCarouselSsr } from '../utils/carousel-ssr';
 import {
   findSliderArrowBlocks,
   isSliderArrowIconBlock,
@@ -483,6 +484,31 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   const useInfinite = infinite && hasMultipleSlides;
   const useAutoPlay = autoPlay && hasMultipleSlides;
 
+  /*
+   * Hoisted out of the JSX so the SSR gate can be keyed to the identical
+   * string. This key carries `currentBreakpoint`, which means switching device
+   * in the editor REMOUNTS the carousel — and a fresh mount is a fresh
+   * `domLoaded: false`, so the library is momentarily back in its SSR state and
+   * needs the gated stylesheet back with it. `slider-block`'s key does not
+   * carry the breakpoint, so only this file has that second window.
+   *
+   * The breakpoint stays in the key. Dropping it would be the smaller change on
+   * paper, but in the designer `carouselResponsive` collapses to a single band
+   * built FROM `currentBreakpoint`, and the library only re-reads `responsive`
+   * in `setItemsToShow` — which runs on mount and on resize, not on a prop
+   * change. Without the remount, switching device in the editor would leave the
+   * canvas showing the previous breakpoint's item count.
+   */
+  const carouselKey = `${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`;
+
+  // Server-render the slides. Without this the strip ships an empty track and
+  // occupies no height until hydration — see `utils/carousel-ssr`.
+  const carouselSsr = useCarouselSsr({
+    id: section.id,
+    remountKey: carouselKey,
+    responsive: carouselResponsive
+  });
+
   /**
    * Edge treatment: cards flush to the band, and a lead-in only at the start.
    *
@@ -832,10 +858,26 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
        * `slides` part — `generatePartCSS` emits it against this attribute — so
        * padding it does not move anything but the cards.
        */}
-      <div data-part="slides">
+      <div data-part="slides" {...carouselSsr.gateProps}>
         <Carousel
-          key={`${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+          key={carouselKey}
           responsive={carouselResponsive}
+          /*
+           * `deviceType` is a CONSTANT LITERAL and must stay one. It names a
+           * key of `carouselResponsive`.
+           *
+           * NOT for the reason it looks like. `currentBreakpoint` starts at
+           * `'desktop'` on both sides, so the client's FIRST render agrees
+           * with the server either way — passing it would not trip React's
+           * hydration check, and a reader who tests only that will conclude it
+           * is safe. The harm lands after mount: the effect in
+           * `theme-placeholder-wrapper` measures the viewport and moves the
+           * prop, and the library reads `responsive[deviceType]` on its own
+           * schedule rather than on prop change. A moving `deviceType` also
+           * names a key that may not exist in a map the designer collapsed to
+           * one band. See `utils/carousel-ssr`.
+           */
+          {...carouselSsr.carouselProps}
           {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
           swipeable={true}
           draggable={true}
@@ -851,7 +893,7 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
           rewindWithAnimation={useInfinite}
           autoPlay={useAutoPlay}
           autoPlaySpeed={autoPlaySpeed}
-          containerClass="posts-slider-carousel"
+          containerClass={`posts-slider-carousel ${carouselSsr.scopeClass}`}
           dotListClass="posts-slider-dots"
           /*
            * Spread conditionally so a slider that has not opted in is handed
@@ -978,6 +1020,14 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
             );
           })}
         </Carousel>
+
+        {/*
+          LAST, not first — see the same note in `slider-block`. Rendered ahead
+          of the carousel it would hold child index 0 for one paint and shift
+          every sibling index, for no benefit a `display:none` element gains
+          from being early.
+        */}
+        {carouselSsr.gateStyle}
       </div>
 
       {/*

package/src/utils/__tests__/breakpoint-cascade.test.ts

@@ -349,3 +349,45 @@ describe('visibility rules survive the third breakpoint', () => {
     expect(isBreakpointAllowed(['desktop', 'tablet'], 'mobile')).toBe(false);
   });
 });
+
+describe('the carousel switches where the stylesheet switches', () => {
+  /**
+   * The last reader still drawing its own line.
+   *
+   * `slider-block` hard-coded `desktop: { min: 768 }` / `mobile: { max: 768 }`
+   * into the responsive map it hands `react-multi-carousel`, so between 768 and
+   * 1023 one slider showed the DESKTOP item count inside a box this generator
+   * had already sized as mobile. It reads the shared constants now, which is
+   * what lets the gated stylesheet in `utils/carousel-ssr` — the sheet that
+   * gives a slider its height before it hydrates — be generated from that same
+   * map without inheriting a disagreement.
+   */
+  const sliderCarouselBands = {
+    desktop: { breakpoint: { max: 4000, min: DESKTOP_MIN_WIDTH }, items: 4 },
+    mobile: { breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: 0 }, items: 1 }
+  };
+
+  it('ends the narrow band exactly where the mobile query ends', () => {
+    expect(MOBILE_MEDIA_QUERY).toContain(
+      `max-width: ${sliderCarouselBands.mobile.breakpoint.max}px`
+    );
+  });
+
+  it('leaves no width unclaimed and no width claimed twice', () => {
+    expect(sliderCarouselBands.desktop.breakpoint.min).toBe(
+      sliderCarouselBands.mobile.breakpoint.max + 1
+    );
+  });
+
+  it('puts a tablet width in the band the cascade puts it in', () => {
+    // 900px reads the mobile value everywhere else in this file; the carousel
+    // used to call it desktop.
+    const width = 900;
+    expect(breakpointForWidth(width)).toBe('tablet');
+    expect(isNarrowBreakpoint(breakpointForWidth(width))).toBe(true);
+    expect(width).toBeLessThan(sliderCarouselBands.desktop.breakpoint.min);
+    expect(width).toBeLessThanOrEqual(
+      sliderCarouselBands.mobile.breakpoint.max
+    );
+  });
+});

package/src/utils/__tests__/carousel-ssr.test.ts

@@ -0,0 +1,180 @@
+/**
+ * The gated stylesheet that lets a carousel have height before it hydrates.
+ *
+ * What is worth pinning here is not that a string was produced but that it
+ * agrees with two things it has no direct link to: the inline styles the
+ * carousel library writes on each slide, and the responsive map the same call
+ * site hands that library. Both agreements are silent when they break — the
+ * slides simply resize at hydration — so they are asserted against the
+ * library's OWN width function rather than against a number retyped here.
+ */
+import {
+  buildCarouselSsrCss,
+  carouselSsrScopeId,
+  CAROUSEL_SSR_DEVICE_TYPE,
+  CAROUSEL_SSR_GATE_ATTRIBUTE,
+  CAROUSEL_SSR_SCOPE_PREFIX,
+  CarouselResponsiveMap
+} from '../carousel-ssr';
+import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../breakpoints';
+
+// The library's own maths, imported rather than reimplemented.
+const { getWidthFromDeviceType } =
+  require('react-multi-carousel/lib/utils/elementWidth') as {
+    getWidthFromDeviceType: (
+      deviceType: string,
+      responsive: CarouselResponsiveMap
+    ) => string | undefined;
+  };
+
+/** `slider-block`'s two bands. */
+const twoBand = (desktopItems = 4, mobileItems = 1): CarouselResponsiveMap => ({
+  desktop: {
+    breakpoint: { max: 4000, min: DESKTOP_MIN_WIDTH },
+    items: desktopItems
+  },
+  mobile: {
+    breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: 0 },
+    items: mobileItems
+  }
+});
+
+/** `posts-slider-section`'s three. */
+const threeBand = (): CarouselResponsiveMap => ({
+  desktop: { breakpoint: { max: 3000, min: DESKTOP_MIN_WIDTH }, items: 4 },
+  tablet: {
+    breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: TABLET_MIN_WIDTH },
+    items: 3
+  },
+  mobile: { breakpoint: { max: TABLET_MIN_WIDTH - 1, min: 0 }, items: 2 }
+});
+
+/** Every `@media` prelude in the sheet, in source order. */
+const mediaPreludes = (css: string): string[] =>
+  (css.match(/@media[^{]+/g) || []).map((prelude) => prelude.trim());
+
+describe('the sheet is anchored on the gate, so it dies when the gate does', () => {
+  it('puts the gate attribute at the head of every selector it writes', () => {
+    const css = buildCarouselSsrCss('slider1', twoBand());
+    const selectors = css.match(/\[data-[^{]+?\{/g) || [];
+
+    expect(selectors.length).toBeGreaterThan(0);
+    selectors.forEach((selector) => {
+      expect(selector).toContain(`[${CAROUSEL_SSR_GATE_ATTRIBUTE}="slider1"]`);
+    });
+  });
+
+  it('narrows every selector to this carousel, so a nested slider is untouched', () => {
+    const css = buildCarouselSsrCss('slider1', twoBand());
+    expect(css).toContain(`.${CAROUSEL_SSR_SCOPE_PREFIX}slider1>`);
+    // A bare descendant match would also reach a slider nested inside one of
+    // this slider's own slides and restyle it with the wrong item count.
+    expect(css).not.toMatch(/\]\s+\.react-multi-carousel-track/);
+  });
+
+  it('sanitises an authored id before it reaches a selector', () => {
+    // Block ids are authored data and land inside both an attribute selector
+    // and a class name, so what matters is that nothing survives that could
+    // close either one.
+    const escaped = carouselSsrScopeId('a"] , * {color:red} [x="b');
+    expect(escaped).toMatch(/^[a-zA-Z0-9_-]+$/);
+    expect(buildCarouselSsrCss(escaped, twoBand())).not.toContain('color:red');
+
+    // NULL, not a shared literal. A fallback id would hand every id-less
+    // carousel on a page the same gate value and the same scope class, so each
+    // one's stylesheet would restyle the other's slides with the wrong item
+    // count. Refusing to scope keeps the carousel on its pre-SSR behaviour,
+    // which is a visible bug rather than a wrong layout.
+    expect(carouselSsrScopeId(undefined)).toBeNull();
+    expect(carouselSsrScopeId('')).toBeNull();
+    expect(carouselSsrScopeId('!!!')).toBeNull();
+  });
+});
+
+describe('width:100% on the track, which is what gives the band its height', () => {
+  it('is the unconditional rule', () => {
+    expect(buildCarouselSsrCss('s', twoBand())).toContain(
+      '>.react-multi-carousel-track{width:100%;}'
+    );
+  });
+});
+
+describe('the gated media queries and the responsive map agree', () => {
+  it('writes no rule for the band the library already sized inline', () => {
+    const css = buildCarouselSsrCss('s', twoBand());
+    // The desktop band's own width is the inline `flex` the library wrote.
+    expect(css).not.toContain(`(min-width:${DESKTOP_MIN_WIDTH}px)`);
+  });
+
+  it('starts desktop where the responsive map starts it, not at 768', () => {
+    const map = twoBand();
+    const css = buildCarouselSsrCss('s', map);
+
+    // The single non-desktop band ends one pixel below where desktop begins.
+    expect(mediaPreludes(css)).toEqual([
+      `@media (max-width:${map.desktop.breakpoint.min - 1}px)`
+    ]);
+    expect(map.desktop.breakpoint.min).toBe(DESKTOP_MIN_WIDTH);
+  });
+
+  it('derives each query from its own band, for all three of them', () => {
+    const map = threeBand();
+    expect(mediaPreludes(buildCarouselSsrCss('s', map))).toEqual([
+      `@media (min-width:${TABLET_MIN_WIDTH}px) and (max-width:${
+        DESKTOP_MIN_WIDTH - 1
+      }px)`,
+      `@media (max-width:${TABLET_MIN_WIDTH - 1}px)`
+    ]);
+  });
+
+  it('follows the map when the map moves, rather than a number typed here', () => {
+    const moved: CarouselResponsiveMap = {
+      desktop: { breakpoint: { max: 4000, min: 1280 }, items: 4 },
+      mobile: { breakpoint: { max: 1279, min: 0 }, items: 1 }
+    };
+    expect(mediaPreludes(buildCarouselSsrCss('s', moved))).toEqual([
+      '@media (max-width:1279px)'
+    ]);
+  });
+});
+
+describe('the flex basis matches the library, and outranks the library', () => {
+  it('writes the width the library itself would compute for that band', () => {
+    const map = twoBand(4, 2);
+    const css = buildCarouselSsrCss('s', map);
+
+    expect(getWidthFromDeviceType('mobile', map)).toBe('50.0');
+    expect(css).toContain('flex:1 0 50.0% !important;');
+  });
+
+  it('keeps `!important`, because the value it beats is an inline style', () => {
+    // `CarouselItems` writes `style={{ flex: '1 0 <basis>%' }}` on every <li>.
+    // Without `!important` the stylesheet loses to it and a phone paints
+    // desktop-width slides.
+    const css = buildCarouselSsrCss('s', twoBand(4, 1));
+    expect(css).toContain('flex:1 0 100.0% !important;');
+  });
+
+  it('targets the slides, not the track, for the width override', () => {
+    expect(buildCarouselSsrCss('s', twoBand())).toContain(
+      '.react-multi-carousel-track>li{flex:'
+    );
+  });
+
+  it('skips a band the library could not size either', () => {
+    const broken: CarouselResponsiveMap = {
+      desktop: { breakpoint: { max: 4000, min: DESKTOP_MIN_WIDTH }, items: 4 },
+      mobile: { breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: 0 }, items: 0 }
+    };
+    expect(getWidthFromDeviceType('mobile', broken)).toBe('Infinity');
+    expect(buildCarouselSsrCss('s', broken)).not.toContain('@media');
+  });
+});
+
+describe('the device type is a literal', () => {
+  it('names a band every call site actually declares', () => {
+    expect(CAROUSEL_SSR_DEVICE_TYPE).toBe('desktop');
+    expect(twoBand()[CAROUSEL_SSR_DEVICE_TYPE]).toBeDefined();
+    expect(threeBand()[CAROUSEL_SSR_DEVICE_TYPE]).toBeDefined();
+  });
+});