From 0130c22620415e9451fbeaaa33f67095bfadc601 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 12:09:36 +0200 Subject: [PATCH 01/12] [JavaScript] Exclude mappings from normal keyword indentation Fixes https://forum.sublimetext.com/t/sublime-text-on-the-word-default/72953 This commit applies dedicated (json) indentation rules to JavaScript mappings to avoid unexpected (un-)indenting of keys, which look like reserved control structure keywords (e.g.: case, default, if, else, ...). --- ...Indentation Rules - Mappings.tmPreferences | 71 +++++++++++++ JavaScript/Indentation Rules.tmPreferences | 9 +- JavaScript/tests/syntax_test_indent.js | 100 ++++++++++++++++++ 3 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 JavaScript/Indentation Rules - Mappings.tmPreferences create mode 100644 JavaScript/tests/syntax_test_indent.js diff --git a/JavaScript/Indentation Rules - Mappings.tmPreferences b/JavaScript/Indentation Rules - Mappings.tmPreferences new file mode 100644 index 0000000000..0cae090c1e --- /dev/null +++ b/JavaScript/Indentation Rules - Mappings.tmPreferences @@ -0,0 +1,71 @@ + + + + scope + + source.js meta.mapping, + source.ts meta.mapping, + source.jsx meta.mapping, + source.tsx meta.mapping + + settings + + + decreaseIndentPattern + (?x) + # When an object is closed, but not opened + ( + ^ + ( + # Consume strings + "(?:[^"\\]|\\.)*" + | + # Consume all chars that don't start a string, comment or + # open an object on this line + [^"/{\n] + )* + \}.*$ + ) + | + # When an array is closed by itself on a line (interacts with indentSquareBrackets) + ( + ^(.*\*/)?\s*\].*$ + ) + + increaseIndentPattern + (?x) + # When an object is opened, but not closed + ( + ^.*\{ + ( + # Consume strings + "(?:[^"\\]|\\.)*" + | + # Consume all chars that don't start a string, comment or + # end the object that was opened on this line + [^"/}] + )* + # Stop matching at the end of the line, or once we hit a comment + ($|/[/*]) + ) + | + # When an array is opened, but not closed + ( + ^.*\[ + ( + # Consume strings + "(?:[^"\\]|\\.)*" + | + # Consume all chars that don't start a string, comment or + # end the array that was opened on this line + [^"/\]] + )* + # Stop matching at the end of the line, or once we hit a comment + ($|/[/*]) + ) + + indentSquareBrackets + + + + diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences index becd1c00e0..d9f163e430 100644 --- a/JavaScript/Indentation Rules.tmPreferences +++ b/JavaScript/Indentation Rules.tmPreferences @@ -2,7 +2,12 @@ scope - source.js, source.ts, source.jsx, source.tsx + + source.js - source.js meta.mapping, + source.ts - source.ts meta.mapping, + source.jsx - source.jsx meta.mapping, + source.tsx - source.tsx meta.mapping + settings decreaseIndentPattern @@ -68,8 +73,6 @@ ) ]]> - indentSquareBrackets - diff --git a/JavaScript/tests/syntax_test_indent.js b/JavaScript/tests/syntax_test_indent.js new file mode 100644 index 0000000000..935e5f4067 --- /dev/null +++ b/JavaScript/tests/syntax_test_indent.js @@ -0,0 +1,100 @@ +// SYNTAX TEST reindent "Packages/JavaScript/JavaScript.sublime-syntax" + +/* +property definitions +*/ + +const props = defineProps({ + case: "case", + default: "default", + switch: "switch", + if: "if", + elif: "elif", + else: "else", + function: "function", + object: { + "key": "value", + }, + list1: [ + "switch", + "case" + ], + list2: ["value1", "value2"] +}); + +/* +functions +*/ + +function name(arg1, arg2) { + return 0 +} + +/* +if statements without braces +*/ + +if (foo == true) + return 1 +else if (bar == true) + return 2 +else + return 3 + +/* +if statements with braces +*/ + +if (foo == true) { + return 1 +} else if (bar == true) { + return 2 +} else { + return 3 +} + +/* +nested if statements +*/ + +if (foo == true) { + if (foo == true) + return 1 + else if (bar == true) + return 2 + else + return 3 +} else if (bar == true) { + if (foo == true) { + return 1 + } else if (bar == true) { + return 2 + } else { + return 3 + } +} else { + return 3 +} + +/* +switch case statements +*/ + +switch (variable) { +case 0: + result = 0 + break +case 10: + result = 1 + break +case 20: // comment + result = 2 + break +case 30: + { + result = 4 + break + } +default: + result = -1 +} \ No newline at end of file From 39a5f4dada82e3db1831d351994ae8be350e5e08 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 16:15:54 +0200 Subject: [PATCH 02/12] [JavaScript] Exclude lists from normal keyword indentation Same as for mappings, is true for lists. They can contain otherwise reserved words, which should not be treated by indentation rules. --- ...Indentation Rules - Mappings.tmPreferences | 10 ++++--- JavaScript/Indentation Rules.tmPreferences | 12 +++++---- JavaScript/tests/syntax_test_indent.js | 26 ++++++++++++++++--- 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/JavaScript/Indentation Rules - Mappings.tmPreferences b/JavaScript/Indentation Rules - Mappings.tmPreferences index 0cae090c1e..76e9629e0e 100644 --- a/JavaScript/Indentation Rules - Mappings.tmPreferences +++ b/JavaScript/Indentation Rules - Mappings.tmPreferences @@ -4,9 +4,13 @@ scope source.js meta.mapping, - source.ts meta.mapping, + source.js meta.sequence, source.jsx meta.mapping, - source.tsx meta.mapping + source.jsx meta.sequence, + source.ts meta.mapping, + source.ts meta.sequence, + source.tsx meta.mapping, + source.tsx meta.sequence settings @@ -64,8 +68,6 @@ ($|/[/*]) ) - indentSquareBrackets - diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences index d9f163e430..75d74a1d56 100644 --- a/JavaScript/Indentation Rules.tmPreferences +++ b/JavaScript/Indentation Rules.tmPreferences @@ -3,20 +3,22 @@ scope - source.js - source.js meta.mapping, - source.ts - source.ts meta.mapping, - source.jsx - source.jsx meta.mapping, - source.tsx - source.tsx meta.mapping + source.js - source.js meta.mapping - source.js meta.sequence, + source.jsx - source.jsx meta.mapping - source.jsx meta.sequence, + source.ts - source.ts meta.mapping - source.ts meta.sequence, + source.tsx - source.tsx meta.mapping - source.tsx meta.sequence settings decreaseIndentPattern Date: Fri, 26 Jul 2024 16:20:48 +0200 Subject: [PATCH 03/12] [JavaScript] Add key binding for bracket content auto-indentation This commit applies a key binding from JSON package to auto-indent content of lists when hitting enter var = [|] becomes: var = [ | ] --- JavaScript/Default.sublime-keymap | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/JavaScript/Default.sublime-keymap b/JavaScript/Default.sublime-keymap index eac30e9ea7..8decbaf515 100644 --- a/JavaScript/Default.sublime-keymap +++ b/JavaScript/Default.sublime-keymap @@ -51,4 +51,24 @@ { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true } ] }, + + // Add indented line in square brackets + { "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\n"}, "context": + [ + { "key": "setting.auto_indent" }, + { "key": "selector", "operand": "source.js, source.jsx, source.ts, source.tsx" }, + { "key": "selection_empty", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\[$", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\]", "match_all": true } + ] + }, + { "keys": ["keypad_enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\n"}, "context": + [ + { "key": "setting.auto_indent" }, + { "key": "selector", "operand": "source.js, source.jsx, source.ts, source.tsx" }, + { "key": "selection_empty", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\[$", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\]", "match_all": true } + ] + }, ] From b4d864f5493b38ede70348ad9fbb3fc3ca6f20f2 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 17:43:15 +0200 Subject: [PATCH 04/12] [JavaScript] Handle function calls in mappings or lists This commit... 1. extends selectors for each syntax (JS, JSX, TS, TSX) to choose correct indentation rules in nested mappings, lists or functions/lambdas. 2. Adds check for trailing `:` to case/default indentation rule patterns, as a function called `case()` in a mapping can't be prevented from being unindented via selectors. --- ...Indentation Rules - Mappings.tmPreferences | 20 ++++++---- JavaScript/Indentation Rules.tmPreferences | 12 ++++-- JavaScript/tests/syntax_test_indent.js | 39 +++++++++++++++++++ 3 files changed, 59 insertions(+), 12 deletions(-) diff --git a/JavaScript/Indentation Rules - Mappings.tmPreferences b/JavaScript/Indentation Rules - Mappings.tmPreferences index 76e9629e0e..e435cdd9fd 100644 --- a/JavaScript/Indentation Rules - Mappings.tmPreferences +++ b/JavaScript/Indentation Rules - Mappings.tmPreferences @@ -3,14 +3,18 @@ scope - source.js meta.mapping, - source.js meta.sequence, - source.jsx meta.mapping, - source.jsx meta.sequence, - source.ts meta.mapping, - source.ts meta.sequence, - source.tsx meta.mapping, - source.tsx meta.sequence + (source.js meta.mapping, source.js meta.sequence) - source.js meta.function, + source.js meta.function meta.mapping, + source.js meta.function meta.sequence, + (source.jsx meta.mapping, source.jsx meta.sequence) - source.jsx meta.function, + source.jsx meta.function meta.mapping, + source.jsx meta.function meta.sequence, + (source.ts meta.mapping, source.ts meta.sequence) - source.ts meta.function, + source.ts meta.function meta.mapping, + source.ts meta.function meta.sequence, + (source.tsx meta.mapping, source.tsx meta.sequence) - source.tsx meta.function, + source.tsx meta.function meta.mapping, + source.tsx meta.function meta.sequence settings diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences index 75d74a1d56..8581975f30 100644 --- a/JavaScript/Indentation Rules.tmPreferences +++ b/JavaScript/Indentation Rules.tmPreferences @@ -4,9 +4,13 @@ scope source.js - source.js meta.mapping - source.js meta.sequence, + source.js meta.function, source.jsx - source.jsx meta.mapping - source.jsx meta.sequence, + source.jsx meta.function, source.ts - source.ts meta.mapping - source.ts meta.sequence, + source.ts meta.function, source.tsx - source.tsx meta.mapping - source.tsx meta.sequence + source.tsx meta.function settings @@ -20,9 +24,9 @@ # dedent closing brackets | \] # detent `case ... :` - | case\b + | case\b.*: # detent `default:` - | default\b + | default\s*: ) ]]> @@ -35,9 +39,9 @@ # but exclude lines such as `extern "C" {` .* \{ (?: \s* /\*.*\*/ )* \s* (?: //.* )? $ # indent after `case ... :` - | case\b + | case\b.*: # indent after `default:` - | default\b + | default\s*: ) ]]> diff --git a/JavaScript/tests/syntax_test_indent.js b/JavaScript/tests/syntax_test_indent.js index 70d7b2456f..ea6f5ba0a5 100644 --- a/JavaScript/tests/syntax_test_indent.js +++ b/JavaScript/tests/syntax_test_indent.js @@ -1,5 +1,44 @@ // SYNTAX TEST reindent "Packages/JavaScript/JavaScript.sublime-syntax" +export default { + default: 'value', + case() { + const map1 = { + default: 'value' + } + const list1 = [ + default + ] + + if (foo == true) + return 1 + else if (bar == true) + return 2 + else + return 3 + + switch (map1) { + case null: + return 0 + default: + const map2 = { + default: 'value' + } + const list2 = [ + default, + () => { + switch (map2) { + default: + return 0 + case null: + return 1 + } + } + ] + } + } +} + /* mapping definitions */ From edac170c755fbe52bedc88e1ada341cf0577a6e2 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 18:13:50 +0200 Subject: [PATCH 05/12] [JavaScript] Reorganize tests Merge new tests into existing file --- JavaScript/tests/syntax_test_indent.js | 157 ------------------ .../tests/syntax_test_js_indent_common.js | 83 +++++++++ 2 files changed, 83 insertions(+), 157 deletions(-) delete mode 100644 JavaScript/tests/syntax_test_indent.js diff --git a/JavaScript/tests/syntax_test_indent.js b/JavaScript/tests/syntax_test_indent.js deleted file mode 100644 index ea6f5ba0a5..0000000000 --- a/JavaScript/tests/syntax_test_indent.js +++ /dev/null @@ -1,157 +0,0 @@ -// SYNTAX TEST reindent "Packages/JavaScript/JavaScript.sublime-syntax" - -export default { - default: 'value', - case() { - const map1 = { - default: 'value' - } - const list1 = [ - default - ] - - if (foo == true) - return 1 - else if (bar == true) - return 2 - else - return 3 - - switch (map1) { - case null: - return 0 - default: - const map2 = { - default: 'value' - } - const list2 = [ - default, - () => { - switch (map2) { - default: - return 0 - case null: - return 1 - } - } - ] - } - } -} - -/* -mapping definitions -*/ - -const maps = { - case: "case", - default: "default", - switch: "switch", - if: "if", - elif: "elif", - else: "else", - function: "function", - object: { - "key": "value", - }, - list1: [ - "switch", - "case" - ], - list3: ["value1", "value2"] -}; - -/* -list definitions -*/ - -const list = [ - case, - default, - switch, - if, - elif, - else, - [ - case, - default - ], - ["value1", "value2"] -] - -/* -functions -*/ - -function name(arg1, arg2) { - return 0 -} - -/* -if statements without braces -*/ - -if (foo == true) - return 1 -else if (bar == true) - return 2 -else - return 3 - -/* -if statements with braces -*/ - -if (foo == true) { - return 1 -} else if (bar == true) { - return 2 -} else { - return 3 -} - -/* -nested if statements -*/ - -if (foo == true) { - if (foo == true) - return 1 - else if (bar == true) - return 2 - else - return 3 -} else if (bar == true) { - if (foo == true) { - return 1 - } else if (bar == true) { - return 2 - } else { - return 3 - } -} else { - return 3 -} - -/* -switch case statements -*/ - -switch (variable) { -case 0: - result = 0 - break -case 10: - result = 1 - break -case 20: // comment - result = 2 - break -case 30: - { - result = 4 - break - } -default: - result = -1 -} \ No newline at end of file diff --git a/JavaScript/tests/syntax_test_js_indent_common.js b/JavaScript/tests/syntax_test_js_indent_common.js index 6db0db4fa1..d9a14909fd 100644 --- a/JavaScript/tests/syntax_test_js_indent_common.js +++ b/JavaScript/tests/syntax_test_js_indent_common.js @@ -1,5 +1,88 @@ // SYNTAX TEST reindent-unchanged "Packages/JavaScript/JavaScript.sublime-syntax" +/* + * Export definitions + */ + +export default { + default: 'value', + case() { + const map1 = { + default: 'value' + } + const list1 = [ + default + ] + + if (foo == true) + return 1 + else if (bar == true) + return 2 + else + return 3 + + switch (map1) { + case null: + return 0 + default: + const map2 = { + default: 'value' + } + const list2 = [ + default, + () => { + switch (map2) { + default: + return 0 + case null: + return 1 + } + } + ] + } + } +} + +/* + * mapping definitions + */ + +const maps = { + case: "case", + default: "default", + switch: "switch", + if: "if", + elif: "elif", + else: "else", + function: "function", + object: { + "key": "value", + }, + list1: [ + "switch", + "case" + ], + list3: ["value1", "value2"] +}; + +/* + * list definitions + */ + +const list = [ + case, + default, + switch, + if, + elif, + else, + [ + case, + default + ], + ["value1", "value2"] +] + /** * This is my first JavaScript program. * This will print 'Hello World' as the output From 0bd0f97dc13b43ca4bd335ec3dcc04d04bd95ffa Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 18:14:09 +0200 Subject: [PATCH 06/12] [JavaScript] Add tests for embedded JS code blocks --- .../tests/syntax_test_js_indent_embed.md | 42 ++++++++++++++++++ .../tests/syntax_test_js_indent_embed.php | 43 +++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 JavaScript/tests/syntax_test_js_indent_embed.md create mode 100644 JavaScript/tests/syntax_test_js_indent_embed.php diff --git a/JavaScript/tests/syntax_test_js_indent_embed.md b/JavaScript/tests/syntax_test_js_indent_embed.md new file mode 100644 index 0000000000..40cfb8a668 --- /dev/null +++ b/JavaScript/tests/syntax_test_js_indent_embed.md @@ -0,0 +1,42 @@ +// SYNTAX TEST reindent-unchanged "Packages/Markdown/Markdown.sublime-syntax" + +```js +export default { + default: 'value', + case() { + const map1 = { + default: 'value' + } + const list1 = [ + default + ] + + if (foo == true) + return 1 + else if (bar == true) + return 2 + else + return 3 + + switch (map1) { + case null: + return 0 + default: + const map2 = { + default: 'value' + } + const list2 = [ + default, + () => { + switch (map2) { + default: + return 0 + case null: + return 1 + } + } + ] + } + } +} +``` diff --git a/JavaScript/tests/syntax_test_js_indent_embed.php b/JavaScript/tests/syntax_test_js_indent_embed.php new file mode 100644 index 0000000000..1d9f3e28b2 --- /dev/null +++ b/JavaScript/tests/syntax_test_js_indent_embed.php @@ -0,0 +1,43 @@ +// SYNTAX TEST reindent-unchanged "Packages/PHP/PHP.sublime-syntax" + + { + switch (map2) { + default: + return 0 + case null: + return 1 + } + } + ] + } + } +} +JAVASCRIPT From d374fc6d5c2cf0e3809c2ca425b1363e65c28f6b Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 18:23:54 +0200 Subject: [PATCH 07/12] [JavaScript] Remove failing tests As we need to expect `:` after case/default, those tests no longer work by intent. --- JavaScript/tests/syntax_test_js_indent_common.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/JavaScript/tests/syntax_test_js_indent_common.js b/JavaScript/tests/syntax_test_js_indent_common.js index d9a14909fd..53bd0c2821 100644 --- a/JavaScript/tests/syntax_test_js_indent_common.js +++ b/JavaScript/tests/syntax_test_js_indent_common.js @@ -631,16 +631,12 @@ function testIfElseIndentationWithBracesAndComment(v) { function testSwitchCaseIndentation(v) { switch (s) { - case case: - case break case: break case "(": break case ")": break; case ":": break; case ";": break; - case - break; case: break; case ":" From eec9dc710c21385dbf33fc8adbab13f213548a76 Mon Sep 17 00:00:00 2001 From: deathaxe Date: Fri, 26 Jul 2024 18:24:56 +0200 Subject: [PATCH 08/12] [JavaScript] Rename indentation rules file --- ...ngs.tmPreferences => Indentation Rules - Values.tmPreferences} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename JavaScript/{Indentation Rules - Mappings.tmPreferences => Indentation Rules - Values.tmPreferences} (100%) diff --git a/JavaScript/Indentation Rules - Mappings.tmPreferences b/JavaScript/Indentation Rules - Values.tmPreferences similarity index 100% rename from JavaScript/Indentation Rules - Mappings.tmPreferences rename to JavaScript/Indentation Rules - Values.tmPreferences From d237d2f5340f88b49c0b6a7e0f382ef142f6219f Mon Sep 17 00:00:00 2001 From: deathaxe Date: Mon, 29 Jul 2024 12:02:46 +0200 Subject: [PATCH 09/12] [JavaScript] Improve indentation rules of tagged template strings This commit... 1. fixes lines after single-line tagged template string being indented. before: var foo = html`

