Unset properties in style plugins

editor/src/components/canvas/canvas-strategies/strategies/set-flex-gap-strategy.spec.browser2.tsx

@@ -772,6 +772,14 @@ export var storyboard = (
       const div = editor.renderedDOM.getByTestId(DivTestId)
       expect(div.className).toEqual('top-10 left-10 absolute flex flex-row gap-16')
     })
+
+    it('can remove tailwind gap by dragging past threshold', async () => {
+      const editor = await renderTestEditorWithModel(Project, 'await-first-dom-report')
+      await selectComponentsForTest(editor, [EP.fromString('sb/scene/div')])
+      await doGapResize(editor, canvasPoint({ x: -100, y: 0 }))
+      const div = editor.renderedDOM.getByTestId(DivTestId)
+      expect(div.className).toEqual('top-10 left-10 absolute flex flex-row')
+    })
   })
 })
 

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

@@ -442,12 +442,12 @@ export function deleteConflictingPropsForWidthHeight(
   if (propertiesToDelete.length === 0) {
     return editorState
   } else {
-    const { editorStateWithChanges: editorStateWithPropsDeleted } = deleteValuesAtPath(
-      editorState,
-      target,
-      propertiesToDelete,
-    )
+    const result = deleteValuesAtPath(editorState, target, propertiesToDelete)
+
+    if (result == null) {
+      return editorState
+    }
 
-    return editorStateWithPropsDeleted
+    return result.editorStateWithChanges
   }
 }

editor/src/components/canvas/commands/delete-properties-command.ts

@@ -1,13 +1,23 @@
-import type { JSXElement } from '../../../core/shared/element-template'
-import type { EditorState, EditorStatePatch } from '../../../components/editor/store/editor-state'
+import {
+  emptyComments,
+  jsExpressionValue,
+  type JSXElement,
+} from '../../../core/shared/element-template'
+import type {
+  EditorState,
+  EditorStatePatch,
+  UnsetPropertyValues,
+} from '../../../components/editor/store/editor-state'
 import { modifyUnderlyingElementForOpenFile } from '../../../components/editor/store/editor-state'
 import { foldEither } from '../../../core/shared/either'
 import { unsetJSXValuesAtPaths } from '../../../core/shared/jsx-attributes'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
-import type { BaseCommand, CommandFunction, WhenToRun } from './commands'
+import type { BaseCommand, CommandFunctionResult, WhenToRun } from './commands'
 import * as EP from '../../../core/shared/element-path'
 import * as PP from '../../../core/shared/property-path'
 import { patchParseSuccessAtElementPath } from './patch-utils'
+import { mapDropNulls, stripNulls } from '../../../core/shared/array-utils'
+import { applyValuesAtPath } from './adjust-number-command'
 
 export interface DeleteProperties extends BaseCommand {
   type: 'DELETE_PROPERTIES'
@@ -28,19 +38,82 @@ export function deleteProperties(
   }
 }
 
