From e90ba2af0a95c1a5be301f110b5b8553094bd92b Mon Sep 17 00:00:00 2001 From: deathaxe Date: Sun, 17 Nov 2024 13:48:15 +0100 Subject: [PATCH] [JavaScript] Fix top-level properties in css tagged template strings (#4035) * [JavaScript] Fix top-level properties in css tagged template strings Styled components may just contain property value pairs instead of full stylesheets. This commit therefore adjusts extended CSS syntax to support both, selectors and properties in main top-level context. * [JavaScript] Fix selector interpolation This commit excludes prototype from `main` context to ensure it being applied to selectors, property names and property values only. Without this change selectors starting with interpolation `${...}` are not matched correctly. * [JavaScript] Rename embedded syntax definitions This commit names hidden syntaxes ` (for ...)` to indicate them not being intended for standalone use. --- .../CSS (for JS template).sublime-syntax | 11 ++++ .../CSS (for TS template).sublime-syntax | 1 + ... => JSON (for JS template).sublime-syntax} | 0 ... => JSON (for TS template).sublime-syntax} | 0 ...vaScript (for JS template).sublime-syntax} | 0 ...vaScript (for TS template).sublime-syntax} | 0 JavaScript/tests/syntax_test_js_template.js | 58 +++++++++++++++++++ .../tests/syntax_test_typescript_template.ts | 41 +++++++++++++ 8 files changed, 111 insertions(+) rename JavaScript/Embeddings/{JSON (JS template).sublime-syntax => JSON (for JS template).sublime-syntax} (100%) rename JavaScript/Embeddings/{JSON (TS template).sublime-syntax => JSON (for TS template).sublime-syntax} (100%) rename JavaScript/Embeddings/{JavaScript (JS template).sublime-syntax => JavaScript (for JS template).sublime-syntax} (100%) rename JavaScript/Embeddings/{JavaScript (TS template).sublime-syntax => JavaScript (for TS template).sublime-syntax} (100%) diff --git a/JavaScript/Embeddings/CSS (for JS template).sublime-syntax b/JavaScript/Embeddings/CSS (for JS template).sublime-syntax index 3491f2d7e9..47644c8bdf 100644 --- a/JavaScript/Embeddings/CSS (for JS template).sublime-syntax +++ b/JavaScript/Embeddings/CSS (for JS template).sublime-syntax @@ -21,3 +21,14 @@ contexts: strings-content: - meta_prepend: true - include: scope:source.js#string-interpolations + + main: + # support properties in top-level context + - meta_include_prototype: false + - include: comments + - include: property-lists + - include: properties-or-selectors + - include: at-rules + - include: rule-terminators + - include: illegal-commas + - include: illegal-groups diff --git a/JavaScript/Embeddings/CSS (for TS template).sublime-syntax b/JavaScript/Embeddings/CSS (for TS template).sublime-syntax index bd196d21fa..50354f9cdf 100644 --- a/JavaScript/Embeddings/CSS (for TS template).sublime-syntax +++ b/JavaScript/Embeddings/CSS (for TS template).sublime-syntax @@ -24,6 +24,7 @@ contexts: main: # support properties in top-level context + - meta_include_prototype: false - include: comments - include: property-lists - include: properties-or-selectors diff --git a/JavaScript/Embeddings/JSON (JS template).sublime-syntax b/JavaScript/Embeddings/JSON (for JS template).sublime-syntax similarity index 100% rename from JavaScript/Embeddings/JSON (JS template).sublime-syntax rename to JavaScript/Embeddings/JSON (for JS template).sublime-syntax diff --git a/JavaScript/Embeddings/JSON (TS template).sublime-syntax b/JavaScript/Embeddings/JSON (for TS template).sublime-syntax similarity index 100% rename from JavaScript/Embeddings/JSON (TS template).sublime-syntax rename to JavaScript/Embeddings/JSON (for TS template).sublime-syntax diff --git a/JavaScript/Embeddings/JavaScript (JS template).sublime-syntax b/JavaScript/Embeddings/JavaScript (for JS template).sublime-syntax similarity index 100% rename from JavaScript/Embeddings/JavaScript (JS template).sublime-syntax rename to JavaScript/Embeddings/JavaScript (for JS template).sublime-syntax diff --git a/JavaScript/Embeddings/JavaScript (TS template).sublime-syntax b/JavaScript/Embeddings/JavaScript (for TS template).sublime-syntax similarity index 100% rename from JavaScript/Embeddings/JavaScript (TS template).sublime-syntax rename to JavaScript/Embeddings/JavaScript (for TS template).sublime-syntax diff --git a/JavaScript/tests/syntax_test_js_template.js b/JavaScript/tests/syntax_test_js_template.js index 8001a9c727..4f5e5ba1b0 100644 --- a/JavaScript/tests/syntax_test_js_template.js +++ b/JavaScript/tests/syntax_test_js_template.js @@ -188,6 +188,10 @@ var style = css` /* ^ punctuation.definition.string.begin.js */ /* ^ - source.css.embedded */ + @media screen {} +/* ^^^^^^^^^^^^^ meta.at-rule.media.css */ +/* ^^^^^^ support.constant.media.css */ + tr, .${sel} { /* ^^^^^^^^^^^^ meta.selector.css */ /* ^^ entity.name.tag.html.css */ @@ -203,12 +207,66 @@ var style = css` /* ^^^^^^^^ meta.property-value.css meta.interpolation.js */ } /* ^ meta.block.css punctuation.section.block.end.css */ + + background: var(--color); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.template.js source.css.embedded.js */ +/* ^^^^^^^^^^ meta.property-name.css support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^^^ meta.property-value.css */ +/* ^^^ meta.function-call.identifier.css support.function.var.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + ${tag}, .${cls} { ${prop}: ${value} } +/* ^^^^^^ meta.selector.css meta.interpolation.js */ +/* ^^^ meta.selector.css - meta.interpolation */ +/* ^^^^^^ meta.selector.css meta.interpolation.js */ +/* ^ meta.selector.css - meta.interpolation */ +/* ^^ meta.property-list.css meta.block.css */ +/* ^^^^^^^ meta.property-list.css meta.block.css meta.property-name.css support.type.property-name.css meta.interpolation.js */ +/* ^^ meta.property-list.css meta.block.css - meta.interpolation */ +/* ^^^^^^^^ meta.property-list.css meta.block.css meta.property-value.css meta.interpolation.js */ +/* ^^ meta.property-list.css meta.block.css - meta.interpolation */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.section.block.begin.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.section.block.end.css */ ` /* <- meta.string.template.js string.quoted.other.js - source.css.embedded */ /*^^^ meta.string.template.js string.quoted.other.js - source.css.embedded */ /* ^ punctuation.definition.string.end.js */ /* ^ - meta.string */ +var style = css`color:${color}`; +/* ^^^ variable.function.tagged-template.js */ +/* ^^^^^^^^^^^^^^^^ meta.string.template.js */ +/* ^ string.quoted.other.js punctuation.definition.string.begin.js */ +/* ^^^^^ meta.property-name.css support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ meta.property-value.css meta.interpolation.js punctuation.section.interpolation.begin.js */ +/* ^^^^^ meta.property-value.css meta.interpolation.js source.js.embedded variable.other.readwrite.js */ +/* ^ meta.property-value.css meta.interpolation.js punctuation.section.interpolation.end.js */ +/* ^ string.quoted.other.js punctuation.definition.string.end.js */ +/* ^ punctuation.terminator.statement.js - meta.string */ + + /* * Unknown Template */ diff --git a/JavaScript/tests/syntax_test_typescript_template.ts b/JavaScript/tests/syntax_test_typescript_template.ts index 5b3148f7bf..113e169a89 100644 --- a/JavaScript/tests/syntax_test_typescript_template.ts +++ b/JavaScript/tests/syntax_test_typescript_template.ts @@ -219,12 +219,53 @@ var style = css` /* ^^^^^^^ variable.other.custom-property.css */ /* ^ punctuation.section.group.end.css */ /* ^ punctuation.terminator.rule.css */ + + ${tag}, .${cls} { ${prop}: ${value} } +/* ^^^^^^ meta.selector.css meta.interpolation.js */ +/* ^^^ meta.selector.css - meta.interpolation */ +/* ^^^^^^ meta.selector.css meta.interpolation.js */ +/* ^ meta.selector.css - meta.interpolation */ +/* ^^ meta.property-list.css meta.block.css */ +/* ^^^^^^^ meta.property-list.css meta.block.css meta.property-name.css support.type.property-name.css meta.interpolation.js */ +/* ^^ meta.property-list.css meta.block.css - meta.interpolation */ +/* ^^^^^^^^ meta.property-list.css meta.block.css meta.property-value.css meta.interpolation.js */ +/* ^^ meta.property-list.css meta.block.css - meta.interpolation */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.definition.entity.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.section.block.begin.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ punctuation.section.interpolation.begin.js */ +/* ^^^^^ variable.other.readwrite.js */ +/* ^ punctuation.section.interpolation.end.js */ +/* ^ punctuation.section.block.end.css */ ` /* <- meta.string.template.js string.quoted.other.js - source.css.embedded */ /*^^^ meta.string.template.js string.quoted.other.js - source.css.embedded */ /* ^ punctuation.definition.string.end.js */ /* ^ - meta.string */ +var style = css`color:${color}`; +/* ^^^ variable.function.tagged-template.js */ +/* ^^^^^^^^^^^^^^^^ meta.string.template.js */ +/* ^ string.quoted.other.js punctuation.definition.string.begin.js */ +/* ^^^^^ meta.property-name.css support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^ meta.property-value.css meta.interpolation.js punctuation.section.interpolation.begin.js */ +/* ^^^^^ meta.property-value.css meta.interpolation.js source.js.embedded variable.other.readwrite.js */ +/* ^ meta.property-value.css meta.interpolation.js punctuation.section.interpolation.end.js */ +/* ^ string.quoted.other.js punctuation.definition.string.end.js */ +/* ^ punctuation.terminator.statement.js - meta.string */ + /* * Unknown Template */