test with tailwind config

concrete-utopia · Oct 10, 2024 · f8a8a46 · f8a8a46
1 parent 89b3317
commit f8a8a46
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 28 deletions.
diff --git a/editor/src/components/canvas/commands/update-class-list-command.ts b/editor/src/components/canvas/commands/update-class-list-command.ts
@@ -56,16 +56,9 @@ export const runUpdateClassList: CommandFunction<UpdateClassList> = (
 ) => {
   const { element, classNameUpdates } = command
 
-  const currentClassNameAttribute = getClassNameAttribute(
-    getElementFromProjectContents(element, editorState.projectContents),
-  )?.value
-
-  if (currentClassNameAttribute == null) {
-    return {
-      editorStatePatches: [],
-      commandDescription: `Update class list for ${EP.toUid(element)} with ${classNameUpdates}`,
-    }
-  }
+  const currentClassNameAttribute =
+    getClassNameAttribute(getElementFromProjectContents(element, editorState.projectContents))
+      ?.value ?? ''
 
   const parsedClassList = getParsedClassList(
     currentClassNameAttribute,

diff --git a/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts b/editor/src/components/canvas/plugins/tailwind-style-plugin.spec.ts
@@ -1,10 +1,18 @@
 import type { JSXAttributes } from 'utopia-shared/src/types'
 import * as EP from '../../../core/shared/element-path'
-import { getJSXElementFromProjectContents } from '../../editor/store/editor-state'
-import { renderTestEditorWithCode } from '../ui-jsx.test-utils'
+import {
+  getJSXElementFromProjectContents,
+  StoryboardFilePath,
+} from '../../editor/store/editor-state'
+import { renderTestEditorWithCode, renderTestEditorWithModel } from '../ui-jsx.test-utils'
 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'
 
-const Project = `
+const Project = (style: Record<string, unknown>) =>
+  createModifiedProject({
+    [StoryboardFilePath]: `
 import React from 'react'
 import { Scene, Storyboard } from 'utopia-api'
 export var storyboard = (
@@ -23,27 +31,37 @@ export var storyboard = (
     >
       <div
         data-uid='div'
-        className=''
-        style={{
-          top: 2,
-          left: 2,
-          width: 100,
-          height: 100,
-          backgroundColor: 'blue',
-          display: 'flex',
-          flexDirection: 'row',
-          gap: '12px',
-        }}
+        style={${JSON.stringify(style)}}
       />
     </Scene>
   </Storyboard>
 )
 
-`
+`,
+    [TailwindConfigPath]: `
+    const TailwindConfig = {
+        content: [],
+        theme: { extend: { gap: { enormous: '222px' } } }
+    }
+    export default TailwindConfig
+`,
+  })
 
 describe('tailwind style plugin', () => {
   it('can normalize inline style', async () => {
-    const editor = await renderTestEditorWithCode(Project, 'await-first-dom-report')
+    const editor = await renderTestEditorWithModel(
+      Project({
+        top: 2,
+        left: 2,
+        width: 100,
+        height: 100,
+        backgroundColor: 'blue',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '12px',
+      }),
+      'await-first-dom-report',
+    )
     const target = EP.fromString('sb/scene/div')
     const normalizedEditor = TailwindPlugin(null).normalizeFromInlineStyle(
       editor.getEditorState().editor,
@@ -55,15 +73,45 @@ describe('tailwind style plugin', () => {
       normalizedEditor.projectContents,
     )!
 
-    expect(jsxAttributesSlice(normalizedElement.props)).toEqual({
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
       className: 'flex-row gap-[12px]',
       'data-uid': 'div',
       style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
     })
   })
+  it('can normalize inline style with custom Tailwind config', async () => {
+    const editor = await renderTestEditorWithModel(
+      Project({
+        top: 2,
+        left: 2,
+        width: 100,
+        height: 100,
+        backgroundColor: 'blue',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '222px',
+      }),
+      'await-first-dom-report',
+    )
+    const target = EP.fromString('sb/scene/div')
+    const normalizedEditor = TailwindPlugin(
+      getTailwindConfigCached(editor.getEditorState().editor),
+    ).normalizeFromInlineStyle(editor.getEditorState().editor, [target])
+
+    const normalizedElement = getJSXElementFromProjectContents(
+      target,
+      normalizedEditor.projectContents,
+    )!
+
+    expect(formatJSXAttributes(normalizedElement.props)).toEqual({
+      className: 'flex-row gap-enormous',
+      'data-uid': 'div',
+      style: { backgroundColor: 'blue', display: 'flex', height: 100, left: 2, top: 2, width: 100 },
+    })
+  })
 })
 
-function jsxAttributesSlice(attributes: JSXAttributes) {
+function formatJSXAttributes(attributes: JSXAttributes) {
   return attributes.reduce((acc: Record<string, unknown>, attribute) => {
     if (attribute.type === 'JSX_ATTRIBUTES_SPREAD' || attribute.value.type !== 'ATTRIBUTE_VALUE') {
       return acc