From 358a272fc05a290bacfafed5671824737d5c4b8d Mon Sep 17 00:00:00 2001 From: Garet McKinley Date: Tue, 13 Dec 2016 09:51:32 -0500 Subject: [PATCH] add styled-components support --- JavaScript (Babel).YAML-tmLanguage | 54 +++ JavaScript (Babel).tmLanguage | 143 ++++++++ Styled Components.tmLanguage | 542 +++++++++++++++++++++++++++++ test/syntax_test_styles.js | 41 +++ 4 files changed, 780 insertions(+) create mode 100644 Styled Components.tmLanguage create mode 100644 test/syntax_test_styles.js diff --git a/JavaScript (Babel).YAML-tmLanguage b/JavaScript (Babel).YAML-tmLanguage index 80b4241..9e9772d 100644 --- a/JavaScript (Babel).YAML-tmLanguage +++ b/JavaScript (Babel).YAML-tmLanguage @@ -17,6 +17,8 @@ repository: - include: '#literal-for' - include: '#literal-switch' + - include: '#styled-components' # add support for styled-components + - include: '#expression' - include: '#literal-punctuation' @@ -1094,6 +1096,58 @@ repository: - name: constant.character.escape.js match: \\([1-7][0-7]{0,2}|[0-7]{2,3}|[bfnrtv0'"\\]|x\h{2}|u\{\h+\}|u\h{4}) + styled-components: + patterns: + - include: '#styled-components-styled' + - include: '#styled-components-global' + - include: '#styled-components-keyframes' + styled-components-global: + begin: \s*+(?:(?:injectGlobal))\s*((`)) + beginCaptures: + '0': + name: entity.name.function.js + '2': + name: string.interpolated.css keyword.other.template.begin.css + end: (`) + endCaptures: + '1': + name: string.interpolated.css keyword.other.template.end.css + name: source.css.embedded.js + patterns: + - include: source.scss + styled-components-keyframes: + begin: \s*+(?:(?:keyframes))\s*((`)) + beginCaptures: + '0': + name: entity.name.function.js + '2': + name: string.interpolated.css keyword.other.template.begin.css + end: (`) + endCaptures: + '1': + name: string.interpolated.css keyword.other.template.end.css + name: source.css.embedded.js + patterns: + - include: source.scss + styled-components-styled: + begin: \s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`)) + beginCaptures: + '1': + name: variable.other.object.js + '2': + name: keyword.operator.accessor + '3': + name: meta.function entity.name.function + '5': + name: string.interpolated.css keyword.other.template.begin.css + end: (`) + endCaptures: + '0': + name: string.interpolated.css keyword.other.template.end.css + name: source.css.embedded.js + patterns: + - include: source.js.css + literal-variable: patterns: # e.g. CONSTANT diff --git a/JavaScript (Babel).tmLanguage b/JavaScript (Babel).tmLanguage index c94909b..2ba5be6 100644 --- a/JavaScript (Babel).tmLanguage +++ b/JavaScript (Babel).tmLanguage @@ -475,6 +475,10 @@ include #literal-switch + + include + #styled-components + include #expression @@ -3616,6 +3620,145 @@ + styled-components + + patterns + + + include + #styled-components-styled + + + include + #styled-components-global + + + include + #styled-components-keyframes + + + + styled-components-global + + begin + \s*+(?:(?:injectGlobal))\s*((`)) + beginCaptures + + 0 + + name + entity.name.function.js + + 2 + + name + string.interpolated.css keyword.other.template.begin.css + + + end + (`) + endCaptures + + 1 + + name + string.interpolated.css keyword.other.template.end.css + + + name + source.css.embedded.js + patterns + + + include + source.scss + + + + styled-components-keyframes + + begin + \s*+(?:(?:keyframes))\s*((`)) + beginCaptures + + 0 + + name + entity.name.function.js + + 2 + + name + string.interpolated.css keyword.other.template.begin.css + + + end + (`) + endCaptures + + 1 + + name + string.interpolated.css keyword.other.template.end.css + + + name + source.css.embedded.js + patterns + + + include + source.scss + + + + styled-components-styled + + begin + \s*+(?:(?:(\bstyled)(?:(\.)\s*(\w+))))\s*((`)) + beginCaptures + + 1 + + name + variable.other.object.js + + 2 + + name + keyword.operator.accessor + + 3 + + name + meta.function entity.name.function + + 5 + + name + string.interpolated.css keyword.other.template.begin.css + + + end + (`) + endCaptures + + 0 + + name + string.interpolated.css keyword.other.template.end.css + + + name + source.css.embedded.js + patterns + + + include + source.js.css + + + support-class patterns diff --git a/Styled Components.tmLanguage b/Styled Components.tmLanguage new file mode 100644 index 0000000..0c704e1 --- /dev/null +++ b/Styled Components.tmLanguage @@ -0,0 +1,542 @@ + + + + + comment + + foldingStartMarker + /\*\*(?!\*)|\{\s*($|/\*(?!.*?\*/.*\S)) + foldingStopMarker + (?<!\*)\*\*/|^\s*\} + keyEquivalent + ^~C + name + Styled Components + patterns + + + include + #comment-block + + + include + #rule-list + + + repository + + color-values + + patterns + + + comment + http://www.w3.org/TR/CSS21/syndata.html#value-def-color + match + \b(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|orange|purple|red|silver|teal|white|yellow)\b + name + support.constant.color.w3c-standard-color-name.css + + + comment + These colours are mostly recognised but will not validate. ref: http://www.w3schools.com/css/css_colornames.asp + 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 + name + invalid.deprecated.color.w3c-non-standard-color-name.css + + + begin + (hsla?|rgba?)\s*(\() + beginCaptures + + 1 + + name + support.function.misc.css + + 2 + + name + punctuation.section.function.css + + + end + (\)) + endCaptures + + 1 + + name + punctuation.section.function.css + + + patterns + + + 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]))? + + name + 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*% + name + constant.other.color.rgb-percentage.css + + + include + #numeric-values + + + + + + comment-block + + begin + /\* + captures + + 0 + + name + punctuation.definition.comment.css + + + end + \*/ + name + comment.block.css + + media-query + + begin + (?i)\s*(only|not)?\s*(all|aural|braille|embossed|handheld|print|projection|screen|tty|tv)? + beginCaptures + + 1 + + name + keyword.operator.logic.media.css + + 2 + + name + support.constant.media.css + + + end + \s*(?:(,)|(?=[{;])) + endCaptures + + 1 + + name + punctuation.definition.arbitrary-repitition.css + + + patterns + + + begin + \s*(and)?\s*(\()\s* + beginCaptures + + 1 + + name + keyword.operator.logic.media.css + + + end + \) + patterns + + + begin + (?x) + ( + ((min|max)-)? + ( + ((device-)?(height|width|aspect-ratio))| + (color(-index)?)|monochrome|resolution + ) + )|grid|scan|orientation + \s*(?=[:)]) + beginCaptures + + 0 + + name + support.type.property-name.media.css + + + end + (:)|(?=\)) + endCaptures + + 1 + + name + punctuation.separator.key-value.css + + + + + match + \b(portrait|landscape|progressive|interlace) + name + support.constant.property-value.css + + + captures + + 1 + + name + constant.numeric.css + + 2 + + name + keyword.operator.arithmetic.css + + 3 + + name + constant.numeric.css + + + match + \s*(\d+)(/)(\d+) + + + include + #numeric-values + + + + + + media-query-list + + begin + \s*(?=[^{;]) + end + \s*(?=[{;]) + patterns + + + include + #media-query + + + + numeric-values + + patterns + + + captures + + 1 + + name + punctuation.definition.constant.css + + + match + (#)([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\b + name + constant.other.color.rgb-value.css + + + captures + + 1 + + name + keyword.other.unit.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|%)? + + name + constant.numeric.css + + + + property-values + + patterns + + + 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 + name + 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) + name + support.constant.font-name.css + + + include + #numeric-values + + + include + #color-values + + + include + #string-double + + + include + #string-single + + + begin + (rect)\s*(\() + beginCaptures + + 1 + + name + support.function.misc.css + + 2 + + name + punctuation.section.function.css + + + end + (\)) + endCaptures + + 1 + + name + punctuation.section.function.css + + + patterns + + + include + #numeric-values + + + + + begin + (format|local|url|attr|counter|counters)\s*(\() + beginCaptures + + 1 + + name + support.function.misc.css + + 2 + + name + punctuation.section.function.css + + + end + (\)) + endCaptures + + 1 + + name + punctuation.section.function.css + + + patterns + + + include + #string-single + + + include + #string-double + + + match + [^'") \t]+ + name + variable.parameter.misc.css + + + + + match + \!\s*important + name + keyword.other.important.css + + + + rule-list + + begin + + beginCaptures + + 0 + + name + punctuation.section.property-list.css + + + end + (?=\s*) + name + meta.property-list.css + patterns + + + include + #comment-block + + + begin + (?<![-a-z])(?=[-a-z]) + end + $|(?![-a-z]) + name + meta.property-name.css + patterns + + + match + \b(azimuth|background-attachment|background-color|background-image|background-position|background-repeat|background|box-shadow|border-radius|border-bottom-color|border-bottom-style|border-bottom-width|border-bottom|border-collapse|border-color|border-left-color|border-left-style|border-left-width|border-left|border-right-color|border-right-style|border-right-width|border-right|border-spacing|border-style|border-top-color|border-top-style|border-top-width|border-top|border-width|border|bottom|caption-side|clear|clip|color|content|counter-increment|counter-reset|cue-after|cue-before|cue|cursor|direction|display|elevation|empty-cells|flex-basis|flex-direction|flex-flow|flex-grow|flex-shrink|flex-wrap|flex|float|font-family|font-size-adjust|font-size|font-stretch|font-style|font-variant|font-weight|font|height|image-rendering|left|letter-spacing|line-height|list-style-image|list-style-position|list-style-type|list-style|margin-bottom|margin-left|margin-right|margin-top|marker-offset|margin|marks|max-height|max-width|min-height|min-width|-moz-border-radius|opacity|orphans|outline-color|outline-style|outline-width|outline|overflow(-[xy])?|padding-bottom|padding-left|padding-right|padding-top|padding|page-break-after|page-break-before|page-break-inside|page|pause-after|pause-before|pause|pitch-range|pitch|play-during|pointer-events|position|quotes|resize|richness|right|size|speak-header|speak-numeral|speak-punctuation|speech-rate|speak|src|stress|table-layout|text-(align|decoration|indent|rendering|shadow|transform)|top|transition|unicode-bidi|vertical-align|visibility|voice-family|volume|white-space|widows|width|word-(spacing|wrap)|zoom|z-index)\b + name + support.type.property-name.css + + + + + begin + (?<!&|:)(:)\s* + beginCaptures + + 1 + + name + punctuation.separator.key-value.css + + + end + \s*(;|(?=\})) + endCaptures + + 1 + + name + punctuation.terminator.rule.css + + + name + meta.property-value.css + patterns + + + include + #property-values + + + + + + string-double + + begin + " + beginCaptures + + 0 + + name + punctuation.definition.string.begin.css + + + end + " + endCaptures + + 0 + + name + punctuation.definition.string.end.css + + + name + string.quoted.double.css + patterns + + + match + \\. + name + constant.character.escape.css + + + + string-single + + begin + ' + beginCaptures + + 0 + + name + punctuation.definition.string.begin.css + + + end + ' + endCaptures + + 0 + + name + punctuation.definition.string.end.css + + + name + string.quoted.single.css + patterns + + + match + \\. + name + constant.character.escape.css + + + + + scopeName + source.js.css + uuid + b64876fa-0739-4b2b-8e5b-e9e8b9f84514 + + diff --git a/test/syntax_test_styles.js b/test/syntax_test_styles.js new file mode 100644 index 0000000..60aca41 --- /dev/null +++ b/test/syntax_test_styles.js @@ -0,0 +1,41 @@ +// SYNTAX TEST "JavaScript (Babel).tmLanguage" + +styled.h1`color:palevioletred;` +//^^^^ source.js source.css.embedded.js variable.other.object.js +// ^ source.js source.css.embedded.js keyword.operator.accessor +// ^^ source.js source.css.embedded.js meta.function entity.name.function +// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.begin.css +// ^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-name.css support.type.property-name.css +// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.separator.key-value.css +// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css invalid.deprecated.color.w3c-non-standard-color-name.css +// ^ source.js source.css.embedded.js meta.property-list.css meta.property-value.css punctuation.terminator.rule.css +// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css + +injectGlobal`body{color:#ffcc00;}` +//^^^^^^^^^^ source.js source.css.embedded.js entity.name.function.js +// ^ source.js string.interpolated.css keyword.other.template.begin.css +// ^^^^ source.js source.css.embedded.js entity.name.tag.scss +// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss +// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss +// ^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss constant.other.color.rgb-value.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss +// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss +// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css + +keyframes`0%{color:palevioletred;}50%{color:dodgerblue;}` +//^^^^^^^ source.js source.css.embedded.js entity.name.function.js +// ^ source.js string.interpolated.css keyword.other.template.begin.css +// ^^ source.js source.css.embedded.js +// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.begin.scss +// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss +// ^^^^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss +// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss +// ^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-name.scss support.type.property-name.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.separator.key-value.scss +// ^^^^^^^^^^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss invalid.deprecated.color.w3c-non-standard-color-name.scss +// ^ source.js source.css.embedded.js meta.property-list.scss meta.property-value.scss punctuation.terminator.rule.scss +// ^ source.js source.css.embedded.js meta.property-list.scss punctuation.section.property-list.end.scss +// ^ source.js source.css.embedded.js string.interpolated.css keyword.other.template.end.css