feat(editor): show correct responsive value according to breakpoint (#…

…6723)

This PR adds the ability to display the correct value in the controller
according to the Scene size.
For example - if the element has `className='pt-[20px] lg:pt-[150px]
md:pt-[110px]`, and the Scene has a width of `1000px` (which is larger
than `md` but smaller than `lg`) - the `paddingTop` control will
correctly show `110px`.

**Details:**
- This PR augments `ParsedCSSStyleProperty`, so instead of containing
just the `value` it now holds:
- a list of `variants` (the possible values and for each one the
`modifier`s that when applied, the value is chosen. a screen size is a
modifier)
- the `currentVariant` - which is the value that is currently selected
according to the Scene size.
- After parsing the Tailwind classes using the 3rd-party parser (as
before), we call `getModifiers`, that converts the Tailwind specific
variants from the parser representation that looks like:
```ts
{type: 'media', value: 'sm'}
``` 
to our generic representation:
```ts
{
  type: 'media-size',
  size: {
    min: { value: 0, unit: 'px' },
    max: { value: 100, unit: 'em' }
  }
}
```
- The `getModifiers` function uses an interal
`screensConfigToScreenSizes` function - that parses the Tailwind config
to have a map of `<screenAlias>` to `ScreenSize`
- Both are covered in tests in `tailwind-responsive-utils.spec.ts`
- This PR uses the utils that were merged in #6716 (specifically
`selectValueByBreakpoint` to select the best matching variant)

**Example (note that this PR *does not* contain the Scene resize
buttons):**
<video
src="https://github.com/user-attachments/assets/90bb37ee-9aae-4563-9ddc-57a869a69ad5"></video>

**Manual Tests:**
I hereby swear that:

- [X] I opened a hydrogen project and it loaded
- [X] I could navigate to various routes in Play mode

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

@@ -29,6 +29,7 @@ import type {
   CSSOverflow,
   CSSPadding,
   FlexDirection,
+  ParsedCSSProperties,
 } from '../inspector/common/css-utils'
 import type { ScreenSize } from './responsive-types'
 
