feat(editor): update correct breakpoint value

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

@@ -1,8 +1,11 @@
 import type { Config } from 'tailwindcss/types/config'
-import { type StyleMediaSizeModifier, type StyleModifier } from '../../canvas-types'
+import { isStyleInfoKey, type StyleMediaSizeModifier, type StyleModifier } from '../../canvas-types'
 import type { ScreenSize } from '../../responsive-types'
 import { extractScreenSizeFromCss } from '../../responsive-utils'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
+import { getTailwindClassMapping, TailwindPropertyMapping } from '../tailwind-style-plugin'
+import { parseTailwindPropertyFactory } from '../tailwind-style-plugin'
+import type { StylePluginContext } from '../style-plugins'
 
 export const TAILWIND_DEFAULT_SCREENS = {
   sm: '640px',
@@ -73,3 +76,38 @@ export function getModifiers(
     })
     .filter((m): m is StyleMediaSizeModifier => m != null)
 }
+
+export function getPropertiesToAppliedModifiersMap(
+  currentClassNameAttribute: string,
+  propertyNames: string[],
+  config: Config | null,
+  context: StylePluginContext,
+): Record<string, StyleModifier[]> {
+  const parseTailwindProperty = parseTailwindPropertyFactory(config, context)
+  const classMapping = getTailwindClassMapping(currentClassNameAttribute.split(' '), config)
+  return propertyNames.reduce((acc, propertyName) => {
+    if (!isStyleInfoKey(propertyName)) {
+      return acc
+    }
+    const parsedProperty = parseTailwindProperty(
+      classMapping[TailwindPropertyMapping[propertyName]],
+      propertyName,
+    )
+    if (parsedProperty?.type == 'property' && parsedProperty.currentVariant.modifiers != null) {
+      return {
+        ...acc,
+        [propertyName]: parsedProperty.currentVariant.modifiers,
+      }
+    } else {
+      return acc
+    }
+  }, {} as Record<string, StyleModifier[]>)
+}
+
+export function getTailwindVariantFromAppliedModifier(
+  appliedModifier: StyleMediaSizeModifier | null,
+): string | null {
+  return appliedModifier?.modifierOrigin?.type === 'tailwind'
+    ? appliedModifier.modifierOrigin.variant
+    : null
+}

editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts

@@ -2,7 +2,10 @@ import type { ElementPath } from 'utopia-shared/src/types'
 import { emptyComments } from 'utopia-shared/src/types'
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { jsExpressionValue } from '../../../../core/shared/element-template'
-import type { PropertiesToUpdate } from '../../../../core/tailwind/tailwind-class-list-utils'
+import type {
+  PropertiesToRemove,
+  PropertiesToUpdate,
+} from '../../../../core/tailwind/tailwind-class-list-utils'
 import {
   getParsedClassList,
   removeClasses,
@@ -17,6 +20,8 @@ import type { EditorStateWithPatch } from '../../commands/utils/property-utils'
 import { applyValuesAtPath } from '../../commands/utils/property-utils'
 import * as PP from '../../../../core/shared/property-path'
 import type { Config } from 'tailwindcss/types/config'
+import type { StylePluginContext } from '../style-plugins'
+import { getPropertiesToAppliedModifiersMap } from './tailwind-responsive-utils'
 
 export type ClassListUpdate =
   | { type: 'add'; property: string; value: string }
@@ -37,27 +42,54 @@ export const runUpdateClassList = (
   element: ElementPath,
   classNameUpdates: ClassListUpdate[],
   config: Config | null,
+  context: StylePluginContext,
 ): EditorStateWithPatch => {
   const currentClassNameAttribute =
     getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))
       ?.value ?? ''
 
+  // this will map every property to the modifiers that are currently affecting it
+  const propertyToAppliedModifiersMap = getPropertiesToAppliedModifiersMap(
+    currentClassNameAttribute,
+    classNameUpdates.map((update) => update.property),
+    config,
+    context,
+  )
+
   const parsedClassList = getParsedClassList(currentClassNameAttribute, config)
 
