organize types

concrete-utopia · Dec 9, 2024 · 2cdfff2 · 2cdfff2
1 parent 298e9dd
commit 2cdfff2
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 21 deletions.
diff --git a/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts b/editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts
@@ -112,10 +112,12 @@ export function controlWithProps<P>(value: ControlWithProps<P>): ControlWithProp
 
 export type StyleInfoReader = (elementPath: ElementPath) => StyleInfo | null
 
-export type StyleInfoFactory = (context: {
+export type StyleInfoContext = {
   projectContents: ProjectContentTreeRoot
   jsxMetadata: ElementInstanceMetadataMap
-}) => StyleInfoReader
+}
+
+export type StyleInfoFactory = (context: StyleInfoContext) => StyleInfoReader
 
 export interface InteractionCanvasState {
   interactionTarget: InteractionTarget

diff --git a/editor/src/components/canvas/plugins/style-plugins.ts b/editor/src/components/canvas/plugins/style-plugins.ts
@@ -51,15 +51,16 @@ export function deleteCSSProp(property: string): DeleteCSSProp {
 
 export type StyleUpdate = UpdateCSSProp | DeleteCSSProp
 
+export type StylePluginContext = {
+  sceneWidth?: number
+}
 export interface StylePlugin {
   name: string
   styleInfoFactory: StyleInfoFactory
   readStyleFromElementProps: <T extends keyof StyleInfo>(
     attributes: JSXAttributes,
     prop: T,
-    context?: {
-      sceneWidth?: number
-    },
+    context: StylePluginContext,
   ) => CSSStyleProperty<NonNullable<ParsedCSSProperties[T]>> | null
   updateStyles: (
     editorState: EditorState,

diff --git a/...or/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts b/...or/src/components/canvas/plugins/tailwind-style-plugin-utils/tailwind-responsive-utils.ts
@@ -5,6 +5,7 @@ import { extractScreenSizeFromCss } from '../../responsive-utils'
 import { TailwindPropertyMapping } from '../tailwind-style-plugin'
 import { parseTailwindPropertyFactory } from '../tailwind-style-plugin'
 import { getTailwindClassMapping } from '../tailwind-style-plugin'
+import type { StylePluginContext } from '../style-plugins'
 
 export const TAILWIND_DEFAULT_SCREENS = {
   sm: '640px',
@@ -82,9 +83,7 @@ export function getPropertiesToAppliedModifiersMap(
   currentClassNameAttribute: string,
   propertyNames: string[],
   config: Config | null,
-  context: {
-    sceneWidth?: number
-  },
+  context: StylePluginContext,
 ): Record<string, StyleModifier[]> {
   const parseTailwindProperty = parseTailwindPropertyFactory(config, context)
   const classMapping = getTailwindClassMapping(currentClassNameAttribute.split(' '), config)

diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin-utils/update-class-list.ts
@@ -20,6 +20,7 @@ import { applyValuesAtPath } from '../../commands/utils/property-utils'
 import * as PP from '../../../../core/shared/property-path'
 import type { Config } from 'tailwindcss/types/config'
 import { getPropertiesToAppliedModifiersMap } from './tailwind-responsive-utils'
+import type { StylePluginContext } from '../style-plugins'
 
 export type ClassListUpdate =
   | { type: 'add'; property: string; value: string }
@@ -40,9 +41,7 @@ export const runUpdateClassList = (
   element: ElementPath,
   classNameUpdates: ClassListUpdate[],
   config: Config | null,
-  context: {
-    sceneWidth?: number
-  },
+  context: StylePluginContext,
 ): EditorStateWithPatch => {
   const currentClassNameAttribute =
     getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))

diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.ts
@@ -6,7 +6,7 @@ import { getElementFromProjectContents } from '../../editor/store/editor-state'
 import type { ParsedCSSProperties } from '../../inspector/common/css-utils'
 import { cssParsers } from '../../inspector/common/css-utils'
 import { mapDropNulls } from '../../../core/shared/array-utils'
-import type { StylePlugin } from './style-plugins'
+import type { StylePlugin, StylePluginContext } from './style-plugins'
 import type { Config } from 'tailwindcss/types/config'
 import type { ParsedVariant, StyleInfo } from '../canvas-types'
 import { cssStyleProperty, cssVariant, type CSSStyleProperty } from '../canvas-types'
@@ -32,12 +32,7 @@ export type TailwindHoverModifier = { type: 'hover'; value: string }
 export type TailwindGeneralModifier = TailwindMediaModifier | TailwindHoverModifier
 
 export const parseTailwindPropertyFactory =
-  (
-    config: Config | null,
-    context: {
-      sceneWidth?: number
-    },
-  ) =>
+  (config: Config | null, context: StylePluginContext) =>
   <T extends keyof StyleInfo>(
     styleDefinition: StyleValueVariants | undefined,
     prop: T,
@@ -173,9 +168,7 @@ export const TailwindPlugin = (config: Config | null): StylePlugin => {
     readStyleFromElementProps: <P extends keyof StyleInfo>(
       attributes: JSXAttributes,
       prop: P,
-      context?: {
-        sceneWidth?: number
-      },
+      context: StylePluginContext,
     ): CSSStyleProperty<NonNullable<ParsedCSSProperties[P]>> | null => {
       const classNameAttribute = defaultEither(
         null,