content

`; var bar = html`

content

`; var baz = html`

content

`: after: var foo = html`

content

`; var bar = html`

content

`; var baz = html`

content

`: 2. excludes content of plain string templates from auto-indentation. As their kind of content is undefined, normal indentation rules may cause false results. Tests are added to ensure normal JS statements keep untreated. Notes: First and last line of tagged templates is scoped `string.quoted.other` regardless of embedded syntax highlighting, if only opening or closing backticks appear. Hence increasing indentation of tagged template strings' content is handled by "Indentation Rules - Template Strings". Decreasing indentation of closing backtick is handled by normal "Indentation Rules" as those are the ones applied by ST. It just doesn't work otherwise. This circumstance helps to reliably distinguish opening and closing backticks and correctly in- or decrease indentation. --- ...ion Rules - Template Strings.tmPreferences | 29 ++++++++++ JavaScript/Indentation Rules.tmPreferences | 10 ++-- .../tests/syntax_test_js_indent_common.js | 55 ++++++++++++++++++- 3 files changed, 88 insertions(+), 6 deletions(-) create mode 100644 JavaScript/Indentation Rules - Template Strings.tmPreferences diff --git a/JavaScript/Indentation Rules - Template Strings.tmPreferences b/JavaScript/Indentation Rules - Template Strings.tmPreferences new file mode 100644 index 0000000000..7b80e2402e --- /dev/null +++ b/JavaScript/Indentation Rules - Template Strings.tmPreferences @@ -0,0 +1,29 @@ + + + + scope + string.quoted.other.js + settings + + + + + + increaseIndentPattern + ^[^`]*`\s*$ + + unIndentedLinePattern + ^[^`]*$ + + + diff --git a/JavaScript/Indentation Rules.tmPreferences b/JavaScript/Indentation Rules.tmPreferences index a1960e29d8..5c42452b23 100644 --- a/JavaScript/Indentation Rules.tmPreferences +++ b/JavaScript/Indentation Rules.tmPreferences @@ -3,13 +3,13 @@ scope - source.js - source.js meta.mapping - source.js meta.sequence, + source.js - source.js meta.mapping - source.js meta.sequence - source.js meta.string, source.js meta.function, - source.jsx - source.jsx meta.mapping - source.jsx meta.sequence, + source.jsx - source.jsx meta.mapping - source.jsx meta.sequence - source.jsx meta.string, source.jsx meta.function, - source.ts - source.ts meta.mapping - source.ts meta.sequence, + source.ts - source.ts meta.mapping - source.ts meta.sequence - source.ts meta.string, source.ts meta.function, - source.tsx - source.tsx meta.mapping - source.tsx meta.sequence + source.tsx - source.tsx meta.mapping - source.tsx meta.sequence - source.tsx meta.string, source.tsx meta.function settings @@ -41,7 +41,7 @@ # but exclude lines such as `extern "C" {` .* \{ (?: \s* /\*.*\*/ )* \s* (?: //.* )? $ # indent after opening tagged template: e.g.: "css`" - | .* \w+ \s* ` + # see: Indentation Rules - Template Strings.tmPreferences # indent after `case ... :` | case\b.*: # indent after `default:` diff --git a/JavaScript/tests/syntax_test_js_indent_common.js b/JavaScript/tests/syntax_test_js_indent_common.js index b2f916fd31..e81f8b2ad2 100644 --- a/JavaScript/tests/syntax_test_js_indent_common.js +++ b/JavaScript/tests/syntax_test_js_indent_common.js @@ -1061,6 +1061,8 @@ function testWhileIndentationWithBracesAndComments(v) { * CSS Templates */ +var style = css`tr{color:red}`; + var style = css` tr, p { background: red solid; @@ -1071,6 +1073,8 @@ var style = css` * HTML Templates */ +var html = html`

${content}

`; + var html = html`