Merge branch 'feature/styled-components'

borela · Feb 19, 2018 · 5635f92 · 5635f92
2 parents 4c8245c + a253b03
commit 5635f92
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 13 deletions.
diff --git a/syntaxes/css3/ruleset/block-content.sublime-syntax b/syntaxes/css3/ruleset/block-content.sublime-syntax
@@ -19,6 +19,9 @@ scope: ...
 
 contexts:
   main:
+    - match: ;
+      scope: punctuation.terminator.css.css3
+      pop: true
     - match: ""
       set: [ delimiter, property ]
 

diff --git a/syntaxes/css3/ruleset/block.sublime-syntax b/syntaxes/css3/ruleset/block.sublime-syntax
@@ -26,7 +26,7 @@ contexts:
   comment-no-pop:
     - include: Packages/Naomi/syntaxes/css3/comment.no-pop.sublime-syntax
 
-  declaration:
+  content:
     - include: Packages/Naomi/syntaxes/css3/ruleset/block-content.sublime-syntax
 
   delimiter:
@@ -35,7 +35,5 @@ contexts:
     - match: \}
       scope: punctuation.section.property-list.end.css.css3
       pop: true
-    - match: ;
-      scope: punctuation.terminator.css.css3
     - match: (?=\S)
-      push: declaration
+      push: content
diff --git a/syntaxes/fjsx15/literal.sublime-syntax b/syntaxes/fjsx15/literal.sublime-syntax
@@ -24,5 +24,6 @@ contexts:
     - include: Packages/Naomi/syntaxes/fjsx15/literal/object.sublime-syntax
     - include: Packages/Naomi/syntaxes/fjsx15/literal/string/double-quoted.sublime-syntax
     - include: Packages/Naomi/syntaxes/fjsx15/literal/string/single-quoted.sublime-syntax
+    - include: Packages/Naomi/syntaxes/fjsx15/literal/string/styled-component.sublime-syntax
     - include: Packages/Naomi/syntaxes/fjsx15/literal/string/template.sublime-syntax
     - include: Packages/Naomi/syntaxes/fjsx15/literal/string/regex.sublime-syntax
diff --git a/syntaxes/fjsx15/literal/string/styled-component.sublime-syntax b/syntaxes/fjsx15/literal/string/styled-component.sublime-syntax
@@ -0,0 +1,114 @@
+%YAML1.2
+---
+
+# Licensed under the Apache License, Version 2.0 (the “License”); you may not
+# use this file except in compliance with the License. You may obtain a copy of
+# the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
+# WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+# License for the specific language governing permissions and limitations under
+# the License.
+
+hidden: true
+
+scope: ...
+
+variables:
+  commonIdentifier: |
+    [$_[:alpha:]]
+    [$_[:alnum:]]*
+
+  hexEscapedChar: |
+    x[a-f0-9]{2}
+
+  unicodeEscapedChar: |
+    (?> u[a-f0-9]{4}
+      | u\{[a-f0-9]+\}
+    )
+
+  escapeSequences: |
+    \\
+    (?> [`\\$bfnrtv]
+      | {{hexEscapedChar}}
+      | {{unicodeEscapedChar}}
+    )
+
+contexts:
+  main:
+    - match: styled(?=\s*[.\(])
+      scope: support.function.styled-component.js.fjsx15
+      set: [ meta-styled-component, styled-component ]
+
+  comment-no-pop:
+    - include: Packages/Naomi/syntaxes/css3/comment.no-pop.sublime-syntax
+
+  delimiter:
+    - include: comment-no-pop
+    - match: ":"
+      scope: punctuation.separator.key-value.css.css3
+      set: [ meta-property-value, optional-value-no-pop ]
+
+  embedded-expression:
+    - include: Packages/Naomi/syntaxes/fjsx15/literal/string/template.sublime-syntax#embedded-expression
+
+  meta-property-value:
+    - meta_scope: meta.property-value.css.css3
+    - include: pop-now
+
+  meta-styled-component:
+    - meta_scope: meta.styled-component.js.fjsx15
+    - include: pop-now
+
+  optional-value-no-pop:
+    - match: (?=[;()\[\]{}])
+      pop: true
+    - match: \,
+      scope: punctuation.separator.sequence.css.css3
+    - include: embedded-expression
+    - match: (?=\S)
+      push:
+        - include: Packages/Naomi/syntaxes/css3/value.sublime-syntax
+
+  pop-now:
+    - match: ""
+      pop: true
+
+  property:
+    - include: comment-no-pop
+    - include: Packages/Naomi/syntaxes/css3/property.sublime-syntax
+
+  styled-component:
+    # Actual styled component code.
+    - match: \`
+      scope: punctuation.definition.template-expression.begin.js.fjsx15
+      set: styled-component-content
+    # Sub properties or function calls after “styled”.
+    - match: (?=\S)
+      push:
+        - include: Packages/Naomi/syntaxes/fjsx15/comment.sublime-syntax
+        - include: Packages/Naomi/syntaxes/fjsx15/expression.sublime-syntax
+
+  styled-component-content:
+    - clear_scopes: true
+    - meta_content_scope: source.css
+    - include: comment-no-pop
+    # Close.
+    - match: \`
+      scope: punctuation.definition.template-expression.end.js.fjsx15
+      pop: true
+    - match: ;
+      scope: punctuation.terminator.css.css3
+    - include: embedded-expression
+    - match: (?=\S)
+      push: [ delimiter, property ]
+
+      # push: [ delimiter, property ]
+      # push:
+      #   - include: PackaVkes/Naomi/syntaxes/css3/ruleset/block-content.sublime-syntax
+      # with_prototype:
+      #   - match: (?=`)
+      #     pop: true
diff --git a/syntaxes/fjsx15/literal/string/template.sublime-syntax b/syntaxes/fjsx15/literal/string/template.sublime-syntax
@@ -39,16 +39,21 @@ variables:
 
 contexts:
   main:
-    - match: (?xi)({{commonIdentifier}})?\s*(\`)
-      captures:
-        1: entity.name.function.tag.js.fjsx15
-        2: punctuation.definition.string.begin.js.fjsx15
+    # Simple tag.
+    - match: (?xi){{commonIdentifier}}(?=\s*\`)
+      scope: entity.name.function.tag.js.fjsx15
+      pop: true
+    # Simple template string.
+    - match: \`
+      scope: punctuation.definition.string.begin.js.fjsx15
+      with_prototype:
+        - include: embedded-expression
       set: string
 
   close-embedded-expression:
     - clear_scopes: true
     - meta_scope: >-
-        source.js.fjsx15
+        source.js
         meta.template-expression.js.fjsx15
     - match: \}
       scope: punctuation.definition.template-expression.end.js.fjsx15
@@ -57,6 +62,11 @@ contexts:
   embedded-content:
     - include: Packages/Naomi/syntaxes/fjsx15/optional-expression.sublime-syntax
 
+  embedded-expression:
+    - match: \$\{
+      scope: punctuation.definition.template-expression.begin.js.fjsx15
+      push: [ close-embedded-expression, embedded-content ]
+
   string:
     - meta_scope: string.template.js.fjsx15
     # Close.
@@ -66,7 +76,3 @@ contexts:
     # Escape.
     - match: (?xi){{escapeSequences}}
       scope: constant.character.escape.js.fjsx15
-    # Embedded expression.
-    - match: \$\{
-      scope: punctuation.definition.template-expression.begin.js.fjsx15
-      push: [ close-embedded-expression, embedded-content ]