diff --git a/Packages/JSX/Default.sublime-keymap b/Packages/JSX/Default.sublime-keymap new file mode 100644 index 0000000..f890840 --- /dev/null +++ b/Packages/JSX/Default.sublime-keymap @@ -0,0 +1,62 @@ +[ + // Auto-pair backticks + { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`$0`"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^(?:\t| |\\)|]|\\}|>|$)", "match_all": true }, + { "key": "preceding_text", "operator": "not_regex_contains", "operand": "[`a-zA-Z0-9_]$", "match_all": true }, + { "key": "eol_selector", "operator": "not_equal", "operand": "string.quoted.template", "match_all": true } + ] + }, + { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`${0:$SELECTION}`"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true } + ] + }, + { "keys": ["`"], "command": "move", "args": {"by": "characters", "forward": true}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^`", "match_all": true } + ] + }, + + // Auto-pair interpolation + { "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}, "context": + [ + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, + { "key": "selector", "operator": "equal", "operand": "source.js string.template.js - meta.template.expression.js", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\$$", "match_all": true } + ] + }, + { "keys": ["$"], "command": "insert_snippet", "args": {"contents": "\\${${0:$SELECTION}}"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js string.template.js - meta.template.expression.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true } + ] + }, + + // JSX close tag (inside JSX) + { "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js meta.jsx.js - meta.embedded.expression - string - comment", "match_all": true }, + { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true }, + { "key": "setting.auto_close_tags" } + ] + }, + // JSX close tag (outer-most tag) + { "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context": + [ + { "key": "selector", "operator": "equal", "operand": "source.js - string - comment", "match_all": true }, + { "key": "preceding_text", "operator": "regex_match", "operand": "^\\s*<$", "match_all": true }, + { "key": "setting.auto_close_tags" } + ] + } +] diff --git a/Packages/JSX/JSX (Inner).tmPreferences b/Packages/JSX/JSX (Inner).tmPreferences new file mode 100644 index 0000000..168af83 --- /dev/null +++ b/Packages/JSX/JSX (Inner).tmPreferences @@ -0,0 +1,28 @@ + + + + + name + JSX + scope + source.js meta.jsx.js - meta.embedded.expression + settings + + shellVariables + + + name + TM_COMMENT_START + value + {/* + + + name + TM_COMMENT_END + value + */} + + + + + diff --git a/Packages/JSX/JSX (Outer).tmPreferences b/Packages/JSX/JSX (Outer).tmPreferences new file mode 100644 index 0000000..788984b --- /dev/null +++ b/Packages/JSX/JSX (Outer).tmPreferences @@ -0,0 +1,21 @@ + + + + + name + JSX 2 + scope + source.js + settings + + decreaseIndentPattern + (?x) + ^\s*</[^>]+>$ + | ^\s*/>$ + increaseIndentPattern + (?x) + ^\s*<[^/>]+>$ + | ^\s*<[^/>\s]+$ + + + diff --git a/Packages/JSX/JavaScript (Babel).sublime-syntax b/Packages/JSX/JavaScript (Babel).sublime-syntax new file mode 100644 index 0000000..e3e3fcc --- /dev/null +++ b/Packages/JSX/JavaScript (Babel).sublime-syntax @@ -0,0 +1,1288 @@ +%YAML 1.2 +--- +# http://www.sublimetext.com/docs/3/syntax.html +name: JavaScript (Babel) +file_extensions: + - js + - jsx + - babel + - es6 +first_line_match: ^#!\s*/.*\b(node|js)$\n? +scope: source.js +contexts: + main: + - include: core + brackets: + - include: round-brackets + - include: square-brackets + - include: curly-brackets + class-method-definition: + - match: '(@@[_$a-zA-Z][$\w]*|static|return)(?=\s*[<(])|(?=\s*<)' + captures: + 1: keyword.operator.flowtype.js + push: + - meta_scope: meta.short-method.flowtype.js + - match: '(?=\s*[;{])' + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - include: flowtype-annotation + - include: comments + - include: curly-brackets + - match: '(?<=[]"''])\s*(?=[<(])' + push: + - meta_scope: meta.class-method.computed.js + - match: '(?=\s*[;{])' + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - include: flowtype-annotation + - include: comments + - include: curly-brackets + - match: |- + (?x) + ((?>get|set)\s+) + (?> + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + )(?=\s*[<(]) + captures: + 1: storage.type.js + 2: string.quoted.js + 3: punctuation.definition.string.begin.js + 4: entity.name.function.js + 5: punctuation.definition.string.end.js + 6: string.quoted.js + 7: punctuation.definition.string.begin.js + 8: entity.name.function.js + 9: punctuation.definition.string.end.js + 10: string.unquoted.js + 11: entity.name.function.js + push: + - meta_scope: meta.class-accessor.js + - match: '(?=\s*[;{])' + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - include: flowtype-annotation + - include: comments + - include: curly-brackets + - match: |- + (?x) + (?> + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + )(?=\s*[<(]) + captures: + 1: string.quoted.js + 2: punctuation.definition.string.begin.js + 3: entity.name.function.js + 4: punctuation.definition.string.end.js + 5: string.quoted.js + 6: punctuation.definition.string.begin.js + 7: entity.name.function.js + 8: punctuation.definition.string.end.js + 9: string.unquoted.js + 10: entity.name.function.js + push: + - meta_scope: meta.class-method.js + - match: '(?=\s*[;{])' + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - include: flowtype-annotation + - include: comments + - include: curly-brackets + class-method-storage: + - match: (?static|declare)\b + scope: storage.modifier.js + - match: (?) + scope: comment.block.html.js + captures: + 0: punctuation.definition.comment.js + - match: (//).*$\n? + scope: comment.line.double-slash.js + captures: + 1: punctuation.definition.comment.js + - match: ^(#!).*$\n? + scope: comment.line.shebang.js + captures: + 1: punctuation.definition.comment.js + core: + - include: literal-function-labels + - include: literal-arrow-function-labels + - include: literal-labels + - include: literal-for + - include: literal-switch + - include: styled-components + - include: graphql + - include: expression + - include: literal-punctuation + curly-brackets: + - match: "{" + captures: + 0: meta.brace.curly.begin.js + push: + - meta_scope: meta.group.braces.curly.js + - match: "}" + captures: + 0: meta.brace.curly.end.js + pop: true + - include: main + es7-decorators: + - match: |- + (?x) + (@)([_$a-zA-Z][$\w]*)\b + scope: tag.decorator.js + captures: + 1: punctuation.definition.tag.js + 2: entity.name.tag.js + expression: + - include: merge-conflits + - include: literal-regexp + - include: literal-jsx + - include: es7-decorators + - include: support-class + - include: support-other + - include: literal-function + - include: literal-arrow-function + - include: literal-prototype + - include: literal-keywords + - include: literal-method + - include: literal-module + - include: literal-class + - include: flowtype-declaration + - include: literal-number + - include: literal-template-string + - include: literal-string + - include: literal-language-constant + - include: literal-language-variable + - include: literal-constructor + - include: literal-method-call + - include: literal-function-call + - include: comments + - include: brackets + - include: literal-operators + - include: literal-variable + flowtype-annotation: + - match: (?:(\?)\s*)?(:) + captures: + 1: keyword.operator.flowtype.optional.js + 2: keyword.operator.flowtype.annotation.js + push: + - meta_scope: meta.flowtype.annotation.js + - include: flowtype-tokens + - match: (?=\S) + pop: true + flowtype-brackets: + - match: "{" + captures: + 0: punctuation.section.flowtype.begin.js + push: + - match: "}" + captures: + 0: punctuation.section.flowtype.end.js + pop: true + - include: flowtype-tokens + flowtype-declaration: + - match: (?" + captures: + 0: punctuation.section.flowtype.end.js + pop: true + - include: flowtype-tokens + flowtype-tokens: + - match: '(?<=[:?|&=])(?=\s*{)' + push: + - match: "(?<=})" + pop: true + - include: flowtype-brackets + - match: '\s*([|&])\s*' + scope: meta.flowtype.set.js + captures: + 1: keyword.operator.flowtype.other.js + - match: '[*:?&|.]|\.\.\.|\b(typeof)\b' + scope: keyword.operator.flowtype.other.js + - match: < + captures: + 0: punctuation.section.flowtype.begin.js + push: + - match: ">" + captures: + 0: punctuation.section.flowtype.end.js + pop: true + - include: flowtype-tokens + - match: '\[' + captures: + 0: punctuation.section.flowtype.begin.js + push: + - match: '\]' + captures: + 0: punctuation.section.flowtype.end.js + pop: true + - include: flowtype-tokens + - match: \( + captures: + 0: punctuation.section.flowtype.begin.js + push: + - match: \) + captures: + 0: punctuation.section.flowtype.end.js + pop: true + - include: flowtype-tokens + - match: "=>" + captures: + 0: keyword.operator.flowtype.js + push: + - meta_scope: meta.flowtype.function.js + - match: "(?<=}|[_$a-zA-Z])" + pop: true + - include: flowtype-brackets + - include: flowtype-identifier + - include: comments + - include: flowtype-identifier + - include: literal-string + - include: comments + function-declaration-parameters: + - match: \( + captures: + 0: punctuation.definition.parameters.begin.js + push: + - match: \) + captures: + 0: punctuation.definition.parameters.end.js + pop: true + - include: comments + - include: flowtype-annotation + - match: (?" + captures: + 0: meta.tag.jsx punctuation.definition.tag.end.jsx + push: + - match: (?=)|(/>) + captures: + 1: meta.tag.jsx punctuation.definition.tag.begin.jsx + 2: meta.tag.jsx entity.name.tag.jsx + 3: meta.tag.jsx punctuation.definition.tag.end.jsx + 4: meta.tag.jsx punctuation.definition.tag.end.jsx + pop: true + - include: jsx-tag-end + - include: jsx-attributes + - match: < + scope: invalid.illegal.tag.incomplete.jsx + literal-arrow-function: + - match: |- + (?x) + (?:([_$a-zA-Z][$\w]*)\s*(=)\s*)? + (?:\b(async)\s+)? + (?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>)) + captures: + 1: entity.name.function.js + 2: keyword.operator.assignment.js + 3: storage.type.js + push: + - meta_scope: meta.function.arrow.js + - match: (?<=\))\s*(=>) + captures: + 1: storage.type.function.arrow.js + pop: true + - include: function-declaration-parameters + - match: |- + (?x) + (?:([_$a-zA-Z][$\w]*)\s*(=)\s*)? + (?:(async)\s+)? + \b([_$a-zA-Z][$\w]*)\s*(=>) + scope: meta.function.arrow.js + captures: + 1: entity.name.function.js + 2: keyword.operator.assignment.js + 3: storage.type.js + 4: variable.parameter.function.js + 5: storage.type.function.arrow.js + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)(prototype) + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(async)? + \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>)) + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: variable.language.prototype.js + 4: keyword.operator.accessor.js + 5: entity.name.function.js + 6: keyword.operator.assignment.js + 7: storage.type.js + push: + - meta_scope: meta.prototype.function.arrow.js + - match: (?<=\))\s*(=>) + captures: + 1: storage.type.function.arrow.js + pop: true + - include: function-declaration-parameters + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)(prototype) + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(async)? + \s*\b([_$a-zA-Z][$\w]*)\s*(=>) + scope: meta.prototype.function.arrow.js + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: variable.language.prototype.js + 4: keyword.operator.accessor.js + 5: entity.name.function.js + 6: keyword.operator.assignment.js + 7: storage.type.js + 8: variable.parameter.function.js + 9: storage.type.function.arrow.js + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(async)? + \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>)) + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: entity.name.function.js + 4: keyword.operator.assignment.js + 5: storage.type.js + push: + - meta_scope: meta.function.static.arrow.js + - match: (?<=\))\s*(=>) + captures: + 1: storage.type.function.arrow.js + pop: true + - include: function-declaration-parameters + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(async)? + \s*\b([_$a-zA-Z][$\w]*)\s*(=>) + scope: meta.function.static.arrow.js + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: entity.name.function.js + 4: keyword.operator.assignment.js + 5: storage.type.js + 6: variable.parameter.function.js + 7: storage.type.function.arrow.js + literal-arrow-function-labels: + - match: |- + (?x) + (?> + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + ) + \s*(:) + \s*(?:\b(async)\s+)? + \s*(?=(\((?>(?>[^()]+)|\g<-1>)*\))\s*(=>)) + captures: + 1: string.quoted.js + 2: punctuation.definition.string.begin.js + 3: entity.name.function.js + 4: punctuation.definition.string.end.js + 5: string.quoted.js + 6: punctuation.definition.string.begin.js + 7: entity.name.function.js + 8: punctuation.definition.string.end.js + 9: string.unquoted.js + 10: entity.name.function.js + 11: punctuation.separator.key-value.js + 12: storage.type.js + push: + - meta_scope: meta.function.json.arrow.js + - match: (?<=\))\s*(=>) + captures: + 1: storage.type.function.arrow.js + pop: true + - include: function-declaration-parameters + - match: |- + (?x) + (?> + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + ) + \s*(:) + \s*(?:\b(async)\s+)? + \s*\b([_$a-zA-Z][$\w]*)\s*(=>) + scope: meta.function.json.arrow.js + captures: + 1: string.quoted.js + 2: punctuation.definition.string.begin.js + 3: entity.name.function.js + 4: punctuation.definition.string.end.js + 5: string.quoted.js + 6: punctuation.definition.string.begin.js + 7: entity.name.function.js + 8: punctuation.definition.string.end.js + 9: string.unquoted.js + 10: entity.name.function.js + 11: punctuation.separator.key-value.js + 12: storage.type.js + 13: variable.parameter.function.js + 14: storage.type.function.arrow.js + literal-class: + - match: (?\s*(\*)|(?=[\s(<])) + \s*([_$a-zA-Z][$\w]*)? + captures: + 1: entity.name.function.js + 2: keyword.operator.assignment.js + 3: storage.type.js + 4: storage.type.function.js + 5: keyword.generator.asterisk.js + 6: entity.name.function.js + push: + - meta_scope: meta.function.js + - match: (?<=\)) + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)(prototype) + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(?:(async)\s+)? + \s*(function)(?>\s*(\*)|(?=[\s(<])) + \s*([_$a-zA-Z][$\w]*)?\s* + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: variable.language.prototype.js + 4: keyword.operator.accessor.js + 5: entity.name.function.js + 6: keyword.operator.assignment.js + 7: storage.type.js + 8: storage.type.function.js + 9: keyword.generator.asterisk.js + 10: entity.name.function.js + push: + - meta_scope: meta.function.prototype.js + - match: (?<=\)) + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + - match: |- + (?x) + (\b_?[A-Z][$\w]*)? + (\.)([_$a-zA-Z][$\w]*) + \s*(=) + \s*(?:(async)\s+)? + \s*(function)(?>\s*(\*)|(?=[\s(<])) + \s*([_$a-zA-Z][$\w]*)?\s* + captures: + 1: entity.name.class.js + 2: keyword.operator.accessor.js + 3: entity.name.function.js + 4: keyword.operator.assignment.js + 5: storage.type.js + 6: storage.type.function.js + 7: keyword.generator.asterisk.js + 8: entity.name.function.js + push: + - meta_scope: meta.function.static.js + - match: (?<=\)) + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + literal-function-call: + - match: '([_$a-zA-Z][$\w]*)\s*(\(\s*\))' + scope: meta.function-call.without-arguments.js + captures: + 1: variable.function.js + 2: meta.group.braces.round.function.arguments.js + - match: '([_$a-zA-Z][$\w]*)\s*(?=\()' + scope: meta.function-call.with-arguments.js + captures: + 1: variable.function.js + - match: '([_$a-zA-Z][$\w]*)\s*(?=`)' + scope: meta.function-call.tagged-template.js + captures: + 1: variable.function.js + literal-function-labels: + - match: |- + (?x) + (?> + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + ) + \s*(:) + \s*(?:\b(async)\s+)? + \s*(function)(?>\s*(\*)|(?=[\s(<])) + \s*([_$a-zA-Z][$\w]*)? + captures: + 1: string.quoted.js + 2: punctuation.definition.string.begin.js + 3: entity.name.function.js + 4: punctuation.definition.string.end.js + 5: string.quoted.js + 6: punctuation.definition.string.begin.js + 7: entity.name.function.js + 8: punctuation.definition.string.end.js + 9: string.unquoted.js + 10: entity.name.function.js + 11: punctuation.separator.key-value.js + 12: storage.type.js + 13: storage.type.function.js + 14: keyword.generator.asterisk.js + 15: entity.name.function.js + push: + - meta_scope: meta.function.json.js + - match: (?<=\)) + pop: true + - include: flowtype-polymorph + - include: function-declaration-parameters + literal-jsx: + - match: '(?<=\(|\{|\[|,|&&|\|\||\?|:|=|=>|\Wreturn|^return|\Wdefault|^)(?=\s*<[_$a-zA-Z])' + push: + - meta_content_scope: meta.jsx.js + - match: (?<=/>|>) + pop: true + - include: jsx-tag-start + literal-keyword-storage: + - match: (?const|let|var)\b + scope: storage.type.js + literal-keywords: + - include: literal-keyword-storage + - match: (?await|yield))\b(?:\s*(\*))? + captures: + 1: keyword.control.flow.js + 2: keyword.generator.asterisk.js + - match: (?if|else)\b + scope: keyword.control.conditional.js + - match: (?catch|finally|throw|try)\b + scope: keyword.control.trycatch.js + - match: (?break|continue|do|goto|while|case|default)\b + scope: keyword.control.loop.js + - match: (?enum|module|public|package|private|interface|protected)\b + scope: keyword.other.reserved.js + - match: (? + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + )\s*:) + push: + - match: ":" + captures: + 0: punctuation.separator.key-value.js + pop: true + - include: literal-string + - match: '(? + ((')((?>[^'\\]|\\.)*)('))| + ((")((?>[^"\\]|\\.)*)("))| + (([_$a-zA-Z][$\w]*|\d+)) + ) + (?=\s*(\((?>(?>[^()]+)|\g<-1>)*\))(?>\s|/\*.*\*/)*\{) + captures: + 1: storage.type.js + 2: storage.type.js + 3: keyword.generator.asterisk.js + 4: string.quoted.js + 5: punctuation.definition.string.begin.js + 6: entity.name.function.js + 7: punctuation.definition.string.end.js + 8: string.quoted.js + 9: punctuation.definition.string.begin.js + 10: entity.name.function.js + 11: punctuation.definition.string.end.js + 12: string.unquoted.js + 13: entity.name.function.js + push: + - meta_scope: meta.method.js + - match: (?<=\)) + pop: true + - include: function-declaration-parameters + - match: |- + (?x) + \b(?:(static)\s+)? + (get|set)\s+ + ([_$a-zA-Z][$\w]*|\d+)\s* + (?=(\((?>(?>[^()]+)|\g<-1>)*\))(?>\s|/\*.*\*/)*\{) + captures: + 1: storage.type.js + 2: storage.type.accessor.js + 3: entity.name.accessor.js + push: + - meta_scope: meta.accessor.js + - match: (?<=\)) + pop: true + - include: function-declaration-parameters + literal-method-call: + - match: |- + (?x) + (?:(?<=\.)|\b) + ([A-Z][$\w]*)\s*(\.) + ([_$a-zA-Z][$\w]*)\s* + (\(\s*\)) + scope: meta.function-call.static.without-arguments.js + captures: + 1: variable.other.class.js + 2: keyword.operator.accessor.js + 3: variable.function.js + 4: meta.group.braces.round.function.arguments.js + - match: |- + (?x) + (?:(?<=\.)|\b) + ([A-Z][$\w]*)\s*(\.) + ([_$a-zA-Z][$\w]*)\s* + (?=\() + scope: meta.function-call.static.with-arguments.js + captures: + 1: variable.other.class.js + 2: keyword.operator.accessor.js + 3: variable.function.js + - match: |- + (?x) + (?<=\.) + ([_$a-zA-Z][$\w]*)\s* + (\(\s*\)) + scope: meta.function-call.method.without-arguments.js + captures: + 1: variable.function.js + 2: meta.group.braces.round.function.arguments.js + - match: |- + (?x) + (?<=\.) + ([_$a-zA-Z][$\w]*)\s* + (?=\() + scope: meta.function-call.method.with-arguments.js + captures: + 1: variable.function.js + literal-module: + - match: (?import|export|default|from|as)\b + scope: keyword.operator.module.js + literal-number: + - match: '(?i)(?:\B[-+]|\b)0x[0-9a-f]*\.(\B|\b[0-9]+)' + scope: invalid.illegal.numeric.hex.js + - match: '(?:\B[-+]|\b)0[0-9]+\.(\B|\b[0-9]+)' + scope: invalid.illegal.numeric.octal.js + - match: |- + (?xi) + (?:\B[-+])? + (?: + \b0b[0-1]*| # binary + \b0o[0-7]*| # octal + \b0x[0-9a-f]*| # hex + ( + \B\.[0-9]+| # e.g. .999 + \b[0-9]+(\.[0-9]*)? # e.g. 999.999, 999. or 999 + )(e[-+]?[0-9]+)? # e.g. e+123, E-123 + ) + scope: constant.numeric.js + - match: '(?:\B[-+]|\b)(Infinity)\b' + scope: constant.language.infinity.js + literal-operators: + - match: (?delete|instanceof|in|new|of|typeof|void|with)\b + scope: keyword.operator.js + - match: |- + (?x) + !(?!=)| # logical-not right-to-left right + && | # logical-and left-to-right both + \|\| # logical-or left-to-right both + scope: keyword.operator.logical.js + - match: |- + (?x) + =(?!=) # assignment right-to-left both + scope: keyword.operator.assignment.js + - match: |- + (?x) + %= | # assignment right-to-left both + &= | # assignment right-to-left both + \*= | # assignment right-to-left both + \+= | # assignment right-to-left both + -= | # assignment right-to-left both + /= | # assignment right-to-left both + \^= | # assignment right-to-left both + \|= | # assignment right-to-left both + <<= | # assignment right-to-left both + >>= | # assignment right-to-left both + >>>= # assignment right-to-left both + scope: keyword.operator.assignment.augmented.js + - match: |- + (?x) + ~ | # bitwise-not right-to-left right + << | # bitwise-shift left-to-right both + >>> | # bitwise-shift left-to-right both + >> | # bitwise-shift left-to-right both + & | # bitwise-and left-to-right both + \^ | # bitwise-xor left-to-right both + \| # bitwise-or left-to-right both + scope: keyword.operator.bitwise.js + - match: |- + (?x) + <= | # relational left-to-right both + >= | # relational left-to-right both + < | # relational left-to-right both + > # relational left-to-right both + scope: keyword.operator.relational.js + - match: |- + (?x) + === | # equality left-to-right both + !== | # equality left-to-right both + == | # equality left-to-right both + != # equality left-to-right both + scope: keyword.operator.comparison.js + - match: |- + (?x) + -- | # decrement n/a right-or-left + \+\+ | # increment n/a right-or-left + / | # division left-to-right both + % | # modulus left-to-right both + \* | # multiplication left-to-right both + \+ | # addition left-to-right both + - # subtraction left-to-right both + scope: keyword.operator.arithmetic.js + - match: "[?:]" + scope: keyword.operator.ternary.js + - match: (?|<=|>=|==|!=|===|!==|\+|-|\*|%|\+\+|--|<<|>>|>>>|&|\||\^|!|~|&&|\|\||\?|:|=|\+=|-=|\*=|%=|<<=|>>=|>>>=|&=|\|=|\^=|/|/=| + \Wnew|\Wdelete|\Wvoid|\Wtypeof|\Winstanceof|\Win|\Wdo|\Wreturn|\Wcase|\Wthrow|\Wyield| + ^new|^delete|^void|^typeof|^instanceof|^in|^do|^return|^case|^throw|^yield|^ + )\s* + (/) + (?!/|\*|$) + captures: + 1: punctuation.definition.string.begin.js + push: + - meta_scope: string.regexp.js + - match: "(/)([gimy]*)" + captures: + 1: punctuation.definition.string.end.js + 2: keyword.other.js + pop: true + - include: scope:source.regexp.js + literal-string: + - match: '(["''])' + captures: + 0: punctuation.definition.string.begin.js + push: + - meta_scope: string.quoted.js + - match: (\1)|(\n) + captures: + 1: punctuation.definition.string.end.js + 2: invalid.illegal.newline.js + pop: true + - include: string-content + literal-switch: + - match: (?]{7})\s(.+)$' + captures: + 1: invalid.illegal.conflict-marker.other-commit.js + 2: invalid.illegal.string.js + round-brackets: + - match: \( + captures: + 0: meta.brace.round.begin.js + push: + - meta_scope: meta.group.braces.round.js + - match: \) + captures: + 0: meta.brace.round.end.js + pop: true + - include: expression + square-brackets: + - match: '\[' + captures: + 0: meta.brace.square.begin.js + push: + - meta_scope: meta.group.braces.square.js + - match: '\]' + captures: + 0: meta.brace.square.end.js + pop: true + - include: expression + string-content: + - match: \\\s*\n + scope: constant.character.escape.newline.js + - match: '\\([1-7][0-7]{0,2}|[0-7]{2,3}|[bfnrtv0''"\\]|x\h{2}|u\{\h+\}|u\h{4})' + scope: constant.character.escape.js + styled-components: + - match: (?(?>[^()]+)|\g<-1>)*\))\s*`)' + captures: + 1: meta.function-call.with-arguments.js variable.function.js + push: + - meta_scope: meta.styled-components.js + - match: (?<=`) + captures: + 1: meta.function-call.with-arguments.js variable.function.js + pop: true + - match: \( + captures: + 0: punctuation.definition.group.begin.js + push: + - meta_scope: meta.function-call.with-arguments.js meta.group.js + - match: \) + captures: + 0: punctuation.definition.group.end.js + pop: true + - include: expression + - match: "`" + captures: + 0: punctuation.definition.string.template.begin.js + push: + - meta_content_scope: source.css.embedded.js + - match: "`" + captures: + 0: punctuation.definition.string.template.end.js + pop: true + - include: scope:source.js.css + support-class: + - match: (?Eval|Range|Reference|Syntax|Type|URI)?Error)\b + scope: support.class.error.js + - match: \b(?>Buffer)\b + scope: support.class.node.js + support-other: + - match: (?document|window)\b + scope: support.type.object.dom.js + - match: (?global|GLOBAL|root|__dirname|__filename)\b + scope: support.type.object.node.js + - match: (? Only supports **Sublime Text 3**. Sublime Text 2 is no longer supported. + +Language definitions for [ES6+ JavaScript](http://kangax.github.io/compat-table/es6/) with [React JSX syntax](http://facebook.github.io/react/docs/jsx-in-depth.html) extensions. + +## Installation + +Find it as [**Babel**](https://packagecontrol.io/packages/Babel) through [Package Control](https://packagecontrol.io/). + +#### Setting as the default syntax + +To set it as the default syntax for a particular extension: + 1. Open a file with that extension, + 2. Select `View` from the menu, + 3. Then `Syntax` `->` `Open all with current extension as...` `->` `Babel` `->` `JavaScript (Babel)`. + 4. Repeat this for each extension (e.g.: `.js` and `.jsx`). + +#### Setting a Color Scheme + +`Babel` comes bundled with `Next` and `Monokai` from [Benvie/JavaScriptNext.tmLanguage](https://github.com/Benvie/JavaScriptNext.tmLanguage). Select one from `Preferences` `->` `Color Scheme` `->` `Babel` + +#### Advanced usage + +It's possible to set `Babel` as the _only_ JavaScript package by disabling the stock one. To do so, add `"ignored_packages": ["JavaScript"]` to your `Preferences.sublime-settings`. The benefits include: + * extension-less node scripts will automatically be recognized as `JavaScript (Babel)`, + * and reduced clutter in the syntax menu. + +**Keep in mind**, the stock snippets will no longer work (you may still use your own), and other third-party packages that depend on the stock package may break (no known ones so far). + +## Screenshots + +![babel-sublime-vs-sublime-react--react-class](https://raw.githubusercontent.com/babel/babel-sublime/45c7d37/screenshots/compare-react-class@2x.png) + +* `babel-sublime` supports modern JavaScript syntax, including [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), [shorthand methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions), [template strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings), and more. + +![babel-sublime-vs-sublime-react--jsx-comments-etc](https://raw.githubusercontent.com/babel/babel-sublime/9a6e85f/screenshots/compare-jsx-comments-etc@2x.png) + +* `babel-sublime` correctly matches JSX comments between attributes, namespaced components, and non-alpha characters in tag/attribute names. + +![babel-sublime-vs-sublime-react--jsx-tight](https://raw.githubusercontent.com/babel/babel-sublime/9a6e85f/screenshots/compare-jsx-tight@2x.png) + +* Greater-/less-than comparisons are correctly identified as such and not mistaken for JSX tags. + +## Snippets + +Find them separately at [babel/babel-sublime-snippets](https://github.com/babel/babel-sublime-snippets) or as [**Babel Snippets**](https://packagecontrol.io/packages/Babel%20Snippets) through [Package Control](https://packagecontrol.io/). + +## Suggested Resources + +Sublime Text Color Schemes which are ready for JavaScript's new features and babel-sublime package. + +#### [Oceanic Next Color Scheme](https://github.com/voronianski/oceanic-next-theme) + +[![](https://raw.githubusercontent.com/voronianski/babel-sublime/master/screenshots/oceanic-next.png)](https://github.com/voronianski/oceanic-next-theme) + +#### [Zeus Color Scheme](https://github.com/zaynali53/Zeus-Theme) + +[![zeus-color-scheme](https://raw.githubusercontent.com/zaynali53/Zeus-Theme/master/Zeus-Color-Scheme.PNG)](https://github.com/zaynali53/Zeus-Theme) + +## About + +Under the hood, _babel-sublime_ is based on the excellent [Benvie/JavaScriptNext.tmLanguage](https://github.com/Benvie/JavaScriptNext.tmLanguage) with JSX syntax support built on top. The initial definitions for JSX came from [reactjs/sublime-react](https://github.com/reactjs/sublime-react) via [yungters/sublime](https://github.com/yungsters/sublime.git) - special thanks go to [@jgebhardt](https://github.com/jgebhardt) and [@zpao](https://github.com/zpao). + +## Contributing + +Pull Requests should include your changes to the respective `YAML-tmKittens` file as well as the converted `tmKittens` file. Use [AAAPackageDev](https://github.com/SublimeText/AAAPackageDev) to convert the `YAML-tmKittens` files. diff --git a/Packages/JSX/Styled Components.sublime-syntax b/Packages/JSX/Styled Components.sublime-syntax new file mode 100644 index 0000000..75cb4fa --- /dev/null +++ b/Packages/JSX/Styled Components.sublime-syntax @@ -0,0 +1,188 @@ +%YAML 1.2 +--- +# http://www.sublimetext.com/docs/3/syntax.html +name: Styled Components +comment: "" +scope: source.js.css +contexts: + main: + - include: comment-block + - include: rule-list + color-values: + - match: \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b + comment: http://www.w3.org/TR/CSS21/syndata.html#value-def-color + scope: support.constant.color.w3c-standard-color-name.css + - match: \b(aliceblue|antiquewhite|aquamarine|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|cyan|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|gold|goldenrod|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavender|lavenderblush|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|magenta|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olivedrab|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|whitesmoke|yellowgreen)\b + comment: "These colours are mostly recognised but will not validate. ref: http://www.w3schools.com/css/css_colornames.asp" + scope: invalid.deprecated.color.w3c-non-standard-color-name.css + - match: (hsla?|rgba?)\s*(\() + captures: + 1: support.function.misc.css + 2: punctuation.section.function.css + push: + - match: (\)) + captures: + 1: punctuation.section.function.css + pop: true + - match: |- + (?x)\b + (0*((1?[0-9]{1,2})|(2([0-4][0-9]|5[0-5])))\s*,\s*){2} + (0*((1?[0-9]{1,2})|(2([0-4][0-9]|5[0-5])))\b) + (\s*,\s*((0?\.[0-9]+)|[0-1]))? + scope: constant.other.color.rgb-value.css + - match: '\b([0-9]{1,2}|100)\s*%,\s*([0-9]{1,2}|100)\s*%,\s*([0-9]{1,2}|100)\s*%' + scope: constant.other.color.rgb-percentage.css + - include: numeric-values + comment-block: + - match: /\* + captures: + 0: punctuation.definition.comment.css + push: + - meta_scope: comment.block.css + - match: \*/ + captures: + 0: punctuation.definition.comment.css + pop: true + media-query: + - match: (?i)\s*(only|not)?\s*(all|aural|braille|embossed|handheld|print|projection|screen|tty|tv)? + captures: + 1: keyword.operator.logic.media.css + 2: support.constant.media.css + push: + - match: '\s*(?:(,)|(?=[{;]))' + captures: + 1: punctuation.definition.arbitrary-repitition.css + pop: true + - match: \s*(and)?\s*(\()\s* + captures: + 1: keyword.operator.logic.media.css + push: + - match: \) + pop: true + - match: |- + (?x) + ( + ((min|max)-)? + ( + ((device-)?(height|width|aspect-ratio))| + (color(-index)?)|monochrome|resolution + ) + )|grid|scan|orientation + \s*(?=[:)]) + captures: + 0: support.type.property-name.media.css + push: + - match: (:)|(?=\)) + captures: + 1: punctuation.separator.key-value.css + pop: true + - match: \b(portrait|landscape|progressive|interlace) + scope: support.constant.property-value.css + - match: \s*(\d+)(/)(\d+) + captures: + 1: constant.numeric.css + 2: keyword.operator.arithmetic.css + 3: constant.numeric.css + - include: numeric-values + media-query-list: + - match: '\s*(?=[^{;])' + push: + - match: '\s*(?=[{;])' + pop: true + - include: media-query + numeric-values: + - match: '(#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b' + scope: constant.other.color.rgb-value.css + captures: + 1: punctuation.definition.constant.css + - match: |- + (?x) + (?:-|\+)?(?:(?:[0-9]+(?:\.[0-9]+)?)|(?:\.[0-9]+)) + ((?:px|pt|ch|cm|mm|in|r?em|ex|pc|deg|g?rad|dpi|dpcm|s)\b|%)? + scope: constant.numeric.css + captures: + 1: keyword.other.unit.css + property-values: + - match: \b(absolute|all(-scroll)?|always|armenian|auto|avoid|baseline|below|bidi-override|block|bold|bolder|both|bottom|break-all|break-word|capitalize|center|char|circle|cjk-ideographic|col-resize|collapse|crosshair|dashed|decimal-leading-zero|decimal|default|disabled|disc|distribute-all-lines|distribute-letter|distribute-space|distribute|dotted|double|e-resize|ellipsis|fixed|geometricPrecision|georgian|groove|hand|hebrew|help|hidden|hiragana-iroha|hiragana|horizontal|ideograph-alpha|ideograph-numeric|ideograph-parenthesis|ideograph-space|inactive|inherit|inline-block|inline|inset|inside|inter-ideograph|inter-word|italic|justify|katakana-iroha|katakana|keep-all|left|lighter|line-edge|line-through|line|list-item|loose|lower-alpha|lower-greek|lower-latin|lower-roman|lowercase|lr-tb|ltr|medium|middle|move|n-resize|ne-resize|newspaper|no-drop|no-repeat|nw-resize|none|normal|not-allowed|nowrap|oblique|optimize(Legibility|Quality|Speed)|outset|outside|overline|pointer|pre(-(wrap|line))?|progress|relative|repeat-x|repeat-y|repeat|right|ridge|row-resize|rtl|s-resize|scroll|se-resize|separate|small-caps|solid|square|static|strict|sub|super|sw-resize|table-footer-group|table-header-group|tb-rl|text-bottom|text-top|text|thick|thin|top|transparent|underline|upper-alpha|upper-latin|upper-roman|uppercase|vertical(-(ideographic|text))?|visible(Painted|Fill|Stroke)?|w-resize|wait|whitespace|zero|smaller|larger|((xx?-)?(small|large))|painted|fill|stroke)\b + scope: support.constant.property-value.css + - match: (\b(?i:arial|century|comic|courier|garamond|georgia|helvetica|impact|lucida|symbol|system|tahoma|times|trebuchet|utopia|verdana|webdings|sans-serif|serif|monospace)\b) + scope: support.constant.font-name.css + - include: numeric-values + - include: color-values + - include: string-double + - include: string-single + - match: (rect)\s*(\() + captures: + 1: support.function.misc.css + 2: punctuation.section.function.css + push: + - match: (\)) + captures: + 1: punctuation.section.function.css + pop: true + - include: numeric-values + - match: (format|local|url|attr|counter|counters)\s*(\() + captures: + 1: support.function.misc.css + 2: punctuation.section.function.css + push: + - match: (\)) + captures: + 1: punctuation.section.function.css + pop: true + - include: string-single + - include: string-double + - match: '[^''") \t]+' + scope: variable.parameter.misc.css + - match: \!\s*important + scope: keyword.other.important.css + rule-list: + - match: "" + captures: + 0: punctuation.section.property-list.css + push: + - meta_scope: meta.property-list.css + - match: (?=\s*) + pop: true + - include: comment-block + - match: "(?