javascript-usebruno-bruno-style-change

CSS in JS, with interesting split in the AST because of the template substitution.

This mapping has 1 all-to-all group: every node on one side corresponds to every node on the other, and none is deleted or inserted. Each member carries an all N:M badge; selecting one highlights all of its counterparts, in the tree and in the code view alike.

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…lines 1–4 unchanged (4 lines)
5    padding: 0.15rem 0.4rem;
6    border-radius: 3px;
7    border: solid 1px ${(props) => props.theme.input.border};
8    background-color: ${(props) => props.theme.input.bg};
9
10    &.error{
11      border-color: ${(props) => props.theme.colors.text.danger};
12    }
13  }
14
15  .tooltip-mod {
16    font-size: 11px !important;
17    width: 150px !important;
18
19    & ul {
20      padding-left: 4px;
21    }
22
23    & ul > li {
24      list-style: circle;
25    }
26  }
27`;
28
29export default StyledWrapper;
30

After…lines 1–4 unchanged (4 lines)
5    padding: 0.15rem 0.4rem;
6    border-radius: 3px;
7    border: solid 1px ${(props) => props.theme.input.border};
8    background-color: ${(props) => props.theme.input.bg};
9
10    &.error{
11      border-color: ${(props) => props.theme.colors.text.danger};
12    }
13  }
14
15  .tooltip-mod {
16    font-size: ${(props) => props.theme.font.size.xs} !important;
17    width: 150px !important;
18
19    & ul {
20      padding-left: 4px;
21    }
22
23    & ul > li {
24      list-style: circle;
25    }
26  }
27`;
28
29export default StyledWrapper;
30

Before…lines 1–4 unchanged (4 lines)
5    padding: 0.15rem 0.4rem;
6    border-radius: 3px;
7    border: solid 1px ${(props) => props.theme.input.border};
8    background-color: ${(props) => props.theme.input.bg};
9
10    &.error{
11      border-color: ${(props) => props.theme.colors.text.danger};
12    }
13  }
14
15  .tooltip-mod {
16    font-size: 11px !important;
17    width: 150px !important;
18
19    & ul {
20      padding-left: 4px;
21    }
22
23    & ul > li {
24      list-style: circle;
25    }
26  }
27`;
28
29export default StyledWrapper;
30

After…lines 1–4 unchanged (4 lines)
5    padding: 0.15rem 0.4rem;
6    border-radius: 3px;
7    border: solid 1px ${(props) => props.theme.input.border};
8    background-color: ${(props) => props.theme.input.bg};
9
10    &.error{
11      border-color: ${(props) => props.theme.colors.text.danger};
12    }
13  }
14
15  .tooltip-mod {
16    font-size: ${(props) => props.theme.font.size.xs} !important;
17    width: 150px !important;
18
19    & ul {
20      padding-left: 4px;
21    }
22
23    & ul > li {
24      list-style: circle;
25    }
26  }
27`;
28
29export default StyledWrapper;
30

Before

program

import_statement

import "import"

import_clause

identifier "styled"

from "from"

string

' "'"

string_fragment "styled-components"

' "'"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "StyledWrapper"

= "="

call_expression

member_expression

identifier "styled"

. "."

property_identifier "div"

template_string

` "`"

string_fragment "\n .single-line-editor-wrapper {\n padding: 0.15rem 0.4rem"...

template_substitution

${ "${"

arrow_function

formal_parameters

( "("

identifier "props"

) ")"

=> "=>"

member_expression

identifier "props"

. "."

property_identifier "theme"

. "."

property_identifier "input"

. "."

property_identifier "border"

} "}"

string_fragment ";\n background-color: "

template_substitution

${ "${"

arrow_function

formal_parameters

( "("

identifier "props"

) ")"

=> "=>"

member_expression

identifier "props"

. "."

property_identifier "theme"

. "."

property_identifier "input"

. "."

property_identifier "bg"

} "}"

string_fragment ";\n\n &.error{\n border-color: "

template_substitution (+22 nodes collapsed)

string_fragment ";\n }\n }\n\n .tooltip-mod {\n font-size: 11px !important"... all 1:2

` "`"

; ";"

export_statement

export "export"

default "default"

identifier "StyledWrapper"

; ";"

After

program

import_statement

import "import"

import_clause

identifier "styled"

from "from"

string

' "'"

string_fragment "styled-components"

' "'"

; ";"

lexical_declaration

const "const"

variable_declarator

identifier "StyledWrapper"

= "="

call_expression

member_expression

identifier "styled"

. "."

property_identifier "div"

template_string

` "`"

string_fragment "\n .single-line-editor-wrapper {\n padding: 0.15rem 0.4rem"...

template_substitution

${ "${"

arrow_function

formal_parameters

( "("

identifier "props"

) ")"

=> "=>"

member_expression

identifier "props"

. "."

property_identifier "theme"

. "."

property_identifier "input"

. "."

property_identifier "border"

} "}"

string_fragment ";\n background-color: "

template_substitution

${ "${"

arrow_function

formal_parameters

( "("

identifier "props"

) ")"

=> "=>"

member_expression

identifier "props"

. "."

property_identifier "theme"

. "."

property_identifier "input"

. "."

property_identifier "bg"

} "}"

string_fragment ";\n\n &.error{\n border-color: "

template_substitution (+22 nodes collapsed)

string_fragment ";\n }\n }\n\n .tooltip-mod {\n font-size: " all 1:2

template_substitution

${ "${"

arrow_function

formal_parameters

( "("

identifier "props"

) ")"

=> "=>"

member_expression

identifier "props"

. "."

property_identifier "theme"

. "."

property_identifier "font"

. "."

property_identifier "size"

. "."

property_identifier "xs"

} "}"

string_fragment " !important;\n width: 150px !important;\n\n & ul {\n "... all 1:2

` "`"

; ";"

export_statement

export "export"

default "default"

identifier "StyledWrapper"

; ";"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help