Flex wrap control and tailwind (#6666)

**Problem:**
Setting flex wrap doesn't work with tailwind projects.

**Fix:**
I added flexWrap to StyleInfo and to the inline style and tailwind
plugins. After the flex wrap control in the inspector works.

**Note:**
This PR depends on #6668 ,
without that you can't set a flex-wrap property on elements which do not
have it set yet.

**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

Author: gbalint

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

@@ -1,10 +1,8 @@
 import type { ReactElement } from 'react'
 import type { JSExpression, PartOfJSXAttributeValue } from '../../core/shared/element-template'
-import { ElementInstanceMetadataMap } from '../../core/shared/element-template'
 import type { PropertyPath, ElementPath } from '../../core/shared/project-file-types'
 import type { KeysPressed } from '../../utils/keyboard'
 import type { Modifiers } from '../../utils/modifiers'
-import { keepDeepReferenceEqualityIfPossible } from '../../utils/react-performance'
 import type {
   CanvasPoint,
   CanvasRectangle,
@@ -16,20 +14,17 @@ import type {
 import type { EditorPanel } from '../common/actions/index'
 import type { Mode } from '../editor/editor-modes'
 import type { EditorState } from '../editor/store/editor-state'
-import { OriginalCanvasAndLocalFrame } from '../editor/store/editor-state'
-import { isFeatureEnabled } from '../../utils/feature-switches'
-import { assertNever, xor } from '../../core/shared/utils'
+import { assertNever } from '../../core/shared/utils'
 import type { LayoutTargetableProp } from '../../core/layout/layout-helpers-new'
 import type {
   DragInteractionData,
   InteractionSessionWithoutMetadata,
 } from './canvas-strategies/interaction-state'
-import { InteractionSession } from './canvas-strategies/interaction-state'
 import type { CanvasStrategyId } from './canvas-strategies/canvas-strategy-types'
 import type { MouseButtonsPressed } from '../../utils/mouse'
+import type { FlexWrap } from 'utopia-api/core'
 import type {
   CSSBorderRadius,
-  CSSBorderRadiusIndividual,
   CSSNumber,
   CSSOverflow,
   CSSPadding,
@@ -604,6 +599,7 @@ export type PaddingSideInfo = CSSStyleProperty<CSSNumber>
 export type BorderRadiusInfo = CSSStyleProperty<CSSBorderRadius>
 export type BorderRadiusCornerInfo = CSSStyleProperty<CSSNumber>
 export type ZIndexInfo = CSSStyleProperty<CSSNumber>
+export type FlexWrapInfo = CSSStyleProperty<FlexWrap>
 export type OverflowInfo = CSSStyleProperty<CSSOverflow>
 
 export interface StyleInfo {
@@ -627,6 +623,7 @@ export interface StyleInfo {
   borderBottomRightRadius: BorderRadiusCornerInfo | null
   borderBottomLeftRadius: BorderRadiusCornerInfo | null
   zIndex: ZIndexInfo | null
+  flexWrap: FlexWrapInfo | null
   overflow: OverflowInfo | null
 }
 
@@ -651,6 +648,7 @@ const emptyStyleInfo: StyleInfo = {
   borderBottomRightRadius: null,
   borderBottomLeftRadius: null,
   zIndex: null,
+  flexWrap: null,
   overflow: null,
 }
 

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

@@ -90,6 +90,7 @@ export const InlineStylePlugin: StylePlugin = {
         element.props,
       )
       const zIndex = getPropertyFromInstance('zIndex', element.props)
+      const flexWrap = getPropertyFromInstance('flexWrap', element.props)
 
       const overflow = getPropertyFromInstance('overflow', element.props)
 
@@ -114,6 +115,7 @@ export const InlineStylePlugin: StylePlugin = {
         borderBottomRightRadius: borderBottomRightRadius,
         borderBottomLeftRadius: borderBottomLeftRadius,
         zIndex: zIndex,
+        flexWrap: flexWrap,
         overflow: overflow,
       }
     },

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

@@ -183,6 +183,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => ({
           'borderBottomLeftRadius',
         ),
         zIndex: parseTailwindProperty(mapping[TailwindPropertyMapping.zIndex], 'zIndex'),
+        flexWrap: parseTailwindProperty(mapping[TailwindPropertyMapping.flexWrap], 'flexWrap'),
         overflow: parseTailwindProperty(mapping[TailwindPropertyMapping.overflow], 'overflow'),
       }
     },