tsx-mui-material-ui-move-colour-to-a-new-attribute

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before

program

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "styled"

} "}"

from "from"

string

' "'"

string_fragment "@mui/material/styles"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Box"

from "from"

string

' "'"

string_fragment "@mui/material/Box"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "ButtonBase"

from "from"

string

' "'"

string_fragment "@mui/material/ButtonBase"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Container"

from "from"

string

' "'"

string_fragment "@mui/material/Container"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Typography"

from "from"

string

' "'"

string_fragment "../components/Typography"

' "'"

; ";"

lexical_declaration (+95 nodes collapsed)

lexical_declaration (+293 nodes collapsed)

lexical_declaration (+261 nodes collapsed)

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ProductCategories"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element (+29 nodes collapsed)

jsx_element (+38 nodes collapsed)

jsx_element

jsx_opening_element (+33 nodes collapsed)

jsx_expression

{ "{"

call_expression

member_expression

identifier "images"

. "."

property_identifier "map"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "image"

) ")"

=> "=>"

parenthesized_expression

( "("

jsx_element

jsx_opening_element (+31 nodes collapsed)

jsx_self_closing_element (+73 nodes collapsed)

jsx_self_closing_element

< "<"

identifier "ImageBackdrop"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageBackdrop"

" "\""

/> "/>"

jsx_element

jsx_opening_element (+73 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "Typography"

jsx_attribute

property_identifier "component"

= "="

string

" "\""

string_fragment "h3"

" "\""

jsx_attribute

property_identifier "variant"

= "="

string

" "\""

string_fragment "h6"

" "\""

jsx_attribute

property_identifier "color"

= "="

string

" "\""

string_fragment "inherit"

" "\""

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageTitle"

" "\""

> ">"

jsx_expression

{ "{"

member_expression

identifier "image"

. "."

property_identifier "title"

} "}"

jsx_self_closing_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageMarked"

" "\""

/> "/>"

jsx_closing_element

</ "</"

identifier "Typography"

> ">"

jsx_closing_element

</ "</"

identifier "Box"

> ">"

jsx_closing_element

</ "</"

identifier "ImageIconButton"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "Box"

> ">"

jsx_closing_element

</ "</"

identifier "Container"

> ">"

) ")"

; ";"

} "}"

After

program

import_statement

import "import"

import_clause

named_imports

{ "{"

import_specifier

identifier "styled"

} "}"

from "from"

string

' "'"

string_fragment "@mui/material/styles"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Box"

from "from"

string

' "'"

string_fragment "@mui/material/Box"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "ButtonBase"

from "from"

string

' "'"

string_fragment "@mui/material/ButtonBase"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Container"

from "from"

string

' "'"

string_fragment "@mui/material/Container"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Typography"

from "from"

string

' "'"

string_fragment "../components/Typography"

' "'"

; ";"

lexical_declaration (+95 nodes collapsed)

lexical_declaration (+293 nodes collapsed)

lexical_declaration (+261 nodes collapsed)

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ProductCategories"

formal_parameters

( "("

) ")"

statement_block

{ "{"

return_statement

return "return"

parenthesized_expression

( "("

jsx_element

jsx_opening_element (+29 nodes collapsed)

jsx_element (+38 nodes collapsed)

jsx_element

jsx_opening_element (+33 nodes collapsed)

jsx_expression

{ "{"

call_expression

member_expression

identifier "images"

. "."

property_identifier "map"

arguments

( "("

arrow_function

formal_parameters

( "("

required_parameter

identifier "image"

) ")"

=> "=>"

parenthesized_expression

( "("

jsx_element

jsx_opening_element (+31 nodes collapsed)

jsx_self_closing_element (+73 nodes collapsed)

jsx_self_closing_element

< "<"

identifier "ImageBackdrop"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageBackdrop"

" "\""

/> "/>"

jsx_element

jsx_opening_element (+73 nodes collapsed)

jsx_element

jsx_opening_element

< "<"

identifier "Typography"

jsx_attribute

property_identifier "component"

= "="

string

" "\""

string_fragment "h3"

" "\""

jsx_attribute

property_identifier "variant"

= "="

string

" "\""

string_fragment "h6"

" "\""

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageTitle"

" "\""

jsx_attribute

property_identifier "sx"

= "="

jsx_expression

{ "{"

object

{ "{"

pair

property_identifier "color"

: ":"

string

' "'"

string_fragment "inherit"

' "'"

} "}"

> ">"

jsx_expression

{ "{"

member_expression

identifier "image"

. "."

property_identifier "title"

} "}"

jsx_self_closing_element

< "<"

identifier "div"

jsx_attribute

property_identifier "className"

= "="

string

" "\""

string_fragment "imageMarked"

" "\""

/> "/>"

jsx_closing_element

</ "</"

identifier "Typography"

> ">"

jsx_closing_element

</ "</"

identifier "Box"

> ">"

jsx_closing_element

</ "</"

identifier "ImageIconButton"

> ">"

) ")"

} "}"

jsx_closing_element

</ "</"

identifier "Box"

> ">"

jsx_closing_element

</ "</"

identifier "Container"

> ">"

) ")"

; ";"

} "}"