Merge branch 'master' into fix/node-module-resolution

editor/package.json

@@ -171,6 +171,7 @@
     "@types/w3c-css-typed-object-model-level-1": "20180410.0.5",
     "@use-it/interval": "0.1.3",
     "@vercel/stega": "0.1.0",
+    "@xengine/tailwindcss-class-parser": "1.1.17",
     "ajv": "6.4.0",
     "anser": "2.1.0",
     "antd": "4.3.5",
@@ -424,6 +425,7 @@
     "source-map-loader": "0.2.3",
     "string-replace-loader": "2.2.0",
     "style-loader": "0.18.2",
+    "tailwindcss": "^3.4.13",
     "tar": "6.0.5",
     "terser-webpack-plugin": "5.3.9",
     "three": "0.140.2",

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

@@ -82,6 +82,7 @@ import { reparentSubjectsForInteractionTarget } from './strategies/reparent-help
 import { getReparentTargetUnified } from './strategies/reparent-helpers/reparent-strategy-parent-lookup'
 import { gridRearrangeResizeKeyboardStrategy } from './strategies/grid-rearrange-keyboard-strategy'
 import createCachedSelector from 're-reselect'
+import { getActivePlugin } from '../plugins/style-plugins'
 
 export type CanvasStrategyFactory = (
   canvasState: InteractionCanvasState,
@@ -202,6 +203,7 @@ export function pickCanvasStateFromEditorState(
   editorState: EditorState,
   builtInDependencies: BuiltInDependencies,
 ): InteractionCanvasState {
+  const activePlugin = getActivePlugin(editorState)
   return {
     builtInDependencies: builtInDependencies,
     interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
@@ -214,6 +216,11 @@ export function pickCanvasStateFromEditorState(
     startingElementPathTree: editorState.elementPathTree,
     startingAllElementProps: editorState.allElementProps,
     propertyControlsInfo: editorState.propertyControlsInfo,
+    styleInfoReader: activePlugin.styleInfoFactory({
+      projectContents: editorState.projectContents,
+      metadata: editorState.jsxMetadata,
+      elementPathTree: editorState.elementPathTree,
+    }),
   }
 }
 
@@ -224,6 +231,8 @@ export function pickCanvasStateFromEditorStateWithMetadata(
   metadata: ElementInstanceMetadataMap,
   allElementProps?: AllElementProps,
 ): InteractionCanvasState {
+  const activePlugin = getActivePlugin(editorState)
+
   return {
     builtInDependencies: builtInDependencies,
     interactionTarget: getInteractionTargetFromEditorState(editorState, localSelectedViews),
@@ -236,6 +245,11 @@ export function pickCanvasStateFromEditorStateWithMetadata(
     startingElementPathTree: editorState.elementPathTree, // IMPORTANT! This isn't based on the passed in metadata
     startingAllElementProps: allElementProps ?? editorState.allElementProps,
     propertyControlsInfo: editorState.propertyControlsInfo,
+    styleInfoReader: activePlugin.styleInfoFactory({
+      projectContents: editorState.projectContents,
+      metadata: metadata,
+      elementPathTree: editorState.elementPathTree,
+    }),
   }
 }