fix: replace inline styles

Author: stipsan

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui-workshop",
-  "version": "3.2.0-static.1",
+  "version": "3.2.0-static.2",
   "keywords": [
     "sanity",
     "ui",
@@ -109,6 +109,8 @@
   "dependencies": {
     "@sanity/icons": "^3.7.4",
     "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css-utils": "^0.1.6",
+    "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^4.7.0",
     "axe-core": "^4.10.3",

pnpm-lock.yaml

@@ -1,8 +1,14 @@
 import {Card, Container, Flex, Heading, Spinner, Stack, Text} from '@sanity/ui'
-import type {Display} from '@sanity/ui/css'
-import {memo, useMemo, useState} from 'react'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {memo, useState} from 'react'
 
-import {iframe} from '#styles'
+import {
+  iframe,
+  iframeContainer,
+  viewportMaxHeight,
+  viewportMaxWidth,
+  zoom as zoomVar,
+} from '#styles'
 
 import {VIEWPORT_OPTIONS} from './constants'
 import {buildFrameUrl} from './helpers'
@@ -23,27 +29,8 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
     buildFrameUrl({baseUrl: frameUrl, path, payload, scheme, viewport, zoom}),
   )
 
-  const containerStyle = useMemo(
-    () => ({
-      maxWidth: viewportW === 'auto' ? undefined : `${(viewportW || 1) * zoom}px`,
-      maxHeight: viewportH ? `${(viewportH || 1) * zoom}px` : undefined,
-    }),
-    [viewportW, viewportH, zoom],
-  )
-
-  const display = useMemo<Display>(() => (hidden ? 'none' : 'block'), [hidden])
-
-  const frameStyle = useMemo(
-    () => ({
-      transform: `scale(${zoom})`,
-      width: `${100 / zoom}%`,
-      height: `${100 / zoom}%`,
-    }),
-    [zoom],
-  )
-
   return (
-    <Card display={display} flex={1} overflow="hidden" tone="transparent">
+    <Card display={hidden ? 'none' : 'block'} flex={1} overflow="hidden" tone="transparent">
       <Flex align="center" height="fill" justify="center" sizing="border">
         {path === '/' && (
           <Container width={0}>
@@ -59,13 +46,18 @@ export const WorkshopCanvas = memo(function WorkshopCanvas(props: {
         {!frameReady && path !== '/' && <Spinner muted />}
 
         <Container
+          className={iframeContainer}
           height="fill"
           hidden={!frameReady || path === '/'}
-          style={containerStyle}
+          style={assignInlineVars({
+            [viewportMaxWidth]: viewportW === 'auto' ? undefined : `${viewportW}px`,
+            [viewportMaxHeight]: viewportH ? `${viewportH}px` : undefined,
+            [zoomVar]: `${zoom}`,
+          })}
           width="auto"
         >
           <Card height="fill" shadow={1}>
-            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} style={frameStyle} />
+            <iframe className={iframe} ref={frameRef} src={initialFrameUrl} />
           </Card>
         </Container>
       </Flex>

src/core/WorkshopCanvas.tsx

@@ -1,5 +1,7 @@
 import {Card, Layer, Tab, TabList} from '@sanity/ui'
-import {CSSProperties, memo, useCallback, useMemo} from 'react'
+import {memo, useCallback} from 'react'
+
+import {inspectorHeader} from '#styles'
 
 import {InspectorTab} from './types'
 
@@ -10,10 +12,8 @@ export const InspectorHeader = memo(function InspectorHeader(props: {
 }) {
   const {currentTabId, onTabChange, tabs} = props
 
-  const layerStyle: CSSProperties = useMemo(() => ({flex: 'none', position: 'sticky', top: 0}), [])
-
   return (
-    <Layer style={layerStyle}>
+    <Layer className={inspectorHeader} flex="none" position="sticky">
       <Card padding={2} shadow={1}>
         <TabList gap={1}>
           {tabs.map((tab) => (

src/core/inspector/InspectorHeader.tsx

@@ -1,6 +1,8 @@
 import {Breadcrumbs, Text} from '@sanity/ui'
 import {memo, useCallback} from 'react'
 
+import {forceColorInherit} from '#styles'
+
 import {useWorkshop} from '../useWorkshop'
 
 /** @internal */
@@ -43,7 +45,7 @@ const NavbarBreadcrumbsView = memo(function NavbarBreadcrumbsView(props: {
       gap={2}
     >
       <Text size={[2, 2, 1]} weight="bold">
-        <a href="/" onClick={onHomeClick} style={{color: 'inherit'}}>
+        <a className={forceColorInherit} href="/" onClick={onHomeClick}>
           {title}
         </a>
       </Text>

src/core/navbar/NavbarBreadcrumbs.tsx

@@ -2,6 +2,8 @@ import {ControlsIcon, MenuIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Inline, Text, useMediaIndex} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight, forceMinWidth250} from '#styles'
+
 import {useWorkshop} from '../useWorkshop'
 import {NavbarBreadcrumbs} from './NavbarBreadcrumbs'
 import {OpenCanvasButton} from './OpenCanvasButton'
@@ -21,7 +23,7 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
   const {story, title} = useWorkshop()
 
   return (
-    <Card borderBottom flex="none" padding={2} style={{lineHeight: 0}}>
+    <Card className={force0LineHeight} borderBottom flex="none" padding={2}>
       <Flex gap={1}>
         <Box display={['block', 'block', 'none']} flex="none">
           <Button
@@ -36,11 +38,11 @@ export const WorkshopNavbar = memo(function WorkshopNavbar(props: {
         </Box>
 
         <Flex
+          className={forceMinWidth250}
           flex={1}
           justify={['center', 'center', 'flex-start']}
           padding={2}
           sizing="border"
-          style={{minWidth: 250}}
         >
           {mediaIndex < 2 && <Text weight="bold">{story?.title || title}</Text>}
           {mediaIndex >= 2 && <NavbarBreadcrumbs />}

src/core/navbar/WorkshopNavbar.tsx

@@ -4,7 +4,7 @@ import type {Display, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {memo, useCallback, useMemo, useState} from 'react'
 
-import {workshopNavigator} from '#styles'
+import {force0LineHeight, workshopNavigator} from '#styles'
 
 import {WorkshopScope, WorkshopStory} from '../config'
 import {EMPTY_ARRAY} from '../constants'
@@ -14,8 +14,6 @@ import {SearchResults} from './SearchResults'
 import {StoryTree} from './StoryTree'
 import {MenuCollection, MenuList, MenuScope} from './types'
 
-const flexNoneStyle: React.CSSProperties = {flex: 'none'}
-const lineHeightNoneStyle: React.CSSProperties = {lineHeight: 0}
 const textInputFontSize: ResponsiveProp<FontTextSize> = [2, 2, 1]
 
 /** @internal */
@@ -107,8 +105,8 @@ const NavigatorView = memo(function NavigatorView(props: {
       overflow={['hidden', 'hidden', 'auto']}
     >
       <Flex direction="column" height="fill">
-        <Layer style={flexNoneStyle}>
-          <Card padding={2} shadow={1} style={lineHeightNoneStyle}>
+        <Layer flex="none">
+          <Card className={force0LineHeight} padding={2} shadow={1}>
             <TextInput
               border={false}
               clearButton={Boolean(query)}

src/core/navigator/WorkshopNavigator.tsx

@@ -1,6 +1,8 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight} from '#styles'
+
 import {BooleanPropSchema} from '../types'
 import {useProps} from '../useProps'
 
@@ -14,7 +16,7 @@ export const BooleanProp = memo(function BooleanProp(props: {
 
   return (
     <Flex as="label" padding={3}>
-      <Box marginRight={2} style={{lineHeight: 0}}>
+      <Box className={force0LineHeight} marginRight={2}>
         <Checkbox
           checked={value || false}
           onChange={(event) => setPropValue(schema.name, event.currentTarget.checked)}

src/core/plugins/props/components/booleanProp.tsx

@@ -1,5 +1,6 @@
 import {vars} from '@sanity/ui/css'
-import {createViewTransition, globalStyle, style} from '@vanilla-extract/css'
+import {createVar, createViewTransition, globalStyle, style} from '@vanilla-extract/css'
+import {calc} from '@vanilla-extract/css-utils'
 
 globalStyle('html', {
   WebkitTextSizeAdjust: '100%',
@@ -18,21 +19,45 @@ globalStyle('body', {
   overflow: 'hidden',
 })
 
+export const forceMinWidth250 = style({
+  minWidth: '250px !important',
+})
 export const forceMinWidth320 = style({
   minWidth: '320px !important',
 })
+export const force0LineHeight = style({
+  lineHeight: '0 !important',
+})
+export const forceColorInherit = style({
+  color: 'inherit !important',
+})
 
 export const canvasViewTransition = createViewTransition('canvas')
-
+export const zoom = createVar(
+  {
+    syntax: '<number>',
+    inherits: true,
+    initialValue: '1',
+  },
+  'zoom',
+)
 export const iframe = style({
   display: 'block',
   border: 0,
-  height: '100%',
-  width: '100%',
+  transform: `scale(${zoom})`,
   transformOrigin: '0 0',
+  height: calc.divide('100%', zoom),
+  width: calc.divide('100%', zoom),
   viewTransitionName: canvasViewTransition,
 })
 
+export const viewportMaxWidth = createVar('viewport-max-width')
+export const viewportMaxHeight = createVar('viewport-max-height')
+export const iframeContainer = style({
+  maxWidth: calc.multiply(viewportMaxWidth, zoom),
+  maxHeight: calc.multiply(viewportMaxHeight, zoom),
+})
+
 export const workshopInspector = style({
   '@media': {
     'screen and (min-width: 600px)': {
@@ -52,3 +77,7 @@ export const workshopNavigator = style({
     },
   },
 })
+
+export const inspectorHeader = style({
+  top: 0,
+})

src/core/styles.css.ts

@@ -2,6 +2,8 @@ import {PlayIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
 import {memo} from 'react'
 
+import {force0LineHeight} from '#styles'
+
 import {usePerf} from './hooks'
 
 /** @internal */
@@ -26,7 +28,7 @@ export const PerfInspector = memo(function PerfInspector(): React.ReactNode {
         const testResults = results.filter((r) => r.name === detail.name)
 
         return (
-          <Card border key={detail.name} overflow="hidden" radius={2} style={{lineHeight: 0}}>
+          <Card className={force0LineHeight} border key={detail.name} overflow="hidden" radius={2}>
             <Flex>
               <Stack flex={1} padding={2} gap={2}>
                 <Text size={1} weight="semibold">