-export const runDeleteProperties: CommandFunction<DeleteProperties> = (
+type PropertiesToUnsetArray = Array<{
+  prop: keyof UnsetPropertyValues
+  value: UnsetPropertyValues[keyof UnsetPropertyValues]
+  path: PropertyPath
+}>
+
+function getUnsetProperties(properties: Array<PropertyPath>): PropertiesToUnsetArray {
+  return mapDropNulls((property) => {
+    if (property.propertyElements.at(0) !== 'style') {
+      return null
+    }
+
+    switch (property.propertyElements.at(1)) {
+      case 'gap':
+        return { prop: 'gap', value: '0px', path: property }
+      default:
+        return null
+    }
+  }, properties)
+}
+
+function getPropertiesToUnset(propertiesToUnset: PropertiesToUnsetArray): UnsetPropertyValues {
+  let result: UnsetPropertyValues = {}
+  for (const { prop, value } of propertiesToUnset) {
+    result[prop] = value
+  }
+  return result
+}
+
+function getPropertiesToUnsetPatches(
   editorState: EditorState,
   command: DeleteProperties,
-) => {
-  // Apply the update to the properties.
-  const { editorStatePatch: propertyUpdatePatch } = deleteValuesAtPath(
+): EditorStatePatch[] {
+  const unsetProperties = getUnsetProperties(command.properties)
+  const partialPropertiesToUnset = getPropertiesToUnset(unsetProperties)
+  const pathString = EP.toString(command.element)
+  const unsetPropertiesPatch: EditorStatePatch = {
+    canvas: {
+      propertiesToUnset: {
+        $set: {
+          ...editorState.canvas.propertiesToUnset,
+          [pathString]: {
+            ...editorState.canvas.propertiesToUnset[pathString],
+            ...partialPropertiesToUnset,
+          },
+        },
+      },
+    },
+  }
+
+  if (command.whenToRun === 'on-complete') {
+    return [unsetPropertiesPatch]
+  }
+
+  const { editorStatePatch: setPropertiesToUnsetValuePatch } = applyValuesAtPath(
     editorState,
     command.element,
-    command.properties,
+    unsetProperties.map(({ path, value }) => ({
+      path: path,
+      value: jsExpressionValue(value, emptyComments),
+    })),
   )
+  return [unsetPropertiesPatch, setPropertiesToUnsetValuePatch]
+}
+
+export const runDeleteProperties = (
+  editorState: EditorState,
+  command: DeleteProperties,
+): CommandFunctionResult => {
+  const result = deleteValuesAtPath(editorState, command.element, command.properties)
+
+  const updatedEditorState = result == null ? editorState : result.editorStateWithChanges
+  const propertiesToUnsetPatches = getPropertiesToUnsetPatches(updatedEditorState, command)
 
   return {
-    editorStatePatches: [propertyUpdatePatch],
+    editorStatePatches: stripNulls([result?.editorStatePatch, ...propertiesToUnsetPatches]),
     commandDescription: `Delete Properties ${command.properties
       .map(PP.toString)
       .join(',')} on ${EP.toUid(command.element)}`,
@@ -51,6 +124,22 @@ export function deleteValuesAtPath(
   editorState: EditorState,
   target: ElementPath,
   properties: Array<PropertyPath>,
+): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } | null {
+  try {
+    return deleteValuesAtPathUnsafe(editorState, target, properties)
+  } catch {
+    return null
+  }
+}
+
+// This function is unsafe, because it calls
+// `transformJSXComponentAtElementPath` internally, and
+// `transformJSXComponentAtElementPath` throws an error if it cannot find an
+// element at the element path passed to it
+function deleteValuesAtPathUnsafe(
+  editorState: EditorState,
+  target: ElementPath,
+  properties: Array<PropertyPath>,
 ): { editorStateWithChanges: EditorState; editorStatePatch: EditorStatePatch } {
   const workingEditorState = modifyUnderlyingElementForOpenFile(
     target,

editor/src/components/canvas/commands/set-property-command.ts

@@ -130,7 +130,7 @@ export const runBulkUpdateProperties: CommandFunction<UpdateBulkProperties> = (
     command.properties,
   )
   const withSetProps = applyValuesAtPath(
-    withDeletedProps.editorStateWithChanges,
+    withDeletedProps == null ? editorState : withDeletedProps.editorStateWithChanges,
     command.element,
     propsToSet.map((property) => ({
       path: property.path,

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

@@ -2,11 +2,16 @@ import { getLayoutProperty } from '../../../core/layout/getLayoutProperty'
 import type { StyleLayoutProp } from '../../../core/layout/layout-helpers-new'
 import { MetadataUtils } from '../../../core/model/element-metadata-utils'
 import { defaultEither, isLeft, mapEither, right } from '../../../core/shared/either'
+import * as EP from '../../../core/shared/element-path'
 import type { JSXElement } from '../../../core/shared/element-template'
 import { isJSXElement } from '../../../core/shared/element-template'
+import { typedObjectKeys } from '../../../core/shared/object-utils'
+import * as PP from '../../../core/shared/property-path'
 import { styleStringInArray } from '../../../utils/common-constants'
 import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { withPropertyTag, type WithPropertyTag } from '../canvas-types'
+import { foldAndApplyCommandsSimple } from '../commands/commands'
+import { deleteProperties } from '../commands/delete-properties-command'
 import type { StylePlugin } from './style-plugins'
 
 function getPropertyFromInstance<P extends StyleLayoutProp, T = ParsedCSSProperties[P]>(
@@ -37,5 +42,16 @@ export const InlineStylePlugin: StylePlugin = {
         flexDirection: flexDirection,
       }
     },
-  normalizeFromInlineStyle: (editor) => editor,
+  normalizeFromInlineStyle: (editor, elementsToNormalize) => {
+    return foldAndApplyCommandsSimple(
+      editor,
+      Object.entries(editor.canvas.propertiesToUnset).map(([pathString, propertiesToUnset]) =>
+        deleteProperties(
+          'on-complete',
+          EP.fromString(pathString),
+          typedObjectKeys(propertiesToUnset).map((p) => PP.create('style', p)),
+        ),
+      ),
+    )
+  },
 }

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

@@ -7,6 +7,7 @@ import {
   getTailwindConfigCached,
   isTailwindEnabled,
 } from '../../../core/tailwind/tailwind-compilation'
+import { isFeatureEnabled } from '../../../utils/feature-switches'
 
 export interface StylePlugin {
   name: string
@@ -23,7 +24,7 @@ export const Plugins = {
 } as const
 
 export function getActivePlugin(editorState: EditorState): StylePlugin {
-  if (isTailwindEnabled()) {
+  if (isFeatureEnabled('Tailwind') && isTailwindEnabled()) {
     return TailwindPlugin(getTailwindConfigCached(editorState))
   }
   return InlineStylePlugin