@@ -553,17 +554,27 @@ interface CSSStylePropertyNotParsable {
 
 interface ParsedCSSStyleProperty<T> {
   type: 'property'
-  tags: PropertyTag[]
   propertyValue: JSExpression | PartOfJSXAttributeValue
-  value: T
+  currentVariant: CSSVariant<T>
+  variants?: CSSVariant<T>[]
 }
 
-type StyleHoverModifier = { type: 'hover' }
-export type StyleMediaSizeModifier = {
+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> =
   | CSSStylePropertyNotFound
@@ -580,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/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/plugins/inline-style-plugin.spec.ts

@@ -43,15 +43,21 @@ export var storyboard = (
     const { flexDirection, gap } = styleInfo!
     expect(flexDirection).toMatchObject({
       type: 'property',
-      tags: [],
-      value: 'column',
+      currentVariant: { value: 'column' },
       propertyValue: { value: 'column' },
+      variants: [{ value: 'column' }],
     })
     expect(gap).toMatchObject({
       type: 'property',
-      tags: [],
-      value: cssNumber(2, 'rem'),
+      currentVariant: {
+        value: cssNumber(2, 'rem'),
+      },
       propertyValue: { value: '2rem' },
+      variants: [
+        {
+          value: cssNumber(2, 'rem'),
+        },
+      ],
     })
   })
 

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,8 @@ function getPropertyFromInstance<P extends keyof StyleInfo, T = ParsedCSSPropert
   if (Either.isLeft(parsed) || parsed.value == null) {
     return cssStylePropertyNotParsable(attribute)
   }
-  return cssStyleProperty(parsed.value, attribute)
+  const currentVariant = cssVariant(parsed.value, [])
+  return cssStyleProperty(attribute, currentVariant, [currentVariant])
 }
 
 export const InlineStylePlugin: StylePlugin = {

editor/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.spec.ts

@@ -0,0 +1,263 @@
+import type { Config } from 'tailwindcss/types/config'
+import { getModifiers, screensConfigToScreenSizes } from './tailwind-responsive-utils'
+
+describe('getModifiers', () => {
+  it('returns empty array for non-media variants', () => {
+    const variants = [{ type: 'hover', value: 'hover' }]
+    const config: Config = { theme: { screens: {} } } as Config
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([])
+  })
+
+  it('handles default screen sizes correctly', () => {
+    const variants = [{ type: 'media', value: 'md' }]
+    const config = null // null config should use defaults
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 768, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'md' },
+      },
+    ])
+  })
+
+  it('handles custom screen sizes from config', () => {
+    const variants = [{ type: 'media', value: 'custom' }]
+    const config = {
+      theme: {
+        screens: {
+          custom: '1000px',
+        },
+      },
+    } as unknown as Config
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 1000, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'custom' },
+      },
+    ])
+  })
+
+  it('handles custom screen sizes from config with mixed units', () => {
+    const variants = [
+      { type: 'media', value: 'custom' },
+      { type: 'media', value: 'custom2' },
+    ]
+    const config = {
+      theme: {
+        screens: {
+          custom: { min: '10px', max: '20em' },
+          custom2: '30vh',
+        },
+      },
+    } as unknown as Config
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 10, unit: 'px' },
+          max: { value: 20, unit: 'em' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'custom' },
+      },
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 30, unit: 'vh' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'custom2' },
+      },
+    ])
+  })
+
+  it('handles min-max range screen sizes', () => {
+    const variants = [{ type: 'media', value: 'tablet' }]
+    const config = {
+      theme: {
+        screens: {
+          tablet: { min: '768px', max: '1024px' },
+        },
+      },
+    } as unknown as Config
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 768, unit: 'px' },
+          max: { value: 1024, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'tablet' },
+      },
+    ])
+  })
+
+  it('handles extended screen sizes', () => {
+    const variants = [{ type: 'media', value: 'extra' }]
+    const config = {
+      theme: {
+        screens: {
+          sm: '640px',
+        },
+        extend: {
+          screens: {
+            extra: '1400px',
+          },
+        },
+      },
+    } as unknown as Config
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 1400, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'extra' },
+      },
+    ])
+  })
+
+  it('handles multiple media variants', () => {
+    const variants = [
+      { type: 'media', value: 'sm' },
+      { type: 'media', value: 'lg' },
+    ]
+    const config = null // use defaults
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 640, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'sm' },
+      },
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 1024, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'lg' },
+      },
+    ])
+  })
+
+  it('filters out invalid screen sizes', () => {
+    const variants = [
+      { type: 'media', value: 'invalid' },
+      { type: 'media', value: 'md' },
+    ]
+    const config = null // use defaults
+
+    const result = getModifiers(variants, config)
+    expect(result).toEqual([
+      {
+        type: 'media-size',
+        size: {
+          min: { value: 768, unit: 'px' },
+        },
+        modifierOrigin: { type: 'tailwind', variant: 'md' },
+      },
+    ])
+  })
+})
+
+describe('screensConfigToScreenSizes', () => {
+  it('returns default screen sizes when config is null', () => {
+    const result = screensConfigToScreenSizes(null)
+    expect(result).toEqual({
+      sm: { min: { value: 640, unit: 'px' } },
+      md: { min: { value: 768, unit: 'px' } },
+      lg: { min: { value: 1024, unit: 'px' } },
+      xl: { min: { value: 1280, unit: 'px' } },
+      '2xl': { min: { value: 1536, unit: 'px' } },
+    })
+  })
+
+  it('handles custom screen sizes', () => {
+    const config = {
+      theme: {
+        screens: {
+          mobile: '400px',
+          tablet: '800px',
+        },
+      },
+    } as unknown as Config
+
+    const result = screensConfigToScreenSizes(config)
+    expect(result).toEqual({
+      mobile: { min: { value: 400, unit: 'px' } },
+      tablet: { min: { value: 800, unit: 'px' } },
+    })
+  })
+
+  it('handles min-max range screen sizes', () => {
+    const config = {
+      theme: {
+        screens: {
+          tablet: { min: '768px', max: '1024px' },
+        },
+      },
+    } as unknown as Config
+
+    const result = screensConfigToScreenSizes(config)
+    expect(result).toEqual({
+      tablet: {
+        min: { value: 768, unit: 'px' },
+        max: { value: 1024, unit: 'px' },
+      },
+    })
+  })
+
+  it('merges extended screen sizes with base config', () => {
+    const config = {
+      theme: {
+        screens: {
+          sm: '640px',
+        },
+        extend: {
+          screens: {
+            custom: '1400px',
+          },
+        },
+      },
+    } as unknown as Config
+
+    const result = screensConfigToScreenSizes(config)
+    expect(result).toEqual({
+      sm: { min: { value: 640, unit: 'px' } },
+      custom: { min: { value: 1400, unit: 'px' } },
+    })
+  })
+
+  it('handles empty config objects', () => {
+    const config = {
+      theme: {},
+    } as unknown as Config
+
+    const result = screensConfigToScreenSizes(config)
+    expect(result).toEqual({
+      sm: { min: { value: 640, unit: 'px' } },
+      md: { min: { value: 768, unit: 'px' } },
+      lg: { min: { value: 1024, unit: 'px' } },
+      xl: { min: { value: 1280, unit: 'px' } },
+      '2xl': { min: { value: 1536, unit: 'px' } },
+    })
+  })
+})