feat(editor): breakpoint data display (spike, wip)

editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx

@@ -228,6 +228,7 @@ export function pickCanvasStateFromEditorState(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
+      jsxMetadata: editorState.jsxMetadata,
     }),
   }
 }
@@ -255,6 +256,7 @@ export function pickCanvasStateFromEditorStateWithMetadata(
     propertyControlsInfo: editorState.propertyControlsInfo,
     styleInfoReader: activePlugin.styleInfoFactory({
       projectContents: editorState.projectContents,
+      jsxMetadata: editorState.jsxMetadata,
     }),
   }
 }

editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts

@@ -112,9 +112,12 @@ export function controlWithProps<P>(value: ControlWithProps<P>): ControlWithProp
 
 export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null
 
-export type StyleInfoFactory = (context: {
+export type StyleInfoContext = {
   projectContents: ProjectContentTreeRoot
-}) => StyleInfoReader
+  jsxMetadata: ElementInstanceMetadataMap
+}
+
+export type StyleInfoFactory = (context: StyleInfoContext) => StyleInfoReader
 
 export interface InteractionCanvasState {
   interactionTarget: InteractionTarget

editor/src/components/canvas/canvas-types.ts

@@ -29,7 +29,9 @@ import type {
   CSSOverflow,
   CSSPadding,
   FlexDirection,
+  ParsedCSSProperties,
 } from '../inspector/common/css-utils'
+import type { ScreenSize } from './responsive-types'
 
 export const CanvasContainerID = 'canvas-container'
 export const SceneContainerName = 'scene'
@@ -552,9 +554,26 @@ interface CSSStylePropertyNotParsable {
 
 interface ParsedCSSStyleProperty<T> {
   type: 'property'
-  tags: PropertyTag[]
   propertyValue: JSExpression | PartOfJSXAttributeValue
-  value: T
+  currentVariant: CSSVariant<T>
+  variants?: CSSVariant<T>[]
+}
+
+type StyleModifierMetadata = { type: string; modifierOrigin?: StyleModifierOrigin }
+type StyleHoverModifier = StyleModifierMetadata & { type: 'hover' }
+export type StyleMediaSizeModifier = StyleModifierMetadata & {
+  type: 'media-size'
+  size: ScreenSize
+}
+export type StyleModifier = StyleHoverModifier | StyleMediaSizeModifier
+type InlineModifierOrigin = { type: 'inline' }
+type TailwindModifierOrigin = { type: 'tailwind'; variant: string }
+export type StyleModifierOrigin = InlineModifierOrigin | TailwindModifierOrigin
+
+export type ParsedVariant<T extends keyof StyleInfo> = {
+  parsedValue: NonNullable<ParsedCSSProperties[T]>
+  originalValue: string | number | undefined
+  modifiers?: StyleModifier[]
 }
 
 export type CSSStyleProperty<T> =
@@ -572,16 +591,35 @@ export function cssStylePropertyNotParsable(
   return { type: 'not-parsable', originalValue: originalValue }
 }
 
+export type CSSVariant<T> = {
+  value: T
+  modifiers?: StyleModifier[]
+}
+
+export function cssVariant<T>(value: T, modifiers?: StyleModifier[]): CSSVariant<T> {
+  return { value: value, modifiers: modifiers }
+}
+
 export function cssStyleProperty<T>(
-  value: T,
   propertyValue: JSExpression | PartOfJSXAttributeValue,
+  currentVariant: CSSVariant<T>,
+  variants?: CSSVariant<T>[],
 ): ParsedCSSStyleProperty<T> {
-  return { type: 'property', tags: [], value: value, propertyValue: propertyValue }
+  return {
+    type: 'property',
+    propertyValue: propertyValue,
+    currentVariant: currentVariant,
+    variants: variants ?? [],
+  }
+}
+
+export function screenSizeModifier(size: ScreenSize): StyleMediaSizeModifier {
+  return { type: 'media-size', size: size }
 }
 
 export function maybePropertyValue<T>(property: CSSStyleProperty<T>): T | null {
   if (property.type === 'property') {
-    return property.value
+    return property.currentVariant.value
   }
   return null
 }

editor/src/components/canvas/commands/adjust-css-length-command.ts

@@ -78,6 +78,7 @@ export const runAdjustCssLengthProperties = (
 
   const styleInfoReader = getActivePlugin(withConflictingPropertiesRemoved).styleInfoFactory({
     projectContents: withConflictingPropertiesRemoved.projectContents,
+    jsxMetadata: withConflictingPropertiesRemoved.jsxMetadata,
   })
 
   const styleInfo = styleInfoReader(command.target)

editor/src/components/canvas/commands/set-css-length-command.ts

@@ -87,6 +87,7 @@ export const runSetCssLengthProperty = (
 
   const styleInfo = getActivePlugin(editorStateWithPropsDeleted).styleInfoFactory({
     projectContents: editorStateWithPropsDeleted.projectContents,
+    jsxMetadata: editorStateWithPropsDeleted.jsxMetadata,
   })(command.target)
 
   if (styleInfo == null) {

editor/src/components/canvas/commands/utils/property-utils.ts

@@ -117,8 +117,8 @@ export function getCSSNumberFromStyleInfo(
     return { type: 'not-found' }
   }
 
-  if (prop.type === 'not-parsable' || !isCSSNumber(prop.value)) {
+  if (prop.type === 'not-parsable' || !isCSSNumber(prop.currentVariant.value)) {
     return { type: 'not-css-number' }
   }
-  return { type: 'css-number', number: prop.value }
+  return { type: 'css-number', number: prop.currentVariant.value }
 }

editor/src/components/canvas/controls/select-mode/border-radius-control.tsx

@@ -63,6 +63,7 @@ const borderRadiusSelector = createCachedSelector(
   (store: StyleInfoSubstate) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   (_: MetadataSubstate, x: ElementPath) => x,
   (metadata, styleInfoReader, selectedElement) => {

editor/src/components/canvas/controls/select-mode/flex-gap-control.tsx

@@ -139,6 +139,7 @@ export const FlexGapControl = controlForStrategyMemoized<FlexGapControlProps>((p
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
+          jsxMetadata: store.editor.jsxMetadata,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),

editor/src/components/canvas/controls/select-mode/padding-resize-control.tsx

@@ -362,6 +362,7 @@ export const PaddingResizeControl = controlForStrategyMemoized((props: PaddingCo
   const styleInfoReaderRef = useRefEditorState((store) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   )
 

editor/src/components/canvas/controls/select-mode/remix-scene-label.tsx

@@ -324,6 +324,10 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
           <div data-testid={RemixSceneLabelTestId(props.target)} style={{ gap: 20 }}>
             <span style={{ fontWeight: 600 }}>{scenelabel}</span>{' '}
             <span style={{ fontWeight: 400 }}>{sceneSize}</span>
+            <DeviceSizeButton name='Desktop' sizePx={1024} />
+            <DeviceSizeButton name='Tablet' sizePx={768} />
+            <DeviceSizeButton name='Mobile' sizePx={375} />
+            <DeviceSizeButton name='Reset' sizePx={0} />
           </div>
           <div
             data-testid={RemixSceneLabelPathTestId(props.target)}
@@ -382,3 +386,20 @@ const RemixSceneLabel = React.memo<RemixSceneLabelProps>((props) => {
     </CanvasOffsetWrapper>
   )
 })
+
+const DeviceSizeButton = React.memo<{ name: string; sizePx: number }>((props) => (
+  <span
+    style={{ fontWeight: 400, cursor: 'pointer', marginLeft: 10 }}
+    onClick={(e) => {
+      const scene = document.querySelector('[data-testid=remix-scene]')
+      if (scene != null) {
+        ;(scene as HTMLElement).style.width = props.sizePx === 0 ? '' : `${props.sizePx}px`
+      }
+      e.preventDefault()
+      e.stopPropagation()
+    }}
+    onMouseDown={(e) => e.stopPropagation()}
+  >
+    {props.name}
+  </span>
+))

editor/src/components/canvas/controls/select-mode/subdued-flex-gap-controls.tsx

@@ -43,6 +43,7 @@ export const SubduedFlexGapControl = React.memo<SubduedFlexGapControlProps>((pro
       maybeFlexGapData(
         getActivePlugin(store.editor).styleInfoFactory({
           projectContents: store.editor.projectContents,
+          jsxMetadata: store.editor.jsxMetadata,
         })(selectedElement),
         MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, selectedElement),
       ),

editor/src/components/canvas/controls/select-mode/subdued-padding-control.tsx

@@ -29,6 +29,7 @@ export const SubduedPaddingControl = React.memo<SubduedPaddingControlProps>((pro
   const styleInfoReaderRef = useRefEditorState((store) =>
     getActivePlugin(store.editor).styleInfoFactory({
       projectContents: store.editor.projectContents,
+      jsxMetadata: store.editor.jsxMetadata,
     }),
   )
 

editor/src/components/canvas/plugins/inline-style-plugin.spec.ts

@@ -43,13 +43,11 @@ export var storyboard = (
     const { flexDirection, gap } = styleInfo!
     expect(flexDirection).toMatchObject({
       type: 'property',
-      tags: [],
       value: 'column',
       propertyValue: { value: 'column' },
     })
     expect(gap).toMatchObject({
       type: 'property',
-      tags: [],
       value: cssNumber(2, 'rem'),
       propertyValue: { value: '2rem' },
     })
@@ -110,6 +108,7 @@ function getStyleInfoFromInlineStyle(editor: EditorRenderResult) {
 
   const styleInfoReader = InlineStylePlugin.styleInfoFactory({
     projectContents: projectContents,
+    jsxMetadata: jsxMetadata,
   })
   const styleInfo = styleInfoReader(EP.fromString('sb/scene/div'))
   return styleInfo

editor/src/components/canvas/plugins/inline-style-plugin.ts

@@ -13,6 +13,7 @@ import {
   cssStyleProperty,
   cssStylePropertyNotParsable,
   cssStylePropertyNotFound,
+  cssVariant,
 } from '../canvas-types'
 import { mapDropNulls } from '../../../core/shared/array-utils'
 import { emptyComments, jsExpressionValue } from '../../../core/shared/element-template'
@@ -45,7 +46,7 @@ function getPropertyFromInstance<P extends keyof StyleInfo, T = ParsedCSSPropert
   if (Either.isLeft(parsed) || parsed.value == null) {
     return cssStylePropertyNotParsable(attribute)
   }
-  return cssStyleProperty(parsed.value, attribute)
+  return cssStyleProperty(attribute, cssVariant(parsed.value, []))
 }
 
 export const InlineStylePlugin: StylePlugin = {

editor/src/components/canvas/plugins/style-plugins.ts

@@ -51,12 +51,16 @@ export function deleteCSSProp(property: string): DeleteCSSProp {
 
 export type StyleUpdate = UpdateCSSProp | DeleteCSSProp
 
+export type StylePluginContext = {
+  sceneWidth?: number
+}
 export interface StylePlugin {
   name: string
   styleInfoFactory: StyleInfoFactory
   readStyleFromElementProps: <T extends keyof StyleInfo>(
     attributes: JSXAttributes,
     prop: T,
+    context: StylePluginContext,
   ) => CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null
   updateStyles: (
     editorState: EditorState,
@@ -248,6 +252,7 @@ export function patchRemovedProperties(editorState: EditorState): EditorState {
 
   const styleInfoReader = activePlugin.styleInfoFactory({
     projectContents: editorState.projectContents,
+    jsxMetadata: editorState.jsxMetadata,
   })
 
   const propertiesUpdatedDuringInteraction = getPropertiesUpdatedDuringInteraction(editorState)