-  const propertiesToRemove = mapDropNulls(
-    (update) => (update.type !== 'remove' ? null : update.property),
-    classNameUpdates,
+  const propertiesToRemove: PropertiesToRemove = classNameUpdates.reduce(
+    (acc: PropertiesToRemove, val) =>
+      val.type === 'remove'
+        ? {
+            ...acc,
+            [val.property]: {
+              modifiers: propertyToAppliedModifiersMap[val.property] ?? [],
+            },
+          }
+        : acc,
+    {},
   )
 
   const propertiesToUpdate: PropertiesToUpdate = classNameUpdates.reduce(
-    (acc: { [property: string]: string }, val) =>
-      val.type === 'remove' ? acc : { ...acc, [val.property]: val.value },
+    (acc: PropertiesToUpdate, val) =>
+      val.type === 'remove'
+        ? acc
+        : {
+            ...acc,
+            [val.property]: {
+              newValue: val.value,
+              modifiers: propertyToAppliedModifiersMap[val.property] ?? [],
+            },
+          },
     {},
   )
 
   const updatedClassList = [
     removeClasses(propertiesToRemove),
     updateExistingClasses(propertiesToUpdate),
+    // currently we're not adding new breakpoint styles (but only editing current ones),
+    // so we don't need to pass the propertyToAppliedModifiersMap here
     addNewClasses(propertiesToUpdate),
   ].reduce((classList, fn) => fn(classList), parsedClassList)
 

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

@@ -9,6 +9,7 @@ import { TailwindPlugin } from './tailwind-style-plugin'
 import { createModifiedProject } from '../../../sample-projects/sample-project-utils.test-utils'
 import { TailwindConfigPath } from '../../../core/tailwind/tailwind-config'
 import { getTailwindConfigCached } from '../../../core/tailwind/tailwind-compilation'
+import * as StylePlugins from './style-plugins'
 
 const Project = createModifiedProject({
   [StoryboardFilePath]: `
@@ -30,7 +31,7 @@ export var storyboard = (
     >
       <div
         data-uid='div'
-        className='flex flex-row gap-[12px]'
+        className='flex flex-row gap-[12px] pt-[10px] lg:pt-[20px]'
       />
     </Scene>
   </Storyboard>
@@ -40,13 +41,16 @@ export var storyboard = (
   [TailwindConfigPath]: `
     const TailwindConfig = {
         content: [],
-        theme: { extend: { gap: { enormous: '222px' } } }
+        theme: { extend: { gap: { enormous: '222px' }, screens: { lg: '500px' } } }
     }
     export default TailwindConfig
 `,
 })
 
 describe('tailwind style plugin', () => {
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
   it('can set Tailwind class', async () => {
     const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
     const target = EP.fromString('sb/scene/div')
@@ -64,7 +68,7 @@ describe('tailwind style plugin', () => {
       updatedEditor.editorStateWithChanges.projectContents,
     )!
     expect(formatJSXAttributes(normalizedElement.props)).toEqual({
-      className: 'flex flex-col gap-[222px]',
+      className: 'flex flex-col gap-[222px] pt-[10px] lg:pt-[20px]',
       'data-uid': 'div',
     })
   })
@@ -84,7 +88,47 @@ describe('tailwind style plugin', () => {
       updatedEditor.editorStateWithChanges.projectContents,
     )!
     expect(formatJSXAttributes(normalizedElement.props)).toEqual({
-      className: 'flex flex-col gap-enormous',
+      className: 'flex flex-col gap-enormous pt-[10px] lg:pt-[20px]',
+      'data-uid': 'div',
+    })
+  })
+
+  it('can set Tailwind class with size modifier and a custom config', async () => {
+    // this is done since we don't calculate the scene size in the test
+    jest.spyOn(StylePlugins, 'sceneSize').mockReturnValue({ type: 'scene', width: 700 })
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+    const target = EP.fromString('sb/scene/div')
+    const updatedEditor = TailwindPlugin(
+      getTailwindConfigCached(editor.getEditorState().editor),
+    ).updateStyles(editor.getEditorState().editor, target, [
+      { type: 'set', property: 'paddingTop', value: '200px' },
+    ])
+    const normalizedElement = getJSXElementFromProjectContents(
+      target,
+      updatedEditor.editorStateWithChanges.projectContents,
+    )!
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
+      className: 'flex flex-row gap-[12px] pt-[10px] lg:pt-[200px]',
+      'data-uid': 'div',
+    })
+  })
+
+  it('can remove Tailwind class with size modifier and a custom config', async () => {
+    // this is done since we don't calculate the scene size in the test
+    jest.spyOn(StylePlugins, 'sceneSize').mockReturnValue({ type: 'scene', width: 700 })
+    const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+    const target = EP.fromString('sb/scene/div')
+    const updatedEditor = TailwindPlugin(
+      getTailwindConfigCached(editor.getEditorState().editor),
+    ).updateStyles(editor.getEditorState().editor, target, [
+      { type: 'delete', property: 'paddingTop' },
+    ])
+    const normalizedElement = getJSXElementFromProjectContents(
+      target,
+      updatedEditor.editorStateWithChanges.projectContents,
+    )!
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
+      className: 'flex flex-row gap-[12px] pt-[10px]',
       'data-uid': 'div',
     })
   })

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

@@ -279,6 +279,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
       elementPath,
       [...propsToDelete, ...propsToSet],
       config,
+      { sceneSize: getContainingSceneSize(elementPath, editorState.jsxMetadata) },
     )
   },
 })

editor/src/core/tailwind/tailwind-class-list-utils.spec.ts

@@ -141,7 +141,10 @@ describe('tailwind class list utils', () => {
   describe('removing classes', () => {
     it('can remove property', () => {
       const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
-      const updatedClassList = removeClasses(['padding', 'textColor'])(classList)
+      const updatedClassList = removeClasses({
+        padding: { modifiers: [] },
+        textColor: { modifiers: [] },
+      })(classList)
       expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
         `"m-2 w-4 flex flex-row"`,
       )
@@ -151,7 +154,10 @@ describe('tailwind class list utils', () => {
         'p-4 m-2 text-white hover:text-red-100 w-4 flex flex-row',
         null,
       )
-      const updatedClassList = removeClasses(['padding', 'textColor'])(classList)
+      const updatedClassList = removeClasses({
+        padding: { modifiers: [] },
+        textColor: { modifiers: [] },
+      })(classList)
       expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
         `"m-2 hover:text-red-100 w-4 flex flex-row"`,
       )
@@ -162,16 +168,18 @@ describe('tailwind class list utils', () => {
     it('can update class in class list', () => {
       const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
       const updatedClassList = updateExistingClasses({
-        flexDirection: 'column',
-        width: '23px',
+        flexDirection: { newValue: 'column', modifiers: [] },
+        width: { newValue: '23px', modifiers: [] },
       })(classList)
       expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
         `"p-4 m-2 text-white w-[23px] flex flex-col"`,
       )
     })
     it('does not remove property with selector', () => {
       const classList = getParsedClassList('p-4 hover:p-6 m-2 text-white w-4 flex flex-row', null)
-      const updatedClassList = updateExistingClasses({ padding: '8rem' })(classList)
+      const updatedClassList = updateExistingClasses({
+        padding: { newValue: '8rem', modifiers: [] },
+      })(classList)
       expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
         `"p-32 hover:p-6 m-2 text-white w-4 flex flex-row"`,
       )
@@ -182,9 +190,9 @@ describe('tailwind class list utils', () => {
     it('can add new class to class list', () => {
       const classList = getParsedClassList('p-4 m-2 text-white w-4 flex flex-row', null)
       const updatedClassList = addNewClasses({
-        backgroundColor: 'white',
-        justifyContent: 'space-between',
-        positionLeft: '-20px',
+        backgroundColor: { newValue: 'white', modifiers: [] },
+        justifyContent: { newValue: 'space-between', modifiers: [] },
+        positionLeft: { newValue: '-20px', modifiers: [] },
       })(classList)
       expect(getClassListFromParsedClassList(updatedClassList, null)).toMatchInlineSnapshot(
         `"p-4 m-2 text-white w-4 flex flex-row bg-white justify-between -left-[20px]"`,