[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 `<name> (for ...)` to indicate them not being intended for standalone use.
sublimehq · Nov 17, 2024 · e90ba2a · e90ba2a
1 parent 29b8a9c
commit e90ba2a
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 0 deletions.
diff --git 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
@@ -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/...eddings/JSON (JS template).sublime-syntax → ...ngs/JSON (for JS template).sublime-syntax b/...eddings/JSON (JS template).sublime-syntax → ...ngs/JSON (for JS template).sublime-syntax
diff --git a/...eddings/JSON (TS template).sublime-syntax → ...ngs/JSON (for TS template).sublime-syntax b/...eddings/JSON (TS template).sublime-syntax → ...ngs/JSON (for TS template).sublime-syntax
diff --git a/...s/JavaScript (JS template).sublime-syntax → ...vaScript (for JS template).sublime-syntax b/...s/JavaScript (JS template).sublime-syntax → ...vaScript (for JS template).sublime-syntax
diff --git a/...s/JavaScript (TS template).sublime-syntax → ...vaScript (for TS template).sublime-syntax b/...s/JavaScript (TS template).sublime-syntax → ...vaScript (for TS template).sublime-syntax
diff --git 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
@@ -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
  */