Support area names in grid templates

editor/src/components/canvas/controls/grid-controls.tsx

@@ -229,6 +229,7 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
           justifyContent: 'center',
           cursor: gridEdgeToCSSCursor(props.axis === 'column' ? 'column-start' : 'row-start'),
           fontSize: 8,
+          position: 'relative',
         }}
         css={{
           opacity: resizing ? 1 : 0.5,
@@ -239,6 +240,10 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
         onMouseDown={mouseDownHandler}
       >
         {props.axis === 'row' ? '↕' : '↔'}
+        {when(
+          props.dimension.areaName != null,
+          <span style={{ position: 'absolute', top: 12 }}>{props.dimension.areaName}</span>,
+        )}
       </div>
       {when(
         resizing,

editor/src/components/editor/store/store-deep-equality-instances.ts

@@ -1970,11 +1970,13 @@ export const CSSNumberKeepDeepEquality: KeepDeepEqualityCall<CSSNumber> = combin
 )
 
 export const GridCSSNumberKeepDeepEquality: KeepDeepEqualityCall<GridCSSNumber> =
-  combine2EqualityCalls(
+  combine3EqualityCalls(
     (cssNum) => cssNum.value,
     createCallWithTripleEquals<number>(),
     (cssNum) => cssNum.unit,
     nullableDeepEquality(createCallWithTripleEquals<GridCSSNumberUnit>()),
+    (cssNum) => cssNum.areaName,
+    nullableDeepEquality(StringKeepDeepEquality),
     gridCSSNumber,
   )
 

editor/src/components/inspector/common/css-utils.spec.ts

@@ -71,6 +71,7 @@ import {
   RegExpLibrary,
   toggleSimple,
   toggleStylePropPath,
+  tokenizeGridTemplate,
 } from './css-utils'
 
 describe('toggleStyleProp', () => {
@@ -1807,3 +1808,34 @@ describe('printBackgroundSize', () => {
     `)
   })
 })
+
+describe('tokenizeGridTemplate', () => {
+  it('tokenizes the grid template strings (no units)', async () => {
+    expect(tokenizeGridTemplate('123 456 78 9')).toEqual(['123', '456', '78', '9'])
+  })
+  it('tokenizes the grid template strings (with units)', async () => {
+    expect(tokenizeGridTemplate('123 456px 78 9rem')).toEqual(['123', '456px', '78', '9rem'])
+  })
+  it('tokenizes the grid template strings (with some area names)', async () => {
+    expect(tokenizeGridTemplate('[foo] 123 456px 78 9rem')).toEqual([
+      '[foo] 123',
+      '456px',
+      '78',
+      '9rem',
+    ])
+    expect(tokenizeGridTemplate('123 [foo]456px 78 [bar]       9rem')).toEqual([
+      '123',
+      '[foo] 456px',
+      '78',
+      '[bar] 9rem',
+    ])
+  })
+  it('tokenizes the grid template strings (with all area names)', async () => {
+    expect(tokenizeGridTemplate('[foo] 123 [bar]456px [baz]       78  [QUX]9rem')).toEqual([
+      '[foo] 123',
+      '[bar] 456px',
+      '[baz] 78',
+      '[QUX] 9rem',
+    ])
+  })
+})

editor/src/components/inspector/common/css-utils.ts

@@ -589,12 +589,18 @@ const GridCSSNumberUnits: Array<GridCSSNumberUnit> = [...LengthUnits, ...Resolut
 export interface GridCSSNumber {
   value: number
   unit: GridCSSNumberUnit | null
+  areaName: string | null
 }
 
-export function gridCSSNumber(value: number, unit: GridCSSNumberUnit | null): GridCSSNumber {
+export function gridCSSNumber(
+  value: number,
+  unit: GridCSSNumberUnit | null,
+  areaName: string | null,
+): GridCSSNumber {
   return {
-    value,
-    unit,
+    value: value,
+    unit: unit,
+    areaName: areaName,
   }
 }
 
@@ -762,7 +768,8 @@ export function printArrayCSSNumber(array: Array<GridCSSNumber>): string {
   return array
     .map((dimension) => {
       const printed = printCSSNumber(dimension, null)
-      return typeof printed === 'string' ? printed : `${printed}`
+      const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
+      return `${areaName}${printed}`
     })
     .join(' ')
 }
@@ -834,13 +841,30 @@ export const parseCSSUnitlessAsNumber = (input: unknown): Either<string, number>
   }
 }
 
+const gridCSSTemplateNumberRegex = /^\[(.+)\]\s*(.+)$/
+
 export function parseToCSSGridNumber(input: unknown): Either<string, GridCSSNumber> {
+  function getParts() {
+    if (typeof input === 'string') {
+      const match = input.match(gridCSSTemplateNumberRegex)
+      if (match != null) {
+        return {
+          areaName: match[1],
+          inputToParse: match[2],
+        }
+      }
+    }
+    return { areaName: null, inputToParse: input }
+  }
+  const { areaName, inputToParse } = getParts()
+
   return mapEither((value) => {
     return {
       value: value.value,
       unit: value.unit as GridCSSNumberUnit | null,
+      areaName: areaName,
     }
-  }, parseCSSGrid(input))
+  }, parseCSSGrid(inputToParse))
 }
 
 export const parseCSSNumber = (
@@ -887,6 +911,27 @@ export function parseGridRange(input: unknown): Either<string, GridRange> {
   }
 }
 
+const reGridAreaNameBrackets = /^\[.+\]$/
+
+export function tokenizeGridTemplate(str: string): string[] {
+  let tokens: string[] = []
+  let parts = str.replace(/\]/g, '] ').split(/\s+/)
+
+  while (parts.length > 0) {
+    const part = parts.shift()?.trim()
+    if (part == null) {
+      break
+    }
+    if (part.match(reGridAreaNameBrackets) != null && parts.length > 0) {
+      const withAreaName = `${part} ${parts.shift()}`
+      tokens.push(withAreaName)
+    } else {
+      tokens.push(part)
+    }
+  }
+  return tokens
+}
+
 export function parseGridAutoOrTemplateBase(
   input: unknown,
 ): Either<string, GridAutoOrTemplateBase> {
@@ -895,7 +940,7 @@ export function parseGridAutoOrTemplateBase(
     return leftMapEither<string, ParseError, GridCSSNumber>(descriptionParseError, result)
   }
   if (typeof input === 'string') {
-    const parsedCSSArray = parseCSSArray([numberParse])(input.split(/ +/))
+    const parsedCSSArray = parseCSSArray([numberParse])(tokenizeGridTemplate(input))
     return bimapEither(
       (error) => {
         if (error.type === 'DESCRIPTION_PARSE_ERROR') {