commit eaf1c210d9d41b96b1ca6eda9bdfc1daa00cdf01 parent a0e3a3f81ae7c57c1e640edb1ce8f55aa2a46079 Author: Alex Balgavy <alex@balgavy.eu> Date: Sat, 12 Jun 2021 23:09:58 +0200 Web tech notes Diffstat:
80 files changed, 15482 insertions(+), 120 deletions(-)
diff --git a/content/_index.md b/content/_index.md @@ -44,7 +44,7 @@ title = "Alex's university course notes" * [Systems architecture](https://thezeroalpha.github.io/sysarch-notes) * [Physical Computing](https://thezeroalpha.github.io/physcomp-notes) * [Logic & sets](logicsets-notes/) -* [Web tech](https://thezeroalpha.github.io/webtech-notes) +* [Web tech](webtech-notes) * [Computer Networks](compnet-notes/) * [History of Science](history-science-notes/) * [Networks & graphs](networksgraphs-notes/) diff --git a/content/webtech-notes/Accessibility.html b/content/webtech-notes/Accessibility.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-08 2:35:40 PM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:20:11 PM +0000"/><title>Accessibility</title></head><body><div><div><ul><li>Content is available to different user groups through multiple devices<br/></li><li>Implements universal access<br/></li></ul></div><div><ul><ul><li>single version of content, equally accessible</li><li>unattainable in full, but we can approach it</li></ul><li>But why?</li><ul><li>legal stuff</li><li>reaching all customers</li><li>promotes sound design principles</li></ul><li>Disabilities: visual, auditory, motor, cognitive</li><li>Principles of accessibility</li><ul><li>perceivable: sight, hearing, touch</li><li>operable: input, interaction, error recovery</li><li>understandable: meaning, language</li><li>robust: reusable, current & future tech</li></ul><li>Screen readers & links</li><ul><li>links should make sense out of context</li><li>use alt text</li></ul><li>Screen magnifiers</li><ul><li>need true text, not images</li><li>keep user feedback local</li></ul><li>Videos</li><ul><li>don’t assume plugins</li><li>no autostart please for the love of fuck</li><li>keyboard controls</li><li>add toggling captions</li></ul><li>People with motoric impairments</li><ul><li>voice recognition</li><li>eye tracking</li><li>sip/puff switch</li></ul><li>Cognitive disabilities</li><ul><li>keep it simple & consistent</li><li>readability</li><ul><li>avoid full justified text (“rivers of white”)</li><li>sans-serif fonts</li><li>good contrast & size</li></ul><li>error prevention</li><li>focus, structure</li><ul><li>avoid popups</li><li>please god no background sounds</li></ul></ul><li>text-only isn’t bad, but not the only solution!<br/></li><li>use semantic</li></ul></div></div><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Accessibility.md b/content/webtech-notes/Accessibility.md @@ -0,0 +1,45 @@ ++++ +title = 'Accessibility' ++++ +# Accessibility +- Content is available to different user groups through multiple devices +- Implements universal access + - single version of content, equally accessible + - unattainable in full, but we can approach it +- But why? + - legal stuff + - reaching all customers + - promotes sound design principles +- Disabilities: visual, auditory, motor, cognitive +- Principles of accessibility + - perceivable: sight, hearing, touch + - operable: input, interaction, error recovery + - understandable: meaning, language + - robust: reusable, current & future tech +- Screen readers & links + - links should make sense out of context + - use alt text +- Screen magnifiers + - need true text, not images + - keep user feedback local +- Videos + - don't assume plugins + - no autostart please for the love of fuck + - keyboard controls + - add toggling captions +- People with motoric impairments + - voice recognition + - eye tracking + - sip/puff switch +- Cognitive disabilities + - keep it simple & consistent + - readability + - avoid full justified text ("rivers of white") + - sans-serif fonts + - good contrast & size + - error prevention + - focus, structure + - avoid popups + - please god no background sounds +- text-only isn't bad, but not the only solution! +- use semantic diff --git a/content/webtech-notes/Architecture of the Web.html b/content/webtech-notes/Architecture of the Web.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-18 11:33:52 AM +0000"/><meta name="updated" content="2018-01-24 12:45:47 PM +0000"/><title>Architecture of the Web</title></head><body><div><ul><li>biggest info system ever</li><li>success because flexible & incremental</li><ul><li>layers on top of already functional layers</li></ul></ul></div><div><br/></div><div>REST (Representational State Transfer)</div><div><ul><li>key principles</li><ul><li>all sources are resources, uniquely accessible via URI</li><li>clients & servers need to know:</li></ul></ul></div><div><ol><ol><ol><li>URI of resource</li><li>Allowed actions (GET, POST, HEAD...)</li><li>Allowed representations (text/html or others)</li></ol></ol></ol></div><div><ul><ul><li>client doesn't need to kno how server generates representation</li><li>server doesn't need to know how client renders content</li><li>neither have to be aware of intermediate proxies</li><li>there is no HTTP communication state (response doesn’t depend on previous request, no side effects)</li><ul><li>delete/put are unsafe but idempotent</li><li>get and similar are safe</li><li>post needs warning, can happen multiple times</li></ul></ul><li>typical HTTP requests</li><ul><li>GET data</li><li>POST (e.g. submit form)</li><li>PUT (update info)</li><li>DELETE</li></ul></ul></div><div><br/></div><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Architecture of the Web.md b/content/webtech-notes/Architecture of the Web.md @@ -0,0 +1,30 @@ ++++ +title = 'Architecture of the Web' ++++ +# Architecture of the Web +- biggest info system ever +- success because flexible & incremental + - layers on top of already functional layers + +REST (Representational State Transfer) + +- key principles + - all sources are resources, uniquely accessible via URI + - clients & servers need to know: + + 1. URI of resource + 2. Allowed actions (GET, POST, HEAD...) + 3. Allowed representations (text/html or others) + + - client doesn't need to kno how server generates representation + - server doesn't need to know how client renders content + - neither have to be aware of intermediate proxies + - there is no HTTP communication state (response doesn't depend on previous request, no side effects) + - delete/put are unsafe but idempotent + - get and similar are safe + - post needs warning, can happen multiple times +- typical HTTP requests + - GET data + - POST (e.g. submit form) + - PUT (update info) + - DELETE diff --git a/content/webtech-notes/Client-side: JavaScript.html b/content/webtech-notes/Client-side: JavaScript.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-11 11:10:25 AM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:31:16 PM +0000"/><title>Client-side: JavaScript</title></head><body><div><ul><li>interpreted, no compilation<br/></li><ul><li>interpreter is embedded in another app (browser)</li></ul><li>scripts operate in document/browser</li><li>dynamically typed — untyped variables, typed values</li><li>objects</li><ul><li>an object is a set of properties</li><li>no classes!</li><li>a property is a unique-name key:value pair</li><li>created with a constructor:</li></ul></ul></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><div><font face="Courier New">var ob = new Object();</font></div></div><div><font face="Courier New">ob.testing = “test”;</font></div></blockquote></blockquote><font face="Helvetica Neue"><ul><ul><li>deleted with delete:</li></ul></ul></font><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><font face="Courier New">delete ob.testing;</font></div></blockquote></blockquote><ul><ul><li><font face="Helvetica Neue">built in: window (browser window), document (page in window)</font></li></ul><li><font face="Helvetica Neue">DOM API (Document Object Model)</font></li><ul><li><font face="Helvetica Neue">by W3C recommendations</font></li><li><font face="Helvetica Neue">works with document tree</font></li><li><font face="Helvetica Neue">functions from JS are called through HTML attributes</font></li><li><font face="Helvetica Neue">can add noes, remove nodes, change attributes</font></li></ul><li><font face="Helvetica Neue">Events</font></li><ul><li><font face="Helvetica Neue">when should shit happen?</font></li><li><font face="Helvetica Neue">after page loads, while(forever) wait for event</font></li><li><font face="Helvetica Neue">predefined: click, mouseover, mouseon, mouseout, keypress, resize, scroll, etc.</font></li><li><font face="Helvetica Neue">write a function to respond to event, then subscribe/register/bind it</font></li><li><font face="Helvetica Neue">browser calls it when needed</font></li><li><font face="Helvetica Neue">event “bubbling”: events execute from lowest node upwards</font></li></ul><li><font face="Helvetica Neue">AJAX (more like AJAJ or whatever, not really XML anymore, but AJAX sounds cooler)</font></li><ul><li><font face="Helvetica Neue">recipe (always the same)</font></li><ol><li><font face="Helvetica Neue">Make initial page</font></li><li><font face="Helvetica Neue">Set up event handlers</font></li><li><font face="Helvetica Neue">When called, handlers do magic (request new data from server over HTTP in XML/JSON/whatever)</font></li><ul><li><font face="Helvetica Neue">asynchronous, execution continues all the time, there’s no wait for the server</font></li><li><font face="Helvetica Neue">shitty using XMLHttpRequest, better with jQuery</font></li></ul></ol><li><font face="Helvetica Neue">fast, easier for users</font></li><li><font face="Helvetica Neue">weak browser integration (e.g. back button), low search engine indexing, accessibility, response time, security</font></li><li><font face="Helvetica Neue">same origin policy: requests to other sites will be blocked, unless the target site opts in explicitly</font></li><li><font face="Helvetica Neue">some AJAX calls return HTML, others JSON (originally XML)</font></li></ul><li><font face="Helvetica Neue">libraries — jQuery</font></li></ul><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Client-side_ JavaScript.md b/content/webtech-notes/Client-side_ JavaScript.md @@ -0,0 +1,53 @@ ++++ +title = 'Client-side: JavaScript' ++++ +# Client-side: JavaScript +- interpreted, no compilation + - interpreter is embedded in another app (browser) +- scripts operate in document/browser +- dynamically typed — untyped variables, typed values +- objects + - an object is a set of properties + - no classes! + - a property is a unique-name key:value pair + - created with a constructor: + + ```js + var ob = new Object(); + ob.testing = "test"; + ``` + + - deleted with delete: + + ```js + delete ob.testing; + ``` + + - built in: window (browser window), document (page in window) +- DOM API (Document Object Model) + - by W3C recommendations + - works with document tree + - functions from JS are called through HTML attributes + - can add noes, remove nodes, change attributes +- Events + - when should shit happen? + - after page loads, while(forever) wait for event + - predefined: click, mouseover, mouseon, mouseout, keypress, resize, scroll, etc. + - write a function to respond to event, then subscribe/register/bind it + - browser calls it when needed + - event "bubbling": events execute from lowest node upwards +- AJAX (more like AJAJ or whatever, not really XML anymore, but AJAX sounds cooler) + - recipe (always the same) + + 1. Make initial page + 2. Set up event handlers + + 3. When called, handlers do magic (request new data from server over HTTP in XML/JSON/whatever) + + - asynchronous, execution continues all the time, there's no wait for the server + - shitty using XMLHttpRequest, better with jQuery + - fast, easier for users + - weak browser integration (e.g. back button), low search engine indexing, accessibility, response time, security + - same origin policy: requests to other sites will be blocked, unless the target site opts in explicitly + - some AJAX calls return HTML, others JSON (originally XML) +- libraries — jQuery diff --git a/content/webtech-notes/Evaluation of Websites.html b/content/webtech-notes/Evaluation of Websites.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="altitude" content="-0.5099493265151978"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-24 1:00:21 PM +0000"/><meta name="latitude" content="52.37356293843497"/><meta name="longitude" content="4.836268901730849"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-24 1:17:32 PM +0000"/><title>Evaluation of Websites</title></head><body><div><b>Why evaluate?</b></div><div><ul><li>attract more visitors</li><li>sell more products</li><li>decide which web app to use</li><li>improve visitor ratings</li><li>etc.</li></ul><div><br/></div></div><div><b>Evaluation studies</b></div><div><ul><li>always start with a clear research question</li><ul><li>aka “problem statement”</li><li>practical/theoretical relevance, feasible</li><li>types of studies</li><ul><li>explorative — what is related?</li><ul><li>e.g. why do people visit the site again?</li></ul><li>descriptive — what happens?</li><ul><li>e.g. how many people find the site through a SE?</li></ul><li>explanatory — why does it happen?</li><ul><li>if you add login, do people visit the site again?</li><li>does a change in structure make it easier for visitors to find what they’re looking for?</li></ul></ul></ul><li>make a hypothesis</li><ul><li>a prediction of outcome of test</li><li>deduced from theory or observations</li></ul><li>collect data</li><ul><li>e.g. in lab experiments, survey, interview…</li><li>qualitative (non-numerical) and quantitative (numerical)</li><li>test dependent var with respect to independent var</li><li>specific population (customers/all web users/registered users/whatever)</li><li>specific sample (random/convenience/volunteers)</li></ul><li>evaluation methods</li><ul><li>common</li><ul><li>mockups</li><ul><li>low fidelity — early in design phase, only basic functionality, static, cheap. focus on concepts.</li><li>high fidelity — later in design phase, refined details, expensive.</li></ul><li>prototypes — working example of website</li><li>focus groups — moderated group discussion, early in design stage.</li><li>card sorting — group of people sort items into clusters to get intuitive structure for website</li><li>usability inspection — go systematically through website, check against Ten Web Guidelines. performed by dev team.</li><li>group walkthrough — group of people walk through website as if performing primary tasks</li><li>user testing — remote, observe user while primary tasks are performed. log actions, eye tracking, record video/audio.</li><li>survey</li><ul/></ul><li>specific to web evaluation</li><ul><li>web analytics</li><ul><li>analyse logfiles</li><li>JavaScript page tagging to capture visitor data</li><li>very good objective data, but privacy concerns and no insight into motivation or unvisited pages.</li></ul><li>online experiments<br/></li><ul><li>distribute visitors over versions, see which performs better</li><li>after release</li><li>example: A/B testing</li></ul></ul></ul></ul></div><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Evaluation of Websites.md b/content/webtech-notes/Evaluation of Websites.md @@ -0,0 +1,56 @@ ++++ +title = 'Evaluation of Websites' ++++ +# Evaluation of Websites +## Why evaluate? + +- attract more visitors +- sell more products +- decide which web app to use +- improve visitor ratings +- etc. + +## Evaluation studies + +- always start with a clear research question + - aka "problem statement" + - practical/theoretical relevance, feasible + - types of studies + - explorative — what is related? + - e.g. why do people visit the site again? + - descriptive — what happens? + - e.g. how many people find the site through a SE? + - explanatory — why does it happen? + - if you add login, do people visit the site again? + - does a change in structure make it easier for visitors to find what they're looking for? +- make a hypothesis + - a prediction of outcome of test + - deduced from theory or observations +- collect data + - e.g. in lab experiments, survey, interview… + - qualitative (non-numerical) and quantitative (numerical) + - test dependent var with respect to independent var + - specific population (customers/all web users/registered users/whatever) + - specific sample (random/convenience/volunteers) +- evaluation methods + - common + - mockups + - low fidelity — early in design phase, only basic functionality, static, cheap. focus on concepts. + - high fidelity — later in design phase, refined details, expensive. + - prototypes — working example of website + - focus groups — moderated group discussion, early in design stage. + - card sorting — group of people sort items into clusters to get intuitive structure for website + - usability inspection — go systematically through website, check against Ten Web Guidelines. performed by dev team. + - group walkthrough — group of people walk through website as if performing primary tasks + - user testing — remote, observe user while primary tasks are performed. log actions, eye tracking, record video/audio. + - survey + + - specific to web evaluation + - web analytics + - analyse logfiles + - JavaScript page tagging to capture visitor data + - very good objective data, but privacy concerns and no insight into motivation or unvisited pages. + - online experiments + - distribute visitors over versions, see which performs better + - after release + - example: A/B testing diff --git a/content/webtech-notes/HTML5 & W3C.html b/content/webtech-notes/HTML5 & W3C.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-07 3:16:24 PM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-07 3:27:36 PM +0000"/><title>HTML5 & W3C</title></head><body><div>initially, HTML was simple, but people began adding anything they could</div><div>each browser had different features — led to Balkanization, where each browser would e.g. only render a specific format image</div><div><br/></div><div><b>enter the W3C (World Wide Web Consortium)</b></div><div>the ‘web parliament’, a standards body</div><div>mission is to make the Web “available to all people (no matter hardware/software/network infrastruct/language/culture/location/physical or mental ability)"</div><div>made up of ~400 academic, non-profite, and corporate organisations (e.g. Google, MS, Facebook)</div><div>first tried to develop HTML into XHTML2, but fucked up</div><div>eventually accepted WHATWG’s approach with HTML5</div><div><br/></div><div><b>a unified markup language — HTML(5)</b></div><div>initially, HTML — a bunch of tags to dictate format</div><div>HTML5 includes audio, video, pictures, words, headlines, citations, canvases, 3D graphics, email, etc.</div><div>can be validated against the W3C recommendation</div><div>first developed by WHATWG (Web Hypertext App Tech Working Group), then W3C</div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/HTML5 & W3C.md b/content/webtech-notes/HTML5 & W3C.md @@ -0,0 +1,26 @@ ++++ +title = 'HTML5 & W3C' ++++ +# HTML5 & W3C +initially, HTML was simple, but people began adding anything they could + +each browser had different features — led to Balkanization, where each browser would e.g. only render a specific format image + +## enter the W3C (World Wide Web Consortium) +the 'web parliament', a standards body + +mission is to make the Web "available to all people (no matter hardware/software/network infrastruct/language/culture/location/physical or mental ability)" + +made up of ~400 academic, non-profit, and corporate organisations (e.g. Google, MS, Facebook) + +first tried to develop HTML into XHTML2, but fucked up +eventually accepted WHATWG's approach with HTML5 + +## a unified markup language — HTML(5) +initially, HTML — a bunch of tags to dictate format + +HTML5 includes audio, video, pictures, words, headlines, citations, canvases, 3D graphics, email, etc. + +can be validated against the W3C recommendation + +first developed by WHATWG (Web Hypertext App Tech Working Group), then W3C diff --git a/content/webtech-notes/HTTP.html b/content/webtech-notes/HTTP.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="altitude" content="-0.6550230383872986"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-10 2:33:25 PM +0000"/><meta name="latitude" content="52.33294868734879"/><meta name="longitude" content="4.865637733863039"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-10 2:48:06 PM +0000"/><title>HTTP</title></head><body><div>a request-response protocol</div><div>client is a user agent (browser), server is an application process running on a different computer</div><div><br/></div><div>URI: uniform resource identifier</div><div><ul><li>URN: uniform resource name</li><ul><li>unique name for resource (like a book’s ISBN)</li><li>relies on some authority to provide information</li></ul><li>URL: uniform resource locator</li><ul><li>location on the web</li><li>expect HTTP GET request to provide information about this resource</li></ul><li>a modern form is IRI (international resource identifier) which can also include unicode characters, not just ASCII</li></ul><div><br/></div></div><div>URLs:</div><div><font color="#ff2600">http://www.example.org</font>:<font color="#ff9300">5678</font><font color="#ff40ff">/a/b.txt</font>?<font color="#0433ff">tc=win&r=10</font><font color="#942192">#para5</font></div><div><ul><li>contain</li><ul><li>authority</li><ul><li><span style="color: rgb(255, 38, 0);">host (FQDN, fully qualified domain name)</span></li><li><span style="color: rgb(255, 147, 0);">port</span></li></ul><li>request-URI</li><ul><li><span style="color: rgb(255, 64, 255);">path</span></li><li><span style="color: rgb(4, 51, 255);">query</span></li></ul><li><span style="color: rgb(148, 33, 146);">fragment</span></li></ul><li>browser connects to authority over TCP</li><li>request-URI included in start line (/ is default)</li><li>fragment is not sent to server, used to scroll user’s view</li></ul><div><br/></div></div><div>Content negotiation</div><div><ul><li>multiple representations via the same URI</li><li>client-server negotiation determines what shows up</li></ul><div><br/></div></div><div>Request methods</div><div><ul><li>GET: get documents, no body in request</li><li>POST: e.g. when you click submit, form information is included in the boyd</li><li>HEAD: requests only the header fields to be returned</li></ul><div><br/></div></div><div>Request example:</div><div><font face="Courier New">GET /test.html HTTP/1.1</font></div><div><font face="Courier New">HOST: <a href="http://www.example.org">www.example.org</a></font></div><div>…</div><div><br/></div><div><font face="Helvetica Neue">Response example:</font></div><div><font face="Courier New">HTTP/1.1 200 OK</font></div><div><font face="Courier New">Date: <timestamp></font></div><div><br/></div><div><font face="Helvetica Neue">Header fields are included in the requests, like:</font></div><div><ul><li><span style="font-family: "Helvetica Neue";">user agent</span></li><li><span style="font-family: "Helvetica Neue";">referrer</span></li><li><span style="font-family: "Helvetica Neue";">content type</span></li><li><span style="font-family: "Helvetica Neue";">acceptable MIME types (data types like text/html, image/png, vide/mp4)</span><br/></li><li><font face="Helvetica Neue">character encoding (most popular being UTF-8 encoding of unicode)</font></li></ul></div><div><ul/><div><br/></div></div><div><font face="Helvetica Neue">HTTP response codes:</font></div><div><ul><li><font face="Helvetica Neue">three-digit number</font></li><li><font face="Helvetica Neue">first digit is the class</font></li><ul><li><font face="Helvetica Neue">1: information</font></li><li><font face="Helvetica Neue">2: success</font></li><li><font face="Helvetica Neue">3: redirect</font></li><li><font face="Helvetica Neue">4: client fucked up</font></li><li><font face="Helvetica Neue">5: server fucked up</font></li></ul><li><font face="Helvetica Neue">other two digits are extra information</font></li></ul><div><font face="Helvetica Neue"><br/></font></div></div><div><font face="Helvetica Neue">HTTP servers:</font></div><div><ul><li><font face="Helvetica Neue">initially, there weren’t that many, mostly FTP in the 90s</font></li><li><font face="Helvetica Neue">then, NCSA made httpd for free, and promptly fucked off to work on Netscape (stopping all support)</font></li><li><font face="Helvetica Neue">so developers started making patches, and turned it into “a patchy server”…the Apache server</font></li><li><font face="Helvetica Neue">a main loop for a server looks like so:</font></li></ul></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><font face="Courier New">while forever</font></div></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><font face="Courier New">listen on TCP port 80</font></div><div><font face="Courier New">read request</font></div><div><font face="Courier New">send response</font></div></blockquote></blockquote><font face="Helvetica Neue"><ul><li>the server doesn’t know its own hostname, because host names may be on the same machine (virtual hosts) and different responses may be needed for different hostnames</li><li>the server uses a config file to determine where “/“ is (the document root)</li></ul></font><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/HTTP.md b/content/webtech-notes/HTTP.md @@ -0,0 +1,94 @@ ++++ +title = 'HTTP' ++++ +# HTTP +a request-response protocol + +client is a user agent (browser), server is an application process running on a different computer + +URI: uniform resource identifier + +- URN: uniform resource name + - unique name for resource (like a book's ISBN) + - relies on some authority to provide information +- URL: uniform resource locator + - location on the web + - expect HTTP GET request to provide information about this resource +- a modern form is IRI (international resource identifier) which can also include unicode characters, not just ASCII + +URLs: +`http://www.example.org:5678/a/b.txt?tc=win&r=10#para5` + +- contain + - authority + - host (FQDN, fully qualified domain name) + - port + - request-URI + - path + - query + - fragment +- browser connects to authority over TCP +- request-URI included in start line (/ is default) +- fragment is not sent to server, used to scroll user's view + +Content negotiation + +- multiple representations via the same URI +- client-server negotiation determines what shows up + +Request methods + +- GET: get documents, no body in request +- POST: e.g. when you click submit, form information is included in the boyd +- HEAD: requests only the header fields to be returned + +Request example: + +``` +GET /test.html HTTP/1.1 +HOST: [www.example.org](http://www.example.org) +… +``` + +Response example: + +``` +HTTP/1.1 200 OK +Date: <timestamp> +``` + +Header fields are included in the requests, like: + +- user agent +- referrer +- content type +- acceptable MIME types (data types like text/html, image/png, vide/mp4) +- character encoding (most popular being UTF-8 encoding of unicode) + +HTTP response codes: + +- three-digit number +- first digit is the class + - 1: information + - 2: success + - 3: redirect + - 4: client fucked up + - 5: server fucked up +- other two digits are extra information + +HTTP servers: + +- initially, there weren't that many, mostly FTP in the 90s +- then, NCSA made httpd for free, and promptly fucked off to work on Netscape (stopping all support) +- so developers started making patches, and turned it into "a patchy server"…the Apache server +- a main loop for a server looks like so: + + ``` + while forever + listen on TCP port 80 + read request + send response + ``` + +- the server doesn't know its own hostname, because host names may be on the same machine (virtual hosts) and different responses may be needed for different hostnames +- the server uses a config file to determine where "/" is (the document root) diff --git a/content/webtech-notes/Internet history & overview.html b/content/webtech-notes/Internet history & overview.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="altitude" content="-0.6550230383872986"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-10 2:34:47 PM +0000"/><meta name="latitude" content="52.33294868734879"/><meta name="longitude" content="4.865637733863039"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-10 8:47:00 PM +0000"/><title>Internet history & overview</title></head><body><div>Internet — network of networks, connected to public backbone, with comms over TCP/IP</div><ul><li>started in late 1960 s as ARPANET</li><li>email was one of the first features (7972)</li><li>only a military thing</li><li>then, universities, in NSFNET</li><ul><li>NL was the first non-US country!</li></ul></ul><div><br/></div><div>Internet governance is held by:</div><ul><li>IETF (internet engineering task force)</li><ul><li>develops standards</li><li>anyone can participate</li></ul><li>IANA/ICANN, W3C</li></ul><div><br/></div><div>World Wide Web: a collection of machines providing information via HTTP</div><ul><li>invented at CERN, 1989, by Tim Bernerns-Lee</li><li>goal: simplify sharing research results over internet</li><li>originally competed with WAIS, Gopher, ARCHIE</li><li>distinctive features:</li><ul><li>locating documents with URLs (uniform resource locators)</li><li>document representation in HTML</li><li>communication over HTTP</li></ul><li>web browsers are used by clients to</li><ul><li>convert URLs to HTTP requests</li><li>communicate with web servers via HTTP/TCP/IP</li><li>render documents returned by web server</li><li>additional features: scripts, events, GUI, security, plugins</li></ul></ul><div><br/></div><div>Content markup (HTML)</div><ul><li>what role a piece of content plays in document</li><li>semantic</li><li>“what”, not “how”</li></ul><div><br/></div><div>Style markup (CSS)</div><ul><li>how content should be presented</li><li>includes format stuff like screen size</li></ul><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Internet history & overview.md b/content/webtech-notes/Internet history & overview.md @@ -0,0 +1,44 @@ ++++ +title = 'Internet history & overview' ++++ +# Internet history & overview +Internet — network of networks, connected to public backbone, with comms over TCP/IP + +- started in late 1960 s as ARPANET +- email was one of the first features (7972) +- only a military thing +- then, universities, in NSFNET + - NL was the first non-US country! + +Internet governance is held by: + +- IETF (internet engineering task force) + - develops standards + - anyone can participate +- IANA/ICANN, W3C + +World Wide Web: a collection of machines providing information via HTTP + +- invented at CERN, 1989, by Tim Bernerns-Lee +- goal: simplify sharing research results over internet +- originally competed with WAIS, Gopher, ARCHIE +- distinctive features: + - locating documents with URLs (uniform resource locators) + - document representation in HTML + - communication over HTTP +- web browsers are used by clients to + - convert URLs to HTTP requests + - communicate with web servers via HTTP/TCP/IP + - render documents returned by web server + - additional features: scripts, events, GUI, security, plugins + +Content markup (HTML) + +- what role a piece of content plays in document +- semantic +- "what", not "how" + +Style markup (CSS) + +- how content should be presented +- includes format stuff like screen size diff --git a/content/webtech-notes/Internet protocols.html b/content/webtech-notes/Internet protocols.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="altitude" content="-1.514543652534485"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-10 2:27:59 PM +0000"/><meta name="latitude" content="52.33314904223889"/><meta name="longitude" content="4.865572894879212"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-10 2:31:22 PM +0000"/><title>Internet protocols</title></head><body><div>Protocols — rules to communicate over network</div><ul><li>TCPIIP on ARPANET in 1982</li><li>works locally (LAN) & on network</li><li>various models of communication, mainly client/server, but also peer-to-peer and others.</li></ul><div><br/></div>IP (internet protocol):<br/><ul><li>address in IPv4 is 32 bits<br/></li><li>associated with max 1 device at a time<br/></li><li>written as 4 dot-separated bytes<br/></li><li>transfers data packets from source to destination (like postal service)<br/></li><li>packets created by IP software contain:<br/></li><ul><li>header with source/destination address, length, etc.<br/></li><li>data<br/></li></ul></ul><div>TCP (transmission control protocol)</div><ul><li>provides guarantee that packet is delivered</li><li>provides 2-way communication</li><li>analogy: telephone status report</li><li>adds ports (numbers) representing destination process on destination computer (with some being standard)</li><li>higher-level protocols like SMTP, FTP, HTTP are built on top of this</li></ul><div><br/></div><div>UDP (user datagram protocol):</div><div><ul><li>like TCP</li><ul><li>builds IP</li><li>provides ports</li></ul><li>unlike TCP</li><ul><li>no connection concept</li><li>no transmission guarantee</li></ul><li>UDP is lightweight, better for one-time messages</li></ul><div><br/></div></div><div>DNS (domain name service)</div><div><ul><li>“phone book”</li><li>maps IP to hostnames (www.example.org)</li><li>top-level domain is the last part (.com, .org, . edu, etc.)</li></ul><div><br/></div></div><div>Analogy: IP is a telephone network, TCP is a conversation, UDP is a voicemail message, DNS is the yellow pages/directory assistance</div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Internet protocols.md b/content/webtech-notes/Internet protocols.md @@ -0,0 +1,45 @@ ++++ +title = 'Internet protocols' ++++ +# Internet protocols +Protocols — rules to communicate over network + +- TCPI/IP on ARPANET in 1982 +- works locally (LAN) & on network +- various models of communication, mainly client/server, but also peer-to-peer and others. + +IP (internet protocol): + +- address in IPv4 is 32 bits +- associated with max 1 device at a time +- written as 4 dot-separated bytes +- transfers data packets from source to destination (like postal service) +- packets created by IP software contain: + - header with source/destination address, length, etc. + - data + +TCP (transmission control protocol) + +- provides guarantee that packet is delivered +- provides 2-way communication +- analogy: telephone status report +- adds ports (numbers) representing destination process on destination computer (with some being standard) +- higher-level protocols like SMTP, FTP, HTTP are built on top of this + +UDP (user datagram protocol): + +- like TCP + - builds IP + - provides ports +- unlike TCP + - no connection concept + - no transmission guarantee +- UDP is lightweight, better for one-time messages + +DNS (domain name service) + +- "phone book" +- maps IP to hostnames (www.example.org) +- top-level domain is the last part (.com, .org, . edu, etc.) + +Analogy: IP is a telephone network, TCP is a conversation, UDP is a voicemail message, DNS is the yellow pages/directory assistance diff --git a/content/webtech-notes/Responsive Web Design.html b/content/webtech-notes/Responsive Web Design.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="author" content="Alex Balgavy"/><meta name="created" content="2018-01-07 3:39:23 PM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:21:35 PM +0000"/><title>Responsive Web Design</title></head><body><div><ul><li>variety of devices (handheld have different screen sizes)</li><li>device independence: functional UX via any access mechanism</li><li>responsive web design makes a page look good on all devices</li><li>solutions</li><ul><li>fluid grids — percent instead of pixels</li><li>fluid images — max width at 100%</li><li>media queries (below</li></ul></ul></div><div><br/></div><div><span style="font-weight: bold;">Media queries</span></div><div>CSS used media types (screen, print, etc.) to target a specific class of devices, but most browsers didn’t really implement its functionality</div><div>in CSS3, the W3C included media queries to inspect physical characteristics of the device being used</div><div>either in a <span style="font-family: "Courier New";"><link> </span><span style="font-family: "Helvetica Neue";">tag:</span></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";"><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="stylesheet.css" /></span></div><div><br/></div></blockquote><div><span style="font-family: "Helvetica Neue";">or in a </span><span style="font-family: "Courier New";">@media </span><span style="font-family: "Helvetica Neue";">rule inside the actual CSS file:</span></div><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">@media screen and (max-device-width: 480px) {</span></div></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">.column {</span></div></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">float: none;</span></div></blockquote></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><span style="font-family: "Courier New";">}</span></blockquote></blockquote><blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><div><span style="font-family: "Courier New";">}</span></div></blockquote><div><br/></div><div><span style="font-family: "Helvetica Neue";">using this stuff, you can disable floats and set the width/margin for specific screen sizes</span></div><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Responsive Web Design.md b/content/webtech-notes/Responsive Web Design.md @@ -0,0 +1,35 @@ ++++ +title = 'Responsive Web Design' ++++ +# Responsive Web Design +- variety of devices (handheld have different screen sizes) +- device independence: functional UX via any access mechanism +- responsive web design makes a page look good on all devices +- solutions + - fluid grids — percent instead of pixels + - fluid images — max width at 100% + - media queries (below + +## Media queries + +CSS used media types (screen, print, etc.) to target a specific class of devices, but most browsers didn't really implement its functionality + +in CSS3, the W3C included media queries to inspect physical characteristics of the device being used + +either in a `<link>` tag: + +```html +<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="stylesheet.css" /> +``` + +or in a `@media` rule inside the actual CSS file: + +```css +@media screen and (max-device-width: 480px) { + .column { + float: none; + } +} +``` + +using this stuff, you can disable floats and set the width/margin for specific screen sizes diff --git a/content/webtech-notes/Searching & Search Engines.html b/content/webtech-notes/Searching & Search Engines.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-18 10:09:27 AM +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2018-01-18 4:45:21 PM +0000"/><title>Searching & Search Engines</title></head><body><div>Classic info retrieval model:</div><div><br/></div><div><img src="Searching%20&%20Search%20Engines.resources/screenshot.png" height="381" width="334"/></div><div><br/></div><div>Search types:</div><div><ul><li>Boolean search: terms (words) combined with AND/OR/NOT</li><li>Ad hoc query: one-time</li><li>others: browsing, recommender, social bookmarking</li></ul><div><br/></div></div><div>Search engines</div><div><ul><li>index pages: locally stored summaries</li><li>index building</li><ol><li>Crawling: follow links of pages they already know</li><li>Preprocessing</li><ul><li>Remove HTML tags</li><li>Tokenisation (split words on spaces)</li><li>Remove words like I, the it, a….</li><li>Take stem of words (e.g. “walking” -> “walk”)</li></ul><li>Build an index</li><ul><li>simple — term document matrix</li><ul><li>1 if term appears in document, otherwise 0</li><li>to answer query, bitwise AND the term vectors</li></ul><li>better — inverted index (just a standard index)</li><ul><li>for each term, store a list of all the documents containing it</li><li>terms are looked up in index, docs followed using ID</li></ul></ul></ol><li>judging search engine fucntionality</li><ul><li>ask human raters to judge (because it’s subjective)</li><li>mathematical — precision, recall (need to know how to calculate this!)</li><ul><li>there’s a tradeoff between precision & recall</li><li>as recall increases, precision decreases</li><li>F-measure is the harmonic mean of precision & recall</li><li>precision at N only includes the first N results</li></ul></ul><li>ranking</li><ul><li>weighting scheme tf.idf: </li><ul><li>every word is given a weight for a document, some are more important than others</li><ul><li>tf: term frequency</li><li>idf: inverse document frequency</li></ul></ul><li>Zipf’s law: frequency of a word is inversely proportional to its rank in the frequency table</li><li>Heap’s law: most common words are encountered quickly while scanning, but you continue to encounter new words (so you need to keep indexing)</li><li>PageRank: absolute score for a page</li></ul></ul></div><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Searching & Search Engines.resources/screenshot.png b/content/webtech-notes/Searching & Search Engines.resources/screenshot.png Binary files differ. diff --git a/content/webtech-notes/Searching & Search Engines/58ee7e1539ec44cd88941b2d254368b2.png b/content/webtech-notes/Searching & Search Engines/58ee7e1539ec44cd88941b2d254368b2.png Binary files differ. diff --git a/content/webtech-notes/Searching & Search Engines/index.md b/content/webtech-notes/Searching & Search Engines/index.md @@ -0,0 +1,50 @@ ++++ +title = 'Searching & Search Engines' ++++ +# Searching & Search Engines +Classic info retrieval model: + + + +Search types: + +- Boolean search: terms (words) combined with AND/OR/NOT +- Ad hoc query: one-time +- others: browsing, recommender, social bookmarking + +Search engines + +- index pages: locally stored summaries +- index building + + 1. Crawling: follow links of pages they already know + 2. Preprocessing + + - Remove HTML tags + - Tokenisation (split words on spaces) + - Remove words like I, the it, a…. + - Take stem of words (e.g. "walking" -> "walk") + + 3. Build an index + + - simple — term document matrix + - 1 if term appears in document, otherwise 0 + - to answer query, bitwise AND the term vectors + - better — inverted index (just a standard index) + - for each term, store a list of all the documents containing it + - terms are looked up in index, docs followed using ID +- judging search engine fucntionality + - ask human raters to judge (because it's subjective) + - mathematical — precision, recall (need to know how to calculate this!) + - there's a tradeoff between precision & recall + - as recall increases, precision decreases + - F-measure is the harmonic mean of precision & recall + - precision at N only includes the first N results +- ranking + - weighting scheme tf.idf: + - every word is given a weight for a document, some are more important than others + - tf: term frequency + - idf: inverse document frequency + - Zipf's law: frequency of a word is inversely proportional to its rank in the frequency table + - Heap's law: most common words are encountered quickly while scanning, but you continue to encounter new words (so you need to keep indexing) + - PageRank: absolute score for a page diff --git a/content/webtech-notes/Server-side.html b/content/webtech-notes/Server-side.html @@ -1,3 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html><head><link rel="stylesheet" type="text/css" href="sitewide.css"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)"/><meta name="created" content="2018-01-17 12:57:22 PM +0000"/><meta name="updated" content="2018-01-18 4:38:23 PM +0000"/><title>Server-side</title></head><body><ul><li>not all requests are for static content, need dynamic content through programmable server behaviour</li><ul><li>from a browser’s perspective, it’s just a URI</li><li>how to deal with this?</li></ul><li>enter CGI: common gateway interface</li><ul><li>commonly agreed way to run scripts as response to HTTP requests</li><li>program’s output returned verbatim to client</li><li>pros: very flexible</li><li>cons: new process per request, inconvenient with DBs, mixes program logic & HTML</li></ul><li>alternatives: frameworks, other languages</li><ul><li>PHP, Java, Python, Ruby on Rails</li><li>templates: stuff like Bottle, Flask, Handlebars…</li></ul><li>problems: concurrency, sessions/cookies, security…</li><ul><li>concurrency solution</li><ul><li>multiple threads (multithreading)</li><li>master thread delegates requests</li></ul><li>sessions</li><ul><li>how do you identify users? cookies.</li><li>first connection, user given ID in cookie</li><li>subsequent requests contain info (ID), used by the server for e.g. shopping cart</li></ul><li>database connectivity</li><ul><li>all frameworks simplify DB interaction</li><li>a server needs a LAMP (or MAMP, or WinAMP)</li><ul><li>OS with TCP/IP support (Linux)</li><li>HTTP server implementation (Apache)</li><li>Database for content (MySQL)</li><li>Framework to make page from database (PHP)</li></ul></ul><li>security issues</li><ul><li>some clients don’t have access to servers: proxy</li><li>some servers can’t access clients: reverse proxy</li><li>auth & encryption</li><ul><li>originally HTTP 1.0 Basic Access Auth (plaintext)</li><li>now, HTTPS over secure layer (public key encryption, everything is encrypted)</li><ul><li>not as vulnerable to man-in-the-middle attacks</li><li>site needs to send certificate, which is signed by a CA (certificate authority)</li></ul></ul><li>cross-origin resource sharing (CORS)</li><ul><li>opt in using HTTP headers</li><li>include origin, then server verifies if it’s OK</li></ul></ul></ul></ul><div><br/></div></body></html>- \ No newline at end of file diff --git a/content/webtech-notes/Server-side.md b/content/webtech-notes/Server-side.md @@ -0,0 +1,41 @@ ++++ +title = 'Server-side' ++++ +# Server-side +- not all requests are for static content, need dynamic content through programmable server behaviour + - from a browser's perspective, it's just a URI + - how to deal with this? +- enter CGI: common gateway interface + - commonly agreed way to run scripts as response to HTTP requests + - program's output returned verbatim to client + - pros: very flexible + - cons: new process per request, inconvenient with DBs, mixes program logic & HTML +- alternatives: frameworks, other languages + - PHP, Java, Python, Ruby on Rails + - templates: stuff like Bottle, Flask, Handlebars… +- problems: concurrency, sessions/cookies, security… + - concurrency solution + - multiple threads (multithreading) + - master thread delegates requests + - sessions + - how do you identify users? cookies. + - first connection, user given ID in cookie + - subsequent requests contain info (ID), used by the server for e.g. shopping cart + - database connectivity + - all frameworks simplify DB interaction + - a server needs a LAMP (or MAMP, or WinAMP) + - OS with TCP/IP support (Linux) + - HTTP server implementation (Apache) + - Database for content (MySQL) + - Framework to make page from database (PHP) + - security issues + - some clients don't have access to servers: proxy + - some servers can't access clients: reverse proxy + - auth & encryption + - originally HTTP 1.0 Basic Access Auth (plaintext) + - now, HTTPS over secure layer (public key encryption, everything is encrypted) + - not as vulnerable to man-in-the-middle attacks + - site needs to send certificate, which is signed by a CA (certificate authority) + - cross-origin resource sharing (CORS) + - opt in using HTTP headers + - include origin, then server verifies if it's OK diff --git a/content/webtech-notes/_index.md b/content/webtech-notes/_index.md @@ -0,0 +1,15 @@ ++++ +title = 'Web Tech' ++++ +# Web Tech +1. [Evaluation of Websites](evaluation-of-websites) +2. [Architecture of the Web](architecture-of-the-web) +3. [Searching & Search Engines](searching-search-engines) +4. [Server-side](server-side) +5. [Client-side: JavaScript](client-side-javascript) +6. [Responsive Web Design](responsive-web-design) +7. [Accessibility](accessibility) +8. [Internet history & overview](internet-history-overview) +9. [HTTP](http) +10. [Internet protocols](internet-protocols) +11. [HTML5 & W3C](html5-w3c) diff --git a/content/webtech-notes/index.html b/content/webtech-notes/index.html @@ -1,44 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<html> - -<head> - <link rel="stylesheet" type="text/css" href="sitewide.css"> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - <meta name="exporter-version" content="Evernote Mac 6.13.3 (455969)" /> - <meta name="altitude" content="-0.4758316576480865" /> - <meta name="author" content="Alex Balgavy" /> - <meta name="created" content="2018-01-29 8:48:42 PM +0000" /> - <meta name="latitude" content="52.37355189638392" /> - <meta name="longitude" content="4.836354765155818" /> - <meta name="source" content="desktop.mac" /> - <meta name="updated" content="2018-01-29 8:49:09 PM +0000" /> - <title>Web Tech Notes</title> -</head> - -<body> - <nav> -<a href="http://thezeroalpha.github.io">Homepage</a> -</nav> - - <h1>Web Tech Notes</h1> - <h3>Alex Balgavy</h3> - <ol> - <li><a href="HTML5%20%26%20W3C.html">HTML5 & W3C</a></li> - <li><a href="Internet%20protocols.html">Internet protocols</a></li> - <li><a href="HTTP.html">HTTP</a></li> - <li><a href="Internet%20history%20%26%20overview.html">Internet history & overview</a></li> - <li><a href="Accessibility.html">Accessibility</a></li> - <li><a href="Responsive%20Web%20Design.html">Responsive Web Design</a></li> - <li><a href="Client-side%3A%20JavaScript.html">Client-side: JavaScript</a></li> - <li><a href="Server-side.html">Server-side</a></li> - <li><a href="Searching%20%26%20Search%20Engines.html">Searching & Search Engines</a></li> - <li><a href="Architecture%20of%20the%20Web.html">Architecture of the Web</a></li> - <li><a href="Evaluation%20of%20Websites.html">Evaluation of Websites</a></li> - </ol> - <div> - <br/> - </div> -</body> - -</html> diff --git a/content/webtech-notes/sitewide.css b/content/webtech-notes/sitewide.css @@ -1,30 +0,0 @@ -@charset 'UTF-8'; -@font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=4.0.1');src:url('font/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=4.0.1') format('woff'),url('font/fontawesome-webfont.ttf?v=4.0.1') format('truetype'),url('font/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');font-weight:normal;font-style:normal} - -body { - margin: 0px; - padding: 1em; - background: #f3f2ed; - font-family: 'Lato', sans-serif; - font-size: 12pt; - font-weight: 300; - color: #8A8A8A; - padding-left: 50px; -} -h1, h2, h3 { - margin: 0px; - padding: 0px; - font-weight: 300; - text-align: center; -} -h3 { - font-style: italic; -} -a { - color: #D1551F; - } - - strong { - font-weight: 700; - color: #2A2A2A; - }- \ No newline at end of file diff --git a/syntaxes/CSS/.python-version b/syntaxes/CSS/.python-version @@ -0,0 +1 @@ +3.8+ \ No newline at end of file diff --git a/syntaxes/CSS/CSS.sublime-settings b/syntaxes/CSS/CSS.sublime-settings @@ -0,0 +1,11 @@ +{ + // Set to true to disable default completions. + "disable_default_completions": false, + + // Controls what scopes default completions will be provided in. + // Can be a list of strings which are joined before matching. + "default_completions_selector": "source.css - meta.selector.css", + + // Default separators except `-` + "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", +}+ \ No newline at end of file diff --git a/syntaxes/CSS/CSS.sublime-syntax b/syntaxes/CSS/CSS.sublime-syntax @@ -0,0 +1,3048 @@ +%YAML 1.2 +--- +# https://www.sublimetext.com/docs/syntax.html +# Derived from https://github.com/i-akhmadullin/Sublime-CSS3 +name: CSS +scope: source.css +version: 2 + +file_extensions: + - css + - css.erb + - css.liquid + +############################################################################### + +variables: + # Basic tokens + # https://www.w3.org/TR/css3-selectors/#lex + unicode: \\\h{1,6}[ \t\n\f]? + escape: (?:{{unicode}}|\\[^\n\f\h]) + nmstart: (?:[_[:alpha:][:^ascii:]]|{{escape}}) + nmchar: (?:[-_[:alnum:][:^ascii:]]|{{escape}}) + + # Identifier Break + # The proper pattern would be (?!{{nmchar}}), but its impact on performance + # is just too high, thus several optimizations are applied. + # 1. Use positive lookahead with \Z to handle `eof` + # 2. Breaks are ascii characters other than denoted by {{nmchar}}. + # 3. Assume unicode or escape character if backslash is matched, instead of + # matching (?!{{escape}}) which also effects performance negative. + break: (?=[[^-_[:alnum:]\\]&&[[:ascii:]]]|\Z) + + # Identifiers + # https://www.w3.org/TR/css-syntax-3/#typedef-ident-token + # https://www.w3.org/TR/css3-selectors/#lex + ident: (?:{{custom_ident}}|{{generic_ident}}) + custom_ident: (?:--{{nmchar}}*) + generic_ident: (?:-?{{nmstart}}{{nmchar}}*) + + # Ilegal Custom Identifier Names + # https://www.w3.org/TR/css-values-4/#custom-idents + illegal_custom_ident: |- + \b{{illegal_custom_ident_tokens}}{{break}} + illegal_custom_ident_tokens: |- + (?xi: auto | default | inherit | initial | none | unset ) + + # Types + # https://www.w3.org/TR/css3-values/#numeric-types + # https://www.w3.org/TR/css-syntax-3/#number-token-diagram + integer: ([-+]?)(\d+) + float: ([-+]?)(\d*(\.)\d+(?:[eE][-+]?\d+)?|\d+[eE][-+]?\d+) + + # Units + # https://www.w3.org/TR/css3-values/#lengths + units: |- + (?x: + % + | {{absolute_lengths}} + | {{angle_units}} + | {{duration_units}} + | {{font_relative_lengths}} + | {{frequency_units}} + | {{resolution_units}} + | {{viewport_percentage_lengths}} + ) + font_relative_lengths: (?i:em|ex|ch|rem)\b + viewport_percentage_lengths: (?i:vw|vh|vmin|vmax)\b + absolute_lengths: (?i:cm|mm|q|in|pt|pc|px|fr)\b + angle_units: (?i:deg|grad|rad|turn)\b + duration_units: (?i:s|ms)\b + frequency_units: (?i:Hz|kHz)\b + resolution_units: (?i:dpi|dpcm|dppx)\b + + # Combinators + # https://drafts.csswg.org/selectors-4/#combinators + combinators: (?:>{1,3}|[~+]|\|{2}) + + vendor_prefix: -(?:webkit|moz|ms|o)- + + # Custom Element Names + # https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts + custom_element_tags: \b[a-z]{{custom_element_chars}}*-{{custom_element_chars}}*{{break}} + # Note: Excludes `.` as it is used to identify attribute access + custom_element_chars: |- + (?x: + [-_a-z0-9\x{00B7}] + | [\x{00C0}-\x{00D6}] + | [\x{00D8}-\x{00F6}] + | [\x{00F8}-\x{02FF}] + | [\x{0300}-\x{037D}] + | [\x{037F}-\x{1FFF}] + | [\x{200C}-\x{200D}] + | [\x{203F}-\x{2040}] + | [\x{2070}-\x{218F}] + | [\x{2C00}-\x{2FEF}] + | [\x{3001}-\x{D7FF}] + | [\x{F900}-\x{FDCF}] + | [\x{FDF0}-\x{FFFD}] + | [\x{10000}-\x{EFFFF}] + ) + + # HTML tags + # https://developer.mozilla.org/en-US/docs/Web/HTML/Element + # Note: Sections are sorted by expected frequency. + html_tags: |- + (?x: + {{html_inline_tags}} + | {{html_text_tags}} + | {{html_section_tags}} + | {{html_table_tags}} + | {{html_embedded_tags}} + | {{html_forms_tags}} + | {{html_media_tags}} + | {{html_interactive_tags}} + | {{html_script_tags}} + | {{html_web_tags}} + | {{html_markup_tags}} + | {{html_header_tags}} + | {{html_root_tags}} + | {{html_deprecated_tags}} + ) + + html_root_tags: |- + \b(?xi: html | body ){{break}} + + html_header_tags: |- + \b(?xi: base | head | link | meta | script | style | title ){{break}} + + html_section_tags: |- + \b(?xi: + address | article | aside | footer | header | h1 | h2 | h3 | h4 | h5 | h6 + | hgroup | main | nav | section + ){{break}} + + html_text_tags: |- + \b(?xi: + blockquote | cite | dd | dt | dl | div | figcaption | figure | hr | li + | ol | p | pre | ul + ){{break}} + + html_inline_tags: |- + \b(?xi: + a | abbr | b | bdi | bdo | br | code | data | time | dfn | em | i | kbd + | mark | q | rb | ruby | rp | rt | rtc | s | samp | small | span | strong + | sub | sup | u | var | wbr + ){{break}} + + html_media_tags: |- + \b(?xi: area | audio | source | img | map | track | video ){{break}} + + html_embedded_tags: |- + \b(?xi: embed | iframe | object | param | picture | source ){{break}} + + html_script_tags: |- + \b(?xi: canvas | noscript | script ){{break}} + + html_markup_tags: |- + \b(?xi: del | ins ){{break}} + + html_table_tags: |- + \b(?xi: + caption | col | colgroup | table | tbody | tr | td | tfoot | th | thead + ){{break}} + + html_forms_tags: |- + \b(?xi: + button | datalist | option | fieldset | label | form | input | legend + | meter | optgroup | select | output | progress | textarea + ){{break}} + + html_interactive_tags: |- + \b(?xi: details | dialog | menu | summary ){{break}} + + html_web_tags: |- + \b(?xi: slot | template ){{break}} + + html_deprecated_tags: |- + \b(?xi: + acronym | applet | basefont | bgsound | big | blink | center | command + | content | dir | element | font | frame | frameset | image | isindex + | keygen | listing | marquee | menuitem | multicol | nextid | nobr + | noembed | noframes | plaintext | shadow | spacer | strike | tt | xmp + ){{break}} + + # SVG tag names + # maintained from previous CSS.sublime-syntax + svg_tags: |- + \b(?xi: + circle | clipPath | defs | ellipse | eventsource | filter | foreignObject + | g | glyph | glyphRef | line | linearGradient | marker | mask | path + | pattern | polygon | polyline | radialGradient | rect | stop | svg + | switch | symbol | text | textPath | tref | tspan | use + # custom element like tags reserved for SVG/MathML + | annotation-xml | color-profile | missing-glyph + | font-face(?: -src | -uri | -format | -name )? + ){{break}} + + # Predefined Color Values (Standard Set) + # https://www.w3.org/TR/CSS22/syndata.html#color-units + standard_colors: |- + \b(?xi: + aqua | black | blue | fuchsia | gray | green | lime | maroon | navy + | olive | orange | purple | red | silver | teal | white | yellow + ){{break}} + + # Predefined Color Values (Extended Set) + # https://www.w3.org/TR/css3-color/#svg-color + extended_colors: |- + \b(?xi: + 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 | rebeccapurple | rosybrown | royalblue + | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna + | skyblue | slateblue | slategray | slategrey | snow | springgreen + | steelblue | tan | thistle | tomato | turquoise | violet | wheat + | whitesmoke | yellowgreen + ){{break}} + + # Illegal Counter Style Definition Names + # https://drafts.csswg.org/css-counter-styles-3/#typedef-counter-style-name + counter_style_illegal_names: |- + \b(?xi: decimal | disc | {{illegal_custom_ident_tokens}} ){{break}} + + # Predefined Counter Styles + # https://drafts.csswg.org/css-counter-styles-3/#predefined-counters + counter_style_names: |- + \b(?xi: + none | arabic-indic | armenian | bengali | cambodian | circle + | cjk-decimal | cjk-earthly-branch | cjk-heavenly-stem | decimal-leading-zero + | decimal | devanagari | disclosure-closed | disclosure-open | disc + | ethiopic-numeric | georgian | gujarati | gurmukhi | hebrew + | hiragana-iroha | hiragana | japanese-formal | japanese-informal + | kannada | katakana-iroha | katakana | khmer + | korean-hangul-formal | korean-hanja-formal | korean-hanja-informal | lao + | lower-alpha | lower-armenian | lower-greek | lower-latin | lower-roman + | malayalam | mongolian | myanmar | oriya | persian + | simp-chinese-formal | simp-chinese-informal + | square | tamil | telugu | thai | tibetan + | trad-chinese-formal | trad-chinese-informal + | upper-alpha | upper-armenian | upper-latin | upper-roman + ){{break}} + + # Predefined Counter Speak As Property Constants + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as + counter_speak_as_constants: |- + \b(?xi: auto | bullets | numbers | words | spell-out ){{break}} + + # Predefined Counter Style System Constants + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + counter_system_constants: |- + \b(?xi: cyclic | numeric | alphabetic | symbolic | additive | fixed ){{break}} + + # Page Margin Property Names + # https://www.w3.org/TR/css-page-3/#margin-at-rule + page_margin_property_names: |- + \b(?xi: + (?: bottom | top ) - (?: left-corner | left | center | right | right-corner ) + | (?: left | right ) - (?: top | middle | bottom ) + ){{break}} + + # Property names are sorted by popularity in descending order. + # Note: + # 1) Popularity data taken from https://www.chromestatus.com/metrics/css/popularity + # 2) Properties starting with `alias-` or `webkit-` are removed + property_names: |- + \b(?xi: + width | height | display | position | padding | border | margin | top + | left | margin-top | color | font-size | background-color | text-align + | opacity | font-weight | font-family | background | overflow | line-height + | float | box-sizing | text-decoration | z-index | cursor | margin-left + | border-radius | vertical-align | margin-bottom | margin-right | right + | padding-top | padding-left | max-width | box-shadow | bottom | content + | padding-right | transform | white-space | min-height | padding-bottom + | background-image | border-bottom | visibility | outline + | background-position | min-width | transition | border-top | border-color + | background-repeat | text-transform | background-size | max-height + | list-style | clear | font-style | justify-content | border-left + | align-items | border-right | border-width | font | text-overflow + | overflow-y | pointer-events | border-style | flex-direction | animation + | overflow-x | letter-spacing | flex | word-wrap | flex-wrap | fill + | transform-origin | list-style-type | border-collapse + | border-top-left-radius | border-bottom-left-radius | user-select | clip + | text-shadow | border-bottom-right-radius | word-break | flex-grow + | border-top-right-radius | border-bottom-color | border-top-color + | flex-shrink | align-self | text-rendering | animation-timing-function + | direction | background-clip | zoom | border-spacing | text-indent + | outline-offset | border-left-color | transition-property | src + | border-right-color | animation-name | stroke | touch-action + | animation-duration | transition-delay | filter | overflow-wrap + | animation-delay | border-bottom-width | variable | font-variant + | flex-basis | transition-duration | border-top-width | animation-fill-mode + | object-fit | transition-timing-function | will-change | outline-width + | order | outline-style | stroke-width | border-right-width | align-content + | resize | table-layout | appearance | animation-iteration-count + | border-left-width | flex-flow | stroke-dashoffset | stroke-dasharray + | backface-visibility | unicode-bidi | unicode-range | border-bottom-style + | text-size-adjust | border-top-style | animation-direction | word-spacing + | contain | speak | grid-template-columns | font-feature-settings + | perspective | list-style-position | clip-path | image-rendering + | font-display | transform-style | border-left-style | outline-color + | background-position-x | background-attachment | border-right-style + | margin-block-end | background-origin | animation-play-state | hyphens + | stroke-linecap | font-stretch | object-position | page-break-inside + | column-gap | counter-reset | counter-increment | background-position-y + | margin-block-start | size | grid-template-rows | column-count | quotes + | padding-inline-end | text-decoration-skip | border-image | all + | page-break-after | fill-opacity | font-variant-ligatures + | scroll-boundary-behavior | empty-cells | list-style-image | justify-self + | overflow-anchor | padding-inline-start | grid-gap | text-decoration-color + | margin-inline-start | caret-color | grid-column-gap | aspect-ratio + | stroke-opacity | margin-inline-end | grid-column | perspective-origin + | caption-side | columns | scroll-behavior | justify-items | line-break + | grid-row-gap | column-width | orphans | widows | backdrop-filter + | mix-blend-mode | tab-size | stop-color | column-rule | grid-area + | stroke-miterlimit | text-align-last | page-break-before + | grid-column-start | border-image-slice | border-image-repeat + | text-decoration-style | border-image-width | grid-column-end | grid-row + | scroll-snap-align | scroll-snap-type | border-image-outset + | text-decoration-line | column-fill | border-inline-end-width + | border-inline-start-width | grid-row-start | stroke-linejoin + | inset-inline-end | inset-inline-start | grid-auto-flow | grid-auto-rows + | grid-template-areas | border-image-source | fill-rule | font-kerning + | grid-row-end | font-variant-numeric | break-inside | shape-outside + | color-scheme | shape-image-threshold | scroll-boundary-behavior-y + | text-decoration-skip-ink | page | isolation | background-blend-mode + | page-orientation | inset | gap | scroll-snap-margin | column-rule-color + | place-items | column-rule-style | shape-rendering | content-visibility + | grid-auto-columns | scroll-boundary-behavior-x | writing-mode | clip-rule + | font-variant-caps | scroll-padding | text-anchor | mask | row-gap + | background-repeat-x | intrinsic-size | text-underline-position + | font-variant-east-asian | column-span | vector-effect | dominant-baseline + | stop-opacity | break-after | grid-template | break-before | mask-type + | scroll-snap-stop | border-inline-start-color | border-inline-end-color | r + | alignment-baseline | text-decoration-thickness | column-rule-width | d + | image-orientation | rx | text-orientation | cx | baseline-shift + | scroll-padding-top | padding-block-start | padding-block-end | cy + | min-inline-size | inline-size | background-repeat-y | shape-margin + | block-size | marker | min-block-size | paint-order | ry + | scroll-snap-margin-top | border-block-end-color | border-block-end-width + | border-inline-start-style | border-inline-end-style + | border-block-end-style | font-variation-settings + | border-block-start-width | border-block-start-color + | border-block-start-style | place-content | y | x | ruby-position + | text-combine-upright | color-interpolation-filters | color-interpolation + | color-rendering | transform-box | marker-end | flood-color | marker-start + | marker-mid | flood-opacity | lighting-color | forced-color-adjust + | buffered-rendering | place-self | offset-path | scroll-padding-left + | offset-distance | offset-rotate | text-underline-offset | max-inline-size + | max-block-size | border-inline-end | scroll-snap-margin-inline-start + | scroll-padding-inline-start | scroll-snap-margin-block-end + | scroll-snap-margin-block-start | scroll-padding-block-end + | scroll-snap-margin-inline-end | scroll-padding-block-start + | scroll-padding-inline-end | font-optical-sizing | grid + | scroll-padding-bottom | scroll-snap-margin-left | inset-block-end + | overscroll-behavior-block | overscroll-behavior-inline | inset-block-start + | scroll-snap-margin-right | scroll-padding-right + | scroll-snap-margin-bottom | border-inline-start | margin-inline + | border-end-start-radius | border-end-end-radius | margin-block + | border-start-start-radius | border-start-end-radius | padding-inline + | counter-set | padding-block | border-block-end | offset + | border-block-start | inset-inline | inset-block | scroll-snap-margin-block + | scroll-padding-inline | scroll-padding-block | scroll-snap-margin-inline + | border-block | offset-rotation | border-inline | border-block-color + | border-inline-width | border-inline-color | border-block-style + | border-block-width | border-inline-style | motion | motion-offset + | motion-path | font-size-adjust | text-justify | scale | scrollbar-gutter + | animation-timeline | rotate | translate | snap-height | math-style + | math-shift | math-depth | offset-anchor | offset-position + | glyph-orientation-vertical | internal-callback | text-line-through + | text-line-through-color | text-line-through-mode | text-line-through-style + | text-line-through-width | text-overline | text-overline-color + | text-overline-mode | text-overline-style | text-overline-width + | text-underline | text-underline-color | text-underline-mode + | text-underline-style | text-underline-width | shape-inside | shape-padding + | enable-background | color-profile | glyph-orientation-horizontal | kerning + | image-resolution | max-zoom | min-zoom | orientation | user-zoom + | mask-source-type | touch-action-delay | scroll-blocks-on | motion-rotation + | scroll-snap-points-x | scroll-snap-points-y | scroll-snap-coordinate + | scroll-snap-destination | apply-at-rule | viewport-fit | overflow-block + | syntax | content-size | intrinsic-block-size | intrinsic-height + | intrinsic-inline-size | intrinsic-width | render-subtree + | origin-trial-test-property | subtree-visibility + | math-superscript-shift-style | start + # END OF QUERY RESULTS + # BEGIN OF legacy properties which existed before the last query + | box-direction | line-box-contain + | prefix | mask-image | mask-origin | flex-order | system | speak-as + | font-synthesis | line-clamp | flex-negative | blend-mode + | font-variant-position | flex-align | column-break-before | negative + | flex-item-align | azimuth | user-drag | range | mask-repeat | box-flex + | flex-preferred-size | font-language-override | box-align | pad + | text-emphasis-color | box-ordinal-group | mask-composite + | transform-origin-y | pause | tap-highlight-color | text-fill-color + | suffix | text-emphasis-style | transform-origin-x | text-emphasis-position + | box-pack | box-decoration-break | box-orient | additive-symbols + | text-emphasis | symbols | mask-clip | nbsp-mode | pause-after | pitch + | text-height | mask-position | flex-line-pack | perspective-origin-x + | mask-size | font-variant-alternates | perspective-origin-y + | font-smoothing | overflow-scrolling | flex-positive | pitch-range + ){{break}} + + property_value_constants: |- + (?x: + {{font_display_constants}} + | {{font_property_constants}} + | {{font_size_constants}} + | {{font_style_constants}} + | {{unsorted_property_constants}} + ) + + unsorted_property_constants: |- + \b(?xi: + absolute|active|add + | all(-(petite|small)-caps|-scroll)? + | alpha(betic)? + | alternate(-reverse)? + | always|annotation|antialiased|at + | auto(hiding-scrollbar|-flow)? + | avoid(-column|-page|-region)? + | background(-color|-image|-position|-size)? + | backwards|balance|baseline|below|bevel|bicubic|bidi-override|blink + | block-line-height + | blur + | border(-bottom|-left|-right|-top)?-(color|radius|width|style) + | border-(bottom|top)-(left|right)-radius + | border-image(-outset|-repeat|-slice|-source|-width)? + | border(-bottom|-left|-right|-top|-collapse|-spacing|-box)? + | both|bottom + | box(-shadow)? + | break-(all|word) + | brightness + | butt(on)? + | capitalize + | cent(er|ral) + | char(acter-variant)? + | cjk-ideographic|clip|clone|close-quote + | closest-(corner|side) + | col-resize|collapse + | color(-stop|-burn|-dodge)? + | column((-count|-gap|-reverse|-rule(-color|-width)?|-width)|s)? + | common-ligatures|condensed|consider-shifts|contain + | content(-box|s)? + | contextual|contrast|cover + | crisp(-e|E)dges + | crop + | cross(hair)? + | da(rken|shed) + | default|dense|diagonal-fractions|difference|disabled + | discretionary-ligatures|disregard-shifts + | distribute(-all-lines|-letter|-space)? + | dotted|double|drop-shadow + | (nwse|nesw|ns|ew|sw|se|nw|ne|w|s|e|n)-resize + | ease(-in-out|-in|-out)? + | element|ellipsis|embed|end|EndColorStr|evenodd + | exclu(de(-ruby)?|sion) + | expanded + | (extra|semi|ultra)-(condensed|expanded) + | farthest-(corner|side)? + | fill(-box|-opacity)? + | filter|first|fixed|flat + | fit-content + | flex((-basis|-end|-grow|-shrink|-start)|box)? + | flip|flood-color + | font(-size(-adjust)?|-stretch|-weight)? + | forwards + | from(-image)? + | full-width|geometricPrecision|glyphs|gradient|grayscale + | grid(-height)? + | groove|hand|hanging|hard-light|height|help|hidden|hide + | historical-(forms|ligatures) + | horizontal(-tb)? + | hue + | ideograph(-alpha|-numeric|-parenthesis|-space|ic) + | inactive|include-ruby|infinite|inherit|initial + | inline(-block|-box|-flex(box)?|-line-height|-table)? + | inset|inside + | inter(-ideograph|-word|sect) + | invert|isolat(e|ion) + | jis(04|78|83|90) + | justify(-all)? + | keep-all + | landscape|ledger|legal|letter|A[3-5]|(JIS-)?B[4-5]|portrait + | last|left|letter-spacing|legacy + | light(e[nr]|ing-color) + | line(-edge|-height|-through)? + | linear(-gradient|RGB)? + | lining-nums|list-item|local|loose|lowercase|lr-tb|ltr + | lumin(osity|ance)|manual + | margin(-bottom|-box|-left|-right|-top)? + | marker(-offset|s)? + | mathematical + | max-(content|height|lines|size|width) + | medium|middle + | min-(content|height|width) + | miter|mixed|move|multiply|newspaper + | no-(change|clip|(close|open)-quote|(common|discretionary|historical)-ligatures|contextual|drop|repeat) + | none|nonzero|not-allowed|nowrap + | offset(-after|-before|-end|-start)? + | oldstyle-nums|opacity|open-quote + | optimize(Legibility|Precision|Quality|Speed) + | order|ordinal|ornaments + | outline(-color|-offset|-width)? + | outset|outside|over(line|-edge|lay) + | padding(-bottom|-box|-left|-right|-top)? + | page|painted|paused + | perspective-origin + | petite-caps|pixelated|pointer + | pre(-line|-wrap)? + | preserve-3d + | progid:DXImageTransform.Microsoft.(Alpha|Blur|dropshadow|gradient|Shadow) + | progress + | proportional-(nums|width) + | radial-gradient|recto|region|relative + | repeat(-[xy])? + | repeating-(linear|radial)-gradient + | replaced|reset-size|reverse|ridge|right + | round + | row(-resize|-reverse)? + | run-in + | ruby(-base|-text)?(-container)? + | rtl|running|saturat(e|ion)|screen + | safe + | scroll(-position|bar)? + | separate|sepia + | scale-down + | shape-(image-threshold|margin|outside) + | show + | sideways(-lr|-rl)? + | simplified + | slashed-zero|slice + | smooth|snap|solid|soft-light + | space(-around|-between|-evenly)? + | span|sRGB + | stack(ed-fractions)? + | start(ColorStr)? + | static + | step-(end|start) + | sticky + | stop-(color|opacity) + | stretch|strict + | stroke(-box|-dash(array|offset)|-miterlimit|-opacity|-width)? + | style(set)? + | stylistic + | sub(grid|pixel-antialiased|tract)? + | super|swash + | table(-caption|-cell|(-column|-footer|-header|-row)-group|-column|-row)? + | tabular-nums|tb-rl + | text((-bottom|-(decoration|emphasis)-color|-indent|-(over|under|after|before)-edge|-shadow|-size(-adjust)?|-top)|field)? + | thi(ck|n) + | titling-ca(ps|se) + | to[p]? + | touch|traditional + | transform(-origin)? + | under(-edge|line)? + | unicase|unsafe|unset|uppercase|upright + | use-(glyph-orientation|script) + | verso + | vertical(-align|-ideographic|-lr|-rl|-text)? + | view-box + | viewport-fill(-opacity)? + | visibility + | visible(Fill|Painted|Stroke)? + | wait|wavy|weight|whitespace|width|word-spacing + | wrap(-reverse)? + | z-index|zero + | zoom(-in|-out)? + ){{break}} + + # https://www.w3.org/TR/css-fonts-4/#font-display-desc + font_display_constants: |- + \b(?xi: + block | swap | fallback | optional + ){{break}} + + # Generic Font Families + font_family_constants: |- + \b(?xi: + # CSS 2 fonts + # https://www.w3.org/TR/CSS22/fonts.html#generic-font-families + sans-serif | serif | cursive | monospace | fantasy + # CSS 3 level 4 fonts + # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#generic-family-value + | emoji | math | fangsong | system-ui + # https://www.w3.org/TR/2019/WD-css-fonts-4-20191113/#standard-font-families + | ui-sans-serif | ui-serif | ui-monospace | ui-rounded + ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-shorthand + font_property_constants: |- + \b(?xi: + caption | icon | menu | message-box | small-caption | status-bar + ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-size-props + font_size_constants: |- + \b(?xi: + larger | large | medium | small | smaller | x{1,2}-(?: large | small ) + ){{break}} + + # https://www.w3.org/TR/CSS22/fonts.html#font-boldness + # https://www.w3.org/TR/CSS22/fonts.html#font-styling + # https://www.w3.org/TR/CSS22/fonts.html#small-caps + font_style_constants: |- + \b(?xi: + normal | bold | bolder | lighter | italic | oblique | small-caps + ){{break}} + +############################################################################### + +contexts: + + main: + - include: comments + - include: selectors + - include: at-rules + - include: property-lists + - include: rule-terminators + - include: illegal-groups + +###[ COMMENTS ]################################################################ + + comments: + # empty block comment + - match: (/\*+)(\*/) + scope: comment.block.css + captures: + 1: punctuation.definition.comment.begin.css + 2: punctuation.definition.comment.end.css + # normal block comment + - match: /\*+ + scope: punctuation.definition.comment.begin.css + push: comments-content + + comments-content: + - meta_scope: comment.block.css + - match: \*+/ + scope: punctuation.definition.comment.end.css + pop: 1 + - match: ^\s*(\*)(?!/) + captures: + 1: punctuation.definition.comment.css + +###[ AT RULES ]################################################################ + + at-rules: + - include: at-charset + - include: at-counter-style + - include: at-custom-media + - include: at-document + - include: at-font-face + - include: at-import + - include: at-keyframes + - include: at-media + - include: at-namespace + - include: at-page + - include: at-page-margin + - include: at-supports + - include: at-other + + # @charset + # https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset + at-charset: + - match: (@)(?i:charset){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-charset-content + + at-charset-content: + - meta_scope: meta.at-rule.charset.css + - include: quoted-strings + - include: at-rule-end + + # @counter-style + # https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule + at-counter-style: + - match: (@)(?i:counter-style){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-counter-style-content + + at-counter-style-content: + - meta_scope: meta.at-rule.counter-style.css + - include: rule-list + - include: at-counter-style-names + - include: at-rule-end + + at-counter-style-names: + - match: '{{counter_style_illegal_names}}' + scope: invalid.illegal.identifier.css + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + + # @custom-media + # https://?? + at-custom-media: + - match: (@)(?i:custom-media){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: + - at-custom-media-content + - at-custom-media-identifier + + at-custom-media-identifier: + - match: '{{custom_ident}}' + scope: entity.other.custom-media.css + pop: 1 + - include: comments + - include: else-pop + + at-custom-media-content: + - meta_scope: meta.at-rule.custom-media.css + - include: media-queries + - include: at-rule-end + + # @document + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document + at-document: + - match: (@)(?i:document){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-document-content + + at-document-content: + - meta_scope: meta.at-rule.document.css + - include: comma-delimiters + - include: url-functions + - include: at-document-functions + - include: at-rule-block + - include: at-rule-end + + # @font-face + # https://www.w3.org/TR/css-fonts-4/#at-font-face-rule + at-font-face: + - match: (@)(?i:font-face){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-font-face-content + + at-font-face-content: + - meta_scope: meta.at-rule.font-face.css + - include: rule-list + - include: at-rule-end + + # @import + # https://www.w3.org/TR/css-cascade-4/#at-ruledef-import + at-import: + - match: (@)(?i:import){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-import-content + + at-import-content: + - meta_scope: meta.at-rule.import.css + - include: quoted-strings + - include: url-functions + - include: media-queries + - include: at-rule-end + + # @keyframes + # https://www.w3.org/TR/css3-animations/#at-ruledef-keyframes + at-keyframes: + - match: (@)(?i:keyframes){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-keyframe-content + + at-keyframe-content: + - meta_scope: meta.at-rule.keyframe.css + - include: comma-delimiters + - include: at-keyframe-block + - include: at-keyframe-names + - include: at-rule-end + + at-keyframe-names: + - match: '{{illegal_custom_ident}}' + scope: invalid.illegal.identifier.css + - match: '{{ident}}' + scope: entity.other.animation-name.css + - include: quoted-strings + + at-keyframe-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-keyframe-block-content + + at-keyframe-block-content: + - meta_scope: meta.block.css + - include: block-end2 + - include: comments + - include: property-lists + - include: at-keyframe-selectors + + at-keyframe-selectors: + - match: (?=[[:alnum:].,%]) + push: at-keyframe-selector-content + + at-keyframe-selector-content: + - meta_scope: meta.selector.css + - include: comma-delimiters + - include: percentage-constants + - match: \b(?i:from|to){{break}} + scope: keyword.other.selector.css + - include: selector-end + + # @media + # https://drafts.csswg.org/css-conditional-3/#at-ruledef-media + at-media: + - match: (@)(?i:media){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-media-content + + at-media-content: + - meta_scope: meta.at-rule.media.css + - include: media-queries + - include: at-rule-block + - include: at-rule-end + + # @namespace + # https://www.w3.org/TR/css3-namespace/ + at-namespace: + - match: (@)(?i:namespace){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: + - at-namespace-content + - at-namespace-identifier + + at-namespace-identifier: + - match: '{{ident}}(?!{{nmchar}}|\()' + scope: entity.other.namespace-prefix.css + pop: 1 + - include: comments + - include: else-pop + + at-namespace-content: + - meta_scope: meta.at-rule.namespace.css + - include: var-functions + - include: url-functions + - include: quoted-urls + - include: at-rule-end + + # @page + # https://www.w3.org/TR/css3-page/#at-ruledef-page + at-page: + - match: (@)(?i:page){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-page-content + + at-page-content: + - meta_scope: meta.at-rule.page.css + - include: comma-delimiters + - include: at-page-block + - include: at-page-names + - include: at-rule-end + + at-page-names: + - match: (:)(?i:blank|first|left|right){{break}} + captures: + 0: entity.other.pseudo-class.css + 1: punctuation.definition.entity.css + - match: (:){{nmchar}}* + captures: + # 0: invalid.illegal.pseudo-class.css + 1: punctuation.definition.entity.css + - match: '{{ident}}' + scope: entity.other.page-name.css + + at-page-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-page-block-content + + at-page-block-content: + - meta_scope: meta.property-list.css meta.block.css + - include: block-end2 + - include: at-page-margin + - include: at-other + - include: property-lists + - include: rule-list-body + + # @top-center, ... + # https://www.w3.org/TR/css-page-3/#margin-at-rule + at-page-margin: + - match: (@){{page_margin_property_names}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-page-margin-content + + at-page-margin-content: + - meta_scope: meta.at-rule.margin.css + - include: at-page-block + - include: at-rule-end + + # @supports + # https://drafts.csswg.org/css-conditional-3/#at-supports + at-supports: + - match: (@)(?i:supports){{break}} + captures: + 0: keyword.control.directive.css + 1: punctuation.definition.keyword.css + push: at-supports-content + + at-supports-content: + - meta_scope: meta.at-rule.supports.css + - include: at-supports-groups + - include: at-supports-operators + - include: at-rule-block + - include: at-rule-end + + at-supports-operators: + - match: \b(?i:and|or|not){{break}} + scope: keyword.operator.logical.css + + at-supports-groups: + - match: \( + scope: punctuation.section.group.begin.css + push: at-supports-group-content + + at-supports-group-content: + - meta_scope: meta.group.css + - include: group-end + - include: at-rule-end + - include: at-supports-groups + - include: at-supports-operators + - include: rule-list-body + + # @<ident> + # Fallback context for incomplete or unknown at-rules. + # https://www.w3.org/TR/css-syntax-3/#at-rule + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + at-other: + - match: (@){{ident}} + push: at-other-content + + at-other-content: + - meta_scope: meta.at-rule.other.css + - match: \{ + scope: punctuation.section.block.begin.css + push: at-other-block-content + - include: at-rule-end + + at-other-block-content: + - meta_scope: meta.block.css + - include: block-end2 + + at-rule-block: + - match: \{ + scope: punctuation.section.block.begin.css + push: at-rule-block-content + + at-rule-block-content: + - meta_scope: meta.block.css + - include: block-end2 + - include: main + + at-rule-end: + - match: (?=[;{}]) + pop: 1 + - include: comments + +###[ MEDIA QUERIES ]########################################################### + + # https://drafts.csswg.org/mediaqueries-5/#media + media-queries: + - include: comma-delimiters + - include: media-query-conditions + - include: media-query-media-types + + media-query-conditions: + - match: \( + scope: punctuation.section.group.begin.css + push: media-query-group-content + - match: '[<>]=?|=' + scope: keyword.operator.comparison.css + - match: \b(?i:and|or|not|only){{break}} + scope: keyword.operator.logic.css + + media-query-group-content: + - meta_scope: meta.group.css + - match: (?=[,;{}]) + pop: 1 + - include: group-end + - include: comments + - include: media-query-conditions + - include: media-query-property-names + - include: media-query-property-values + - include: var-functions + - include: calc-functions + - include: scalar-rational-constants + - include: numeric-constants + + media-query-property-names: + - match: |- + (?xi: + ({{vendor_prefix}})? + ( + (?: min- | max- )? + (?: + color (?: -gamut | -index )? + | monochrome | resolution | update + | (?: device- )? (?: height | width | aspect-ratio | pixel-ratio ) + ) + | (?:any-)?(?: pointer | hover ) + | display-mode | grid | orientation | scan | scripting + | overflow-(?: block | inline ) + ) + ){{break}} + captures: + 1: support.type.vendor-prefix.css + 2: support.type.property-name.css + + media-query-property-values: + - match: ':' + scope: punctuation.separator.key-value.css + push: media-query-property-value-content + + media-query-property-value-content: + - match: |- + \b(?xi: + # global css constants + all | inherit | initial | none | unset + # color-gamut / color-index: + | srgb | p3 | rec2020 + # display-mode: + | browser | fullscreen | standalone | minimal-ui + # hover: + | hover + # orientation: + | landscape | portrait + # overflow: + | optional-paged | paged | scroll + # pointer: + | coarse | fine + # scan: + | interlace | progressive + # scripting: + | enabled | initial-only + # update: + | fast | normal | slow + ){{break}} + scope: support.constant.property-value.css + pop: 1 + - include: else-pop + + media-query-media-types: + # Media Types: + # https://www.w3.org/TR/CSS21/media.html + # https://drafts.csswg.org/mediaqueries-5/#media-types + - match: |- + \b(?xi: + # global css constants + all | inherit | initial | none | unset + # specs + | print | screen | speech + # deprecated + | aural | braille | embossed | handheld | projection | tty | tv + ){{break}} + scope: support.constant.media.css + +###[ SELECTORS ]############################################################### + + selectors: + - match: (?=[:.*#[:alpha:]\[]|{{combinators}}) + push: selector-content + + selector-content: + - meta_scope: meta.selector.css + - include: selector-end + - include: comma-delimiters + # Html Tags + - match: '{{html_tags}}' + scope: entity.name.tag.html.css + - match: '{{svg_tags}}' + scope: entity.name.tag.svg.css + # Custom Elements + # http://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts + - match: '{{custom_element_tags}}' + scope: entity.name.tag.custom.css + - match: \* + scope: variable.language.wildcard.asterisk.css + # Class and Id Selectors + # https://drafts.csswg.org/selectors-4/#class-html + - match: \. + scope: punctuation.definition.entity.css + push: + - meta_scope: entity.other.attribute-name.class.css + - match: '{{generic_ident}}' + pop: 1 + - include: immediately-pop + # https://drafts.csswg.org/selectors-4/#id-selectors + - match: \# + scope: punctuation.definition.entity.css + push: + - meta_scope: entity.other.attribute-name.id.css + - match: '{{generic_ident}}' + pop: 1 + - include: immediately-pop + # Attribute Selectors + # https://drafts.csswg.org/selectors-4/#attribute-selectors + - match: \[ + scope: punctuation.section.brackets.begin.css + push: + - attribute-selector-meta + - attribute-selector-key + # Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + - match: '::' + scope: punctuation.definition.pseudo-element.css + push: + - meta_include_prototype: false + - include: vendor-prefixes + - include: pseudo-element-function + - include: pseudo-element-regular + - include: immediately-pop + # Pseudo Classes + # https://drafts.csswg.org/selectors-4/#pseudo-classes + - match: ':' + scope: punctuation.definition.pseudo-class.css + push: + - meta_include_prototype: false + - include: vendor-prefixes + - include: pseudo-element-css2 + - include: pseudo-class-function + - include: pseudo-class-regular + - include: immediately-pop + # Combinators + # https://drafts.csswg.org/selectors-4/#combinators + # https://drafts.csswg.org/css-scoping/#deep-combinator + - match: '{{combinators}}(?![>~+|])' + scope: keyword.operator.combinator.css + - match: '{{combinators}}{2,}|\|{3,}' + scope: invalid.illegal.combinator.css + + selector-end: + - match: (?=\s*[;@(){}]) + pop: 1 + - include: comments + + # Qualified Names + # https://drafts.csswg.org/css-namespaces-3/#css-qnames + namespace-prefixes: + - match: (?:({{ident}})|(\*))?(\|)(?!=) + captures: + 1: entity.other.namespace-prefix.css + 2: variable.language.wildcard.asterisk.css + 3: punctuation.separator.namespace.css + + vendor-prefixes: + - match: '{{vendor_prefix}}' + scope: support.type.vendor-prefix.css + +###[ SELECTORS / ATTRIBUTE SELECTORS ]######################################### + + attribute-selector-meta: + - meta_scope: meta.attribute-selector.css meta.brackets.css + - include: immediately-pop + + attribute-selector-key: + - include: namespace-prefixes + - match: '{{ident}}' + scope: entity.other.attribute-name.css + set: attribute-selector-operator + - match: \* + scope: variable.language.wildcard.asterisk.css + set: attribute-selector-operator + - include: attribute-selector-operator + + attribute-selector-operator: + - match: '[~*|^$]?=' + scope: keyword.operator.logical.css + set: + - attribute-selector-flag + - attribute-selector-value + - include: attribute-selector-flag + + attribute-selector-value: + - include: comments + - include: quoted-string + - match: '[^\s\]\[''"]+' + scope: meta.string.css string.unquoted.css + pop: 1 + - include: else-pop + + attribute-selector-flag: + - match: \b[iI]{{break}} + scope: keyword.other.flag.css + set: attribute-selector-end + - include: attribute-selector-end + + attribute-selector-end: + - match: \] + scope: punctuation.section.brackets.end.css + pop: 1 + - include: selector-end + - match: \S + scope: invalid.illegal.css + +###[ SELECTORS / PSEUDO CLASSES ]############################################## + + # Functional Pseudo Classes + # https://drafts.csswg.org/selectors-4/#functional-pseudo-class + pseudo-class-function: + - include: pseudo-class-function-dir + - include: pseudo-class-function-lang + - include: pseudo-class-function-with-anb-args + - include: pseudo-class-function-with-selector-args + - include: pseudo-class-function-with-generic-args + + # Special :dir() pseudo-class + # https://drafts.csswg.org/selectors-4/#the-dir-pseudo + pseudo-class-function-dir: + - match: (?i:dir)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: direction-constants + + # Special :lang() pseudo-class + # https://drafts.csswg.org/selectors-4/#the-lang-pseudo + pseudo-class-function-lang: + - match: (?i:lang)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: quoted-strings + - include: language-ranges + + # Functional Pseudo Classes with `An+B` param + # An+B Notation: https://drafts.csswg.org/css-syntax/#anb + pseudo-class-function-with-anb-args: + - match: |- + (?xi: + # https://drafts.csswg.org/selectors-4/#table-pseudos + nth-last-col + | nth-col + # https://drafts.csswg.org/selectors-4/#typed-child-index + | nth-last-child + | nth-child + | nth-last-of-type + | nth-of-type + )(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: anb-notation-values + - include: scalar-integer-constants + + anb-notation-values: + - match: \b(even|odd){{break}} + scope: support.constant.property-value.css + - match: (([-+]?)(\d*)(n))\s*(([-+])(\s*\d+))? + captures: + 1: meta.number.integer.decimal.css + 2: keyword.operator.arithmetic.css + 3: constant.numeric.value.css + 4: constant.numeric.suffix.css + 5: meta.number.integer.decimal.css + 6: keyword.operator.arithmetic.css + 7: constant.numeric.value.css + - match: '[-+]\s+\d+n?|[-+]?\d+\s+n' + scope: invalid.illegal.numeric.css + + # Functional Pseudo Classes with selector list + pseudo-class-function-with-selector-args: + - match: (?i:matches|is|where|not|has)(?=\() + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: selectors + + # Functional Pseudo Classes with generic arguments + pseudo-class-function-with-generic-args: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css entity.other.pseudo-class.css + set: other-functions-arguments + + # Regular Pseudo Classes + # https://drafts.csswg.org/selectors-4/#pseudo-classes + pseudo-class-regular: + - match: '{{ident}}' + scope: entity.other.pseudo-class.css + pop: 1 + + # Legacy Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-css2: + # Note: CSS1 & CSS2 compatibility requires those to be matched after `:` + - match: (?i:before|after|first-line|first-letter){{break}} + scope: entity.other.pseudo-element.css + pop: 1 + + # Functional Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-function: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css entity.other.pseudo-element.css + set: other-functions-arguments + + # Pseudo Elements + # https://drafts.csswg.org/selectors-4/#pseudo-elements + pseudo-element-regular: + - match: '{{ident}}' + scope: entity.other.pseudo-element.css + pop: 1 + +###[ PROPERTY LISTS ]########################################################## + + property-lists: + - match: \{ + scope: punctuation.section.block.begin.css + push: property-list-content + + property-list-content: + - meta_scope: meta.property-list.css meta.block.css + - match: \} + scope: punctuation.section.block.end.css + pop: 1 + - include: rule-list-body + + rule-list: + - match: \{ + scope: punctuation.section.block.begin.css + push: rule-list-content + + rule-list-content: + - meta_scope: meta.property-list.css meta.block.css + - include: block-end2 + - include: rule-list-body + + rule-list-body: + # Note: This context is used by HTML.sublime-syntax + - include: comments + - include: property-identifiers + - include: property-values + - include: rule-terminators + - include: illegal-blocks + - include: illegal-groups + +###[ PROPERTY IDENTIFIERS ]#################################################### + + property-identifiers: + - match: (?=[-[:alpha:]]) + push: property-identifier-content + + property-identifier-content: + - meta_scope: meta.property-name.css + - include: vendor-prefixes + # specific properties with special treatment + - include: counter-property + - include: counter-style-fallback-property + - include: counter-style-system-property + - include: counter-style-speak-as-property + - include: font-property + # common properties + - include: builtin-property + - include: custom-property + - include: deprecated-property + - include: other-property + # bailout + - include: immediately-pop + + builtin-property: + - match: '{{property_names}}' + scope: support.type.property-name.css + pop: 1 + + # Custom Properties + # https://drafts.csswg.org/css-variables/#typedef-custom-property + custom-property: + # custom property definition + - match: '{{custom_ident}}' + scope: entity.other.custom-property.css + pop: 1 + + deprecated-property: + - match: \b(var-)({{ident}}) + scope: invalid.deprecated.custom-property.css + captures: + 1: entity.other.custom-property.prefix.css + 2: entity.other.custom-property.name.css + pop: 1 + + other-property: + # Note: Consume unknown identifiers to maintain word boundaries. + - match: '{{generic_ident}}' + pop: 1 + +###[ PROPERTY VALUES ]######################################################### + + property-values: + - match: ':' + scope: punctuation.separator.key-value.css + push: property-value-content + + property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: comma-delimiters + - include: common-operators + - include: builtin-values + - include: other-functions + - include: other-constants + + builtin-values: + - include: quoted-strings + - include: builtin-functions + - include: color-values + - include: line-names + - include: unicode-ranges + - include: numeric-constants + - include: common-constants + - include: generic-font-names + - include: vendor-prefixes + + # When including `color-values` and `color-adjuster-functions`, make sure it is + # included after the color adjustors to prevent `color-values` from consuming + # conflicting function names & color constants such as `red`, `green`, or `blue`. + color-values: + - include: color-functions + - include: color-constants + + # Counter Symbol Values + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + counter-symbol-values: + - include: image-values + - include: counter-system-constants + - include: scalar-integer-constants + - include: quoted-strings + + # 2D Image Values + # https://drafts.csswg.org/css-images-4/#image-values + image-values: + - include: cross-fade-functions + - include: gradient-functions + - include: image-functions + - include: image-set-functions + - include: url-functions + +###[ COUNTER PROPERTY ]######################################################## + + counter-property: + # https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters + - match: \b(?i:counter-(increment|reset|set)){{break}} + scope: support.type.property-name.css + set: counter-property-value + + counter-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: + - property-value-content + - counter-identifier + - include: else-pop + + counter-identifier: + - match: '{{ident}}' + scope: entity.other.counter-name.css + pop: 1 + - include: comments + - include: else-pop + +###[ COUNTER STYLE FALLBACK PROPERTY ]######################################### + + # Counter Style Fallback + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-fallback + counter-style-fallback-property: + - match: \b(?i:fallback){{break}} + scope: support.type.property-name.css + set: counter-style-fallback-property-value + + counter-style-fallback-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-fallback-property-value-content + - include: else-pop + + counter-style-fallback-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: counter-style-identifiers + + counter-style-identifiers: + - match: '{{counter_style_names}}' + scope: support.constant.counter-style-name.css + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + +###[ COUNTER STYLE SYSTEM PROPERTY ]########################################### + + # Counter Style System + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-system + counter-style-system-property: + - match: \b(?i:system){{break}} + scope: support.type.property-name.css + set: counter-style-system-property-value + + counter-style-system-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-system-property-value-content + - include: else-pop + + counter-style-system-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: counter-symbol-values + - match: \b(?i:extends){{break}} + scope: keyword.declaration.extends.css + push: counter-style-identifier + + counter-style-identifier: + - match: '{{counter_style_names}}' + scope: support.constant.counter-style-name.css + pop: 1 + - match: '{{ident}}' + scope: entity.other.counter-style-name.css + pop: 1 + - include: comments + - include: else-pop + +###[ COUNTER STYLE SPEAK AS PROPERTY ]######################################### + + # Counter Style Speak As + # https://drafts.csswg.org/css-counter-styles-3/#counter-style-speak-as + counter-style-speak-as-property: + - match: \b(?i:speak-as){{break}} + scope: support.type.property-name.css + set: counter-style-speak-as-property-value + + counter-style-speak-as-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: counter-style-speak-as-property-value-content + - include: else-pop + + counter-style-speak-as-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: var-functions + - include: quoted-strings + - include: counter-speak-as-constants + - include: counter-style-identifiers + +###[ FONT PROPERTY ]########################################################### + + # Font and Font-Family Property + # https://drafts.csswg.org/css-fonts-3/#font-family-prop + # https://drafts.csswg.org/css-fonts-3/#font-prop + font-property: + - match: \b(?i:font(-family)?){{break}} + scope: support.type.property-name.css + set: font-property-value + + font-property-value: + - match: ':' + scope: punctuation.separator.key-value.css + set: font-property-value-content + - include: else-pop + + font-property-value-content: + - meta_content_scope: meta.property-value.css + - include: terminator-pop + - include: comments + - include: comma-delimiters + - include: common-operators + - include: builtin-values + - include: font-family-names + +###[ BUILTIN FUNCTIONS ]####################################################### + + builtin-functions: + - include: at-counter-functions + - include: at-font-functions + - include: attr-functions + - include: calc-functions + - include: color-adjuster-functions + - include: cross-fade-functions + - include: filter-functions + - include: filters-functions + - include: gradient-functions + - include: image-functions + - include: image-set-functions + - include: minmax-functions + - include: repeat-functions + - include: shape-functions + - include: timing-functions + - include: toggle-functions + - include: transform-functions + - include: url-functions + - include: var-functions + + function-arguments-common: + - include: group-end + - include: terminator-pop + - include: comments + - include: var-functions + +###[ BUILTIN AT RULE FUNCTIONS ]############################################### + + at-counter-functions: + # counter() + # https://drafts.csswg.org/css-lists-3/#funcdef-counter + # counters() + # https://drafts.csswg.org/css-lists-3/#funcdef-counters + - match: \b(?i:counters?)(?=\() + scope: meta.function-call.identifier.css support.function.counter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: counter-style-identifiers + - include: quoted-strings + - counter-identifier + + # symbols() + # https://drafts.csswg.org/css-counter-styles-3/#symbols-function + - match: \b(?i:symbols)(?=\() + scope: meta.function-call.identifier.css support.function.counter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: counter-symbol-values + + at-document-functions: + # url-prefix() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-prefix + - match: \b(?i:url-prefix)(?=\() + scope: meta.function-call.identifier.css support.function.url-prefix.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # domain() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-domain + - match: \b(?i:domain)(?=\() + scope: meta.function-call.identifier.css support.function.domain.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # regexp() + # https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-regexp + - match: \b(?i:regexp)(?=\() + scope: meta.function-call.identifier.css support.function.regexp.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + + at-font-functions: + # format() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + # format() is also mentioned in `issue 2` at https://drafts.csswg.org/css-images-3/#issues-index + # but does not seem to be implemented in any manner + - match: \b(?i:format)(?=\() + scope: meta.function-call.identifier.css support.function.font-face.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + + # local() + # https://drafts.csswg.org/css-fonts-3/#descdef-src + - match: \b(?i:local)(?=\() + scope: meta.function-call.identifier.css support.function.font-face.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-strings + - include: generic-font-names + - include: font-family-names + +###[ BUILTIN COLOR FUNCTIONS ]################################################# + + # Color Functions + # https://drafts.csswg.org/css-color + color-functions: + # rgb(), rgba() + # https://drafts.csswg.org/css-color/#rgb-functions + - match: \b(?i:rgba?)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # hsl(), hsla() + # https://drafts.csswg.org/css-color/#the-hsl-notation + # hwb() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-hwb + - match: \b(?i:hsla?|hwb)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + - include: percentage-constants + - include: scalar-constants + + # gray() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-gray + - match: \b(?i:gray)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # device-cmyk() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-device-cmyk + - match: \b(?i:device-cmyk)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: percentage-constants + - include: scalar-constants + + # color-mod() - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#funcdef-color-mod + - match: \b(?i:color)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: color-adjuster-functions # must be included before `color-values` + - include: color-values + - include: angle-constants + - include: scalar-constants + + # Color Adjuster Functions - Not yet implemented by browsers + # https://drafts.csswg.org/css-color/#typedef-color-adjuster + color-adjuster-functions: + # red(), green(), blue(), alpha() - Not yet implemented by browsers + - match: \b(?i:red|green|blue|alpha|a)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: percentage-constants + - include: scalar-constants + + # hue() - Not yet implemented by browsers + - match: \b(?i:hue|h)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: angle-constants + + # saturation(), lightness(), whiteness(), blackness() - Not yet implemented by browsers + - match: \b(?i:saturation|lightness|whiteness|blackness|[slwb])(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-adjuster-operators + - include: percentage-constants + + # tint(), shade(), contrast() - Not yet implemented by browsers + # contrast() interferes with the contrast() filter function; + # therefore, it is not yet implemented here + - match: \b(?i:tint|shade)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + + # blend(), blenda() - Not yet implemented by browsers + - match: \b(?i:blenda|blend)(?=\() + scope: meta.function-call.identifier.css support.function.color.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-values + - include: percentage-constants + - match: \b(?i:rgb|hsl|hwb){{break}} + scope: keyword.other.color-space.css + +###[ BUILTIN FILTER FUNCTIONS ]################################################ + + filter-functions: + # filter() + # https://drafts.fxtf.org/filters/#funcdef-filter + - match: \b(?i:filter)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: filters-functions + - include: image-values + - include: quoted-strings + + # Filter Functions + # https://drafts.fxtf.org/filters/#typedef-filter-function + filters-functions: + # blur() + # https://drafts.fxtf.org/filters/#funcdef-filter-blur + - match: \b(?i:blur)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: length-constants + + # brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia() + # https://drafts.fxtf.org/filters/#funcdef-filter-brightness + - match: \b(?i:brightness|contrast|grayscale|invert|opacity|saturate|sepia)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + - include: scalar-constants + + # drop-shadow() + # https://drafts.fxtf.org/filters/#funcdef-filter-drop-shadow + - match: \b(?i:drop-shadow)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: color-values + - include: length-constants + + # hue-rotate() + # https://drafts.fxtf.org/filters/#funcdef-filter-hue-rotate + - match: \b(?i:hue-rotate)(?=\() + scope: meta.function-call.identifier.css support.function.filter.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: angle-constants + +###[ BUILTIN GRID FUNCTIONS ]################################################## + + # minmax() + # https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax + minmax-functions: + - match: \b(?i:minmax)(?=\() + scope: meta.function-call.identifier.css support.function.grid.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: grid-constants + - include: length-constants + - include: percentage-constants + + # repeat() + # https://drafts.csswg.org/css-grid/#funcdef-repeat + repeat-functions: + - match: \b(?i:repeat)(?=\() + scope: meta.function-call.identifier.css support.function.grid.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:auto-fill|auto-fit){{break}} + scope: keyword.other.grid.css + - include: calc-functions + - include: minmax-functions + - include: grid-constants + - include: length-constants + - include: percentage-constants + - include: scalar-integer-constants + - include: line-names + +###[ BUILTIN IMAGE FUNCTIONS ]################################################# + + # cross-fade() + # https://drafts.csswg.org/css-images-4/#funcdef-cross-fade + cross-fade-functions: + - match: \b(?i:cross-fade)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: percentage-constants + - include: quoted-urls + + # image() + # https://drafts.csswg.org/css-images-4/#funcdef-image + image-functions: + - match: \b(?i:image)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: quoted-urls + - include: direction-constants + + # image-set() + # https://drafts.csswg.org/css-images-4/#funcdef-image-set + image-set-functions: + - match: \b(?i:image-set)(?=\() + scope: meta.function-call.identifier.css support.function.image.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: color-values + - include: image-values + - include: quoted-urls + - include: resolution-constants + - match: ([0-9]+)(x) + scope: meta.number.integer.decimal.css + captures: + 1: constant.numeric.value.css + 2: constant.numeric.suffix.css + + # Gradient Functions + # https://drafts.csswg.org/css-images-3/#gradients + gradient-functions: + # conic-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient() + # repeating-conic-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient() + - match: \b((?:repeating-)?conic-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:at|from){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|center|left|right|top){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: angle-constants + - include: length-constants + - include: percentage-constants + + # linear-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient() + # repeating-linear-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient() + - match: \b((?:repeating-)?linear-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:to){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|left|right|top){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: angle-constants + - include: length-constants + - include: percentage-constants + + # radial-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient() + # repeating-radial-gradient() + # https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient() + - match: \b((?:repeating-)?radial-gradient)(?=\() + scope: meta.function-call.identifier.css support.function.gradient.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:at|circle|ellipse){{break}} + scope: keyword.other.gradient.css + - match: \b(?i:bottom|center|left|right|top|(closest|farthest)-(corner|side)){{break}} + scope: support.constant.property-value.css + - include: color-values + - include: length-constants + - include: percentage-constants + +###[ BUILTIN SHAPE FUNCTIONS ]################################################# + + # Shape Functions + # https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape + shape-functions: + # rect() - Deprecated + # https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect + - match: \b(?i:rect)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:auto){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + + # inset() + # https://www.w3.org/TR/css-shapes-1/#funcdef-inset + - match: \b(?i:inset)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:round){{break}} + scope: keyword.other.shape.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + + # circle() + # https://www.w3.org/TR/css-shapes-1/#funcdef-circle + # ellipse() + # https://www.w3.org/TR/css-shapes-1/#funcdef-ellipse + - match: \b(?i:circle|ellipse)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - match: \b(?i:at){{break}} + scope: keyword.other.shape.css + - match: \b(?i:top|right|bottom|left|center|closest-side|farthest-side){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + + # polygon() + # https://www.w3.org/TR/css-shapes-1/#funcdef-polygon + - match: \b(?i:polygon)(?=\() + scope: meta.function-call.identifier.css support.function.shape.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: \b(?i:nonzero|evenodd){{break}} + scope: support.constant.property-value.css + - include: calc-functions + - include: length-constants + - include: percentage-constants + +###[ BUILTIN TIMING FUNCTIONS ]################################################ + + # Timing Functions + # https://www.w3.org/TR/web-animations-1/#timing-functions + timing-functions: + # cubic-bezier() + # https://www.w3.org/TR/web-animations-1/#cubic-bzier-timing-function + - match: \b(?i:cubic-bezier)(?=\() + scope: meta.function-call.identifier.css support.function.timing.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + + # steps() + # https://www.w3.org/TR/web-animations-1/#step-timing-function + - match: \b(?i:steps)(?=\() + scope: meta.function-call.identifier.css support.function.timing.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - match: \b(?i:end|middle|start){{break}} + scope: keyword.other.timing.css + - include: scalar-integer-constants + +###[ BUILTIN TRANSFORM FUNCTIONS ]############################################# + + # Transform Functions + # https://www.w3.org/TR/css-transforms-1/#transform-functions + transform-functions: + # transform functions with comma separated <number> types + # matrix(), scale(), matrix3d(), scale3d() + - match: \b(?i:matrix3d|scale3d|matrix|scale)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + + # transform functions with comma separated <number> or <length> types + # translate(), translate3d() + - match: \b(?i:translate(3d)?)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: percentage-constants + - include: length-constants + - include: scalar-constants + + # transform functions with a single <number> or <length> type + # translateX(), translateY() + - match: \b(?i:translate[XY])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: percentage-constants + - include: length-constants + - include: scalar-constants + + # transform functions with a single <angle> type + # rotate(), skewX(), skewY(), rotateX(), rotateY(), rotateZ() + - match: \b(?i:rotate[XYZ]?|skew[XY])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: angle-constants + + # transform functions with comma separated <angle> types + # skew() + - match: \b(?i:skew)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + + # transform functions with a single <length> type + # translateZ(), perspective() + - match: \b(?i:translateZ|perspective)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: calc-functions + - include: length-constants + + # transform functions with a comma separated <number> or <angle> types + # rotate3d() + - match: \b(?i:rotate3d)(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: angle-constants + - include: scalar-constants + + # transform functions with a single <number> type + # scaleX(), scaleY(), scaleZ() + - match: \b(?i:scale[XYZ])(?=\() + scope: meta.function-call.identifier.css support.function.transform.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: scalar-constants + +###[ BUILTIN VALUE FUNCTIONS ]################################################# + + # attr() + # https://www.w3.org/TR/css3-values/#funcdef-attr + attr-functions: + - match: \b(?i:attr)(?=\() + scope: meta.function-call.identifier.css support.function.attr.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - attr-function-arguments-value + - attr-function-arguments-identifier + + attr-function-arguments-identifier: + - include: namespace-prefixes + - include: quoted-string + - include: var-function + - match: '{{ident}}' + scope: entity.other.attribute-name.css + pop: 1 + - include: comments + - include: else-pop + + attr-function-arguments-value: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - match: '{{units}}' + scope: keyword.other.unit.css + - include: color-values + - include: common-constants + - include: generic-font-names + - include: numeric-constants + + calc-functions: + # calc() + # https://www.w3.org/TR/css3-values/#funcdef-calc + - match: \b(?i:calc)(?=\() + scope: meta.function-call.identifier.css support.function.calc.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: calc-function-arguments-content + + # clamp() + # https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() + # max() + # https://developer.mozilla.org/en-US/docs/Web/CSS/max() + # min() + # https://developer.mozilla.org/en-US/docs/Web/CSS/min() + - match: \b(?i:clamp|max|min)(?=\() + scope: meta.function-call.identifier.css support.function.calc.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: calc-function-arguments-content + - include: comma-delimiters + + calc-function-arguments-content: + - meta_scope: meta.group.css + - match: \) + scope: punctuation.section.group.end.css + set: maybe-illegal-operator + - match: \( + scope: punctuation.section.group.begin.css + push: calc-function-arguments-content + - include: terminator-pop + - include: comments + - include: attr-functions + - include: calc-functions + - include: var-functions + - match: '{{float}}({{units}})?' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + push: maybe-illegal-operator + - match: '{{integer}}({{units}})?' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + push: maybe-illegal-operator + - match: '[-+*/]' + scope: keyword.operator.arithmetic.css + + toggle-functions: + # toggle() + # https://www.w3.org/TR/css3-values/#toggle-notation + - match: \b(?i:toggle)(?=\() + scope: meta.function-call.identifier.css support.function.toggle.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: vendor-prefixes + - include: color-values + - include: common-constants + - include: numeric-constants + - include: quoted-strings + + # url() + # https://drafts.csswg.org/css-values-3/#urls + url-functions: + - match: \b(?i:url)(?=\() + scope: meta.function-call.identifier.css support.function.url.css + push: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: quoted-urls + - include: unquoted-urls + + # var() + # https://drafts.csswg.org/css-variables/#funcdef-var + # Note: Match valid groups before `var-functions` context is included. + var-functions: + - match: \b(?i:var)(?=\() + scope: meta.function-call.identifier.css support.function.var.css + push: var-function-arguments + - include: illegal-groups + + var-function: + - match: \b(?i:var)(?=\() + scope: meta.function-call.identifier.css support.function.var.css + set: var-function-arguments + - include: illegal-groups + + var-function-arguments: + - match: \( + scope: punctuation.section.group.begin.css + set: + - var-function-arguments-defaults + - var-function-arguments-identifier + + var-function-arguments-defaults: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: group-end + - include: font-property-value-content + + var-function-arguments-identifier: + - match: '{{custom_ident}}' + scope: variable.other.custom-property.css + pop: 1 + - include: comments + - include: else-pop + +###[ OTHER FUNCTIONS ]######################################################### + + other-functions: + - match: '{{ident}}(?=\()' + scope: meta.function-call.identifier.css variable.function.css + push: other-functions-arguments + + other-functions-arguments: + - meta_include_prototype: false + - match: \( + scope: punctuation.section.group.begin.css + set: + - meta_scope: meta.function-call.arguments.css meta.group.css + - include: function-arguments-common + - include: comma-delimiters + - include: calc-functions + - include: quoted-strings + - include: numeric-constants + - include: other-constants + +###[ CONSTANTS ]############################################################### + + color-constants: + # https://www.w3.org/TR/CSS22/syndata.html#color-units + - match: '{{standard_colors}}' + scope: support.constant.color.w3c.standard.css + # https://www.w3.org/TR/css3-color/#svg-color + - match: '{{extended_colors}}' + scope: support.constant.color.w3c.extended.css + # Special Color Keywords + # https://www.w3.org/TR/css3-color/#currentcolor + # https://www.w3.org/TR/css3-color/#transparent-def + - match: \b(?i:currentColor|transparent){{break}} + scope: support.constant.color.w3c.special.css + # Hex Color + - match: (#)(\h{3}|\h{6}){{break}} + scope: constant.other.color.rgb-value.css + captures: + 1: punctuation.definition.constant.css + # RGBA Hexadecimal Colors + # https://en.wikipedia.org/wiki/RGBA_color_space#RGBA_hexadecimal_.28word-order.29 + - match: (#)(\h{4}|\h{8}){{break}} + scope: constant.other.color.rgba-value.css + captures: + 1: punctuation.definition.constant.css + + common-constants: + - match: '{{property_value_constants}}' + scope: support.constant.property-value.css + + counter-speak-as-constants: + - match: '{{counter_speak_as_constants}}' + scope: support.constant.property-value.css + + counter-system-constants: + - match: '{{counter_system_constants}}' + scope: support.constant.symbol-type.css + + direction-constants: + - match: \b(ltr|rtl){{break}} + scope: support.constant.property-value.css + + # Generic Font Families + # https://drafts.csswg.org/css-fonts-3/#family-name-value + generic-font-names: + - match: '{{font_family_constants}}' + scope: support.constant.property-value.css + + grid-constants: + - match: \b(?i:auto|max-content|min-content){{break}} + scope: support.constant.property-value.css + + other-constants: + - match: '{{ident}}' + scope: constant.other.css + +###[ NUMERIC CONSTANTS ]####################################################### + + # https://www.w3.org/TR/css3-values/#numeric-constantss + numeric-constants: + - match: '{{float}}({{units}})?' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{units}})?' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + # Make sure `scalar-constants` is included after any other numeric values + # as `scalar-constants` will consume all numeric values. + scalar-constants: + - include: scalar-float-constants + - include: scalar-integer-constants + + scalar-float-constants: + - match: '{{float}}' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + + scalar-integer-constants: + - match: '{{integer}}' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + + scalar-rational-constants: + - match: \d+(/)\d+ + scope: meta.number.rational.css constant.numeric.value.css + captures: + 1: keyword.operator.arithmetic.css + + angle-constants: + - match: '{{float}}({{angle_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{angle_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + - match: \b0\b(?!%) + scope: meta.number.integer.decimal.css constant.numeric.value.css + + frequency-constants: + - match: '{{float}}({{frequency_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{frequency_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + length-constants: + - match: '{{float}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{font_relative_lengths}}|{{viewport_percentage_lengths}}|{{absolute_lengths}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + - match: \b0\b(?!%) + scope: meta.number.integer.decimal.css constant.numeric.value.css + + resolution-constants: + - match: '{{float}}({{resolution_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{resolution_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + percentage-constants: + - match: '{{float}}(%)' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}(%)' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + time-constants: + - match: '{{float}}({{duration_units}})' + scope: meta.number.float.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: punctuation.separator.decimal.css + 4: constant.numeric.suffix.css + - match: '{{integer}}({{duration_units}})' + scope: meta.number.integer.decimal.css + captures: + 1: keyword.operator.arithmetic.css + 2: constant.numeric.value.css + 3: constant.numeric.suffix.css + + # Unicode Ranges + # https://www.w3.org/TR/css-syntax-3/#urange + unicode-ranges: + - match: ([Uu]\+)([\h?]{1,6}(?:(-)\h{1,6})?) + scope: meta.number.unicode-range.css + captures: + 1: constant.numeric.prefix.css + 2: constant.numeric.value.css + 3: punctuation.separator.range.css + +###[ STRING CONSTANTS ]######################################################## + + # Font Family Names + # https://drafts.csswg.org/css-fonts-3/#family-name-value + font-family-names: + - match: '{{ident}}(?:\s+{{ident}}(?!\())*' + scope: meta.string.css string.unquoted.css + + # Language Ranges + # https://drafts.csswg.org/selectors-4/#language-range + language-ranges: + - match: (?={{nmstart}}|\*) + push: + - meta_include_prototype: false + - meta_scope: meta.string.css string.unquoted.css + - include: string-content + - match: \* + scope: variable.language.wildcard.asterisk.css + - match: (?!{{nmchar}}) + pop: 1 + + # Named Grid Lines + # https://drafts.csswg.org/css-grid/#named-lines + line-names: + - match: \[ + scope: punctuation.section.brackets.begin.css + push: line-names-content + + line-names-content: + - meta_scope: meta.line-names.css meta.brackets.css + - match: \] + scope: punctuation.section.brackets.end.css + pop: 1 + - match: '{{ident}}' + scope: meta.string.css string.unquoted.line-name.css + - include: terminator-pop + + quoted-strings: + - match: \" + scope: punctuation.definition.string.begin.css + push: double-quoted-string-content + - match: \' + scope: punctuation.definition.string.begin.css + push: single-quoted-string-content + + quoted-string: + - match: \" + scope: punctuation.definition.string.begin.css + set: double-quoted-string-content + - match: \' + scope: punctuation.definition.string.begin.css + set: single-quoted-string-content + + double-quoted-string-content: + - meta_include_prototype: false + - meta_scope: meta.string.css string.quoted.double.css + - match: \" + scope: punctuation.definition.string.end.css + pop: 1 + - include: string-content + + single-quoted-string-content: + - meta_include_prototype: false + - meta_scope: meta.string.css string.quoted.single.css + - match: \' + scope: punctuation.definition.string.end.css + pop: 1 + - include: string-content + + string-content: + - meta_include_prototype: false + - match: \n + scope: invalid.illegal.newline.css + pop: 1 + - match: \\\s*\n + scope: constant.character.escape.newline.css + - match: \\(?:\h{1,6}|.) + scope: constant.character.escape.css + +###[ URL STRING CONSTANTS ]#################################################### + + quoted-urls: + - match: \" + scope: + meta.string.css string.quoted.double.css + punctuation.definition.string.begin.css + push: double-quoted-url-content + - match: \' + scope: + meta.string.css string.quoted.single.css + punctuation.definition.string.begin.css + push: single-quoted-url-content + + double-quoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.quoted.double.css + - match: \" + scope: + meta.string.css string.quoted.double.css + punctuation.definition.string.end.css + pop: 1 + - include: string-content + - include: url-content + + single-quoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.quoted.single.css + - match: \' + scope: + meta.string.css string.quoted.single.css + punctuation.definition.string.end.css + pop: 1 + - include: string-content + - include: url-content + + # Unquoted URL token + # https://drafts.csswg.org/css-syntax-3/#consume-a-url-token + unquoted-urls: + - match: (?=[[:alnum:]/]) + push: unquoted-url-content + + unquoted-url-content: + - meta_include_prototype: false + - meta_content_scope: + meta.path.url.css + meta.string.css string.unquoted.css + - match: '["''(]' + scope: invalid.illegal.unexpected-token.css + set: + - meta_include_prototype: false + - match: (?=\)) + pop: 1 + - include: string-content + - match: (?=\)) + pop: 1 + - include: url-content + + url-content: + - include: string-content + - match: (%)\h{2} + scope: constant.character.escape.url.css + captures: + 1: punctuation.definition.escape.css + - match: '[/&?#]|://' + scope: punctuation.separator.path.css + +###[ OPERATORS ]############################################################### + + common-operators: + - match: \!\s*(?i:important){{break}} + scope: keyword.other.important.css + - match: / + scope: keyword.operator.arithmetic.css + + color-adjuster-operators: + - match: '[-+*](?=\s)' + scope: keyword.operator.arithmetic.css + - match: '[-+*/]' + scope: invalid.illegal.operator.css + + maybe-illegal-operator: + - match: '[-+](?=\s*\d)' + scope: invalid.illegal.operator.css + pop: 1 + - match: \s*([-+])(?=\d) + captures: + 1: invalid.illegal.operator.css + pop: 1 + - include: immediately-pop + +###[ PUNCTUATION ]############################################################# + + comma-delimiters: + - match: ',' + scope: punctuation.separator.sequence.css + + block-end2: + - match: \} + scope: punctuation.section.block.end.css + pop: 2 + + group-end: + - match: \) + scope: punctuation.section.group.end.css + pop: 1 + + rule-terminators: + - match: ; + scope: punctuation.terminator.rule.css + + illegal-blocks: + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + - match: \{ + scope: invalid.illegal.unexpected-token.css + push: + - match: \} + scope: invalid.illegal.unexpected-token.css + pop: 1 + - match: \} + scope: invalid.illegal.unexpected-token.css + + illegal-groups: + # https://www.w3.org/TR/CSS22/syndata.html#parsing-errors + - match: \( + scope: invalid.illegal.unexpected-token.css + push: + - match: \) + scope: invalid.illegal.unexpected-token.css + pop: 1 + - match: \) + scope: invalid.illegal.unexpected-token.css + +###[ PROTOTYPES ]############################################################## + + else-pop: + - match: (?=\S) + pop: 1 + + immediately-pop: + - match: '' + pop: 1 + + terminator-pop: + - match: (?=[;){}]) + pop: 1 diff --git a/syntaxes/CSS/Comments.tmPreferences b/syntaxes/CSS/Comments.tmPreferences @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.css</string> + <key>settings</key> + <dict> + <key>shellVariables</key> + <array> + <dict> + <key>name</key> + <string>TM_COMMENT_START</string> + <key>value</key> + <string>/*</string> + </dict> + <dict> + <key>name</key> + <string>TM_COMMENT_END</string> + <key>value</key> + <string>*/</string> + </dict> + <dict> + <key>name</key> + <string>TM_COMMENT_DISABLE_INDENT</string> + <key>value</key> + <string>yes</string> + </dict> + </array> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/Default.sublime-keymap b/syntaxes/CSS/Default.sublime-keymap @@ -0,0 +1,121 @@ +[ + // Add a colon followed by space and semicolon after a property name, + // if the next following token doesn't look like a value. + { "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.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\w$", "match_all": false }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\s*($|[^:;}]+:)", "match_all": false } + ] + }, + // Add a colon followed by space after a property name, + // if the next character is a semicolon or the following token looks like a value. + { "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.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\w$", "match_all": false }, + { "key": "following_text", "operator": "regex_contains", "operand": "^;|^[^\\s:;][^:]*($|[;}]|//|/\\*)", "match_all": true } + ] + }, + // Move the cursor to prevent adding a duplicated semicolon. + { "keys": [";"], "command": "move", "args": {"by": "characters", "forward": true}, "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.css - meta.selector.css", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^;", "match_all": false } + ] + }, + // Delete both the colon on the left and a semicolon on the right. + { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "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.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": ":$", "match_all": false }, + { "key": "following_text", "operator": "regex_contains", "operand": "^;", "match_all": false } + ] + }, + // Move the caret to the next line and leave the terminating semicolon untouched. + // This is to not bother with semicolons even though completions end up with the caret directy in front of it. + { "keys": ["enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line.sublime-macro"} , "context": + [ + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "auto_complete_visible", "operator": "equal", "operand": false }, + { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, + { "key": "selector", "operator": "equal", "operand": "source.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "not_regex_contains", "operand": ";\\s*$", "match_all": false }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\s*;", "match_all": false } + ] + }, + + // Expand {|} to { | } when space is pressed + { "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.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{$", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\}", "match_all": true } + ] + }, + { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "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.css - meta.selector.css", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "\\{ $", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^ \\}", "match_all": true } + ] + }, + + // Expand /*|*/ to /* | */ when space is pressed + { "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.css comment", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "/\\*$", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^\\*/", "match_all": true } + ] + }, + { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "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.css comment", "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "/\\* $", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^ \\*/", "match_all": true } + ] + }, + + // Auto-pair double quotes (also if followed by comma or semicolon) + // Example: key: |; -> key: "|"; + { "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.css - string", "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.double - punctuation.definition.string.end", "match_all": true } + ] + }, + + // Auto-pair single quotes (also if followed by comma or semicolon) + // Example: key: |; -> key: '|'; + { "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.css - string", "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.single - punctuation.definition.string.end", "match_all": true } + ] + } +] diff --git a/syntaxes/CSS/Reference Index.tmPreferences b/syntaxes/CSS/Reference Index.tmPreferences @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string> + source.css variable.other.custom-property + </string> + <key>settings</key> + <dict> + <key>showInIndexedReferenceList</key> + <string>1</string> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/Symbol Index.tmPreferences b/syntaxes/CSS/Symbol Index.tmPreferences @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string> + source.css entity.other.attribute-name.class - source.css entity.other.attribute-name punctuation.definition, + source.css entity.other.attribute-name.id - source.css entity.other.attribute-name punctuation.definition, + source.css entity.other.custom-property + </string> + <key>settings</key> + <dict> + <key>showInIndexedSymbolList</key> + <string>1</string> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/Symbol List - Custom Properties.tmPreferences b/syntaxes/CSS/Symbol List - Custom Properties.tmPreferences @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.css entity.other.custom-property</string> + <key>settings</key> + <dict> + <key>showInSymbolList</key> + <integer>1</integer> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/Symbol List - Group.tmPreferences b/syntaxes/CSS/Symbol List - Group.tmPreferences @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.css comment.block.css - source.css.embedded</string> + <key>settings</key> + <dict> + <key>showInSymbolList</key> + <integer>1</integer> + <key>symbolTransformation</key> + <string> + s/\/\*\*\s*(.*?)\s*\*\//** $1 **/; + s/\/\*.*?\*\*\//./; + s/\/\*[^\*].*?[^\*]\*\/// + </string> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/Symbol List - Selector.tmPreferences b/syntaxes/CSS/Symbol List - Selector.tmPreferences @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.css meta.selector</string> + <key>settings</key> + <dict> + <key>showInSymbolList</key> + <integer>1</integer> + <key>symbolTransformation</key> + <string> + s/\/\*.*?\*\///g; # remove comments + s/\s+([,)\]}])/$1/g; # remove whitespace before punctuation + s/([(\[{])\s+/$1/g; # remove whitespace after punctuation + s/\s+/ /g; # remove multiple whitespace + </string> + </dict> +</dict> +</plist> diff --git a/syntaxes/CSS/css_completions.py b/syntaxes/CSS/css_completions.py @@ -0,0 +1,718 @@ +import re +import sublime +import sublime_plugin +import timeit + +from functools import cached_property, wraps + +__all__ = ['CSSCompletions'] + +KIND_CSS_PROPERTY = (sublime.KIND_ID_KEYWORD, "p", "property") +KIND_CSS_FUNCTION = (sublime.KIND_ID_FUNCTION, "f", "function") +KIND_CSS_CONSTANT = (sublime.KIND_ID_VARIABLE, "c", "constant") + +ENABLE_TIMING = False + + +def timing(func): + @wraps(func) + def wrap(*args, **kw): + if ENABLE_TIMING: + ts = timeit.default_timer() + result = func(*args, **kw) + if ENABLE_TIMING: + te = timeit.default_timer() + print(f"{func.__name__}({args}, {kw}) took: {1000.0 * (te - ts):2.3f} ms") + return result + return wrap + + +def get_properties(): + """ + Gets the properties. + + Prepare some common property values for when there is more than one way to + specify a certain value type. The color value for example can be specified + by `rgb()` or `hsl()` and so on. Example where `|` denotes the caret: + + color: rg| --> color: rgb(|); + + This is also helpful when multiple properties share the same value types. + """ + common_values = { + 'animation_direction': [ + 'alternate', 'alternate-reverse', 'normal', 'reverse' + ], + 'absolute_size': [ + 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large' + ], + 'absolute_weight': [ + '100', '200', '300', '400', '500', '600', '700', '800', '900', + 'normal', 'bold' + ], + 'basic_shape': [ + ['circle()', 'circle($1)'], + ['ellipse()', 'ellipse($1)'], + ['inset()', 'inset($1)'], + ['polygon()', 'polygon($1)'] + ], + 'blend_mode': [ + 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', + 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', + 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ], + 'border_style': [ + 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', + 'groove', 'ridge', 'inset', 'outset' + ], + 'border_width': ['thin', 'medium', 'thick'], + 'break_before_after': [ + 'always', 'left', 'right', 'recto', 'verso', 'page', 'column', 'region' + ], + 'break_inside': [ + 'auto', 'avoid', 'avoid-page', 'avoid-column', 'avoid-region' + ], + 'color': [ + 'currentColor', + 'transparent', + ['rgb()', 'rgb(${1:0}, ${2:0}, ${3:0})'], + ['rgba()', 'rgba(${1:0}, ${2:0}, ${3:0}, ${4:1.0})'], + ['hsl()', 'hsl(${1:0}, ${2:100%}, ${3:50%})'], + ['hsla()', 'hsla(${1:0}, ${2:100%}, ${3:50%}, ${4:1.0})'], + # Named colors + 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', + 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', + 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', + 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', + 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgrey', 'darkgreen', + 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', + 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', + 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', + 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', + 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', + 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'grey', + 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo', + 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', + 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', + 'lightgoldenrodyellow', 'lightgray', 'lightgrey', 'lightgreen', + 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', + 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', + 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', + 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', + 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', + 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', + 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', + 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', + 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', + 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', + 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', + 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', + 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', + 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', + 'whitesmoke', 'yellow', 'yellowgreen' + ], + 'counter_symbols': [ + 'cyclic', 'numeric', 'alphabetic', 'symbolic', 'additive', 'fixed' + ], + 'font_variant_alternates': [ + 'normal', 'historical-forms', + ['stylistic()', 'stylistic($1)'], + ['styleset()', 'styleset($1)'], + ['character-variant()', 'character-variant($1)'], + ['swash()', 'swash($1)'], + ['ornaments()', 'ornaments($1)'], + ['annotation()', 'annotation($1)'] + ], + 'generic_name': [ + 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace' + ], + 'gradient': [ + ['conic-gradient()', 'conic-gradient($1)'], + ['linear-gradient()', 'linear-gradient($1)'], + ['radial-gradient()', 'radial-gradient($1)'], + ['repeating-conic-gradient()', 'repeating-conic-gradient($1)'], + ['repeating-linear-gradient()', 'repeating-linear-gradient($1)'], + ['repeating-radial-gradient()', 'repeating-radial-gradient($1)'] + ], + 'grid': [ + ['repeat()', 'repeat(${1:2}, ${2:1fr})'], + ['minmax()', 'minmax(${1:100px}, ${2:1fr})'], + ], + 'list_style_type': [ + 'none', 'inline', 'disc', 'circle', 'square', 'decimal', + 'decimal-leading-zero', 'arabic-indic', 'binary', 'bengali', + 'cambodian', 'khmer', 'devanagari', 'gujarati', 'gurmukhi', + 'kannada', 'lower-hexadecimal', 'lao', 'malayalam', 'mongolian', + 'myanmar', 'octal', 'oriya', 'persian', 'urdu', 'telugu', + 'tibetan', 'thai', 'upper-hexadecimal', 'lower-roman', + 'upper-roman', 'lower-greek', 'lower-alpha', 'lower-latin', + 'upper-alpha', 'upper-latin', 'afar', 'ethiopic-halehame-aa-et', + 'ethiopic-halehame-aa-er', 'amharic', 'ethiopic-halehame-am-et', + 'amharic-abegede', 'ethiopic-abegede-am-et', 'cjk-earthly-branch', + 'cjk-heavenly-stem', 'ethiopic', 'ethiopic-halehame-gez', + 'ethiopic-abegede', 'ethiopic-abegede-gez', 'hangul-consonant', + 'hangul', 'lower-norwegian', 'oromo', 'ethiopic-halehame-om-et', + 'sidama', 'ethiopic-halehame-sid-et', 'somali', + 'ethiopic-halehame-so-et', 'tigre', 'ethiopic-halehame-tig', + 'tigrinya-er', 'ethiopic-halehame-ti-er', 'tigrinya-er-abegede', + 'ethiopic-abegede-ti-er', 'tigrinya-et', 'ethiopic-halehame-ti-et', + 'tigrinya-et-abegede', 'ethiopic-abegede-ti-et', 'upper-greek', + 'upper-norwegian', 'asterisks', 'footnotes', 'hebrew', 'armenian', + 'lower-armenian', 'upper-armenian', 'georgian', 'cjk-ideographic', + 'hiragana', 'katakana', 'hiragana-iroha', 'katakana-iroha' + ], + 'position': ['top', 'right', 'bottom', 'left', 'center'], + 'relative_size': ['larger', 'smaller'], + 'relative_weight': ['bolder', 'lighter'], + 'repeat_style': [ + 'repeat', 'repeat-x', 'repeat-y', 'space', 'round', 'no-repeat' + ], + 'string': ['\"$1\"'], + 'timing_function': [ + 'linear', + 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end', + ['cubic-bezier()', 'cubic-bezier(${1:0.0}, ${2:0.0}, ${3:1.0}, ${4:1.0})'], + ['steps()', 'steps(${1:2}, ${2:start})'], + ], + 'uri': [['url()', 'url($1)']], + } + + properties_dict = { + 'align-content': [ + 'center', 'flex-end', 'flex-start', 'space-around', 'space-between', + 'stretch' + ], + 'align-items': [ + 'baseline', 'center', 'flex-end', 'flex-start', 'stretch' + ], + 'align-self': [ + 'auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch' + ], + 'alignment-baseline': [ + 'baseline', 'middle', 'auto', 'before-edge', 'after-edge', 'central', + 'text-before-edge', 'text-after-edge', 'ideographic', 'alphabetic', + 'hanging', 'mathematical' + ], + 'animation': [ + 'none', '<timing_function>', 'infinite', '<animation_direction>', + 'forwards', 'backwards', 'both', 'running', 'paused' + ], + 'animation-name': ['none', '<custom-ident>'], + 'animation-duration': ['<time>'], + 'animation-timing-function': ['<timing_function>'], + 'animation-delay': ['<time>'], + 'animation-iteration-count': ['infinite', '<number>'], + 'animation-direction': ['<animation_direction>'], + 'animation-fill-mode': ['none', 'forwards', 'backwards', 'both'], + 'animation-play-state': ['running', 'paused'], + 'backface-visibility': ['visible', 'hidden'], + 'background': [ + '<color>', '<gradient>', '<position>', '<uri>', + 'repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'scroll', 'fixed' + ], + 'background-attachment': ['fixed', 'local', 'scroll'], + 'background-blend-mode': ['<blend_mode>'], + 'background-clip': ['border-box', 'padding-box', 'content-box'], + 'background-color': ['<color>'], + 'background-image': ['<uri>', 'none'], + 'background-origin': ['border-box', 'padding-box', 'content-box'], + 'background-position': ['<position>'], + 'background-repeat': ['<repeat_style>'], + 'background-size': [ + 'auto', 'cover', 'contain', '<length>', '<percentage>' + ], + 'baseline-shift': ['baseline', 'sub', 'super'], + 'border': ['<border_width>', '<border_style>', '<color>'], + 'border-width': ['<border_width>'], + 'border-style': ['<border_style>'], + 'border-color': ['<color>'], + 'border-collapse': ['collapse', 'separate'], + 'border-radius': ['<length>', '<percentage>'], + 'border-spacing': ['<length>'], + 'border-image': [ + '<border-image-source>', '<border-image-slice>', + '<border-image-width>', '<border-image-outset>', + '<border-image-repeat>' + ], + 'border-image-outset': ['<length>', '<number>'], + 'border-image-repeat': ['stretch', 'repeat', 'round', 'space'], + 'border-image-slice': ['fill', '<number>', '<percentage>'], + 'border-image-source': ['none', '<image>'], + 'border-image-width': ['<length>', '<percentage>', '<number>', 'auto'], + 'border-top | border-right | border-bottom | border-left': [ + '<border_width>', '<border_style>', '<color>' + ], + 'border-top-color | border-right-color | border-bottom-color | border-left-color': ['<color>'], + 'border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius': [ + '<length>', '<percentage>' + ], + 'border-top-style | border-right-style | border-bottom-style | border-left-style': ['<border_style>'], + 'border-top-width | border-right-width | border-bottom-width | border-left-width': ['<border_width>'], + 'bottom': ['<length>', '<percentage>', 'auto'], + 'box-decoration-break': ['slice', 'clone'], + 'box-shadow': ['none', 'inset', '<color>'], + 'box-sizing': ['content-box', 'border-box'], + 'break-after': ['<break_before_after>', '<break_inside>'], + 'break-before': ['<break_before_after>', '<break_inside>'], + 'break-inside': ['<break_inside>'], + 'caption-side': ['top', 'bottom'], + 'clear': ['none', 'left', 'right', 'both'], + 'clip': [ + ['rect()', 'rect(${1:0}, ${2:0}, ${3:0}, ${4:0})'], + 'auto' + ], + 'clip-path': ['none', '<uri>', '<basic_shape>'], + 'clip-rule': ['nonzero', 'evenodd'], + 'color': ['<color>'], + 'color-interpolation': ['auto', 'sRGB', 'linearRGB'], + 'color-interpolation-filters': ['auto', 'sRGB', 'linearRGB'], + 'color-profile': ['auto', 'sRGB', '<uri>'], + 'color-rendering': ['auto', 'optimizeSpeed', 'optimizeQuality'], + 'columns': ['auto'], + 'column-count': ['auto', '<number>'], + 'column-fill': ['auto', 'balance'], + 'column-gap': ['normal', '<length>'], + 'column-rule': ['<border_width>', '<border_style>', '<color>'], + 'column-rule-color': ['<color>'], + 'column-rule-style': ['<border_style>'], + 'column-rule-width': ['<border_width>'], + 'column-span': ['none'], + 'column-width': ['auto', '<length>'], + 'content': [ + 'none', 'normal', '<string>', '<uri>', + 'open-quote', 'close-quote', 'no-open-quote', 'no-close-quote', + ['attr()', 'attr($1)'], + ['counter()', 'counter($1)'] + ], + 'counter-increment': ['none', '<custom_ident>', '<integer>'], + 'counter-reset': ['none', '<custom_ident>', '<integer>'], + 'cursor': [ + '<uri>', 'auto', 'default', 'none', 'context-menu', 'help', + 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', + 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', + 'e-resize', 'n-resize', 'ne-resize', 'nw-resize', 's-resize', + 'se-resize', 'sw-resize', 'w-resize', 'ew-resize', 'ns-resize', + 'nesw-resize', 'nwse-resize', 'col-resize', 'row-resize', + 'all-scroll', 'zoom-in', 'zoom-out' + ], + 'direction': ['ltr', 'rtl'], + 'display': [ + 'none', 'inline', 'block', 'contents', 'list-item', 'inline-block', + 'inline-table', 'table', 'table-cell', 'table-column', + 'table-column-group', 'table-footer-group', 'table-header-group', + 'table-row', 'table-row-group', 'table-caption', 'flex', + 'inline-flex', 'grid', 'inline-grid', 'ruby', 'ruby-base', + 'ruby-text', 'ruby-base-container', 'ruby-text-container', 'run-in' + ], + 'dominant-baseline': [ + 'auto', 'middle', 'central', 'text-before-edge', + 'text-after-edge', 'ideographic', 'alphabetic', 'hanging', + 'mathematical', 'use-script', 'no-change', 'reset-size' + ], + 'empty-cells': ['show', 'hide'], + 'fill': ['<color>'], + 'fill-rule': ['nonzero', 'evenodd'], + 'filter': [ + '<uri>', + ['blur()', 'blur(${1:5px})'], + ['brightness()', 'brightness(${1:1.0})'], + ['contrast()', 'contrast(${1:100%})'], + ['drop-shadow()', 'drop-shadow(${1:1px} ${2:1px})'], + ['grayscale()', 'grayscale(${1:50%})'], + ['hue-rotate()', 'hue-rotate(${1:90deg})'], + ['invert()', 'invert(${1:50%})'], + ['opacity()', 'opacity(${1:100%})'], + ['saturate()', 'saturate(${1:50%})'], + ['sepia()', 'sepia(${1:50%})'] + ], + 'flex': ['none'], + 'flex-grow': ['<number>'], + 'flex-shrink': ['<number>'], + 'flex-basis': ['auto', '<width>'], + 'flex-flow': [ + 'row', 'row-reverse', 'column', 'column-reverse', 'nowrap', 'wrap', + 'wrap-reverse' + ], + 'flex-direction': ['row', 'row-reverse', 'column', 'column-reverse'], + 'flex-wrap': ['nowrap', 'wrap', 'wrap-reverse'], + 'float': ['left', 'right', 'none'], + 'flood-color': ['<color>'], + 'font': [ + '<absolute_weight>', '<generic_name>', '<relative_weight>', + 'caption', 'icon', 'italic', 'menu', 'message-box', 'oblique', + 'small-caps', 'small-caption', 'status-bar' + ], + 'font-display': ['auto', 'block', 'swap', 'fallback', 'optional'], + 'font-family': ['<generic_name>'], + 'font-feature-settings': ['normal', '<string>'], + 'font-kerning': ['auto', 'normal', 'none'], + 'font-language-override': ['normal', '<string>'], + 'font-size': [ + '<absolute_size>', '<relative_size>', '<length>', '<percentage>' + ], + 'font-size-adjust': ['none', '<number>'], + 'font-style': ['normal', 'italic', 'oblique'], + 'font-stretch': [ + 'normal', 'semi-condensed', 'condensed', 'extra-condensed', + 'ultra-condensed', 'semi-expanded', 'expanded', 'extra-expanded', + 'ultra-expanded' + ], + 'font-synthesis': ['none', 'weight', 'style'], + 'font-variant': ['normal', 'small-caps'], + 'font-variant-alternates': ['<font_variant_alternates>'], + 'font-variant-caps': [ + 'normal', 'small-caps', 'all-small-caps', 'petite-caps', + 'all-petite-caps', 'unicase', 'titling-case' + ], + 'font-variant-east-asian': [ + 'normal', 'ruby', 'jis78', 'jis83', 'jis90', 'jis04', 'simplified', + 'traditional' + ], + 'font-variant-ligatures': [ + 'normal', 'none', 'common-ligatures', 'no-common-ligatures', + 'discretionary-ligatures', 'no-discretionary-ligatures', + 'historical-ligatures', 'no-historical-ligatures', 'contextual', + 'no-contextual' + ], + 'font-variant-numeric': [ + 'normal', 'ordinal', 'slashed-zero', 'lining-nums', 'oldstyle-nums', + 'proportional-nums', 'tabular-nums', 'diagonal-fractions', + 'stacked-fractions' + ], + 'font-variant-position': ['normal', 'sub', 'super'], + 'font-weight': ['<absolute_weight>', '<relative_weight>'], + 'grid': [], + 'grid-area': [], + 'grid-auto-columns': ['auto', '<percentage>', '<length>'], + 'grid-auto-flow': ['row', 'column', 'dense'], + 'grid-auto-rows': ['auto', '<percentage>', '<length>'], + 'grid-column-gap': ['<length>', '<percentage>'], + 'grid-gap': ['<length>', '<percentage>'], + 'grid-row-gap': ['<length>', '<percentage>'], + 'grid-template-areas': [], + 'grid-template-columns': ['auto', '<grid>', '<percentage>', '<length>'], + 'grid-template-rows': ['auto', '<grid>', '<percentage>', '<length>'], + 'grid-column': ['<number>'], + 'grid-column-end': ['<number>'], + 'grid-column-start': ['<number>'], + 'grid-row': ['<number>'], + 'grid-row-end': ['<number>'], + 'grid-row-start': ['<number>'], + 'height': ['<length>', '<percentage>', 'auto', 'fit-content'], + 'hyphens': ['none', 'manual', 'auto'], + 'image-rendering': [ + 'auto', 'optimizeSpeed', 'optimizeQuality', 'pixelated' + ], + 'ime-mode': ['auto', 'normal', 'active', 'inactive', 'disabled'], + 'isolation': ['auto', 'isolation'], + 'justify-content | justify-items | justify-self': [ + 'start', 'end', 'flex-start', 'flex-end', 'center', 'left', 'right', + 'safe start', 'safe end', 'safe flex-start', 'safe flex-end', + 'safe center', 'safe left', 'safe right', 'unsafe start', + 'unsafe end', 'unsafe flex-start', 'unsafe flex-end', 'unsafe center', + 'unsafe left', 'unsafe right', 'normal', 'baseline', 'first baseline', + 'last baseline', 'space-between', 'space-around', 'space-evenly', + 'stretch', 'legacy', 'lecacy center', 'legacy left', 'legacy right' + ], + 'kerning': ['auto'], + 'left': ['<length>', '<percentage>', 'auto'], + 'letter-spacing': ['normal', '<length>'], + 'lighting-color': ['<color>'], + 'line-height': ['normal', '<number>', '<length>', '<percentage>'], + 'list-style': ['<list_style_type>', 'inside', 'outside', '<uri>'], + 'list-style-image': ['<uri>', 'none'], + 'list-style-position': ['inside', 'outside'], + 'list-style-type': ['<list_style_type>'], + 'margin': ['auto', '<margin-width>'], + 'margin-top | margin-right | margin-bottom | margin-left': [ + 'auto', '<margin-width>' + ], + 'marker-end | marker-start | marker-mid': ['<uri>', 'none'], + 'marks': ['crop', 'cross', 'none'], + 'mask': ['<uri>', 'none'], + 'mask-type': ['luminance', 'alpha'], + 'max-height': ['<length>', '<percentage>', 'fit-content', 'none'], + 'max-width': ['<length>', '<percentage>', 'fit-content', 'none'], + 'min-height': ['<length>', '<percentage>', 'fit-content'], + 'min-width': ['<length>', '<percentage>', 'fit-content'], + 'mix-blend-mode': ['<blend_mode>'], + 'object-fit': ['fill', 'contain', 'cover', 'none', 'scale-down'], + 'object-position': ['<position>'], + 'opacity': ['<number>'], + 'order': ['<integer>'], + 'orphans': ['<integer>'], + 'outline': [ + '<color>', '<border_style>', '<border_width>', '<length>' + ], + 'outline-color': ['<color>', 'invert'], + 'outline-offset': ['<length>'], + 'outline-style': ['<border_style>'], + 'outline-width': ['<border_width>', '<length>'], + 'overflow | overflow-x | overflow-y': [ + 'visible', 'hidden', 'scroll', 'auto' + ], + 'overflow-wrap': ['normal', 'break-word'], + 'padding': ['auto', '<padding-width>'], + 'padding-top | padding-right | padding-bottom | padding-left': [ + 'auto', '<padding-width>' + ], + 'page-break-after': ['auto', 'always', 'avoid', 'left', 'right'], + 'page-break-before': ['auto', 'always', 'avoid', 'left', 'right'], + 'page-break-inside': ['avoid', 'auto'], + 'paint-order': ['normal', 'fill', 'stroke', 'markers'], + 'perspective': ['none'], + 'perspective-origin': ['<position>'], + 'pointer-events': [ + 'auto', 'none', 'all', 'visiblePainted', 'visibleFill', + 'visibleStroke', 'visible', 'painted', 'fill', 'stroke' + ], + 'position': ['static', 'relative', 'absolute', 'fixed', 'sticky'], + 'quotes': ['none', '<string>'], + 'resize': ['none', 'both', 'horizontal', 'vertical'], + 'right': ['<length>', '<percentage>', 'auto'], + 'scroll-behavior': ['auto', 'smooth'], + 'shape-image-threshold': ['<number>'], + 'shape-margin': ['<length>', '<percentage>'], + 'shape-outside': [ + 'none', 'margin-box', 'content-box', 'border-box', 'padding-box', + '<basic_shape>', '<uri>' + ], + 'shape-rendering': [ + 'auto', 'optimizeSpeed', 'crispEdges', 'geometricPrecision' + ], + 'size': [ + 'a3', 'a4', 'a5', 'b4', 'b5', 'jis-b4', 'jis-b5', 'landscape', + 'ledger', 'legal', 'letter', 'portrait' + ], + 'stop-color': ['<color>'], + 'stroke': ['<color>'], + 'stroke-dasharray': ['none'], + 'stroke-linecap': ['butt', 'round', 'square'], + 'stroke-linejoin': ['round', 'miter', 'bevel'], + 'system': ['<counter_symbols>'], + 'table-layout': ['auto', 'fixed'], + 'text-align': ['left', 'right', 'center', 'justify', 'justify-all'], + 'text-align-last': ['start', 'end', 'left', 'right', 'center', 'justify'], + 'text-anchor': ['start', 'middle', 'end'], + 'text-decoration': [ + 'none', 'underline', 'overline', 'line-through', 'blink' + ], + 'text-decoration-color': ['<color>'], + 'text-decoration-line': ['none', 'underline', 'overline', 'line-through'], + 'text-decoration-style': ['solid', 'double', 'dotted', 'dashed', 'wavy'], + 'text-indent': ['<length>', '<percentage>'], + 'text-orientation': ['mixed', 'upright', 'sideways', 'use-glyph-orientation'], + 'text-overflow': ['clip', 'ellipsis'], + 'text-rendering': [ + 'auto', 'optimizeSpeed', 'optimizeLegibility', 'geometricPrecision' + ], + 'text-shadow': ['none', '<color>'], + 'text-transform': ['capitalize', 'uppercase', 'lowercase', 'none'], + 'text-underline-position': ['auto', 'under', 'left', 'right'], + 'top': ['<length>', '<percentage>', 'auto'], + 'transform': [ + 'none', + ['matrix()', 'matrix(${1:1}, ${2:1}, ${3:1}, ${4:1}, ${5:2}, ${6:2})'], + [ + 'matrix3d()', + 'matrix3d(' + '${1:1}, ${2:1}, ${3:0}, ${4:0}, ' + '${5:1}, ${6:1}, ${7:0}, ${8:0}, ' + '${9:0}, ${10:0}, ${11:1}, ${12:0}, ' + '${13:2}, ${14:2}, ${15:0}, ${16:1}' + ')' + ], + ['perspective()', 'perspective(${1:0})'], + ['rotate()', 'rotate(${1:45deg})'], + ['rotate3d()', 'rotate3d(${1:0}, ${2:0}, ${3:1}, ${4:45deg})'], + ['rotateX()', 'rotateX(${1:45deg})'], + ['rotateY()', 'rotateY(${1:45deg})'], + ['rotateZ()', 'rotateZ(${1:45deg})'], + ['scale()', 'scale(${1:1.0})'], + ['scale3d()', 'scale3d(${1:1.0}, ${2:1.0}, ${3:1.0})'], + ['scaleX()', 'scaleX(${1:1.0})'], + ['scaleY()', 'scaleY(${1:1.0})'], + ['scaleZ()', 'scaleZ(${1:1.0})'], + ['skew()', 'skew(${1:10deg})'], + ['skewX()', 'skewX(${1:10deg})'], + ['skewY()', 'skewY(${1:10deg})'], + ['translate()', 'translate(${1:10px})'], + ['translate3d()', 'translate3d(${1:10px}, ${2:0px}, ${3:0px})'], + ['translateX()', 'translateX(${1:10px})'], + ['translateY()', 'translateY(${1:10px})'], + ['translateZ()', 'translateZ(${1:10px})'] + ], + 'transform-origin': ['<position>'], + 'transform-style': ['preserve-3d', 'flat'], + 'transition': [], + 'transition-delay': ['<time>'], + 'transition-duration': ['<time>'], + 'transition-property': ['none', '<custom-ident>'], + 'transition-timing-function': ['<timing_function>'], + 'unicode-bidi': ['normal', 'embed', 'bidi-override'], + 'unicode-range': [], + 'user-select': ['auto', 'text', 'none', 'contain'], + 'vertical-align': [ + 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', + 'top', 'bottom', '<percentage>', '<length>' + ], + 'visibility': ['visible', 'hidden', 'collapse'], + 'white-space': ['normal', 'pre', 'nowrap', 'pre-wrap', 'pre-line'], + 'widows': ['<integer>'], + 'width': ['<length>', '<percentage>', 'auto', 'fit-content'], + 'will-change': ['auto', 'contents', 'scroll-position', '<custom-ident>'], + 'word-break': ['normal', 'break-all', 'keep-all'], + 'word-spacing': ['normal', '<length>'], + 'word-wrap': ['normal', 'break-word'], + 'writing-mode': [ + 'horizontal-tb', 'vertical-rl', 'vertical-lr', 'sideways-rl', + 'sideways-lr' + ], + 'z-index': ['auto', '<integer>'], + } + + props = {} + + for names, values in properties_dict.items(): + # Values that are allowed for all properties + allowed_values = ['all', 'inherit', 'initial', 'unset', ['var()', 'var($1)']] + + # Determine which values are available for the current property name + for value in values: + if value[0] == '<' and value[-1] == '>': + key = value[1:-1] + if key in common_values: + allowed_values += common_values[key] + else: + allowed_values.append(value) + + for name in names.split(' | '): + props[name] = allowed_values + + return props + + +def match_selector(view, pt, scope): + # This will catch scenarios like: + # - .foo {font-style: |} + # - <style type="text/css">.foo { font-weight: b|</style> + return any(view.match_selector(p, scope) for p in (pt, pt - 1)) + + +def next_none_whitespace(view, pt): + for pt in range(pt, view.size()): + ch = view.substr(pt) + if ch not in ' \t': + return ch + + +class CSSCompletions(sublime_plugin.EventListener): + @cached_property + def props(self): + return get_properties() + + @cached_property + def re_name(self): + return re.compile(r"([a-zA-Z-]+)\s*:[^:;{}]*$") + + @cached_property + def re_value(self): + return re.compile(r"^(?:\s*(:)|([ \t]*))([^:]*)([;}])") + + @timing + def on_query_completions(self, view, prefix, locations): + + settings = sublime.load_settings('CSS.sublime-settings') + if settings.get('disable_default_completions'): + return None + + selector = settings.get('default_completions_selector', '') + if isinstance(selector, list): + selector = ''.join(selector) + + pt = locations[0] + if not match_selector(view, pt, selector): + return None + + if match_selector(view, pt, "meta.property-value.css meta.function-call"): + items = self.complete_function_argument(view, prefix, pt) + elif match_selector(view, pt, "meta.property-value.css"): + items = self.complete_property_value(view, prefix, pt) + elif match_selector(view, pt, "meta.property-list.css, meta.property-name.css"): + items = self.complete_property_name(view, prefix, pt) + else: + # TODO: provide selectors, at-rules + items = None + + if items: + return sublime.CompletionList(items, sublime.INHIBIT_WORD_COMPLETIONS) + return None + + def complete_property_name(self, view, prefix, pt): + if match_selector(view, pt, "meta.group"): + # don't append semicolon in groups e.g.: `@media screen (prop: |)` + suffix = ": $0" + else: + suffix = ": $0;" + text = view.substr(sublime.Region(pt, view.line(pt).end())) + matches = self.re_value.search(text) + if matches: + colon, space, value, term = matches.groups() + if colon: + # don't append anything if the next character is a colon + suffix = "" + elif value: + # only append colon if value already exists + suffix = ":" if space else ": " + elif term == ";": + # ommit semicolon if rule is already terminated + suffix = ": $0" + + return ( + sublime.CompletionItem( + trigger=prop, + completion=prop + suffix, + completion_format=sublime.COMPLETION_FORMAT_SNIPPET, + kind=KIND_CSS_PROPERTY + ) for prop in self.props + ) + + def complete_property_value(self, view, prefix, pt): + completions = [] + text = view.substr(sublime.Region(view.line(pt).begin(), pt - len(prefix))) + matches = self.re_name.search(text) + if matches: + prop = matches.group(1) + values = self.props.get(prop) + if values: + details = f"<code>{prop}</code> property-value" + + if match_selector(view, pt, "meta.group"): + # don't append semicolon in groups e.g.: `@media screen (prop: val)` + suffix = "" + elif next_none_whitespace(view, pt) == ";": + suffix = "" + else: + suffix = "$0;" + + for value in values: + if isinstance(value, list): + desc, snippet = value + kind = KIND_CSS_FUNCTION + else: + desc = value + snippet = value + kind = KIND_CSS_CONSTANT + + completions.append(sublime.CompletionItem( + trigger=desc, + completion=snippet + suffix, + completion_format=sublime.COMPLETION_FORMAT_SNIPPET, + kind=kind, + details=details + )) + + return completions + + def complete_function_argument(self, view, prefix, pt): + return None diff --git a/syntaxes/CSS/syntax_test_css.css b/syntaxes/CSS/syntax_test_css.css @@ -0,0 +1,3182 @@ +/* SYNTAX TEST "Packages/CSS/CSS.sublime-syntax" */ + + /**/ +/*^ - comment - punctuation */ +/* ^^ comment.block.css punctuation.definition.comment.begin.css */ +/* ^^ comment.block.css punctuation.definition.comment.end.css */ +/* ^ - comment - punctuation */ + /************/ +/*^ - comment - punctuation */ +/* ^^^^^^^^^^^^ comment.block.css punctuation.definition.comment.begin.css */ +/* ^^ comment.block.css punctuation.definition.comment.end.css */ +/* ^ - comment - punctuation */ + + /* What am I, a comment? */ +/*^ - comment - punctuation */ +/* ^^ punctuation.definition.comment.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.css */ +/* ^^ punctuation.definition.comment.end.css */ +/* ^ - comment - punctuation */ + + /** What am I, a comment? **/ +/*^ - comment - punctuation */ +/* ^^^ punctuation.definition.comment.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.block.css */ +/* ^^^ punctuation.definition.comment.end.css */ +/* ^ - comment - punctuation */ + + /** + * +/* ^ comment.block.css punctuation.definition.comment.css */ + +.test-strings { + content: "double"; +/* ^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.definition.string.end.css */ + content: 'single'; +/* ^^^^^^^^ meta.string.css string.quoted.single.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.definition.string.end.css */ + + content: 'invalid; +/* ^ invalid.illegal.newline.css */ +} + +.test-punctuation { +/* ^ punctuation.section.block.begin.css */ + top: 1px; +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.terminator.rule.css */ + + top: cubic-bezier(0.2, 0, 0.13, 2); +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^ punctuation.separator.sequence.css*/ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css*/ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ + + top: url("image"); +/* ^ punctuation.section.group.begin.css */ +/* ^ punctuation.section.group.end.css */ +} +/* < punctuation.section.property-list.css */ + + . () +/* ^ meta.selector.css entity.other.attribute-name.class.css punctuation.definition.entity.css */ +/* ^^^ - meta.selector.css */ +/* ^^ invalid.illegal.unexpected-token.css */ + + . {} +/*^^ - meta.selector.css */ +/* ^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.class.css punctuation.definition.entity.css */ + + .classname {} +/*^^ - meta.selector.css */ +/* ^^^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.class.css punctuation.definition.entity.css */ +/* ^^^^^^^^^ entity.other.attribute-name.class.css - punctuation */ + + *.* {} +/* ^^^ meta.selector.css */ +/* ^ variable.language.wildcard.asterisk.css - punctuation */ +/* ^ entity.other.attribute-name.class.css punctuation.definition.entity.css */ +/* ^ variable.language.wildcard.asterisk.css - punctuation */ + + # {} +/*^^ - meta.selector.css */ +/* ^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ + + #* {} +/*^^ - meta.selector.css */ +/* ^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^ variable.language.wildcard.asterisk.css - punctuation */ + + #01 {} +/*^^ - meta.selector.css */ +/* ^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^^ - entity - punctuation */ + + #_1 {} +/*^^ - meta.selector.css */ +/* ^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^^ entity.other.attribute-name.id.css - punctuation */ + + #ℜ- {} +/*^^ - meta.selector.css */ +/* ^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^^ entity.other.attribute-name.id.css - punctuation */ + + #\211C \7B- {} +/*^^ - meta.selector.css */ +/* ^^^^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^^^^^^^^^^ entity.other.attribute-name.id.css - punctuation */ + + #id {} +/*^^ - meta.selector.css */ +/* ^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^ entity.other.attribute-name.id.css punctuation.definition.entity.css */ +/* ^^ entity.other.attribute-name.id.css - punctuation */ + + html, h1 {} +/*^^ - meta.selector.css */ +/* ^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^^^^ entity.name.tag.html.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ entity.name.tag.html.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @123 +/* ^^^^^ - meta.at-rule - constant - keyword - punctuation */ + + /* at-rule with unicode keyword */ + @ℜ- ; +/* ^^^^ meta.at-rule.other.css */ +/* ^ - meta.at-rule */ +/* ^^^ - keyword - punctuation */ +/* ^ punctuation.terminator.rule.css */ + + /* at-rule with escaped unicode keyword */ + @\211C \7B- ; +/* ^^^^^^^^^^^^ meta.at-rule.other.css */ +/* ^ - meta.at-rule */ +/* ^^^^^^^^^^^ - keyword - punctuation */ +/* ^ punctuation.terminator.rule.css */ + @font-ℜ- ; +/* ^^^^^^^^^ meta.at-rule.other.css */ +/* ^ - meta.at-rule */ +/* ^^^^^^^^ - keyword - punctuation */ +/* ^ punctuation.terminator.rule.css */ + + /* css draft with basic highlighting */ + @font-feature-values ; +/* ^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.other.css */ +/* ^ - meta.at-rule */ +/* ^^^^^^^^^^^^^^^^^^^^ - keyword - punctuation */ +/* ^ punctuation.terminator.rule.css */ + + /* incomplete @charset */ + @char ; +/* ^^^^^^ meta.at-rule.other.css */ +/* ^ - meta.at-rule */ +/* ^^^^^ - keyword - punctuation */ +/* ^ punctuation.terminator.rule.css */ + + @charset "UTF-8"; +/* ^^^^^^^^^^^^^^^^ meta.at-rule.charset.css */ +/* ^ - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + @import "x" print; +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.import.css */ +/* ^ - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^ support.constant.media.css */ +/* ^ punctuation.terminator.rule.css */ + + @import url( 'landscape.css' ) screen and (orientation:landscape); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.import.css */ +/* ^ - meta.at-rule */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.group.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^^^^ string.quoted.single.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + @namespace svg "http://www.w3.org/1999/xhtml"; +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */ +/* ^ - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ entity.other.namespace-prefix.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + @namespace /**/ svg /**/ "http://www.w3.org/1999/xhtml" /**/; +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */ +/* ^ - meta.at-rule */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css */ +/* ^^^^ comment.block.css */ +/* ^^^ entity.other.namespace-prefix.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^^^^ comment.block.css */ +/* ^ punctuation.terminator.rule.css */ + + @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.namespace.css */ +/* ^^ - meta.at-rule - comment */ +/* ^^^^^^^^^^^^^^^^^^^^^^ comment.block.css - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ meta.function-call.identifier.css - meta.function-call meta.function-call - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.section.group.end.css */ + @page {} +/* ^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page:first {} +/* ^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^ entity.other.pseudo-class.css punctuation.definition.entity.css */ +/* ^^^^^ entity.other.pseudo-class.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page :left {} +/* ^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^ entity.other.pseudo-class.css punctuation.definition.entity.css */ +/* ^^^^ entity.other.pseudo-class.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page :left- {} +/* ^^^^^^^^^^^^^^^ meta.at-rule.page.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^ - entity.other */ + + @page LandscapeTable {} +/* ^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^^^^^^^^^ entity.other.page-name.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page CompanyLetterHead:first {} /* identifier and pseudo page. */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^^^^^^^^^^^^ entity.other.page-name.css */ +/* ^ entity.other.pseudo-class.css punctuation.definition.entity.css */ +/* ^^^^^ entity.other.pseudo-class.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page toc, index {} +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ entity.other.page-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ entity.other.page-name.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page :blank:first {} +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css - meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^ keyword.control.directive.css - punctuation */ +/* ^ entity.other.pseudo-class.css punctuation.definition.entity.css */ +/* ^^^^^ entity.other.pseudo-class.css - punctuation */ +/* ^ entity.other.pseudo-class.css punctuation.definition.entity.css */ +/* ^^^^^ entity.other.pseudo-class.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @page { + margin: 10%; +/* ^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ meta.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + size: 8.5in 11in; +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^ meta.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + size: A4; +/* ^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + size: B5; +/* ^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + size: landscape; +/* ^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + size: ledger; +/* ^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + size: portrait; +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + @top-left-corner { margin: 5pt; } +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css meta.at-rule.margin.css */ +/* ^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css meta.at-rule.margin.css meta.property-list.css meta.block.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^^ meta.property-name.css support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ meta.property-value.css meta.number.integer.decimal.css */ +/* ^ punctuation.terminator.rule.css */ +/* ^ punctuation.section.block.end.css */ + + @top-left { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^ keyword.control.directive.css - punctuation */ + + @top-center { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @top-right { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @top-right-corner { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @bottom-left-corner { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @bottom-left { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @bottom-center { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @bottom-right { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @bottom-right-corner { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @left-top { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^ keyword.control.directive.css - punctuation */ + + @left-middle { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @left-bottom { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @right-top { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @right-middle { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @right-bottom { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @left-margin-left: ; +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css meta.at-rule.other.css */ +/* ^ meta.at-rule.page.css meta.property-list.css meta.block.css - meta.at-rule.other */ +/* ^^^^^^^^^^^^^^^^^^ - keyword */ +/* ^ punctuation.terminator.rule.css */ + @invalid {} +/* ^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css - meta.block meta.block */ +/* ^^ meta.at-rule.page.css meta.property-list.css meta.block.css meta.at-rule.other.css meta.block.css */ +/* ^ meta.at-rule.page.css meta.property-list.css meta.block.css - meta.at-rule.other - meta.block meta.block */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + { margin: 5pt; } +/* ^ meta.at-rule.page.css meta.property-list.css meta.block.css - meta.block meta.block */ +/* ^^^^^^^^^^^^^^^^ meta.at-rule.page.css meta.property-list.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.page.css meta.property-list.css meta.block.css - meta.block meta.block */ + } +/* ^ meta.at-rule.page.css meta.property-list.css meta.block.css punctuation.section.block.end.css*/ + + @right-bottom { margin: 5pt; } +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ + + @media onlyℜ screenℜ screen\211C {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.block */ +/* ^^ meta.at-rule.media.css meta.block.css - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ - keyword - support */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @media only screen {} +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.block */ +/* ^^ meta.at-rule.media.css meta.block.css - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ keyword.operator.logic.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @media (hover: hover) {} +/* ^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css - meta.group meta.group */ +/* ^ meta.at-rule.media.css - meta.block - meta.group */ +/* ^^ meta.at-rule.media.css meta.block.css - meta.group - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ + + @media (min-width: 700px, (max-width < 100 {} +/* ^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css - meta.group meta.group */ +/* ^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css - meta.group meta.group */ +/* ^^ meta.at-rule.media.css meta.block.css - meta.group - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^ keyword.operator.comparison.css */ +/* ^^^ constant.numeric.value.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @media (min-width: 700px) {} +/* ^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^ meta.at-rule.media.css - meta.block - meta.group */ +/* ^^ meta.at-rule.media.css meta.block.css - meta.group - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @media (min-width: 700px) and (max-width: 2000px) {} +/* ^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^ meta.at-rule.media.css - meta.group - meta.block*/ +/* ^^ meta.at-rule.media.css meta.block.css - meta.group */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^ keyword.operator.logic */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ + + @media only screen and (-webkit-min-device-pixel-ratio: /* comment */ 1.3), +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^^ meta.at-rule.media.css - meta.group */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ keyword.operator.logic.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^ support.type.vendor-prefix.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^^^^ comment.block.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.separator.sequence.css */ + only screen and (-o-min-device-pixel-ratio: 13/10), +/* ^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^^ meta.at-rule.media.css - meta.group */ +/* ^^^^ keyword.operator.logic.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.type.vendor-prefix.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ meta.number.rational.css constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.separator.sequence.css */ + only screen and (min-resolution: 120dpi) +/* ^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css */ +/* ^ meta.at-rule.media.css - meta.group */ +/* ^^^^ keyword.operator.logic.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ + {} +/* ^ meta.at-rule.media.css meta.block.css punctuation.section.block.begin.css */ +/* ^ meta.at-rule.media.css meta.block.css punctuation.section.block.end.css */ +/* ^ - meta.at-rule - meta.block */ + + @media only screen and (width <= 100px or (height > 20px)); +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.group */ +/* ^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css - meta.group meta.group */ +/* ^^^^^^^^^^^^^^^ meta.at-rule.media.css meta.group.css meta.group.css */ +/* ^ meta.at-rule.media.css meta.group.css - meta.group meta.group */ +/* ^ - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ keyword.operator.logic.css */ +/* ^^^^^^ support.constant.media.css */ +/* ^^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^^ keyword.operator.comparison.css */ +/* ^^^^^ meta.number.integer.decimal.css */ +/* ^^ keyword.operator.logic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ keyword.operator.comparison.css */ +/* ^^^^ meta.number.integer.decimal.css */ +/* ^^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + @custom-media --a-b (width: 1px); +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css - meta.group */ +/* ^^^^^^^^^^^^ meta.at-rule.custom-media.css meta.group.css */ +/* ^ - meta.at-rule */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^ entity.other.custom-media.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.terminator.rule.css */ + + @custom-media /**/ --a-b /**/ ( /**/ width: 1px); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.custom-media.css */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^ keyword.control.directive.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^ entity.other.custom-media.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + @keyframes beat, "bounce", none {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.keyframe.css - meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ entity.other.animation-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ invalid.illegal.identifier.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @keyframes- beat, bounce {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.other.css */ +/* ^^^^^^^^^^^ - keyword - punctuation */ + +@keyframes test-keyframes-keywords { + from, to {} +/* ^^^^^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^^^^ keyword.other.selector.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ keyword.other.selector.css */ + + 0%, 100% {} +/* ^^^^^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + .99%, 100.99% {} +/* ^^^^^^^^^^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + 0%, to {} +/* ^^^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ keyword.other.selector.css */ + + %, to {} +/* ^^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ keyword.other.selector.css */ + + , to {} +/* ^^^^ meta.at-rule.keyframe.css meta.block.css meta.selector.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.keyframe.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.keyframe.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ keyword.other.selector.css */ + + @media ; +/* ^^^^^^^^ - keyword - punctuation */ + + body {} +/* ^^^^^^^^ - entity - support */ +} + + @document url(http://) { } +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* ^^^ meta.at-rule.document.css meta.block.css - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^ meta.path.url.css meta.string.css string.unquoted.css */ +/* ^^^ punctuation.separator.path.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + +@document url(http://www), +/*^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* <- keyword.control.directive.css punctuation.definition.keyword.css */ +/*^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^ meta.path.url.css meta.string.css string.unquoted.css */ +/* ^^^ punctuation.separator.path.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.separator.sequence.css */ + url-prefix("http://www"), +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* ^^^^^^^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +/* ^ - meta.string - meta.path */ +/* ^ meta.string.css - meta.path */ +/* ^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^ meta.string.css - meta.path */ +/* ^ - meta.string - meta.path */ +/* ^^^^^^^^^^ support.function.url-prefix.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ string.quoted.double.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^^^ punctuation.separator.path.css */ +/* ^ punctuation.definition.string.end.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.separator.sequence.css */ + domain(mozilla.org), +/* ^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* ^^^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +/* ^ - meta.string - meta.path */ +/* ^^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^ - meta.string - meta.path */ +/* ^^^^^^ support.function.domain.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^ string.unquoted.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.separator.sequence.css */ + regexp("https:.*") +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.document.css - meta.block */ +/* ^^^^^^ support.function.regexp.css */ +/* ^^^^^^^^^^ meta.string.css string.quoted.double.css */ +{ +/* <- meta.at-rule.document.css meta.block.css punctuation.section.block.begin.css */ + .class { +/* ^^^^^^ meta.at-rule.document.css meta.block.css meta.selector.css - meta.property-list - meta.block meta.block */ +/* ^ meta.at-rule.document.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.document.css meta.block.css meta.property-list.css meta.block.css */ +/* ^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.section.block.begin.css */ + display: none; +/* ^^^^^^^ meta.at-rule.document.css meta.property-name.css */ + } +/* ^^ meta.at-rule.document.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.document.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^ punctuation.section.block.end.css */ +} +/* <- meta.at-rule.document.css meta.block.css punctuation.section.block.end.css */ + + @font-face { +/* ^^^^^^^^^^^ meta.at-rule.font-face.css - meta.block */ +/* ^ meta.at-rule.font-face.css meta.property-list.css meta.block.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ + + src: local(Font), + /* */ +/* ^^^^^ comment.block.css */ +} + + @font-face +/* ^^^^^^^^^^^ meta.at-rule.font-face.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^ keyword.control.directive.css - punctuation */ +{ +/* <- meta.at-rule.font-face.css meta.property-list.css meta.block.css punctuation.section.block.begin.css */ + + font-family: monospace, +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.font-face.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^^^^ support.type.property-name.css */ +/* ^^^^^^^^^ support.constant.property-value.css */ + /* */ ; +/* ^^^^^^^^^^^ meta.at-rule.font-face.css meta.property-list.css meta.block.css meta.property-value.css */ +/* ^ meta.at-rule.font-face.css meta.property-list.css meta.block.css punctuation.terminator.rule.css */ +/* ^^^^^ comment.block.css */ + + font-family: m700, aria; +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^^^^ meta.string.css string.unquoted.css */ + + font-family: Gentium Bold; +/* ^^^^^^^^^^^^ meta.string.css string.unquoted.css */ + + src: format("embedded-opentype"); +/* ^^^^^^ support.function.font-face.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.definition.string.end.css */ + + src: local(monospace); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ + + src: local(Gentium/Bold); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^ meta.string.css string.unquoted.css */ +/* ^ - string */ +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.section.group.end.css */ + + src: local(Gentium Bold); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.section.group.end.css */ + + src: local(Gentium-Bold); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.section.group.end.css */ + + src: local('Gentium-Bold'); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^^^^^^^^^^^^^^ meta.string.css string.quoted.single.css */ +/* ^ punctuation.definition.string.end.css */ + + src: local("Gentium-Bold"); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^^^^^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.definition.string.end.css */ + + src: local(var(--local-font)); +/* ^^^^^ support.function.font-face.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ variable.other.custom-property.css */ +/* ^^ punctuation.section.group.end.css */ +} +/* <- meta.at-rule.font-face.css meta.property-list.css meta.block.css punctuation.section.block.end.css */ + + @supports not ( and ( top: 2px ) ) { } +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css - meta.block */ +/* ^^^ meta.at-rule.supports.css meta.block.css - meta.property-list */ +/* ^ - meta.at-rule - meta.block */ +/* ^^^^^ - meta.group */ +/* ^^^^^^ meta.group.css - meta.group meta.group */ +/* ^^^^^^^^^^^^ meta.group.css meta.group.css */ +/* ^^ meta.group.css - meta.group meta.group */ +/* ^ - meta.group */ +/* ^ punctuation.definition.keyword.css */ +/* ^^^^^^^^ keyword.control.directive.css */ +/* ^^^ keyword.operator.logical.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ keyword.operator.logical.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css*/ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + +@supports (--foo: green) +/* <- meta.at-rule.supports.css keyword.control.directive.css punctuation.definition.keyword.css */ +/*^^^^^^^^ meta.at-rule.supports.css - meta.group */ +/* ^^^^^^^^^^^^^^ meta.at-rule.supports.css meta.group.css */ +/* ^ meta.at-rule.supports.css - meta.group */ +/*^^^^^^^ keyword.control.directive.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^ entity.other.custom-property.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.color.w3c.standard.css */ +/* ^ punctuation.section.group.end.css */ +{ +/* <- meta.at-rule.supports.css meta.block.css punctuation.section.block.begin.css */ + .class { +/* ^^^^^^ meta.at-rule.supports.css meta.block.css meta.selector.css - meta.property-list - meta.block meta.block */ +/* ^ meta.at-rule.supports.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^^ meta.at-rule.supports.css meta.block.css meta.property-list.css meta.block.css */ +/* ^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.section.block.begin.css */ + display: none; +/* ^^^^^^^ meta.at-rule.supports.css meta.property-name.css */ + } +/* ^^ meta.at-rule.supports.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.supports.css meta.block.css - meta.selector - meta.property-list - meta.block meta.block */ +/* ^ punctuation.section.block.end.css */ +} +/* <- meta.at-rule.supports.css meta.block.css punctuation.section.block.end.css */ + + @supports (display: grid) {span { display: grid; }} +/* ^^^^^^^^^^ meta.at-rule.supports.css - meta.block - meta.group */ +/* ^^^^^^^^^^^^^^^ meta.at-rule.supports.css meta.group.css - meta.block */ +/* ^ meta.at-rule.supports.css - meta.block - meta.group */ +/* ^ meta.at-rule.supports.css meta.block.css - meta.property-list - meta.selector - meta.block meta.block */ +/* ^^^^ meta.at-rule.supports.css meta.block.css meta.selector.css - meta.property-list - meta.block meta.block */ +/* ^ meta.at-rule.supports.css meta.block.css - meta.property-list - meta.selector - meta.block meta.block */ +/* ^^^^^^^^^^^^^^^^^^ meta.at-rule.supports.css meta.block.css meta.property-list.css meta.block.css */ +/* ^ meta.at-rule.supports.css meta.block.css - meta.property-list - meta.block meta.block */ +/* ^ - meta.at-rule - meta.block */ + + @counter-style {} +/* ^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css - meta.block */ +/* ^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @counter-style none {} +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css - meta.block */ +/* ^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ invalid.illegal.identifier.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @counter-style decimal {} +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css - meta.block */ +/* ^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^^^^ invalid.illegal.identifier.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @counter-style disc {} +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css - meta.block */ +/* ^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.at-rule - meta.block */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ invalid.illegal.identifier.css */ +/* ^ punctuation.section.block.begin.css */ +/* ^ punctuation.section.block.end.css */ + + @counter-style name { +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css - meta.block */ +/* ^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ keyword.control.directive.css punctuation.definition.keyword.css */ +/* ^^^^^^^^^^^^^ keyword.control.directive.css - punctuation */ +/* ^^^^ entity.other.counter-style-name.css */ + + system: extends disc; +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ keyword.declaration.extends.css */ +/* ^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + system: extends name; +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ keyword.declaration.extends.css */ +/* ^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + system: cyclic; +/* ^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^ support.constant.symbol-type.css */ +/* ^ punctuation.terminator.rule.css */ + + system: fixed 4; +/* ^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.symbol-type.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.terminator.rule.css */ + + fallback: decimal; +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + fallback: counter-style-name; +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^^^^^^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + fallback: var(--name); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + negative: "(" ")"; +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ - meta.string - string */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + pad: 5 "0"; +/* ^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ constant.numeric.value.css */ +/* ^^^ meta.string.css string.quoted.double.css*/ +/* ^ punctuation.terminator.rule.css */ + + range: 2 4; +/* ^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ constant.numeric.value.css */ +/* ^ - constant */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.terminator.rule.css */ + + prefix: " /"; +/* ^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + suffix: "/ "; +/* ^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + symbols: "‣"; +/* ^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + symbols: ◆ ◇; +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.terminator.rule.css */ + + symbols: url(white.svg) url(black.svg); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ support.function.url.css */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.terminator.rule.css */ + + speak-as: "bullets"; +/* ^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.terminator.rule.css */ + + speak-as: numbers; +/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + speak-as: name; +/* ^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + speak-as: var(--name); +/* ^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.counter-style.css meta.property-list.css meta.block.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ meta.property-name.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^ meta.property-value.css */ +/* ^ - meta.property-name - meta.property-value */ +/* ^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ +} +/* <- meta.at-rule.counter-style.css meta.property-list.css meta.block.css punctuation.section.block.end.css */ + +.test-var-functions { + --test-var: arial; +/* ^^^^^^^^^^ entity.other.custom-property.css */ +/* ^ punctuation.separator.key-value.css*/ + + font-family: var(--test-var, sans-serif); +/* ^^^ 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.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ + + font-family: var(--test-var, sans serif); +/* ^^^ 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.separator.sequence.css */ +/* ^^^^^^^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.section.group.end.css */ + + font-size: var(--test-var, 10pt); +/* ^^^ 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.separator.sequence.css */ +/* ^^^^ meta.number.integer.decimal.css */ +/* ^ punctuation.section.group.end.css */ + } + +.test-deprecated-var { var-deprecated- } +/* ^^^^^^^^^^^^^^^ invalid.deprecated.custom-property.css */ +/* ^^^^ entity.other.custom-property.prefix.css */ +/* ^^^^^^^^^^^ entity.other.custom-property.name.css */ + +.test-types { + top: 20; +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ + top: +.95e-20; +/* ^ meta.number.float.decimal.css keyword.operator.arithmetic.css */ +/* ^^^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ + top: +1e1e1 .1e1e1; +/* ^ meta.number.float.decimal.css keyword.operator.arithmetic.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ - constant.numeric */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ - constant.numeric */ + top: -1.5e+93%; +/* ^ meta.number.float.decimal.css keyword.operator.arithmetic.css */ +/* ^^^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ +} + +.test-units { + top: 1px; +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + top: 1.1em; +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^^ meta.number.float.decimal.css constant.numeric.suffix.css */ + top: -100%; +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + top: 1.1.1deg; +/* ^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^ punctuation.separator.decimal.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +} + +.test-properties { +/* ^ meta.property-list.css */ + + -webkit-transform: none; +/* ^^^^^^^^^^^^^^^^^ meta.property-name.css */ +/* ^^^^^^^^ support.type.vendor-prefix.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^^ meta.property-value.css support.constant.property-value.css */ +} + +.test-operators { + + margin: -1 -1 +1; + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + + margin: -1px -1px +1px; + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ +} + +.test-operators-in-calc { + + top: calc(1px + 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(+1px+1px); + /* ^ keyword.operator.arithmetic.css */ + /* ^ invalid.illegal.operator.css */ + top: calc(1px+ 1px); + /* ^ invalid.illegal.operator.css */ + top: calc(1px +1px); + /* ^ invalid.illegal.operator.css */ + top: calc((1px) +1px); + /* ^ invalid.illegal.operator.css */ + top: calc((1px)+ 1px); + /* ^ invalid.illegal.operator.css */ + top: calc(+1px+(+1px)+1px); + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ invalid.illegal.operator.css */ + + top: calc(1px - 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(-1px-1px); + /* ^ keyword.operator.arithmetic.css */ + /* ^ invalid.illegal.operator.css */ + top: calc(1px- 1px); + /* ^ invalid.illegal.operator.css */ + top: calc(1px -1px); + /* ^ invalid.illegal.operator.css */ + top: calc((1px) -1px); + /* ^ invalid.illegal.operator.css */ + top: calc((1px)- 1px); + /* ^ invalid.illegal.operator.css */ + top: calc(-1px-(-1px)-1px); + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ keyword.operator.arithmetic.css */ + /* ^ invalid.illegal.operator.css */ + + top: calc(1px * 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px* 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px *1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px*1px); + /* ^ keyword.operator.arithmetic.css */ + + top: calc(1px / 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px/ 1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px /1px); + /* ^ keyword.operator.arithmetic.css */ + top: calc(1px/1px); + /* ^ keyword.operator.arithmetic.css */ +} + +.text-calc-clamp-max-min { + top: clamp(1*5pt, calc(12/5), 100rem); +/* ^^^^^ support.function.calc.css */ +/* ^ constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ constant.numeric.value.css */ +/* ^^ constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ support.function.calc.css */ +/* ^^ constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ constant.numeric.value.css */ +/* ^^^ constant.numeric.suffix.css */ + + top: max(5*6, min(10 + 5, calc(var(--size) / 5))); +/* ^^^ support.function.calc.css */ +/* ^ constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ support.function.calc.css */ +/* ^^ constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ support.function.calc.css */ +/* ^^^ support.function.var.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ constant.numeric.value.css */ +} + + +.test-important { + top: 1px !important; +/* ^^^^^^^^^^ keyword.other.important.css */ + top: 1px!important; +/* ^^^^^^^^^^ keyword.other.important.css */ +} + +.test:has(> .class) {} +/*^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^^^ meta.function-call.identifier.css - meta.function-call meta.function-call - meta.group*/ +/* ^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ keyword.operator.combinator.css */ +/* ^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.section.group.end.css */ + +.test:has(>> .class) {} +/*^^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^^^ meta.function-call.identifier.css - meta.function-call meta.function-call - meta.group*/ +/* ^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ keyword.operator.combinator.css */ +/* ^^^^^^ entity.other.attribute-name.class.css */ +/* ^ punctuation.section.group.end.css */ + +/* Test Functional Pseudo Class Meta Scopes */ +.test:nth-child(even) {} +/*^^^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^^ - meta.selector.css */ +/* ^^^^^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call - meta.group*/ +/* ^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ punctuation.section.group.end.css */ + +/* Test Functional Pseudo Class Meta Scopes */ +.test:nth-child( /**/ odd) +/*^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^^^^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ comment.block.css */ +/* ^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ + , +/* ^^^ meta.selector.css */ +/* ^ punctuation.separator.sequence.css */ +.test:nth-child( /**/ 2) /**/ {} +/*^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^^^ - meta.selector */ +/* ^^^^^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ comment.block.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^^ comment.block.css */ + +.test:nth-child(+2n + 3) {} +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ - constant */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ + +.test:nth-child(-n+ 3) {} +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ + +.test:nth-child(-n +3) {} +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ - constant */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + +.test:nth-child(+3) {} +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + +.test:nth-child(+ 3) {} +/* ^^^ invalid.illegal.numeric.css */ + +.test:nth-child(+ 3n) {} +/* ^^^ invalid.illegal.numeric.css */ + +.test:nth-child(+3 n) {} +/* ^^^^ invalid.illegal.numeric.css */ + +.test-pseudo-classes:nth-child(2):hover {} +/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css */ +/* ^^ - meta.selector.css */ +/* ^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^^ entity.other.pseudo-class.css */ + +.test-pseudo-class-numerics:nth-last-of-type(-n+3) {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^^^^^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + +.test-pseudo-class-keywords:nth-of-type(odd) {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^^^ support.constant.property-value.css */ + +.test-pseudo-class-strings:dir {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^ entity.other.pseudo-class.css - meta.function-call */ + +.test-pseudo-class-strings:dir(ltr) {} +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^ entity.other.pseudo-class.css */ +/* ^^^ support.constant.property-value.css */ + +.test-pseudo-class-lang:lang(en-*K\*, de-DE, *-EN, "de-*EN\*") {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^ entity.other.pseudo-class.css */ +/* ^^^^^^^ meta.string.css string.unquoted.css */ +/* ^^ - meta.string - string */ +/* ^^^^^ meta.string.css string.unquoted.css */ +/* ^^ - meta.string - string */ +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^^ - meta.string - string */ +/* ^^^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^^^^ - meta.string - string */ +/* ^ variable.language.wildcard.asterisk.css */ +/* ^^ constant.character.escape.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ variable.language.wildcard.asterisk.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ - variable.language.wildcard */ +/* ^^ constant.character.escape.css */ + +.test-pseudo-class-tag:not(*) {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^ entity.other.pseudo-class.css */ +/* ^ variable.language.wildcard.asterisk.css */ + +.test-pseudo-class-tag:is(*) {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^ entity.other.pseudo-class.css */ +/* ^ variable.language.wildcard.asterisk.css */ + +.test-pseudo-class-tag:where(*) {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^^ entity.other.pseudo-class.css */ +/* ^ variable.language.wildcard.asterisk.css */ + +.test-pseudo-elements::before {} +/* ^^ punctuation.definition.pseudo-element.css - entity */ +/* ^^^^^^ entity.other.pseudo-element.css */ + +.test-pseudo-elements:after {} +/* ^ punctuation.definition.pseudo-class.css - entity */ +/* ^^^^^ entity.other.pseudo-element.css */ + +.test-pseudo-elements::-webkit-slider-runnable-track +/* ^^ punctuation.definition.pseudo-element.css - entity */ +/* ^^^^^^^^ support.type.vendor-prefix.css */ +/* ^^^^^^^^^^^^^^^^^^^^^ entity.other.pseudo-element.css */ + +.test-pseudo-elements::attr("name") {} +/* ^^ punctuation.definition.pseudo-element.css */ +/* ^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^^ entity.other.pseudo-element.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^ string.quoted.double.css */ +/* ^ punctuation.section.group.end.css */ + +.test-unicode { top: "\2764 \273e"; } +/* ^^^^^ constant.character.escape.css */ +/* ^^^^^ constant.character.escape.css */ + +.test-unicode-range { + unicode-range: U+0025-00FF, U+4??; +/* ^^^^^^^^^^^ meta.number.unicode-range.css */ +/* ^^ constant.numeric.prefix.css */ +/* ^^^^^^^^^ constant.numeric.value.css */ +/* ^ punctuation.separator.range.css */ +/* ^^^^^ meta.number.unicode-range.css */ +/* ^^ constant.numeric.prefix.css */ +/* ^^^ constant.numeric.value.css */ +} + +.test-escape-character { top: "\nstring\n"; } +/* ^^ constant.character.escape.css */ +/* ^^ constant.character.escape.css */ + +.test-attribute-selectors[disabled][ /**/ type=button] {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^^^ - meta.selector.css - meta.attribute-selector */ +/* ^^^^^^^^^^ meta.attribute-selector.css */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^^^^^ entity.other.attribute-name.css */ +/* ^ punctuation.section.brackets.end.css */ +/* ^ punctuation.section.brackets.begin.css*/ +/* ^^^^ comment.block.css */ +/* ^^^^ entity.other.attribute-name.css */ +/* ^^^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.section.brackets.end.css */ + +.test-attribute-selectors-whitespace[ /**/ type /**/ = /**/ button /**/ ] {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^^^ - meta.selector.css - meta.attribute-selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ entity.other.attribute-name.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^^ meta.string.css string.unquoted.css */ +/* ^^^^ comment.block.css */ +/* ^ punctuation.section.brackets.end.css */ + +.test-attribute-selectors-whitespace[ /**/ type /**/ = /**/ 'button' /**/ ] {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^^^ - meta.selector.css - meta.attribute-selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ entity.other.attribute-name.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^^^^ meta.string.css string.quoted.single.css */ +/* ^^^^ comment.block.css */ +/* ^ punctuation.section.brackets.end.css */ + +.test-attribute-selectors-whitespace[ /**/ type /**/ = /**/ "button" /**/ ] {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^^^ - meta.selector.css - meta.attribute-selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ entity.other.attribute-name.css */ +/* ^^^^ comment.block.css */ +/* ^^^^ comment.block.css */ +/* ^^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^^^^ comment.block.css */ +/* ^ punctuation.section.brackets.end.css */ + +.test-attribute-selectors-illegal[button button = button button i button] {} +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^^^ - meta.selector.css - meta.attribute-selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^^^ entity.other.attribute-name.css */ +/* ^^^^^^ invalid.illegal.css */ +/* ^ keyword.operator.logical.css */ +/* ^^^^^^ meta.string.css string.unquoted.css */ +/* ^^^^^^ invalid.illegal.css */ +/* ^ keyword.other.flag.css */ +/* ^^^^^^ invalid.illegal.css */ +/* ^ punctuation.section.brackets.end.css */ + +.test-attribute-selectors-incomplete[=button {} +/* ^^^^^^^^ meta.selector.css meta.attribute-selector.css */ +/* ^ - meta.property-list - meta.selector */ +/* ^^ meta.property-list.css - meta.selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^ keyword.operator.logical.css */ +/* ^^^^^^ meta.string.css string.unquoted.css */ + +.test-attribute-selectors-incomplete[ ; +/* ^ meta.selector.css meta.attribute-selector.css */ +/* ^^ - meta.property-list - meta.selector */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^ punctuation.terminator.rule.css */ + +.test-attribute-selectors-namespaces[n|a=""][*|a=""][|att][*|*] {} +/* ^ entity.other.namespace-prefix.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ variable.language.wildcard.asterisk.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ variable.language.wildcard.asterisk.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ variable.language.wildcard.asterisk.css */ + +.test-attribute-selectors-operators[a=""][a~=""][a|=""][a^=""][a$=""][a*=""] {} +/* ^ keyword.operator.logical.css */ +/* ^^ keyword.operator.logical.css */ +/* ^^ keyword.operator.logical.css */ +/* ^^ keyword.operator.logical.css */ +/* ^^ keyword.operator.logical.css */ +/* ^^ keyword.operator.logical.css */ + +.test-attribute-selectors-whitespace[a = ""] {} +/* ^ entity.other.attribute-name.css */ +/* ^ keyword.operator.logical.css */ + +.test-attribute-selectors-flags[a="" i] {} +/* ^ keyword.other.flag.css */ + + *.test-universal-selector {} +/* ^ variable.language.wildcard.asterisk.css */ + +.test-combinators >>> a >> a > a + b ~ a || td {} +/* ^^^ keyword.operator.combinator.css */ +/* ^^ keyword.operator.combinator.css */ +/* ^ keyword.operator.combinator.css */ +/* ^ keyword.operator.combinator.css */ +/* ^ keyword.operator.combinator.css */ +/* ^^ keyword.operator.combinator.css */ + +.test-invalid-combinators +>> a +++ a ~+> a ||| td {} +/* ^^^ invalid.illegal.combinator.css */ +/* ^^^ invalid.illegal.combinator.css */ +/* ^^^ invalid.illegal.combinator.css */ +/* ^^^ invalid.illegal.combinator.css */ + + /* malformed declaration missing ':', value => ignore it! */ +.test-parsing-errors { color } +/* ^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.section.block.end.css */ + +/* same with expected recovery => ignore it! */ +.test-parsing-errors { color; color:green } +/* ^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.terminator.rule.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.color.w3c.standard.css */ +/* ^ punctuation.section.block.end.css */ + +/* malformed declaration missing value => ignore it! */ +.test-parsing-errors { color: } +/* ^^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.section.block.end.css */ + +/* same with expected recovery => ignore it! */ +.test-parsing-errors { color:; color:green } +/* ^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.terminator.rule.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.color.w3c.standard.css */ +/* ^ punctuation.section.block.end.css */ + +/* unexpected tokens { } => handle it as expected, using pairing */ +.test-parsing-errors { color{;color:maroon} } +/* ^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^^^^^^^^^^^^^ - constant - keyword - punctuation - support - variable */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^ punctuation.section.block.end.css */ + +/* same with recovery => handle it as expected, using pairing */ +.test-parsing-errors { color{;color:maroon}; color:green } +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.block.css */ +/* ^ - meta.property-list */ +/* ^ punctuation.section.block.begin.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^^^^^^^^^^^^^ - constant - keyword - punctuation - support - variable */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^ punctuation.terminator.rule.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.constant.color.w3c.standard.css */ +/* ^ punctuation.section.block.end.css */ + +.test-generic-font-families { + font-family: my-serif, serif, inherit; +/* ^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^ string.unquoted */ +/* ^^ - string - support */ +/* ^^^^^ support.constant.property-value.css */ +/* ^^ - string - support */ +/* ^^^^^^^ support.constant.property-value.css */ + + font-family: sans-serif, cursive, fantasy, monospace; +/* ^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^ - support */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +/* ^^ - support */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^^ - support */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^^ - support */ + + font-family: monospace !important; +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^^^^^^^^^^ keyword.other.important.css */ + + font-family: emoji, math, fangsong, system-ui; +/* ^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^ - support */ +/* ^^^^^ support.constant.property-value.css */ +/* ^^ - support */ +/* ^^^^ support.constant.property-value.css */ +/* ^^ - support */ +/* ^^^^^^^^ support.constant.property-value.css */ +/* ^^ - support */ +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^ - support */ + + font-family: droid serif; +/* ^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^ string.unquoted */ +} + +.invalid-font-family { + -font-family: sans-none; +/* ^^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^ - entity - support */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^ constant.other.css - support */ + + font-family: Red/Black, sans-serif; +/* ^^^^^^^^^ - string */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font-family: "Lucida" Grande, sans-serif; +/* ^^^^^^^^ string.quoted.double.css */ +/* ^^^^^^ string.unquoted.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font-family: Ahem!, sans-serif; +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^ - string */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font-family: test@foo, sans-serif; +/* ^ - string */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font-family: #POUND, sans-serif; +/* ^ - string */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font-family: Hawaii 5-0, sans-serif; +/* ^^^ - string */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +} + +.test-unquoted-font-name { + font: m700, aria; +/* ^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ - string */ +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.terminator.rule.css */ + + font: Gentium Bold; +/* ^^^^^^^^^^^^ meta.string.css string.unquoted.css */ + + font: sans serif; +/* ^^^^^^^^^^ meta.string.css string.unquoted.css */ + + font: inherit; +/* ^^^^^^^ support - string */ + + font: initial; +/* ^^^^^^^ support - string */ + + font: unset; +/* ^^^^^ support - string */ + + font: italic; +/* ^^^^^^ support - string */ + + font: small-caps; +/* ^^^^^^^^^^ support - string */ + + font: caption; +/* ^^^^^^^ support - string */ + + font: icon; +/* ^^^^ support - string */ + + font: menu; +/* ^^^^ support - string */ + + font: 2em m700, sans-serif; +/* ^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^ meta.number.integer.decimal.css */ +/* ^^^^ meta.string.css string.unquoted.css */ +/* ^ punctuation.separator */ +/* ^^^^^^^^^^ support.constant.property-value.css */ + + font: 12pt/14pt sans-serif; +/* ^^ constant.numeric.value.css */ +/* ^^ constant.numeric.suffix.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^ constant.numeric.value.css */ +/* ^^ constant.numeric.suffix.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + font: 80% sans-serif; +/* ^^ constant.numeric.value.css */ +/* ^ constant.numeric.suffix.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + font: x-large/110% "new century schoolbook", serif; +/* ^^^^^^^ support.constant.property-value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ constant.numeric.value.css */ +/* ^ constant.numeric.suffix.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^ string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ support.constant.property-value.css */ + + font: bold italic large Palatino, serif; +/* ^^^^ support.constant.property-value.css */ +/* ^^^^^^ support.constant.property-value.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^^^^^^^^ string.unquoted.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + font: normal small-caps 120%/120% fantasy; +/* ^^^^^^ support.constant.property-value.css */ +/* ^^^^^^^^^^ support.constant.property-value.css */ +/* ^^^ constant.numeric.value.css */ +/* ^ constant.numeric.suffix.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ constant.numeric.value.css */ +/* ^ constant.numeric.suffix.css */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + font: condensed oblique 12pt "Helvetica Neue", serif; +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^^ constant.numeric.value.css */ +/* ^^ constant.numeric.suffix.css */ +/* ^^^^^^^^^^^^^^^^ string.quoted.double.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ + + font: condensed oblique 25deg 753 12pt "Helvetica Neue", serif; +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^^^^^^^ support.constant.property-value.css */ +/* ^^ constant.numeric.value.css */ +/* ^^^ constant.numeric.suffix.css */ +/* ^^^ constant.numeric.value.css */ +/* ^^ constant.numeric.value.css */ +/* ^^ constant.numeric.suffix.css */ +/* ^^^^^^^^^^^^^^^^ string.quoted.double.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ +} + +.test-font-weight { + font-weight: bold; +/* ^^^^^^^^^^^ meta.property-list.css meta.property-name.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.property-list.css - meta.property-name - meta.property-value */ +/* ^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^ support.constant.property-value.css */ +/* ^ punctuation.terminator.rule.css */ +} + +.test-color-values { + color: aqua; +/* ^^^^ support.constant.color.w3c.standard.css */ + + color: aliceblue; +/* ^^^^^^^^^ support.constant.color.w3c.extended.css */ + + color: currentColor; +/* ^^^^^^^^^^^^ support.constant.color.w3c.special.css */ + + color: transparent; +/* ^^^^^^^^^^^ support.constant.color.w3c.special.css */ + + color: #b4da55; +/* ^ punctuation.definition.constant.css */ +/* ^^^^^^^ constant.other.color.rgb-value.css */ + + color: #137; +/* ^^^^ constant.other.color.rgb-value.css */ + + color: #0f0a; +/* ^^^^^ constant.other.color.rgba-value.css */ + + color: #a1b2c3d4; +/* ^^^^^^^^^ constant.other.color.rgba-value.css */ + + color: #E5F6A7B8; +/* ^ punctuation.definition.constant.css */ +/* ^^^^^^^^^ constant.other.color.rgba-value.css */ +} + +.test-function-meta { + top: filter(param1, 20px); +/* ^ - meta.function-call */ +/* ^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +} + +.test-incomplete-function-call: { + top: filter(param1, 20px ; +/* ^ - meta.function-call */ +/* ^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +/* ^ punctuation.terminator.rule.css */ + top: calc(var(--test ; +/* ^ - meta.function-call */ +/* ^^^^ meta.function-call.identifier.css */ +/* ^ meta.function-call.arguments.css*/ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ - meta.function-call */ +/* ^ punctuation.terminator.rule.css */ + + top: unknown(var(--test, 4) 30deg other); +/* ^ - meta.function-call */ +/* ^^^^^^^ meta.function-call.identifier.css */ +/* ^ meta.function-call.arguments.css*/ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^^^^^^^^^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^ - meta.function-call */ +/* ^^^^^^^ variable.function.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ constant.numeric.value.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^^^ meta.number.integer.decimal.css */ +/* ^^^^^ constant.other.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ +} + +.test-color-functions { + top: rgb(1, 4.5%); +/* ^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^ support.function.color.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: rgba(); +/* ^^^^ support.function.color.css */ + + top: hsl(1deg, 4.5%); +/* ^^^ support.function.color.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: hsla(); +/* ^^^^ support.function.color.css */ + + top: hsla(var()); +/* ^^^^ support.function.color.css */ +/* ^^^ support.function.var.css */ + + top: hwb(); +/* ^^^ support.function.color.css */ + + + top: gray(1, 4.5%); +/* ^^^^ support.function.color.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: device-cmyk(0.5, 1%, red()); +/* ^^^^^^^^^^^ support.function.color.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ support.function.color.css */ + + top: color(w(var()) s(var()) () )); +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ punctuation.section.group.end.css */ +/* ^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ punctuation.section.group.end.css */ +/* ^^ invalid.illegal.unexpected-token.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ invalid.illegal.unexpected-token.css */ + + top: alpha(- 1.5%); +/* ^^^^^ support.function.color.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: alpha(-1.5%); +/* ^^^^^ support.function.color.css */ +/* ^ invalid.illegal.operator.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: h(+ 1.5deg); +/* ^ support.function.color.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: w(* 1.5%); +/* ^ support.function.color.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: shade(1.5%); +/* ^^^^^ support.function.color.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: blend(hsl(219, 10%, 6%) 50%); +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ + + top: blenda(red 50% hsl); +/* ^^^^^^ support.function.color.css */ +/* ^^^ support.constant.color.w3c.standard.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ keyword.other.color-space.css */ + + background-color: color(var(--background) blend(var(--foreground) 80%)); +/* ^^^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^^^ support.function.color.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ +} + +.test-transform-functions { + top: rotate(0); +/* ^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: rotate(1) +/* ^^^^^^ support.function.transform.css */ +/* ^ - meta.number.integer.decimal.css constant.numeric.value.css */ + + top: rotate3d(-1, 2deg); +/* ^^^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: matrix3d(1, 0); +/* ^^^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: translate3d(1, 2px, 3%); +/* ^^^^^^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: translateY(2px); +/* ^^^^^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: translateX(1%); +/* ^^^^^^^^^^ support.function.transform */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: translateZ(0); +/* ^^^^^^^^^^ support.function.transform */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: skewY(1deg); +/* ^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: skew(1deg, 2turn); +/* ^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: perspective(17px); +/* ^^^^^^^^^^^ support.function.transform.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: scaleY(2); +/* ^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: skewY(1rad) rotate(1turn); +/* ^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^^^^ support.function.transform.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + transform: translate(var(--center), 0) scale(var(--ripple-scale), 1); +/* ^^^^^^^^^ support.function.transform */ +/* ^^^ support.function.var */ +/* ^^^^^^^^ variable.other.custom-property.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ support.function.var */ +} + +.test-timing-functions { + top: cubic-bezier(0.42, 0, 0.58, 1); +/* ^^^^^^^^^^^^ support.function.timing.css */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: steps(020, start); +/* ^^^^^ support.function.timing.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^^ keyword.other.timing.css */ + + top: steps(1, end); +/* ^^^ keyword.other.timing.css */ + + top: steps(1, middle); +/* ^^^^^^ keyword.other.timing.css */ + + top: steps(1, var(--end)); +/* ^^^ support.function.var.css */ +} + +.test-shape-functions { + top: circle(at top 5.5e20em); +/* ^^^^^^ support.function.shape.css */ +/* ^^ keyword.other.shape.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.float.decimal.css constant.numeric.suffix.css */ + + top: ellipse(at 0%); +/* ^^^^^^^ support.function.shape.css */ +/* ^^ keyword.other.shape.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: ellipse(closest-side); +/* ^^^^^^^^^^^^ support.constant.property-value.css */ + + top: inset(1.1px round 50%); +/* ^^^^^ support.function.shape.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^^^^^ keyword.other.shape.css */ + + top: rect(auto); +/* ^^^^ support.function.shape.css */ +/* ^^^^ support.constant.property-value.css */ + + top: rect(var()); +/* ^^^^ support.function.shape.css */ +/* ^^^ support.function.var.css */ + + top: rect(1px); +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +} + +.test-calc-function { + top: calc(1.1px + 2rad); +/* ^^^^ support.function.calc.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: calc(attr(start, 1) - 1); +/* ^^^^ support.function.calc.css */ +/* ^^^^ support.function.attr.css */ + + top: calc(calc() * calc()); +/* ^^^^ support.function.calc.css */ +/* ^^^^ support.function.calc.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^^ support.function.calc.css */ + + top: calc(var() * var()); +/* ^^^^ support.function.calc.css */ +/* ^^^ support.function.var.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^ support.function.var.css */ + + top: calc(100% - (1 * 10px) / 1 - (1 * 10px) / 1 - (1 * 10px) / 1); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^^ support.function.calc.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^ meta.group.css meta.group.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css - meta.group */ +} + +.test-toggle-function { + top: toggle(5px red preserve-3d); +/* ^^^^^^ support.function.toggle.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ support.constant.color.w3c.standard.css */ +/* ^^^^^^^^^^^ support.constant.property-value.css */ + + top: toggle(var(--5px) var(red) preserve-3d); +/* ^^^^^^ support.function.toggle.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.section.group.end.css */ +} + +.test-attr-function { + top: attr(*|c); +/* ^^^^ support.function.attr.css */ +/* ^ variable.language.wildcard.asterisk.css */ +/* ^ punctuation.separator.namespace.css */ +/* ^ entity.other.attribute-name.css */ + + top: attr(n|size); +/* ^ entity.other.namespace-prefix.css */ +/* ^^^^ entity.other.attribute-name.css */ + + top: attr(size px, auto); +/* ^^^^ entity.other.attribute-name.css */ +/* ^^ keyword.other.unit.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ support.constant.property-value.css */ + + top: attr(preserve-3d); +/* ^^^^^^^^^^^ entity.other.attribute-name.css */ + + top: attr("name" auto); +/* ^^^^^^ meta.string.css string.quoted.double.css */ +/* ^^^^ support.constant.property-value.css */ + + top: attr(var(--name) var(--val)); +/* ^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^^ support.function.attr.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^ punctuation.section.group.end.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ punctuation.section.group.end.css */ +} + +.test-url-function { + top: url("a"); +/* ^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.string - meta.path */ +/* ^ meta.string.css - meta.path */ +/* ^ meta.path.url.css meta.string.css */ +/* ^ meta.string.css - meta.path */ +/* ^ - meta.string - meta.path */ +/* ^^^ support.function.url.css */ +/* ^^^ string.quoted.double.css */ + + top: url('a'); +/* ^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.string - meta.path */ +/* ^ meta.string.css - meta.path */ +/* ^ meta.path.url.css meta.string.css */ +/* ^ meta.string.css - meta.path */ +/* ^ - meta.string - meta.path */ +/* ^^^ support.function.url.css */ +/* ^^^ string.quoted.single.css */ + + top: url(a); +/* ^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^ support.function.url.css */ +/* ^ meta.string.css string.unquoted.css */ + + top: url("foo/bar%20baz.php?page=10&func=test()#ancor"); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +/* ^ - meta.string - meta.path */ +/* ^ meta.string.css - meta.path */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^ meta.string.css - meta.path */ +/* ^ - meta.string - meta.path */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ string.quoted.double.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.separator.path.css */ +/* ^ constant.character.escape.url.css punctuation.definition.escape.css */ +/* ^^ constant.character.escape.url.css - punctuation */ +/* ^ punctuation.separator.path.css */ +/* ^ punctuation.separator.path.css */ +/* ^ punctuation.separator.path.css */ +/* ^ punctuation.definition.string.end.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + top: url('foo/bar%20baz.php?page=10&func=test()'); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^ - meta.function-call */ +/* ^ - meta.string - meta.path */ +/* ^ meta.string.css - meta.path */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^ meta.string.css - meta.path */ +/* ^ - meta.string - meta.path */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ string.quoted.single.css */ +/* ^ punctuation.definition.string.begin.css */ +/* ^ punctuation.separator.path.css */ +/* ^ constant.character.escape.url.css punctuation.definition.escape.css */ +/* ^^ constant.character.escape.url.css - punctuation */ +/* ^ punctuation.separator.path.css */ +/* ^ punctuation.separator.path.css */ +/* ^ punctuation.definition.string.end.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + top: url(foo/bar%20baz.php?page=10&func=test-._~:#[]\'\"@!$*+%,;(bad-url\))); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^ - meta.function-call */ +/* ^ - meta.string - meta.path */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css string.unquoted.css */ +/* ^^^^^^^^^^^^^ - meta.string - meta.path */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css - string */ +/* ^ punctuation.separator.path.css */ +/* ^ constant.character.escape.url.css punctuation.definition.escape.css */ +/* ^^ constant.character.escape.url.css - punctuation */ +/* ^^^^^^^ - punctuation.separator.path */ +/* ^ punctuation.separator.path.css */ +/* ^^^^^^^ - punctuation.separator.path */ +/* ^ punctuation.separator.path.css */ +/* ^^^^^^^^^^^^^^ - punctuation.separator.path */ +/* ^ punctuation.separator.path.css */ +/* ^^ - punctuation.separator.path */ +/* ^^^^ constant.character.escape.css */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^^ constant.character.escape.css */ +/* ^ punctuation.section.group.end.css - string */ +/* ^ invalid.illegal.unexpected-token.css */ +/* ^ punctuation.terminator.rule.css */ + + top: url(var(--image)); +/* ^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ support.function.url.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^ punctuation.section.group.end.css */ +} + +.test-image-functions { + top: image("a"); +/* ^^^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^^^ meta.function-call.identifier.css */ +/* ^^^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^ meta.string.css string.quoted.double.css */ + + top: image(a); +/* ^^^^^^^^ - meta.function-call meta.function-call */ +/* ^^^^^ meta.function-call.identifier.css */ +/* ^^^ meta.function-call.arguments.css meta.group.css */ +/* ^^^^^ support.function.image.css */ +/* ^ - constant - string - support */ + + top: image(var(--url)); +/* ^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^^^ support.function.image.css */ +/* ^^^ support.function.var.css */ + + top: image("a", rgb(0, 0, 0)); +/* ^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^^^ support.function.image.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: image(ltr "/images/image.png", rgb(0, 0, 0)); +/* ^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^ - meta.function-call */ +/* ^^^^^ support.function.image.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^^^^^^^^^^^^^^^^ string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ support.function.color.css */ + + top: image(ltr url(/images/image.png), rgb(0, 0, 0)); +/* ^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css */ +/* ^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^ - meta.function-call */ +/* ^^^^^ support.function.image.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^^^^^^^^^^^^^^ string.unquoted.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ support.function.color.css */ + + top: image-set("a" 1x, a 4dpi); +/* ^^^^^^^^^ support.function.image.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ - constant - string - support */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: image-set("../assets/image.png" 1x, url(other/image.jpg) 4dpi); +/* ^^^^^^^^^ meta.function-call.identifier.css - meta.function-call meta.function-call */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^^^ meta.function-call.arguments.css meta.function-call.identifier.css */ +/* ^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.function-call.arguments.css */ +/* ^^^^^^ meta.function-call.arguments.css - meta.function-call meta.function-call */ +/* ^ - meta.function-call */ +/* ^^^^^^^^^ support.function.image.css */ +/* ^ meta.string.css string.quoted.double.css - meta.path */ +/* ^^^^^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css string.quoted.double.css */ +/* ^ meta.string.css string.quoted.double.css - meta.path */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ support.function.url.css */ +/* ^^^^^^^^^^^^^^^ meta.path.url.css meta.string.css string.unquoted.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: cross-fade(50% "a", b); +/* ^^^^^^^^^^ support.function.image.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ - constant - string - support */ + + top: cross-fade(50% "a", url(b)); +/* ^^^^^^^^^^ support.function.image.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^ support.function.url.css */ +/* ^ meta.path.url.css meta.string.css string.unquoted.css */ +} + +.test-gradient-functions { + top: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1); +/* ^^^^^^^^^^^^^^ support.function.gradient.css */ +/* ^^^^ keyword.other.gradient.css */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^^ keyword.other.gradient.css */ + + top: linear-gradient(); +/* ^^^^^^^^^^^^^^^ support.function.gradient.css */ + + top: linear-gradient(45deg, white); +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ support.constant.color.w3c.standard.css */ + + top: linear-gradient(to top left); +/* ^^ keyword.other.gradient.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^ support.constant.property-value.css */ + + top: linear-gradient(0%, 100%); +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: repeating-linear-gradient(); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ + + top: radial-gradient(); +/* ^^^^^^^^^^^^^^^ support.function.gradient.css */ + + top: radial-gradient(circle at top left); +/* ^^^^^^ keyword.other.gradient.css */ +/* ^^ keyword.other.gradient.css */ +/* ^^^ support.constant.property-value.css */ +/* ^^^^ support.constant.property-value.css */ + + top: radial-gradient(red, blue); +/* ^^^ support.constant.color.w3c.standard.css */ +/* ^ punctuation.separator.sequence.css */ + + top: repeating-radial-gradient(); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.gradient.css */ +} + +.test-counter-functions { + + counter-increment: section; +/* ^^^^^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ entity.other.counter-name.css */ + + counter-reset: chapter-count 0; +/* ^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^^^^^^ entity.other.counter-name.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + counter-reset: counter 0; +/* ^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^ entity.other.counter-name.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + counter-reset: counter1 0; +/* ^^^^^^^^^^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^^^ entity.other.counter-name.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + top: counter(name, ; +/* ^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ punctuation.terminator.rule.css */ + + top: counter(name none; +/* ^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + top: counter(name, none; +/* ^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + top: counter(name, decimal-leading-zero); +/* ^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^^^^^^^^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + top: counters(name, ; +/* ^^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ punctuation.terminator.rule.css */ + + /* The second argument must be a string, but it is ignored here. */ + top: counters(name, other, ; +/* ^^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ punctuation.terminator.rule.css */ + + /* The second argument must be a string, but it is ignored here. */ + top: counters(name, other, deci ; +/* ^^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ entity.other.counter-style-name.css */ +/* ^ punctuation.terminator.rule.css */ + + /* The second argument must be a string, but it is ignored here. */ + top: counters(name, decimal-leading-zero, decimal-leading-zero); +/* ^^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^^^^^^^^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^^^^^^^^^^^^^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + top: counters(name, "str", none); +/* ^^^^^^^^ support.function.counter.css */ +/* ^ punctuation.section.group.begin.css */ +/* ^^^^ entity.other.counter-name.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^^ meta.string.css string.quoted.double.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^^^ support.constant.counter-style-name.css */ +/* ^ punctuation.section.group.end.css */ +/* ^ punctuation.terminator.rule.css */ + + top: symbols(fixed "\2020" url()); +/* ^^^^^^^ support.function.counter.css */ +/* ^^^^^ support.constant.symbol-type.css */ +/* ^^^^^^^ meta.string.css string.quoted.double.css */ +/* ^^^ support.function.url.css */ +} + +.test-grid-functions { + grid: repeat(20) / auto-flow 1fr; +/* ^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^^^^^^ support.function.grid.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^^^^^^^ support.constant.property-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + grid: [linename1] "a" 100px [linename2]; +/* ^^^^ meta.property-list.css meta.property-name.css */ +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^^^^ support.type.property-name.css */ +/* ^ punctuation.separator.key-value.css */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^^^^^^ meta.string.css string.unquoted.line-name.css */ +/* ^ punctuation.section.brackets.end.css */ +/* ^^^ meta.string.css string.quoted.double.css */ +/* ^^^^^ meta.number.integer.decimal.css */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^^^^^^ meta.string.css string.unquoted.line-name.css */ +/* ^ punctuation.section.brackets.end.css */ + + top: repeat(auto-fit, 2fr minmax(auto) 5%); +/* ^^^^^^^^ keyword.other.grid.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^^^^ support.function.grid.css */ +/* ^^^^ support.constant.property-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: minmax(min-content, 1fr, 10%); +/* ^^^^^^ support.function.grid.css */ +/* ^^^^^^^^^^^ support.constant.property-value.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + grid-template: repeat(2, var(--size)) / repeat(2, 50%); +/* ^^^ support.function.var.css */ +/* ^^^^^^ variable.other.custom-property.css */ +/* ^^ punctuation.section.group.end.css */ +/* ^ keyword.operator.arithmetic.css */ +/* ^^^^^^ support.function.grid.css */ + + grid-template-columns: + [a-line-name] auto +/* ^ punctuation.section.brackets.begin.css */ +/* ^^^^^^^^^^^ meta.string.css string.unquoted.line-name.css */ +/* ^ punctuation.section.brackets.end.css */ + [b] minmax(min-content, 1fr) + [b c d] repeat(2, [e] 40px) +/* ^ punctuation.section.brackets.begin.css */ +/* ^ meta.string.css string.unquoted.line-name.css */ +/* ^ - meta.string.css string.unquoted.line-name.css */ +/* ^ meta.string.css string.unquoted.line-name.css */ +/* ^ punctuation.section.brackets.end.css */ +/* ^ punctuation.section.brackets.begin.css */ +/* ^ meta.string.css string.unquoted.line-name.css */ +/* ^ punctuation.section.brackets.end.css */ + repeat(5, auto); +} + +.test-filter-functions { + top: filter(url(), blur()); +/* ^^^^^^ support.function.filter.css */ +/* ^^^ support.function.url.css */ +/* ^^^^ support.function.filter.css */ + + top: blur(1px); +/* ^^^^ support.function.filter.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ + + top: sepia(1% 1); +/* ^^^^^ support.function.filter.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ + + top: drop-shadow(1px rgb()); +/* ^^^^^^^^^^^ support.function.filter.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +/* ^^^ support.function.color.css */ + + top: hue-rotate(1turn); +/* ^^^^^^^^^^ support.function.filter.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^ meta.number.integer.decimal.css constant.numeric.suffix.css */ +} + +.test-var-function { + top: var(--name); +/* ^^^ support.function.var.css */ +/* ^^^^^^ variable.other.custom-property.css */ + + top: var(--name, 1px); +/* ^^^ support.function.var.css */ +/* ^^^^^^ variable.other.custom-property.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^ constant.numeric.value.css */ +} + +.test-uppercase DIV:HOVER { +/* ^^^ entity.name.tag.html.css */ +/* ^ punctuation.definition.pseudo-class.css */ +/* ^^^^^ entity.other.pseudo-class.css */ + + FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #0d3372; FONT-FAMILY: tahoma +/* ^^^^^^^^^^^ support.type.property-name.css */ +/* ^^^^^^^^^ support.type.property-name.css */ +/* ^^^^^ support.type.property-name.css */ +/* ^^^^^^^^^^^ support.type.property-name.css */ +} + +.test-custom-tags > div > span + cust·m-tÀg > div-cøstom-tag ~ form-Çust😀m-tag.classname:last-child:hover {} +/* ^ - entity.name.tag.custom.css */ +/* ^^^ entity.name.tag.html.css */ +/* ^^^^ entity.name.tag.html.css */ +/* ^ - entity.name.tag.custom.css */ +/* ^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^^^^^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^ - entity.name.tag.custom.css */ +/* ^^^^^^^^^^^^^^^ entity.name.tag.custom.css */ +/* ^^^^^^^^^ entity.other.attribute-name.class.css */ +/* ^^^^^^^^^^ - entity.name.tag.custom.css */ +/* ^^^^^ - entity.name.tag.custom.css */ + +.no-custom-tags > FORM-ÇUST😀M-TAG.CLASSNAME:LAST-CHILD:HOVER {} +/*^^^^^^^^^^^^^ entity.other.attribute-name.class.css */ +/* ^^^^^^^^^^^^^^^^^^ - entity.name.tag.custom */ +/* ^^^^^^^^^^ entity.other.attribute-name.class.css */ +/* ^^^^^^^^^^ entity.other.pseudo-class.css */ +/* ^^^^^ entity.other.pseudo-class.css */ + +svg > color-profile {} +/* <- entity.name.tag.svg.css */ +/* ^^^^^^^^^^^^^ entity.name.tag.svg.css */ +/* ^^^ - entity */ +/* ^ - entity */ + +.test-property-name-order-doesnt-prevent-full-matches { + grid-template-rows: none; +/* ^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ + grid-template-columns: none; +/* ^^^^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ + grid-template-areas: auto; +/* ^^^^^^^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ + grid-template: initial; +/* ^^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ + grid-row-gap: 3vmin; +/* ^^^^^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ + grid-row: auto; +/* ^^^^^^^^ support.type.property-name */ +/* ^ punctuation.separator.key-value */ +} + +.test-meta-scopes-for-completions { + top: 5px; +/*^^^^^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ +/* ^^^^ meta.property-value */ + top: ; +/*^^^^^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ +/* ^ meta.property-value */ + top: +/*^^^^^^^ meta.property-list */ +/* ^^^ meta.property-name */ +}/* ^ meta.property-value */ + +a { + height:calc(10px/*); + font-family:"a*/); +/* ^^^^^^^^^^^^^^^ comment.block.css */ +/* ^ punctuation.section.group.end.css */ +} + +.variable-beginnings { + --1x: url(data:image/png;base64,PNG); +/* ^^^^ entity.other.custom-property.css */ +/* ^ punctuation.separator.key-value */ + background-image: var(--1x); +/* ^^^^ variable.other.custom-property.css */ + --\ff: 5px; +/* ^^^^^ entity.other.custom-property.css */ +/* ^ punctuation.separator.key-value */ +} + +img{ + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% calc(100% - 31px), +/* ^^^^ support.function.calc */ +/* ^^^ constant.numeric */ +/* ^ punctuation.separator.sequence */ + calc(100% - 196px) calc(100% - 31px), + calc(100% - 196px) 100%, + 0% 100% + ) !important; +/*^ punctuation.section.group.end */ +/* ^^^^^^^^^^ keyword.other.important */ +} + +.test-box-shadow { + box-shadow: 0 0 0 .125rem hsl(var(--red-50)) inset, +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^^^ support.function.color.css */ +/* ^^^ support.function.var.css */ +/* ^^^^^ support.constant.property-value.css */ +/* ^ punctuation.separator.sequence.css */ + 0 0 0 .1875rem hsl(var(--red-50), .3); +/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.property-list.css meta.property-value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^ meta.number.integer.decimal.css constant.numeric.value.css */ +/* ^^^^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^^^ meta.number.float.decimal.css constant.numeric.suffix.css */ +/* ^^^ support.function.color.css */ +/* ^^^ support.function.var.css */ +/* ^ punctuation.separator.sequence.css */ +/* ^^ meta.number.float.decimal.css constant.numeric.value.css */ +/* ^ punctuation.terminator.rule.css */ +} diff --git a/syntaxes/JavaScript/Comments.tmPreferences b/syntaxes/JavaScript/Comments.tmPreferences @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.js, source.jsx, source.ts, source.tsx, meta.jsx meta.tag.name, meta.jsx meta.tag.attributes</string> + <key>settings</key> + <dict> + <key>shellVariables</key> + <array> + <dict> + <key>name</key> + <string>TM_COMMENT_START</string> + <key>value</key> + <string>// </string> + </dict> + <dict> + <key>name</key> + <string>TM_COMMENT_START_2</string> + <key>value</key> + <string>/*</string> + </dict> + <dict> + <key>name</key> + <string>TM_COMMENT_END_2</string> + <key>value</key> + <string>*/</string> + </dict> + </array> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/Completion Rules.tmPreferences b/syntaxes/JavaScript/Completion Rules.tmPreferences @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.js</string> + <key>settings</key> + <dict> + <key>cancelCompletion</key> + <string>^\s*(\{?\s*(else|return|do)|(function)\s*[a-zA-Z_0-9]+)$</string> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/Default.sublime-keymap b/syntaxes/JavaScript/Default.sublime-keymap @@ -0,0 +1,54 @@ +[ + // Auto-pair backticks + { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`$0`"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "(source.js, source.ts) - string" }, + { "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 }, + ] + }, + { "keys": ["`"], "command": "insert_snippet", "args": {"contents": "`${0:$SELECTION}`"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "(source.js, source.ts) - string" }, + { "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, source.ts" }, + { "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 }, + { "key": "selector", "operator": "not_equal", "operand": "punctuation.definition.string.begin", "match_all": true }, + ] + }, + { "keys": ["backspace"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Left Right.sublime-macro"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "string.quoted.other.js" }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true }, + { "key": "preceding_text", "operator": "regex_contains", "operand": "`$", "match_all": true }, + { "key": "following_text", "operator": "regex_contains", "operand": "^`", "match_all": true }, + { "key": "selector", "operator": "not_equal", "operand": "punctuation.definition.string.begin", "match_all": true }, + ] + }, + + // Auto-pair interpolation + { "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}, "context": + [ + { "key": "selector", "operator": "equal", "operand": "string.quoted.other.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": true, "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": "string.quoted.other.js", "match_all": true }, + { "key": "setting.auto_match_enabled", "operator": "equal", "operand": true }, + { "key": "selection_empty", "operator": "equal", "operand": false, "match_all": true } + ] + }, +] diff --git a/syntaxes/JavaScript/Indentation Rules.tmPreferences b/syntaxes/JavaScript/Indentation Rules.tmPreferences @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string>source.js, source.ts, source.jsx, source.tsx</string> + <key>settings</key> + <dict> + <key>decreaseIndentPattern</key> + <string>^(.*\*/)?\s*\}.*$</string> + <key>increaseIndentPattern</key> + <string>^.*\{[^}"']*$</string> + <key>bracketIndentNextLinePattern</key> + <string>(?x) + ^ \s* \b(if|while|else)\b [^;]* $ + | ^ \s* \b(for)\b .* $ + </string> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/JSX Comments.tmPreferences b/syntaxes/JavaScript/JSX Comments.tmPreferences @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> +<plist version="1.0"> +<dict> + <key>name</key> + <string>JSX Comments</string> + <key>scope</key> + <string>meta.jsx</string> + <key>settings</key> + <dict> + <key>shellVariables</key> + <array> + <dict> + <key>name</key> + <string>TM_COMMENT_START</string> + <key>value</key> + <string>{/*</string> + </dict> + <dict> + <key>name</key> + <string>TM_COMMENT_END</string> + <key>value</key> + <string>*/}</string> + </dict> + </array> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/JSX.sublime-settings b/syntaxes/JavaScript/JSX.sublime-settings @@ -0,0 +1,3 @@ +{ + "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?", +} diff --git a/syntaxes/JavaScript/JavaScript.sublime-settings b/syntaxes/JavaScript/JavaScript.sublime-settings @@ -0,0 +1,3 @@ +{ + "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?", +} diff --git a/syntaxes/JavaScript/JavaScript.sublime-syntax b/syntaxes/JavaScript/JavaScript.sublime-syntax @@ -0,0 +1,2479 @@ +%YAML 1.2 +--- +# Derived from JavaScript Next: https://github.com/Benvie/JavaScriptNext.tmLanguage +version: 2 +name: JavaScript +file_extensions: + - js + - mjs + - htc +first_line_match: ^#!\s*/.*\b(node|js)\b +scope: source.js +variables: + bin_digit: '[01_]' + oct_digit: '[0-7_]' + dec_digit: '[0-9_]' + hex_digit: '[\h_]' + dec_integer: (?:0|[1-9]{{dec_digit}}*) + dec_exponent: '[Ee](?:[-+]|(?![-+])){{dec_digit}}*' + + identifier_escape: (?:\\u(?:\h{4}|\{\h+\})) + identifier_start: (?:[_$\p{L}\p{Nl}]|{{identifier_escape}}) + identifier_part: (?:[_$\p{L}\p{Nl}\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]|{{identifier_escape}}) + identifier_break: (?!{{identifier_part}}) + + identifier_name: (?:{{identifier_start}}{{identifier_part}}*{{identifier_break}}) + constant_identifier: (?:[[:upper:]]{{identifier_part}}*{{identifier_break}}) + dollar_only_identifier: (?:\${{identifier_break}}) + dollar_identifier: '(?:(\$){{identifier_part}}*{{identifier_break}})' + + block_comment_contents: (?:(?:[^*]|\*(?!/))*) + block_comment: (?:/\*{{block_comment_contents}}\*/) + nothing: (?x:(?:\s+|{{block_comment}})*) + line_ending_ahead: (?={{nothing}}(?:/\*{{block_comment_contents}})?$) + + # https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar + reserved_word: |- + (?x: + break|case|catch|class|const|continue|debugger|default|delete|do|else| + export|extends|finally|for|function|if|import|in|instanceof|new|return| + super|switch|this|throw|try|typeof|var|void|while|with|yield| + enum| + null|true|false + ){{identifier_break}} + + non_reserved_identifier: (?:(?!{{reserved_word}}){{identifier_name}}) + + either_func_lookahead: (?:{{func_lookahead}}|{{arrow_func_lookahead}}) + binding_pattern_lookahead: (?:{{identifier_name}}|\[|\{) + left_expression_end_lookahead: (?!\s*[.\[\(]) + + dot_accessor: (?:\??\.) + + property_name: >- + (?x: + {{identifier_name}} + | [0-9]+ + | '(?:[^\\']|\\.)*' + | "(?:[^\\"]|\\.)*" + | \[ .* \] + ) + + class_element_name: |- + (?x: + {{property_name}} + | \#{{identifier_name}} + ) + + modifier: (?:static{{identifier_break}}) + + # Newline not permitted between `async` and `function`. + func_lookahead: |- + (?x: + (?:async{{identifier_break}}{{nothing}})? + function{{identifier_break}} + ) + + arrow_func_lookahead: |- + (?x: + (?:async\s*)? + (?: + {{identifier_name}} + | \( ( [^()] | \( [^()]* \) )* \) + ) + \s* + => + ) + + line_continuation_lookahead: >- + (?x:(?= + (?! \+\+ | -- ) + (?= + != | + [-+*/%><=&|^\[(;,.:?] | + (?:in|instanceof){{identifier_break}} + ) + )) + + function_call_lookahead: (?={{identifier_name}}\s*(?:{{dot_accessor}})?\() + + function_assignment_lookahead: |- + (?x:(?= + \s* = \s* + {{either_func_lookahead}} + )) + + # '@' followed by a pattern like \S but excluding literal '*' and '@'. + jsdoc_block_tag: \@[^\n\t\f\v *@]+ + +contexts: + main: + - include: comments-top-level + + - match: '\)|\}|\]' + scope: invalid.illegal.stray-bracket-end.js + # Don't pop or embedding could break. + + - include: statements + + prototype: + - include: comments + + comments: + - match: /\*\*(?!/) + scope: punctuation.definition.comment.begin.js + push: + - jsdoc-comment + - jsdoc-block-tag + - match: /\* + scope: punctuation.definition.comment.begin.js + push: + - meta_include_prototype: false + - meta_scope: comment.block.js + - match: \*/ + scope: punctuation.definition.comment.end.js + pop: true + - match: // + scope: punctuation.definition.comment.js + push: + - meta_include_prototype: false + - meta_scope: comment.line.double-slash.js + - match: \n + pop: true + + jsdoc-comment: + - meta_include_prototype: false + - meta_scope: comment.block.documentation.js + - match: \*/ + scope: punctuation.definition.comment.end.js + pop: 1 + # JSDoc "block" tags (i.e. @param) are only accepted at the beginning of the documentation + # line so directly after the '/**' or after the '*' marker on the next lines. + - match: ^\s*(\*)(?!/) + captures: + 1: punctuation.definition.comment.js + push: jsdoc-block-tag + + jsdoc-block-tag: + - match: '{{jsdoc_block_tag}}' + scope: entity.other.attribute-name.documentation.js + pop: 1 + - match: (?=\S)|$ + pop: 1 + + comments-top-level: + - match: ^(#!).*$\n? + scope: comment.line.shebang.js + captures: + 1: punctuation.definition.comment.js + + else-pop: + - match: (?=\S) + pop: true + + immediately-pop: + - match: '' + pop: true + + immediately-pop-2: + - meta_include_prototype: false + - match: '' + pop: 2 + + comma-separator: + - match: ',' + scope: punctuation.separator.comma.js + + import-statement-or-import-meta: + - match: (?=import{{identifier_break}}) + branch_point: import-statement + branch: + - import-statement + - expression-statement + + import-statement: + - match: import{{identifier_break}} + scope: keyword.control.import-export.js + set: + - import-meta + - expect-semicolon + - import-string-or-items + - import-check-branch + + import-check-branch: + - match: (?=[.(]) # Recovery for import expressions + fail: import-statement + - include: else-pop + + export-statement: + - match: export{{identifier_break}} + scope: keyword.control.import-export.js + set: + - export-meta + - export-extended + + import-meta: + - meta_include_prototype: false + - meta_scope: meta.import.js + - include: immediately-pop + + import-export-alias: + - match: as{{identifier_break}} + scope: keyword.control.import-export.js + set: + - match: default{{identifier_break}} + scope: keyword.control.import-export.js + pop: true + - match: '{{identifier_name}}' + scope: variable.other.readwrite.js + pop: true + - include: else-pop + - include: else-pop + + import-export-from: + - match: 'from{{identifier_break}}' + scope: keyword.control.import-export.js + set: literal-string + - include: else-pop + + import-string-or-items: + - include: literal-string + - match: (?=\S) + set: + - import-export-from + - import-list + - import-export-alias + - import-item + + import-list: + - match: ',' + scope: punctuation.separator.comma.js + push: + - import-export-alias + - import-item + - include: else-pop + + import-item: + - match: '\{' + scope: punctuation.section.block.begin.js + set: import-brace + - match: '{{non_reserved_identifier}}' + scope: variable.other.readwrite.js + pop: true + - match: '\*' + scope: constant.other.js + pop: true + - include: else-pop + + import-brace: + - meta_scope: meta.block.js + - include: comma-separator + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - match: '{{identifier_name}}' + scope: variable.other.readwrite.js + push: import-export-alias + - match: '\*' + scope: constant.other.js + push: import-export-alias + - include: else-pop + + export-meta: + - meta_include_prototype: false + - meta_scope: meta.export.js + - include: immediately-pop + + export-extended: + - include: variable-declaration + - include: class + - include: regular-function + + - match: 'default{{identifier_break}}' + scope: keyword.control.import-export.js + set: + - include: class + - include: regular-function + - match: (?=\S) + set: expression-statement + + - match: (?=\S) + set: + - expect-semicolon + - import-export-from + - export-list + - import-export-alias + - export-item + + export-list: + - match: ',' + scope: punctuation.separator.comma.js + push: + - import-export-alias + - export-item + - include: else-pop + + export-item: + - match: '\{' + scope: punctuation.section.block.begin.js + set: export-brace + - match: '{{non_reserved_identifier}}' + scope: variable.other.readwrite.js + pop: true + - match: '\*' + scope: constant.other.js + pop: true + - include: else-pop + + export-brace: + - meta_scope: meta.block.js + - include: comma-separator + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - match: '{{identifier_name}}' + scope: variable.other.readwrite.js + push: import-export-alias + - match: '\*' + scope: constant.other.js + push: import-export-alias + - include: else-pop + + statements: + - match: '\)|\}|\]' + scope: invalid.illegal.stray-bracket-end.js + pop: true + + - match: (?=\S) + push: statement + + statement: + - match: \; + scope: punctuation.terminator.statement.empty.js + pop: true + + - include: import-statement-or-import-meta + - include: export-statement + - include: conditional + - include: block + - include: label + - include: variable-declaration + + - match: break{{identifier_break}} + scope: keyword.control.flow.break.js + set: + - expect-semicolon + - expect-label + + - match: continue{{identifier_break}} + scope: keyword.control.flow.continue.js + set: + - expect-semicolon + - expect-label + + - match: debugger{{identifier_break}} + scope: keyword.control.flow.debugger.js + set: expect-semicolon + + - match: return{{identifier_break}} + scope: keyword.control.flow.return.js + set: restricted-production + + - match: throw{{identifier_break}} + scope: keyword.control.flow.throw.js + set: restricted-production + + - include: class + - include: regular-function + + - include: decorator + + - include: expression-statement + + expect-semicolon: + - match: \; + scope: punctuation.terminator.statement.js + pop: true + - include: else-pop + + expect-label: + - meta_include_prototype: false + - match: '(?={{nothing}}{{identifier_name}})' + set: + - match: '{{non_reserved_identifier}}' + scope: variable.label.js + pop: true + - match: '{{identifier_name}}' + scope: invalid.illegal.identifier.js variable.label.js + pop: true + - include: else-pop + - include: immediately-pop + + block: + - match: '\{' + scope: punctuation.section.block.begin.js + set: + - meta_scope: meta.block.js + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - include: statements + + variable-binding-pattern: + - include: variable-binding-name + - include: variable-binding-array-destructuring + - include: variable-binding-object-destructuring + - include: else-pop + + variable-binding-name: + - match: (?={{non_reserved_identifier}}) + set: + - - meta_scope: meta.binding.name.js + - include: immediately-pop + - literal-variable + + variable-binding-array-destructuring: + - match: '\[' + scope: punctuation.section.brackets.begin.js + set: + - meta_scope: meta.binding.destructuring.sequence.js + - match: '\]' + scope: punctuation.section.brackets.end.js + pop: true + - include: variable-binding-spread + - include: variable-binding-list + + variable-binding-object-destructuring: + - match: '\{' + scope: punctuation.section.block.begin.js + set: + - meta_scope: meta.binding.destructuring.mapping.js + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - include: variable-binding-spread + - match: (?={{identifier_start}}|\[|'|") + push: + - initializer + - variable-binding-object-alias + - object-literal-meta-key + - variable-binding-object-key + - include: comma-separator + + variable-binding-object-alias: + - match: ':' + scope: punctuation.separator.key-value.js + set: variable-binding-pattern + - include: else-pop + + variable-binding-object-key: + - match: '{{identifier_name}}(?=\s*:)' + pop: true + - include: literal-string + - include: computed-property-name + - include: variable-binding-name + - include: else-pop + + variable-binding-spread: + - match: '\.\.\.' + scope: keyword.operator.spread.js + push: variable-binding-pattern + + variable-binding-list: + - include: comma-separator + - match: (?={{binding_pattern_lookahead}}) + push: + - initializer + - variable-binding-pattern + - include: else-pop + + variable-binding-top: + - match: (?={{binding_pattern_lookahead}}) + set: + - initializer + - variable-binding-pattern + - include: else-pop + + variable-binding-list-top: + - match: '{{line_ending_ahead}}' + set: + - match: '{{line_continuation_lookahead}}' + set: variable-binding-top + - include: else-pop + - match: ',' + scope: punctuation.separator.comma.js + push: variable-binding-top + - include: else-pop + + variable-declaration: + - match: (?:const|let|var){{identifier_break}} + scope: keyword.declaration.js + set: + - expect-semicolon + - variable-binding-list-top + - variable-binding-top + + function-parameter-binding-pattern: + - include: function-parameter-binding-name + - include: function-parameter-binding-array-destructuring + - include: function-parameter-binding-object-destructuring + - include: else-pop + + function-parameter-binding-name: + - match: '{{non_reserved_identifier}}' + scope: meta.binding.name.js variable.parameter.function.js + - match: '{{identifier_name}}' + scope: invalid.illegal.identifier.js meta.binding.name.js variable.parameter.function.js + + function-parameter-binding-array-destructuring: + - match: '\[' + scope: punctuation.section.brackets.begin.js + set: + - meta_scope: meta.binding.destructuring.sequence.js + - match: '\]' + scope: punctuation.section.brackets.end.js + pop: true + - include: function-parameter-binding-list + + function-parameter-binding-object-destructuring: + - match: '\{' + scope: punctuation.section.block.begin.js + set: + - meta_scope: meta.binding.destructuring.mapping.js + - match: ',' + scope: punctuation.separator.parameter.function.js + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - include: function-parameter-binding-spread + - match: (?={{identifier_start}}|\[|'|") + push: + - initializer + - function-parameter-binding-object-alias + - object-literal-meta-key + - function-parameter-binding-object-key + + function-parameter-binding-object-alias: + - match: ':' + scope: punctuation.separator.key-value.js + set: function-parameter-binding-pattern + - include: else-pop + + function-parameter-binding-object-key: + - match: '{{identifier_name}}(?=\s*:)' + pop: true + - include: literal-string + - include: computed-property-name + - include: function-parameter-binding-name + - include: else-pop + + function-parameter-binding-spread: + - match: '\.\.\.' + scope: keyword.operator.spread.js + push: function-parameter + + function-parameter-binding-list: + - match: ',' + scope: punctuation.separator.parameter.function.js + - include: function-parameter-binding-spread + - match: (?={{binding_pattern_lookahead}}) + push: function-parameter + - include: else-pop + + function-parameter: + - match: '' + set: + - initializer + - function-parameter-binding-pattern + + initializer: + - match: '=' + scope: keyword.operator.assignment.js + set: expression-no-comma + - include: else-pop + + expression-statement: + - match: (?=\S) + set: + - expect-semicolon + - expression-statement-end + - expression-begin + + expression-statement-end: + - match: '{{line_ending_ahead}}' + set: + - match: '{{line_continuation_lookahead}}' + set: expression-statement-end + - include: else-pop + - include: expression-end + + restricted-production: + - meta_include_prototype: false + - match: '{{line_ending_ahead}}' + pop: true + - match: '' + set: expression-statement + + expect-case-colon: + - match: ':' + scope: punctuation.separator.js + pop: true + - include: else-pop + + conditional: + - match: switch{{identifier_break}} + scope: keyword.control.conditional.switch.js + set: + - switch-meta + - switch-block + - expect-parenthesized-expression + + - match: do{{identifier_break}} + scope: keyword.control.loop.do-while.js + set: + - do-while-meta + - do-while-condition + - statement + + - match: for{{identifier_break}} + scope: keyword.control.loop.for.js + set: + - for-meta + - block-scope + - for-condition + - for-await + + - match: while{{identifier_break}} + scope: keyword.control.loop.while.js + set: + - while-meta + - block-scope + - expect-parenthesized-expression + + - match: with{{identifier_break}} + scope: keyword.control.import.with.js + set: + - with-meta + - block-scope + - expect-parenthesized-expression + + - match: if{{identifier_break}} + scope: keyword.control.conditional.if.js + set: + - conditional-meta + - statement + - expect-parenthesized-expression + + - match: else\s+if{{identifier_break}} + scope: keyword.control.conditional.elseif.js + set: + - conditional-meta + - statement + - expect-parenthesized-expression + + - match: else{{identifier_break}} + scope: keyword.control.conditional.else.js + set: + - conditional-meta + - statement + + - match: try{{identifier_break}} + scope: keyword.control.exception.try.js + set: + - try-meta + - block-scope + + - match: finally{{identifier_break}} + scope: keyword.control.exception.finally.js + set: + - finally-meta + - block-scope + + - match: catch{{identifier_break}} + scope: keyword.control.exception.catch.js + set: + - catch-meta + - block-scope + - expect-parenthesized-expression + + expect-parenthesized-expression: + - include: parenthesized-expression + - include: else-pop + + switch-meta: + - meta_include_prototype: false + - meta_scope: meta.switch.js + - include: immediately-pop + + do-while-meta: + - meta_include_prototype: false + - meta_scope: meta.do-while.js + - include: immediately-pop + + for-meta: + - meta_include_prototype: false + - meta_scope: meta.for.js + - include: immediately-pop + + while-meta: + - meta_include_prototype: false + - meta_scope: meta.while.js + - include: immediately-pop + + with-meta: + - meta_include_prototype: false + - meta_scope: meta.with.js + - include: immediately-pop + + conditional-meta: + - meta_include_prototype: false + - meta_scope: meta.conditional.js + - include: immediately-pop + + try-meta: + - meta_include_prototype: false + - meta_scope: meta.try.js + - include: immediately-pop + + finally-meta: + - meta_include_prototype: false + - meta_scope: meta.finally.js + - include: immediately-pop + + catch-meta: + - meta_include_prototype: false + - meta_scope: meta.catch.js + - include: immediately-pop + + for-await: + - match: await{{identifier_break}} + scope: keyword.control.flow.await.js + pop: true + - include: else-pop + + for-condition: + - match: '\(' + scope: punctuation.section.group.js + set: + - for-condition-end + - for-condition-contents + - include: else-pop + + for-condition-end: + - meta_scope: meta.group.js + + - match: '\)' + scope: punctuation.section.group.js + pop: true + + for-condition-contents: + # This could be either type of for loop. + - match: (?:const|let|var){{identifier_break}} + scope: storage.type.js + set: + - - include: for-of-rest + - match: (?=\S) + set: + - for-oldstyle-rest + - variable-binding-list + - initializer + - variable-binding-pattern + + - match: (?=\S) + set: + - - include: for-of-rest + - match: (?=\S) + set: for-oldstyle-rest + - expression-end-no-in + - expression-begin + + for-of-rest: + - match: (?:of|in){{identifier_break}} + scope: keyword.operator.word.js + set: expression + + for-oldstyle-rest: + - match: (?=\)) + pop: true + - match: ; + scope: punctuation.separator.expression.js + - match: (?=\S) + push: expression + + block-scope: + - include: block + - include: else-pop + + block-meta: + - meta_include_prototype: false + - meta_scope: meta.block.js + - include: immediately-pop + + switch-block: + - match: '\{' + scope: punctuation.section.block.begin.js + set: switch-block-contents + - include: else-pop + + switch-block-contents: + - meta_scope: meta.block.js + + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + + - match: case{{identifier_break}} + scope: keyword.control.conditional.case.js + push: + - expect-case-colon + - expression + + - match: default{{identifier_break}} + scope: keyword.control.conditional.default.js + push: + - expect-case-colon + + - include: statements + + do-while-condition: + - match: while{{identifier_break}} + scope: keyword.control.loop.while.js + set: parenthesized-expression + - include: else-pop + + decorator: + - match: '@' + scope: punctuation.definition.annotation.js + push: + - decorator-meta + - decorator-expression-end + - decorator-expression-begin + + decorator-meta: + - meta_include_prototype: false + - meta_scope: meta.annotation.js + - include: immediately-pop + + decorator-name: + - match: '{{identifier_name}}{{left_expression_end_lookahead}}' + scope: variable.annotation.js + pop: true + + decorator-expression-end: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + push: + - include: decorator-name + - include: object-property + + - include: left-expression-end + + decorator-expression-begin: + - include: decorator-name + - include: expression-begin + + expression-break: + - match: (?=[;})\]]) + pop: true + + expression: + - meta_include_prototype: false + - match: '' + set: [ expression-end, expression-begin ] + + expression-no-comma: + - meta_include_prototype: false + - match: '' + set: [ expression-end-no-comma, expression-begin ] + + expression-list: + - include: expression-break + - include: comma-separator + - match: (?=\S) + push: expression-no-comma + + left-expression-end: + - include: expression-break + + - match: (?=`) + push: literal-string-template + + - match: (?=(?:{{dot_accessor}})?\() + push: function-call-arguments + + - include: property-access + + - include: else-pop + + expression-end: + - include: postfix-operators + - include: binary-operators + - include: ternary-operator + + - include: left-expression-end + + expression-end-no-comma: + - match: (?=,) + pop: true + - include: expression-end + + expression-end-no-in: + - match: (?=in{{identifier_break}}) + pop: true + - include: expression-end + + expression-begin: + - include: expression-break + + - include: yield-expression + - include: await-expression + + - include: regexp-complete + - include: literal-string + - include: tagged-template + - include: literal-string-template + - include: constructor + - include: literal-number + - include: prefix-operators + - include: import-meta-expression + + - include: class + - include: special-name + + - include: regular-function + + - match: (?={{reserved_word}}) + pop: true + + - match: (?={{identifier_name}}{{function_assignment_lookahead}}) + set: + - function-name-meta + - literal-variable + + - include: object-literal + + # Newline not allowed between `async` and parameters. + - match: (?=async{{identifier_break}}{{nothing}}(?:\(|{{identifier_start}})) + pop: true + branch_point: async-arrow-function + branch: + - async-arrow-function + - literal-variable + + - include: literal-call + + - match: (?={{identifier_start}}) + pop: true + branch_point: bare-arrow-function + branch: + - branch-possible-bare-arrow-function + - bare-arrow-function-fallback + + - match: (?=\() + pop: true + branch_point: parenthesized-arrow-function + branch: + - branch-possible-parenthesized-arrow-function + - parenthesized-arrow-function-fallback + + - include: array-literal + + - include: literal-private-variable + + - include: else-pop + + async-arrow-function: + - match: async{{identifier_break}} + scope: keyword.declaration.async.js + set: + - function-meta + - arrow-function-expect-body + - arrow-function-expect-arrow-or-fail-async + - arrow-function-expect-parameters + + arrow-function-expect-arrow-or-fail-async: + - match: '=>' + scope: keyword.declaration.function.arrow.js + pop: true + - match: (?=\S) + fail: async-arrow-function + + branch-possible-bare-arrow-function: + - meta_include_prototype: false + - match: '' + push: + - detect-bare-arrow + - literal-variable + + detect-bare-arrow: + - match: (?==>) + fail: bare-arrow-function + - match: (?=\S) + pop: 2 + + bare-arrow-function-fallback: + - meta_include_prototype: false + - match: '' + push: + - immediately-pop-2 + - arrow-function-declaration + + branch-possible-parenthesized-arrow-function: + - meta_include_prototype: false + - match: '' + push: + - detect-parenthesized-arrow + - parenthesized-expression + + detect-parenthesized-arrow: + - match: (?==>) + fail: parenthesized-arrow-function + - match: (?=\S) + pop: 2 + + parenthesized-arrow-function-fallback: + - meta_include_prototype: false + - match: '' + push: + - immediately-pop-2 + - arrow-function-declaration + + literal-string: + - match: "'" + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.single.js + - match: \' + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + - match: '"' + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.double.js + - match: \" + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + + tagged-template: + - match: '{{identifier_name}}(?=\s*`)' + scope: variable.function.tagged-template.js + pop: true + + literal-string-template: + - match: '`' + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.other.js + - match: "`" + scope: punctuation.definition.string.end.js + pop: true + - match: '\$\{' + scope: punctuation.section.interpolation.begin.js + push: + - clear_scopes: 1 + - meta_scope: meta.interpolation.js + - meta_content_scope: source.js.embedded + - match: '\}' + scope: punctuation.section.interpolation.end.js + pop: true + - match: (?=\S) + push: expression + - include: string-content + + string-content: + - match: \\\n + scope: constant.character.escape.newline.js + - match: \\(?:x\h\h|u\h\h\h\h|.) + scope: constant.character.escape.js + + regexp-complete: + - match: '/' + scope: punctuation.definition.string.begin.js + set: regexp + + regexp: + - meta_include_prototype: false + - meta_scope: meta.string.js string.regexp.js + - match: "/" + scope: punctuation.definition.string.end.js + set: + - meta_include_prototype: false + - meta_content_scope: meta.string.js string.regexp.js + - match: '[gimyus]' + scope: keyword.other.js + - match: '[A-Za-z0-9]' # Ignore unknown flags for future-compatibility + - include: immediately-pop + - match: '(?=.|\n)' + push: + - meta_include_prototype: false + - match: '(?=/)' + pop: true + - include: scope:source.regexp.js + + constructor: + - match: new{{identifier_break}} + scope: keyword.operator.word.new.js + set: + - match: (?=\s*\.) + set: new-target + - match: (?=\s*\S) + set: + - constructor-meta + - constructor-body-expect-arguments + - constructor-body-expect-class-end + - constructor-body-expect-class-begin + + constructor-meta: + - meta_include_prototype: false + - meta_scope: meta.function-call.constructor.js + - include: immediately-pop + + constructor-body-expect-arguments: + - include: function-call-arguments + - include: else-pop + + constructor-body-expect-class-end: + - include: property-access + - include: else-pop + + constructor-body-expect-class-begin: + - match: (?={{non_reserved_identifier}}\s*\() + set: + - include: support + - match: '{{dollar_only_identifier}}' + scope: variable.type.dollar.only.js punctuation.dollar.js + pop: true + - match: '{{dollar_identifier}}' + scope: variable.type.dollar.js + captures: + 1: punctuation.dollar.js + pop: true + - match: '{{identifier_name}}' + scope: variable.type.js + pop: true + - include: else-pop + + - include: expression-begin + + new-target: + - match: \. + scope: punctuation.accessor.dot.js + set: + - match: target{{identifier_break}} + scope: variable.language.target.js + pop: true + - include: else-pop + + - include: else-pop + + prefix-operators: + - match: '~' + scope: keyword.operator.bitwise.js + - match: '!(?!=)' + scope: keyword.operator.logical.js + - match: '--' + scope: keyword.operator.arithmetic.js + - match: '\+\+' + scope: keyword.operator.arithmetic.js + - match: \.\.\. + scope: keyword.operator.spread.js + - match: \+|\- + scope: keyword.operator.arithmetic.js + - match: (?:delete|typeof|void){{identifier_break}} + scope: keyword.operator.js + + binary-operators: + - match: instanceof{{identifier_break}} + scope: keyword.operator.js + push: expression-begin + - match: in{{identifier_break}} + scope: keyword.operator.js + push: expression-begin + - match: '=(?![=>])' + scope: keyword.operator.assignment.js + push: expression-begin + - 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 + push: expression-begin + - match: '&&|\|\||\?\?' + scope: keyword.operator.logical.js + push: expression-begin + - match: |- + (?x) + << | # 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 + push: expression-begin + - match: |- + (?x) + <= | # comparison left-to-right both + >= | # comparison left-to-right both + < | # comparison left-to-right both + > # comparison left-to-right both + scope: keyword.operator.comparison.js + push: expression-begin + - 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 + push: expression-begin + - match: |- + (?x) + / | # 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 + push: expression-begin + - match: ',' + scope: keyword.operator.comma.js # Comma operator, not punctuation. + push: expression-begin + + ternary-operator: + - match: '\?(?=[^.]|\.[0-9])' + scope: keyword.operator.ternary.js + set: + - ternary-operator-expect-colon + - expression-no-comma + + ternary-operator-expect-colon: + - match: ':' + scope: keyword.operator.ternary.js + set: expression-no-comma + - include: else-pop + + postfix-operators: + - match: '--' + scope: keyword.operator.arithmetic.js + - match: '\+\+' + scope: keyword.operator.arithmetic.js + + yield-expression: + - match: yield{{identifier_break}} + scope: keyword.control.flow.yield.js + set: + - match: $ + pop: true + - match: \* + scope: keyword.generator.asterisk.js + set: expression-begin + - match: (?=\S) + set: expression-begin + + await-expression: + - match: await{{identifier_break}} + scope: keyword.control.flow.await.js + + class: + - match: class{{identifier_break}} + scope: keyword.declaration.class.js + set: + - class-meta + - class-body + - class-extends + - class-name + + class-meta: + - meta_include_prototype: false + - meta_scope: meta.class.js + - include: immediately-pop + + class-body: + - match: '\{' + scope: punctuation.section.block.begin.js + set: class-body-contents + + - include: else-pop + + class-body-contents: + - meta_scope: meta.block.js + + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + + - match: \; + scope: punctuation.terminator.statement.js + + - include: decorator + + - match: constructor{{identifier_break}} + scope: entity.name.function.constructor.js + push: + - function-meta + - function-declaration-expect-body + - function-declaration-expect-parameters + + - include: class-element-modifiers + + - match: |- + (?x)(?= + \#? {{identifier_name}} + \s* = \s* + {{either_func_lookahead}} + ) + push: + - initializer + - function-name-meta + - literal-variable-base + + - match: (?=(?:get|set|async){{identifier_break}}) + branch_point: prefixed-method + branch: + - prefixed-method + - class-element + + - match: (?=\*) + push: method-declaration + + - match: (?={{class_element_name}}) + push: class-element + + class-element-modifiers: + - match: (?={{modifier}}) + branch_point: class-element-modifier + branch: + - class-element-modifier + - class-element + + class-element-modifier: + - match: '{{modifier}}' + scope: storage.modifier.js + set: + - match: (?={{class_element_name}}|\*) + pop: true + - match: (?=\S) + fail: class-element-modifier + + class-extends: + - match: extends{{identifier_break}} + scope: storage.modifier.extends.js + set: + - inherited-class-expression-end + - inherited-class-expression-begin + - include: else-pop + + inherited-class-name: + - match: '{{non_reserved_identifier}}{{left_expression_end_lookahead}}' + scope: entity.other.inherited-class.js + pop: true + + inherited-class-expression-end: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + push: + - include: inherited-class-name + - include: object-property + + - include: left-expression-end + + inherited-class-expression-begin: + - include: inherited-class-name + - include: expression-begin + + class-name: + - match: '{{non_reserved_identifier}}' + scope: entity.name.class.js + pop: true + - include: else-pop + + class-element: + - match: '' + pop: true + branch_point: class-field + branch: + - class-field + - method-declaration + + prefixed-method: + - match: (?:get|set){{identifier_break}} + scope: storage.type.accessor.js + set: + - meta_scope: meta.function.js + - match: (?={{class_element_name}}) + set: method-declaration + - match: (?=\S) + fail: prefixed-method + - match: (?:async){{identifier_break}} + scope: keyword.declaration.async.js + set: + - meta_scope: meta.function.js + - match: (?=\*|{{class_element_name}}) + set: method-declaration + - match: (?=\S) + fail: prefixed-method + + prefixed-object-literal-method: + - match: (?:get|set){{identifier_break}} + scope: storage.type.accessor.js + set: + - meta_scope: meta.function.js + - match: (?={{class_element_name}}) + set: method-declaration + - match: (?=\S) + fail: prefixed-object-literal-method + - match: (?:async){{identifier_break}} + scope: keyword.declaration.async.js + set: + - meta_scope: meta.function.js + - match: (?=\*|{{class_element_name}}) + set: method-declaration + - match: (?=\S) + fail: prefixed-object-literal-method + + class-field: + - match: '' + set: + - initializer + - class-field-check + - field-name + + class-field-check: + - match: (?=\() + fail: class-field + - include: else-pop + + special-name: + - match: true{{identifier_break}} + scope: constant.language.boolean.true.js + pop: true + - match: false{{identifier_break}} + scope: constant.language.boolean.false.js + pop: true + - match: null{{identifier_break}} + scope: constant.language.null.js + pop: true + - match: super{{identifier_break}} + scope: variable.language.super.js + pop: true + - match: this{{identifier_break}} + scope: variable.language.this.js + pop: true + + function-name-meta: + - meta_include_prototype: false + - meta_scope: entity.name.function.js + - include: immediately-pop + + regular-function: + - match: (?={{func_lookahead}}) + set: function-declaration + + function-declaration: + - meta_include_prototype: false + - match: '' + set: + - function-meta + - function-declaration-expect-body + - function-declaration-expect-parameters + - function-declaration-expect-name + - function-declaration-expect-generator-star + - function-declaration-expect-function-keyword + - function-declaration-expect-async + + function-declaration-expect-body: + - include: function-block + - include: else-pop + + function-meta: + - meta_include_prototype: false + - meta_scope: meta.function.js + - include: immediately-pop + + function-declaration-expect-parameters: + - include: function-declaration-parameters + - include: else-pop + + function-declaration-expect-name: + - match: '{{non_reserved_identifier}}' + scope: entity.name.function.js + pop: true + - include: else-pop + + function-declaration-expect-generator-star: + - match: \* + scope: keyword.declaration.generator.js + pop: true + - include: else-pop + + function-declaration-expect-function-keyword: + - match: function{{identifier_break}} + scope: keyword.declaration.function.js + pop: true + - include: else-pop + + function-declaration-expect-async: + - match: 'async{{identifier_break}}' + scope: keyword.declaration.async.js + pop: true + - include: else-pop + + arrow-function-declaration: + - meta_include_prototype: false + - match: '' + set: + - function-meta + - arrow-function-expect-body + - arrow-function-expect-arrow + - arrow-function-expect-parameters + + arrow-function-expect-body: + - include: function-block + - match: (?=\S) + set: + - block-meta + - expression-no-comma + + arrow-function-expect-arrow: + - match: '=>' + scope: keyword.declaration.function.arrow.js + pop: true + - include: else-pop + + arrow-function-expect-parameters: + - match: (?={{identifier_start}}) + set: + - clear_scopes: 1 + - meta_scope: meta.function.parameters.js + - match: '{{identifier_name}}' + scope: variable.parameter.function.js + pop: true + - include: function-declaration-parameters + - include: else-pop + + function-block: + - match: '\{' + scope: punctuation.section.block.begin.js + set: + - meta_scope: meta.block.js + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + - include: statements + + function-declaration-parameters: + - match: \( + scope: punctuation.section.group.begin.js + set: + - clear_scopes: 1 + - meta_scope: meta.function.parameters.js + - match: \) + scope: punctuation.section.group.end.js + pop: true + - include: function-parameter-binding-list + + label: + - match: '({{identifier_name}})\s*(:)' + captures: + 1: entity.name.label.js + 2: punctuation.separator.js + + object-literal: + - match: '\{' + scope: punctuation.section.block.begin.js + set: object-literal-contents + + object-literal-contents: + - meta_scope: meta.mapping.js + + - match: '\}' + scope: punctuation.section.block.end.js + pop: true + + - match: \.\.\. + scope: keyword.operator.spread.js + push: expression-no-comma + + - match: >- + (?x)(?= + {{property_name}}\s*:\s* + {{either_func_lookahead}} + ) + push: + - object-literal-meta-key + - method-name + + - match: (?=\*) + push: method-declaration + + - match: (?=(?:get|set|async){{identifier_break}}) + branch_point: prefixed-object-literal-method + branch: + - prefixed-object-literal-method + - object-literal-element + + - match: (?={{property_name}}) + push: object-literal-element + + - include: comma-separator + + - match: ':' + scope: punctuation.separator.key-value.js + push: expression-no-comma + + # If there's any garbage, parse it as an expression + # so that close braces won't break things. + - match: (?=\S) + push: expression-no-comma + + object-literal-element: + - match: '{{identifier_name}}(?=\s*(?:[},]|$|//|/\*))' + scope: variable.other.readwrite.js + pop: true + - match: (?=\S) + pop: true + branch_point: object-literal-property + branch: + - object-literal-property + - method-declaration + + object-literal-property: + - match: '' + set: + - object-literal-property-check + - object-literal-meta-key + - object-property-name + + object-property-name: + - match: (?=\[) + set: computed-property-name + + - include: literal-string + - include: literal-number + + - match: '{{identifier_name}}' + pop: true + + - include: else-pop + + object-literal-property-check: + - match: (?=\() + fail: object-literal-property + - include: else-pop + + computed-property-name: + - match: \[ + scope: punctuation.section.brackets.begin.js + set: + - match: \] + scope: punctuation.section.brackets.end.js + pop: true + - match: (?=\S) + push: expression + + object-literal-meta-key: + - meta_scope: meta.mapping.key.js + - include: else-pop + + method-name: + - match: '{{dollar_identifier}}' + scope: meta.mapping.key.dollar.js entity.name.function.js + captures: + 1: punctuation.dollar.js + pop: true + - match: '{{identifier_name}}' + scope: entity.name.function.js + pop: true + - match: '(#){{identifier_name}}' + scope: entity.name.function.js + captures: + 1: punctuation.definition.js + pop: true + - match: "'" + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.single.js + - meta_content_scope: entity.name.function.js + - match: \' + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + - match: '"' + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.double.js + - meta_content_scope: entity.name.function.js + - match: \" + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + + - match: (?=\[) + push: computed-property-name + + - include: else-pop + + field-name: + - match: '{{dollar_identifier}}' + scope: meta.mapping.key.dollar.js variable.other.readwrite.js + captures: + 1: punctuation.dollar.js + pop: true + - match: '{{identifier_name}}' + scope: variable.other.readwrite.js + pop: true + - match: "'" + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.single.js + - meta_content_scope: variable.other.readwrite.js + - match: \' + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + - match: '"' + scope: punctuation.definition.string.begin.js + set: + - meta_include_prototype: false + - meta_scope: meta.string.js string.quoted.double.js + - meta_content_scope: variable.other.readwrite.js + - match: \" + scope: punctuation.definition.string.end.js + pop: true + - match: \n + scope: invalid.illegal.newline.js + pop: true + - include: string-content + - match: (#)({{identifier_name}}) + captures: + 1: punctuation.definition.variable.js + 2: variable.other.readwrite.js + + - match: (?=\[) + push: computed-property-name + + - include: else-pop + + method-declaration: + - meta_include_prototype: false + - match: '' + set: + - function-meta + - function-declaration-expect-body + - function-declaration-expect-parameters + - method-name + - method-declaration-expect-asterisk + + method-declaration-expect-asterisk: + - match: \* + scope: keyword.generator.asterisk.js + - include: else-pop + + parenthesized-expression: + - match: \( + scope: punctuation.section.group.begin.js + set: + - meta_scope: meta.group.js + - match: \) + scope: punctuation.section.group.end.js + pop: true + - match: (?=\S) + push: expression + + function-call-arguments: + - match: ({{dot_accessor}})?(\() + captures: + 1: punctuation.accessor.js + 2: punctuation.section.group.begin.js + set: + - meta_scope: meta.group.js + - match: \) + scope: punctuation.section.group.end.js + pop: true + - include: expression-list + + array-literal: + - match: '\[' + scope: punctuation.section.brackets.begin.js + set: + - meta_scope: meta.sequence.js + - match: '\]' + scope: punctuation.section.brackets.end.js + pop: true + - include: expression-list + + property-access: + - match: ({{dot_accessor}})?(\[) + captures: + 1: punctuation.accessor.js + 2: punctuation.section.brackets.begin.js + push: + - meta_scope: meta.brackets.js + - match: '\]' + scope: punctuation.section.brackets.end.js + pop: true + - match: (?=\S) + push: expression + + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + push: + - match: '(?={{identifier_name}}\s*(?:{{dot_accessor}})?\()' + set: + - call-method-meta + - function-call-arguments + - call-path + - object-property + - include: object-property + + literal-number: + # floats + - match: |- + (?x: + # 1., 1.1, 1.1e1, 1.1e-1, 1.e1, 1.e-1 | 1e1, 1e-1 + {{dec_integer}} (?: (\.) {{dec_digit}}* (?:{{dec_exponent}})? | {{dec_exponent}} ) + # .1, .1e1, .1e-1 + | (\.) {{dec_digit}}+ (?:{{dec_exponent}})? + ){{identifier_break}} + scope: meta.number.float.decimal.js constant.numeric.value.js + captures: + 1: punctuation.separator.decimal.js + 2: punctuation.separator.decimal.js + pop: true + + # integers + - match: (0)({{dec_digit}}+){{identifier_break}} + scope: meta.number.integer.octal.js + captures: + 1: constant.numeric.base.js invalid.deprecated.numeric.octal.js + 2: constant.numeric.value.js invalid.deprecated.numeric.octal.js + pop: true + + - match: (0[Xx])({{hex_digit}}*)(n)?{{identifier_break}} + scope: meta.number.integer.hexadecimal.js + captures: + 1: constant.numeric.base.js + 2: constant.numeric.value.js + 3: constant.numeric.suffix.js + pop: true + + - match: (0[Oo])({{oct_digit}}*)(n)?{{identifier_break}} + scope: meta.number.integer.octal.js + captures: + 1: constant.numeric.base.js + 2: constant.numeric.value.js + 3: constant.numeric.suffix.js + pop: true + + - match: (0[Bb])({{bin_digit}}*)(n)?{{identifier_break}} + scope: meta.number.integer.binary.js + captures: + 1: constant.numeric.base.js + 2: constant.numeric.value.js + 3: constant.numeric.suffix.js + pop: true + + - match: ({{dec_integer}})(n|(?!\.)){{identifier_break}} + scope: meta.number.integer.decimal.js + captures: + 1: constant.numeric.value.js + 2: constant.numeric.suffix.js + pop: true + + # illegal numbers + - match: 0[Xx]{{identifier_part}}+ + scope: invalid.illegal.numeric.hexadecimal.js + pop: true + + - match: 0[Bb]{{identifier_part}}+ + scope: invalid.illegal.numeric.binary.js + pop: true + + - match: 0{{identifier_part}}+ + scope: invalid.illegal.numeric.octal.js + pop: true + + - match: '[1-9]{{identifier_part}}+(?:\.{{identifier_part}}*)?' + scope: invalid.illegal.numeric.decimal.js + pop: true + + literal-call: + - match: (?={{identifier_name}}\s*(?:{{dot_accessor}})?\() + set: + - call-function-meta + - function-call-arguments + - literal-variable + + - match: (?={{identifier_name}}\s*(?:{{dot_accessor}}\s*#?{{identifier_name}}\s*)+(?:{{dot_accessor}})?\() + set: + - call-method-meta + - function-call-arguments + - call-path + - literal-variable + + call-path: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + push: object-property + - include: else-pop + + call-function-meta: + - meta_include_prototype: false + - meta_scope: meta.function-call.js + - include: else-pop + + call-method-meta: + - meta_include_prototype: false + - meta_scope: meta.function-call.method.js + - include: else-pop + + call-function-name: + - match: '{{dollar_only_identifier}}' + scope: variable.function.js variable.other.dollar.only.js punctuation.dollar.js + pop: true + - match: '{{identifier_name}}' + scope: variable.function.js + pop: true + - include: else-pop + + call-method-name: + - include: support-property + - match: '{{identifier_name}}' + scope: variable.function.js + pop: true + - match: '(#){{identifier_name}}' + scope: variable.function.js + captures: + 1: punctuation.definition.js + pop: true + - include: else-pop + + literal-variable: + - include: special-identifier + - include: support + + - match: '(?={{identifier_name}}{{function_assignment_lookahead}})' + set: + - function-name-meta + - literal-variable-base + + - match: '{{constant_identifier}}(?=\s*(?:{{dot_accessor}}|\[))' + scope: support.class.js + pop: true + + - match: '{{function_call_lookahead}}' + set: call-function-name + + - include: literal-variable-base + + literal-variable-base: + - match: '{{dollar_only_identifier}}' + scope: variable.other.dollar.only.js punctuation.dollar.js + pop: true + - match: '{{dollar_identifier}}' + scope: variable.other.dollar.js + captures: + 1: punctuation.dollar.js + pop: true + - match: '{{constant_identifier}}' + scope: variable.other.constant.js + pop: true + - match: '{{identifier_name}}' + scope: variable.other.readwrite.js + pop: true + - include: literal-private-variable + + literal-private-variable: + - match: (#)({{identifier_name}}) + captures: + 1: punctuation.definition.variable.js + 2: variable.other.readwrite.js + pop: true + + special-identifier: + # These are ordinary identifiers, not reserved words + - match: arguments{{identifier_break}} + scope: variable.language.arguments.js + pop: true + - match: globalThis{{identifier_break}} + scope: variable.language.global.js + pop: true + - match: undefined{{identifier_break}} + scope: constant.language.undefined.js + pop: true + - match: NaN{{identifier_break}} + scope: constant.language.nan.js + pop: true + - match: Infinity{{identifier_break}} + scope: constant.language.infinity.js + pop: true + + support: + - include: support-variable-ecma + - include: support-variable-console + - include: support-variable-dom + - include: support-variable-node + + support-variable-ecma: + - match: Array{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-array + - include: object-property + - include: else-pop + - include: else-pop + + - match: ArrayBuffer{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-arraybuffer + - include: object-property + - include: else-pop + - include: else-pop + + - match: Atomics{{identifier_break}} + scope: support.constant.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-atomics + - include: object-property + - include: else-pop + - include: else-pop + + - match: BigInt{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-bigint + - include: object-property + - include: else-pop + - include: else-pop + + - match: Date{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-date + - include: object-property + - include: else-pop + - include: else-pop + + - match: JSON{{identifier_break}} + scope: support.constant.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-json + - include: object-property + - include: else-pop + - include: else-pop + + - match: Math{{identifier_break}} + scope: support.constant.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-math + - include: object-property + - include: else-pop + - include: else-pop + + - match: Number{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-number + - include: object-property + - include: else-pop + - include: else-pop + + - match: Object{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-object + - include: object-property + - include: else-pop + - include: else-pop + + - match: Promise{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-promise + - include: object-property + - include: else-pop + - include: else-pop + + - match: Proxy{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-proxy + - include: object-property + - include: else-pop + - include: else-pop + + - match: Reflect{{identifier_break}} + scope: support.constant.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-reflect + - include: object-property + - include: else-pop + - include: else-pop + + - match: String{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-string + - include: object-property + - include: else-pop + - include: else-pop + + - match: Symbol{{identifier_break}} + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-symbol + - include: object-property + - include: else-pop + - include: else-pop + + - match: |- + (?x: + (?: + BigInt64| + BigUint64| + Float(?:32|64)| + Int(?:8|16|32)| + Uint(?:8|16|32|32Clamped) + ) + Array{{identifier_break}} + ) + scope: support.class.builtin.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-ecma-typedarray + - include: object-property + - include: else-pop + - include: else-pop + + # Classes with no constructor properties + - match: (?:Boolean|DataView|Function|Map|RegExp|Set|WeakMap|WeakSet){{identifier_break}} + scope: support.class.builtin.js + pop: true + - match: (?:Eval|Range|Reference|Syntax|Type|URI)?Error{{identifier_break}} + scope: support.class.builtin.js + pop: true + + - match: (?:eval|isFinite|isNaN|parseFloat|parseInt|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent){{identifier_break}} + scope: support.function.js + pop: true + + support-property-ecma-array: + - match: (?:from|isArray|of){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-arraybuffer: + - match: isView{{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-atomics: + - match: (?:and|add|compareExchange|exchange|isLockFree|load|or|store|sub|wait|wake|xor){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-bigint: + - match: (?:asUintN|asIntN){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-date: + - match: (?:now|parse|UTC){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-json: + - match: (?:parse|stringify){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-math: + - match: (?:E|LN10|LN2|LOG10E|LOG2E|PI|SQRT1_2|SQRT2){{identifier_break}} + scope: support.constant.builtin.js + pop: true + - match: (?:abs|acos|acosh|asin|asin|atan|atanh|atan2|cbrt|ceil|clz32|cos|cosh|exp|expm1|floor|fround|hypot|imul|log|log1p|log10|log2|max|min|pow|random|round|sign|sin|sinh|sqrt|tan|tanh|trunc){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-number: + - match: (?:EPSILON|MAX_SAFE_INTEGER|MAX_VALUE|MIN_SAFE_INTEGER|MIN_VALUE|NEGATIVE_INFINITY|POSITIVE_INFINITY){{identifier_break}} + scope: support.constant.builtin.js + pop: true + - match: (?:isFinite|isInteger|isNaN|isSafeInteger|NaN|parseFloat|parseInt){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-object: + - match: (?:assign|create|defineProperties|defineProperty|entries|freeze|fromEntries|getOwnPropertyDescriptors?|getOwnPropertyNames|getOwnPropertySymbols|getPrototypeOf|is|isExtensible|isFrozen|isSealed|keys|preventExtensions|seal|setPrototypeOf|values){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-promise: + - match: (?:all|race|reject|resolve|allSettled|any){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-proxy: + - match: revocable{{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-reflect: + - match: (?:apply|construct|defineProperty|deleteProperty|get|getOwnPropertyDescriptor|getPrototypeOf|has|isExtensible|ownKeys|preventExtensions|set|setPrototypeOf){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-string: + - match: (?:fromCharCode|fromCodePoint|raw){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-symbol: + - match: (?:asyncIterator|hasInstance|isConcatSpreadable|iterator|match|replace|search|species|split|toPrimitive|toStringTag|unscopeables){{identifier_break}} + scope: support.constant.builtin.js + pop: true + - match: (?:for|keyFor){{identifier_break}} + scope: support.function.builtin.js + pop: true + + support-property-ecma-typedarray: + - match: (?:BYTES_PER_ELEMENT){{identifier_break}} + scope: support.constant.builtin.js + pop: true + + support-variable-console: + # https://console.spec.whatwg.org/ + - match: console{{identifier_break}} + scope: support.type.object.console.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: builtin-console-properties + - include: else-pop + + support-variable-dom: + - match: XMLHttpRequest{{identifier_break}} + scope: support.class.dom.js + pop: true + - match: (?:document|window|navigator){{identifier_break}} + scope: support.type.object.dom.js + pop: true + - match: (?:clearTimeout|setTimeout){{identifier_break}} + scope: support.function.dom.js + pop: true + + support-variable-node: + - match: global{{identifier_break}} + scope: support.type.object.node.js + pop: true + + - match: Buffer{{identifier_break}} + scope: support.class.node.js + pop: true + + - match: process{{identifier_break}} + scope: support.constant.node.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-node-process + - include: object-property + - include: else-pop + - include: else-pop + + # Module-level variables + - match: (?:__dirname|__filename|exports){{identifier_break}} + scope: support.constant.node.js + pop: true + - match: module{{identifier_break}} + scope: support.constant.node.js + set: + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - include: support-property-node-module + - include: object-property + - include: else-pop + - include: else-pop + - match: require{{identifier_break}} + scope: support.function.node.js + pop: true + + support-property-node-process: + - match: (?:arch|argv|argv0|channel|config|connected|debugPort|env|execArgv|execPath|exitCode|mainModule|noDeprecation|pid|platform|ppid|release|stderr|stdin|stdout|throwDeprecation|title|traceDeprecation|version|versions){{identifier_break}} + scope: support.constant.node.js + pop: true + - match: (?:abort|chdir|cpuUsage|cwd|disconnect|dlopen|emitWarning|exit|getegid|geteuid|getgit|getgroups|getuid|hasUncaughtExceptionCaptureCallback|hrtime|initGroups|kill|memoryUsage|nextTick|send|setegid|seteuid|setgid|setgroups|setuid|hasUncaughtExceptionCaptureCallback|umask|uptime){{identifier_break}} + scope: support.function.node.js + pop: true + + support-property-node-module: + - match: (?:children|exports|filename|id|loaded|parent|paths){{identifier_break}} + scope: support.constant.node.js + pop: true + - match: require{{identifier_break}} + scope: support.function.node.js + pop: true + + builtin-console-properties: + - match: (?:warn|info|log|error|time|timeEnd|assert|count|dir|group|groupCollapsed|groupEnd|profile|profileEnd|table|trace|timeStamp){{identifier_break}} + scope: support.function.console.js + pop: true + - include: object-property + + object-property: + - include: support-property + + - match: (?=\#?{{identifier_name}}{{function_assignment_lookahead}}) + set: + - function-name-meta + - object-property-base + + - match: '(?=#?{{identifier_name}}\s*(?:{{dot_accessor}})?\()' + set: call-method-name + + - include: object-property-base + - include: else-pop + + object-property-base: + - match: '{{dollar_only_identifier}}' + scope: meta.property.object.dollar.only.js punctuation.dollar.js + pop: true + - match: '{{dollar_identifier}}' + scope: meta.property.object.dollar.js + captures: + 1: punctuation.dollar.js + pop: true + - match: '{{identifier_name}}' + scope: meta.property.object.js + pop: true + - match: '{{identifier_part}}+{{identifier_break}}' + scope: invalid.illegal.illegal-identifier.js + pop: true + - match: (#)({{identifier_name}}) + captures: + 1: punctuation.definition.variable.js + 2: meta.property.object.js + pop: true + + support-property: + - include: support-property-ecma + + support-property-ecma: + - match: constructor{{identifier_break}} + scope: variable.language.constructor.js + pop: true + - match: prototype{{identifier_break}} + scope: support.constant.prototype.js + pop: true + + - match: (?:hasOwnProperty|isPrototypeOf|propertyIsEnumerable|toLocaleString|toString|valueOf){{identifier_break}} + scope: support.function.js + pop: true + + # Annex B + - match: __proto__{{identifier_break}} + scope: invalid.deprecated.js variable.language.prototype.js + pop: true + - match: (?:__defineGetter__|__defineSetter__|__lookupGetter__){{identifier_break}} + scope: invalid.deprecated.js support.function.js + pop: true + + import-meta-expression: + - match: import{{identifier_break}} + scope: keyword.import.js + set: import-expression-end + + import-expression-end: + - match: (?=\() + set: function-call-arguments + - match: '{{dot_accessor}}' + scope: punctuation.accessor.js + set: + - match: meta{{identifier_break}} + scope: variable.language.import.js + pop: true + - include: object-property + - include: else-pop diff --git a/syntaxes/JavaScript/Regular Expressions (JavaScript).sublime-syntax b/syntaxes/JavaScript/Regular Expressions (JavaScript).sublime-syntax @@ -0,0 +1,131 @@ +%YAML 1.2 +--- +name: Regular Expressions (Javascript) +scope: source.regexp.js +hidden: true +variables: + identifier: '[_$[:alpha:]][_$[:alnum:]]*' +contexts: + main: + - include: anchor + - include: backref + - include: quantifier + - include: operator + - include: group-assertion + - include: group-definition + - include: character-class + - include: character-class-definition + + anchor: + - match: '\\[bB]|\^|\$' + scope: keyword.control.anchor.regexp + + backref: + - match: '\\[1-9][0-9]*' + scope: keyword.other.back-reference.regexp + + - match: (\\k)(<)({{identifier}})(>) + captures: + 1: keyword.other.back-reference.regexp + 2: punctuation.definition.group.named.begin.regexp + 3: variable.other.group.regexp + 4: punctuation.definition.group.named.end.regexp + + character-class: + - match: '\\[wWsSdD]|\.' + scope: constant.other.character-class.escape.backslash.regexp + - match: '(\\[pP])(\{)([[:alpha:]_]+)(?:(=)([[:alpha:]_]+)?)?(\})' + captures: + 1: constant.other.character-class.escape.unicode-property.regexp + 2: punctuation.definition.unicode-property.begin.regexp + 3: support.constant.unicode-property.regexp + 4: punctuation.separator.key-value.unicode-property.regexp + 5: support.constant.unicode-property.regexp + 6: punctuation.definition.unicode-property.end.regexp + - match: '\\([trnvf0\\]|c[A-Z]|x[\da-fA-F]{2}|u[\da-fA-F]{4}|.)' + scope: constant.character.escape.backslash.regexp + + character-class-definition: + - match: '(\[)(\^)?' + captures: + 1: punctuation.definition.character-class.begin.regexp + 2: keyword.operator.negation.regexp + push: + - meta_scope: constant.other.character-class.set.regexp + - match: '\]' + scope: punctuation.definition.character-class.end.regexp + pop: true + - match: |- + (?x) + (?: + (\\[wWsSdD]|\.)| + (\\(?:[trnvf0]|c[A-Z]|x[\da-fA-F]{2}|u[\da-fA-F]{4}|.))| + . + ) + (\-) + (?: + (\\[wWsSdD]|\.)| + (\\(?:[trnvf0]|c[A-Z]|x[\da-fA-F]{2}|u[\da-fA-F]{4}|.))| + [^]] + ) + scope: constant.other.character-class.range.regexp + captures: + 1: constant.other.character-class.escape.backslash.regexp + 2: constant.character.escape.backslash.regexp + 3: punctuation.definition.range.regexp + 4: constant.other.character-class.escape.backslash.regexp + 5: constant.character.escape.backslash.regexp + - include: character-class + + group-assertion: + - match: (\()((\?=)|(\?!)|(\?<=)|(\?<!)) + captures: + 1: punctuation.definition.group.begin.regexp + 2: punctuation.definition.group.assertion.regexp + 3: meta.assertion.look-ahead.regexp + 4: meta.assertion.negative-look-ahead.regexp + 5: meta.assertion.look-behind.regexp + 6: meta.assertion.negative-look-behind.regexp + push: + - meta_scope: meta.group.assertion.regexp + - match: \) + scope: punctuation.definition.group.end.regexp + pop: true + - include: main + + group-definition: + - match: (\()(?:(\?:)|(\?)(<)({{identifier}})(>))? + captures: + 1: punctuation.definition.group.begin.regexp + 2: punctuation.definition.group.no-capture.regexp + 3: punctuation.definition.group.begin.regexp + 4: punctuation.definition.group.named.begin.regexp + 5: entity.name.other.group.regexp + 6: punctuation.definition.group.named.end.regexp + push: + - meta_scope: meta.group.regexp + - match: \) + scope: punctuation.definition.group.end.regexp + pop: true + - include: main + + operator: + - match: \| + scope: keyword.operator.or.regexp + + quantifier: + - match: '[?*+]\??' + scope: keyword.operator.quantifier.regexp + + - match: '\{(\d+)(?:(,)(\d+)?)?\}' + scope: keyword.operator.quantifier.regexp + captures: + 1: constant.literal.numeric.regexp + 2: punctuation.separator.comma.regexp + 3: constant.literal.numeric.regexp + + - match: \{(,)(\d+)\} + scope: keyword.operator.quantifier.regexp + captures: + 1: punctuation.separator.comma.regexp + 2: constant.literal.numeric.regexp diff --git a/syntaxes/JavaScript/Snippets/Get-Elements.sublime-snippet b/syntaxes/JavaScript/Snippets/Get-Elements.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[getElement${1/(T)|.*/(?1:s)/}By${1:T}${1/(T)|(I)|.*/(?1:agName)(?2:d)/}('$2')]]></content> + <tabTrigger>get</tabTrigger> + <scope>source.js</scope> + <description>Get Elements</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/Object-Method.sublime-snippet b/syntaxes/JavaScript/Snippets/Object-Method.sublime-snippet @@ -0,0 +1,8 @@ +<snippet> + <content><![CDATA[${1:method_name}: function(${3:attribute}) { + $0 +}${10:,}]]></content> + <tabTrigger>o:f</tabTrigger> + <scope>source.js</scope> + <description>Object Method</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/Object-Value-JS.sublime-snippet b/syntaxes/JavaScript/Snippets/Object-Value-JS.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[${1:value_name}: ${0:value},]]></content> + <tabTrigger>:,</tabTrigger> + <scope>source.js</scope> + <description>Object Value JS</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/Object-key-key-value.sublime-snippet b/syntaxes/JavaScript/Snippets/Object-key-key-value.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[${1:key}: ${2:"${3:value}"}${4:, }]]></content> + <tabTrigger>:</tabTrigger> + <scope>source.js</scope> + <description>Object key — key: "value"</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/Prototype-(proto).sublime-snippet b/syntaxes/JavaScript/Snippets/Prototype-(proto).sublime-snippet @@ -0,0 +1,9 @@ +<snippet> + <content><![CDATA[${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) { + ${0:// body...} +}; +]]></content> + <tabTrigger>proto</tabTrigger> + <scope>source.js</scope> + <description>Prototype</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/for-()-{}-(faster).sublime-snippet b/syntaxes/JavaScript/Snippets/for-()-{}-(faster).sublime-snippet @@ -0,0 +1,8 @@ +<snippet> + <content><![CDATA[for (var ${20:i} = ${1:Things}.length - 1; ${20:i} >= 0; ${20:i}--) { + ${100:${1:Things}[${20:i}]}$0 +}]]></content> + <tabTrigger>for</tabTrigger> + <scope>source.js</scope> + <description>for (…) {…} (Improved Native For-Loop)</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/for-()-{}.sublime-snippet b/syntaxes/JavaScript/Snippets/for-()-{}.sublime-snippet @@ -0,0 +1,8 @@ +<snippet> + <content><![CDATA[for (var ${20:i} = 0; ${20:i} < ${1:Things}.length; ${20:i}++) { + ${100:${1:Things}[${20:i}]}$0 +}]]></content> + <tabTrigger>for</tabTrigger> + <scope>source.js</scope> + <description>for (…) {…}</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/function-(fun).sublime-snippet b/syntaxes/JavaScript/Snippets/function-(fun).sublime-snippet @@ -0,0 +1,8 @@ +<snippet> + <content><![CDATA[function ${1:function_name}(${2:argument}) { + ${0:// body...} +}]]></content> + <tabTrigger>fun</tabTrigger> + <scope>source.js</scope> + <description>Function</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/function.sublime-snippet b/syntaxes/JavaScript/Snippets/function.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[function($1) {${0:$TM_SELECTED_TEXT}}]]></content> + <tabTrigger>f</tabTrigger> + <scope>source.js</scope> + <description>Anonymous Function</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/if-___-else.sublime-snippet b/syntaxes/JavaScript/Snippets/if-___-else.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}} else {}]]></content> + <tabTrigger>ife</tabTrigger> + <scope>source.js</scope> + <description>if … else</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/if.sublime-snippet b/syntaxes/JavaScript/Snippets/if.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[if (${1:true}) {${0:$TM_SELECTED_TEXT}}]]></content> + <tabTrigger>if</tabTrigger> + <scope>source.js</scope> + <description>if</description> +</snippet> diff --git a/syntaxes/JavaScript/Snippets/setTimeout-function.sublime-snippet b/syntaxes/JavaScript/Snippets/setTimeout-function.sublime-snippet @@ -0,0 +1,6 @@ +<snippet> + <content><![CDATA[setTimeout(function() {$0}${2:}, ${1:10});]]></content> + <tabTrigger>timeout</tabTrigger> + <scope>source.js</scope> + <description>setTimeout function</description> +</snippet> diff --git a/syntaxes/JavaScript/Symbol List - Exports.tmPreferences b/syntaxes/JavaScript/Symbol List - Exports.tmPreferences @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string> + meta.export.js meta.binding.name - meta.export.js meta.function meta.binding.name + </string> + <key>settings</key> + <dict> + <key>showInIndexedSymbolList</key> + <string>1</string> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/Symbol List.tmPreferences b/syntaxes/JavaScript/Symbol List.tmPreferences @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<plist version="1.0"> +<dict> + <key>scope</key> + <string> + entity.name.interface.js + </string> + <key>settings</key> + <dict> + <key>showInSymbolList</key> + <string>1</string> + <key>showInIndexedSymbolList</key> + <string>1</string> + </dict> +</dict> +</plist> diff --git a/syntaxes/JavaScript/TSX.sublime-settings b/syntaxes/JavaScript/TSX.sublime-settings @@ -0,0 +1,3 @@ +{ + "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?", +} diff --git a/syntaxes/JavaScript/TypeScript.sublime-settings b/syntaxes/JavaScript/TypeScript.sublime-settings @@ -0,0 +1,3 @@ +{ + "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?", +} diff --git a/syntaxes/JavaScript/tests/syntax_test_js.js b/syntaxes/JavaScript/tests/syntax_test_js.js @@ -0,0 +1,1551 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + +// This object literal is technically broken since foo() does not have a +// method body, but we include it here to ensure that highlighting is not +// broken as the user is typing +let a = { otherIdentifier, foo(), baz: 1 } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.mapping +// ^^^^^^^^^^^^^^^ variable.other.readwrite +// ^^^ entity.name.function +// ^^^ meta.mapping.key + +someFunction({ + prop1, prop2, prop3 +// ^ variable.other.readwrite +// ^ variable.other.readwrite +// ^ variable.other.readwrite +}); + + function foo() { +// ^^^^^^^^^^^^^^^^ meta.function - meta.function meta.function +// ^^^^^^^^ keyword.declaration.function +// ^^^ entity.name.function + } +// ^ meta.function meta.block + + var bar = function() { +// ^^^ keyword.declaration +// ^^^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^ meta.function - meta.function meta.function +// ^^^^^^^^ keyword.declaration.function + } + + baz = function*() +// ^^^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^ meta.function - meta.function meta.function +// ^^^^^^^^ keyword.declaration.function +// ^ keyword.declaration.generator + { + + } + + async /**//**//**/ function foo() {} +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function + +// Better highlighting when typing +function +function() {} +// <- keyword.declaration.function - entity.name.function + +function foo(){}/**/ +// ^ - meta.function + +// This is a comment function() { } +// <- punctuation.definition.comment +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ comment.line.double-slash + +/** +// <- comment.block.documentation punctuation.definition.comment.begin +*/ +// <- comment.block.documentation punctuation.definition.comment.end + +/** + * +// ^ comment.block.documentation.js punctuation.definition.comment.js +*/ + +/* +// <- comment.block punctuation.definition.comment +*/ + +x --> y; +//^^ keyword.operator.arithmetic.js +// ^ keyword.operator.comparison.js + +#! /usr/bin/env node +// <- comment.line.shebang punctuation.definition.comment + + #! /usr/bin/env node +//^^^^^^^^^^^^^^^^^^^ - comment.line.shebang + +/*@if /*/ +// ^^ punctuation.definition.comment.end + +// /* +not_a_comment; +// <- -comment + +/* // */ +not_a_comment; +// <- -comment + +/* /* */ +not_a_comment; +// <- -comment + +'// /* not a comment'; +// ^^^^^^^^^^^^^^^^^^^ -comment + +"// /* not a comment"; +// ^^^^^^^^^^^^^^^^^^^ -comment + +`// /* not a comment`; +// ^^^^^^^^^^^^^^^^^^^ -comment + +({ + '// /* not a comment': x => x, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -comment + + "// /* not a comment": x => x, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -comment + + '// /* not a comment'() {}, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -comment() {} + + "// /* not a comment"() {}, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ -comment() {} +}); + +1 + /* Block Comment */ +// ^^^^^^^^^^^^^^^^^^^ comment.block + +{ + let _$Foobar1Ù𝓩ʷªאξ‿ᛮↂ〩; +// ^^^^^^^^^^^^^^^^^^^ variable.other.readwrite + + let ಠ_ಠ; +// ^^^ variable.other.readwrite + + function \u004axyz () {}; // Letter J +// ^^^^^^^^^ entity.name.function + + function xyz\u004axyz () {}; +// ^^^^^^^^^^^^ entity.name.function + + function xyz\u{0ca0}xyz () {}; // Letter ಠ +// ^^^^^^^^^^^^^^ entity.name.function + + import$;export$;class$;throw$;break$;continue$;goto$;return$;debugger$;let$;const$;var$; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - keyword + + switch$;do$;while$;for$;if$;with$:try$;catch$;finally$;new$;delete$;typeof$;void$; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - keyword + + true$;false$;null$;undefined$;NaN$;Infinity$;this$; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - constant.language + + x + instanceof$; +// ^^^^^^^^^^^ - keyword + + x + in$; +// ^^^ - keyword + + await$ []; +// ^^^^^^ variable.other +// ^^ meta.brackets - meta.sequence + + yield$ []; +// ^^^^^^ variable.other +// ^^ meta.brackets - meta.sequence + +}; + +var str = '\':'; +var str2 = NaN; +// <- keyword.declaration +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^^ constant.language.nan + +tag`Hello ${ a + b } world\nanother ${expression}.`; +// <- variable.function.tagged-template +// ^ punctuation.definition.string.begin +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string +// ^^^^^^^ string.quoted.other +// ^^^^^^^^^^ meta.interpolation - string +// ^ punctuation.section.interpolation.begin +// ^ variable.other.readwrite +// ^ keyword.operator.arithmetic +// ^ source.js.embedded +// ^ punctuation.section.interpolation.end +// ^^^^^^^^^^^^^^^^ string.quoted.other +// ^ constant.character.escape +// ^^^^^^^^^^^^^ meta.interpolation - string +// ^^ punctuation.section.interpolation.begin +// ^ punctuation.section.interpolation.end +// ^^ string.quoted.other +// ^ punctuation.definition.string.end + +tag `template`; +// <- variable.function.tagged-template +// ^^^^^^^^^^ meta.string string.quoted.other + +x ? y // y is a template tag! +`template` : z; +// ^ keyword.operator.ternary + + 1`` + /a/; +// ^^^ - string +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +mylabel: +// ^ entity.name.label +// ^ punctuation.separator + +// Ensure a ternary identifier isn't recognized as a label +true ? str : str2 +// ^ - entity.name.label + +a = test ? a + b : c; +// ^ variable.other.readwrite +// ^ variable.other.readwrite + +{{foo}} +// ^ meta.block meta.block variable.other.readwrite + +var obj = { +// ^ meta.mapping punctuation.section.block.begin - meta.block + key: bar, + // <- meta.mapping.key + $key2: "string value", + // ^ meta.mapping.key + // ^ - constant.other + // ^^^^^^^^^^^^^^ meta.string string.quoted.double + + $keyFunc: function() { +// ^^^^^^^^ meta.mapping.key.dollar entity.name.function +// ^ punctuation.dollar +// ^^^^^^^ - punctuation.dollar +// ^^^^^^^^^^^^ meta.function + }, + + class: null, // Keys are IdentifierNames, not merely Identifiers +// ^^^^^ meta.mapping.key + + [true==false ? 'one' : 'two']: false, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.mapping.key +// ^ punctuation.section.brackets.begin +// ^^^^ constant.language +// ^^^^ constant.language +// ^ keyword.operator +// ^ keyword.operator +// ^ punctuation.section.brackets.end +// ^ punctuation.separator.key-value + + "": true, + // <- meta.mapping.key + + "key4": true, +// ^^^^^^ meta.mapping.key meta.string string.quoted.double +// ^ punctuation.separator.key-value - string + 'key5': false, +// ^^^^^^meta.mapping.key meta.string string.quoted.single +// ^ punctuation.separator.key-value - string +// ^^^^^ constant.language.boolean.false + + objKey: new function() { +// ^^^^^^^^ keyword.declaration.function + this.foo = baz; +// ^^^^ variable.language.this +// ^ punctuation.accessor +// ^^^ meta.property + }(), + + objKey: new/**/function() {}(), +// ^^^^^^^^ keyword.declaration.function + + objKey: new class Foo { +// ^^^^^ keyword.declaration.class + get baz() {} +// ^^^ storage.type.accessor +// ^^^ entity.name.function + }(), + + funcKey: function() { +// ^^^^^^^ meta.mapping.key entity.name.function +// ^^^^^^^^^^^^ meta.function + }, + + func2Key: function func2Key() { +// ^^^^^^^^ meta.mapping.key entity.name.function +// ^^^^^^^^^^^^^^^^^^^^^ meta.function + }, + + funcKeyArrow: () => { +// ^^^^^^^^^^^^ meta.mapping.key entity.name.function +// ^^^^^^^ meta.function + }, + + "funcStringKey": function funcStringKey() +// ^^^^^^^^^^^^^^^ meta.mapping.key meta.string string.quoted.double +// ^^^^^^^^^^^^^ entity.name.function +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.function + { }, + + 'funcStringKey': function() { +// ^^^^^^^^^^^^^^^ meta.mapping.key meta.string string.quoted.single +// ^^^^^^^^^^^^^ entity.name.function +// ^^^^^^^^^^^^ meta.function + }, + + 'funcStringKeyArrow': () => { +// ^^^^^^^^^^^^^^^^^^^^ meta.mapping.key meta.string string.quoted.single +// ^^^^^^^^^^^^^^^^^^ entity.name.function +// ^^^^^^^ meta.function + }, + + "func\\String2KeyArrow": (foo) => { +// ^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.mapping.key meta.string string.quoted.double +// ^^^^^^^^^^^^^^^^^^^^^ entity.name.function +// ^^ constant.character.escape + }, + + f: function(){} + 1, +// ^ keyword.operator.arithmetic + + key: 'str' + (true ? 'true' : 'false'), +// ^^^^ constant.language.boolean.true + + qux() +// ^^^^^ meta.function +// ^^^ entity.name.function + {}, + + 'funcStringMethod'() { +// ^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^ entity.name.function + }, + + 'funcStringMethodWithSameLineColon'() { var foo = { name: 'jeff' }; }, +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ entity.name.function + + "key (": true, +// ^^^^^^^ meta.mapping.key + + "key \"(": true, +// ^^^^^^^^^ meta.mapping.key + + "key '(": true, +// ^^^^^^^^ meta.mapping.key + + static, +// ^^^^^^ variable.other.readwrite + + *baz(){ +// ^^^^^^ meta.function +// ^ keyword.generator.asterisk +// ^^^ entity.name.function + } + + ...foo, +// ^^^ keyword.operator.spread +// ^^^ variable.other.readwrite +// ^ punctuation.separator.comma + + ...bar(baz), +// ^^^ keyword.operator.spread +// ^^^^^^^^ meta.function-call +// ^^^ variable.function +// ^ punctuation.separator.comma + + get foo() {}, +// ^^^^^^^^^^^^ meta.function +// ^^^ storage.type.accessor +// ^^^ entity.name.function + + get() {}, +// ^^^^^^^^ meta.function +// ^^^ entity.name.function + + get: 42, +// ^^^ meta.mapping.key + + async() {} +// ^^^^^^^^^^ meta.function +// ^^^^^ entity.name.function +// ^^ meta.function.parameters +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +} +// <- meta.mapping - meta.block + ++{ +// <- keyword.operator + '': +{1:} / undefined +//^^ meta.string string.quoted +// ^ punctuation.separator.key-value +// ^ keyword.operator +// ^ constant.numeric +// ^ keyword.operator +// ^ constant.language +}; +// <- meta.mapping punctuation.section.block.end + +({ + // <- meta.mapping + 0.: {0.e+0: 0} +//^^ meta.mapping.key constant.numeric +// ^ punctuation.separator.key-value +// ^^^^^ meta.mapping.key constant.numeric +// ^ constant.numeric +}); + +[ a, b, c ]; +// <- meta.sequence punctuation.section.brackets.begin +// ^ meta.sequence punctuation.separator.comma +// ^^^^^^^^ meta.sequence +// ^ meta.sequence punctuation.section.brackets.end + +function x() {} +[ a, b, c ]; +// <- meta.sequence.js + ++ +function x() {} +[ a, b, c ]; +// <- meta.brackets.js + +var $ = function(baz) { +// ^ entity.name.function variable.other.dollar.only punctuation.dollar +// ^^^^^^^^^^^^^ meta.function +} + +$() +// <- variable.other.dollar.only punctuation.dollar + +$foo = null; +// <- variable.other.dollar punctuation.dollar +// ^ variable.other.dollar - punctuation.dollar +// ^^^^ constant.language.null + +baz = ""; +// <- variable.other.readwrite +// ^^ meta.string string.quoted.double + +var qux = 100; +// <- keyword.declaration +// ^ variable.other.readwrite +// ^ constant.numeric + +class MyClass extends TheirClass { +// <- keyword.declaration.class +// ^^^^^^^ entity.name.class +// ^^^^^^^ storage.modifier.extends +// ^^^^^^^^^^ entity.other.inherited-class +// ^ meta.block punctuation.section.block.begin + + x = 42; +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + 'y' = 42; +// ^^^ meta.string string.quoted.single +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + "z" = 42; +// ^^^ meta.string string.quoted.double +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + [w] = 42; +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^ punctuation.section.brackets.end +// ^ keyword.operator.assignment +// ^^ constant.numeric + + #v = 42; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + f = a => b; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^ meta.function +// ^ variable.parameter.function + + g = function() {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + #h = function() {}; +// ^ punctuation.definition.variable +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + static x = 42; +// ^^^^^^ storage.modifier.js +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static 'y' = 42; +// ^^^^^^ storage.modifier.js +// ^^^ meta.string string.quoted.single +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static "z" = 42; +// ^^^^^^ storage.modifier.js +// ^^^ meta.string string.quoted.double +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static [w] = 42; +// ^^^^^^ storage.modifier.js +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^ punctuation.section.brackets.end +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static #v = 42; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static f = a => b; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^ meta.function +// ^ variable.parameter.function + + static g = function() {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + foo // You thought I was a field... + () { return '...but was a method all along!'; } +// ^^ meta.class meta.block meta.function + + someMethod() { + return #e * 2; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.arithmetic + + for (const param of this.#data.get('value')) {} +// ^ punctuation.definition.variable +// ^^^^ meta.property.object + } + + #privateMethod() {} +// ^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^ entity.name.function.js +// ^ punctuation.definition.js + + constructor(el) +// ^^^^^^^^^^^^^^^ meta.function + // ^ entity.name.function.constructor + { +// ^ meta.class meta.block meta.function meta.block punctuation.section.block + $.foo = ""; + super(el); + } +// ^ meta.class meta.block meta.function meta.block punctuation.section.block + + get foo() +// ^^^^^^^^^ meta.function + // <- storage.type.accessor + // ^ entity.name.function + { + return this._foo; + } + + static foo(baz) { +// ^^^^^^ storage.modifier +// ^^^^^^^^^^ meta.function + // ^^^ entity.name.function + + } + + qux() +// ^^^^^ meta.function + { } +// ^ meta.class meta.block meta.block punctuation.section.block.begin + + get bar () { +// ^^^^^^^^^^^^ meta.function +// ^ meta.class meta.block meta.block punctuation.section.block.begin + // <- storage.type.accessor + // ^ entity.name.function + return false; + } + + baz() { return null } +// ^^^^^^^^^^^^^^^^^^^^^ meta.function + // <- entity.name.function + + get() { return "foobar"; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^ entity.name.function.js - storage.type.accessor + + set (value) { return value; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^ variable.parameter.function.js +// ^^^ entity.name.function.js - storage.type.accessor + + set abc(value1, value2) { return value1 + value2; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^ storage.type.accessor - entity.name.function.js +// ^^^ entity.name.function.js +// ^^^^^^ variable.parameter.function.js +// ^ punctuation.separator.parameter.function.js +// ^^^^^^ variable.parameter.function.js + + static$ +// ^^^^^^^ - storage + () {}; + + constructor$() {} +// ^^^^^^^^^^^^ entity.name.function - entity.name.function.constructor + + @foo bar() {} +// ^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.annotation +// ^^^ entity.name.function + + @foo.bar bar() {} +// ^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.other.readwrite - variable.annotation +// ^^^ variable.annotation +// ^^^ entity.name.function + + @(whatever) bar() {} +// ^^^^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^^^^^^^^ meta.group +// ^^^ entity.name.function + + ['foo']() {} +// ^^^^^^^^^^^^ meta.function + + static ['foo']() {} +// ^^^^^^^^^^^^ meta.function + + async foo() {} +// ^^^^^ keyword.declaration.async + + *foo() {} +// ^ keyword.generator.asterisk + + async *foo() {} +// ^^^^^ keyword.declaration.async +// ^ keyword.generator.asterisk + + static async foo() {} +// ^^^^^ keyword.declaration.async +} +// <- meta.block punctuation.section.block.end + +class Foo extends React.Component { +// ^^^^^ - entity.other.inherited-class +// ^^^^^^^^^ entity.other.inherited-class + constructor() + {} + + [foo.bar](arg) { +// ^^^ variable.other +// ^^^ meta.property +// ^^^ variable.parameter + return this.a; + } +} + +class Foo extends (Foo).Bar {} +// ^^^ entity.other.inherited-class + +class Foo extends Bar +// ^^^ entity.other.inherited-class + .baz {} +// ^^^^^^^ meta.class +// ^ punctuation.accessor +// ^^^ entity.other.inherited-class + +class Foo extends +// ^^^^^^^ storage.modifier.extends +Bar {} + +class Foo extends getSomeClass() {} +// ^^^^^^^^^^^^ meta.function-call variable.function - entity.other.inherited-class + + (class extends Bar {}); +// ^^^^^^^ storage.modifier.extends - entity.name.class + + (class extends class {} {}); +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.class +// ^^^^^^^ storage.modifier.extends +// ^^^^^^^^ meta.class meta.class +// ^^^^^ keyword.declaration.class + +// Better highlighting while typing. +class +class +// <- keyword.declaration.class - entity.name.class + +class{}/**/ +// ^ - meta.class + + () => {}; +// ^^^^^^^^ meta.function - meta.function meta.function +// ^^ meta.function.parameters +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^^ keyword.declaration.function.arrow +// ^^ meta.block +// ^ punctuation.section.block +// ^ punctuation.section.block + + () => {}; +// ^^^^^ meta.function +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^ meta.block punctuation.section.block.begin +// ^ meta.block punctuation.section.block.end + + (foo, bar = 42) +// ^^^^^^^^^^^^^^^ meta.function.parameters +// ^^^ meta.binding.name +// ^^^ meta.binding.name + => 42; +// ^^^^^ meta.function +// ^^ keyword.declaration.function.arrow + + foo +// ^^^ meta.function.parameters variable.parameter.function + => 42; +// ^^^^^ meta.function +// ^^ keyword.declaration.function.arrow + + async x => y; +// ^^^^^^^^^^^^ meta.function +// ^^^^^ keyword.declaration.async +// ^ meta.function.parameters variable.parameter.function +// ^^ keyword.declaration.function.arrow +// ^ variable.other.readwrite + + async (x) => y; +// ^^^^^^^^^^^^^^ meta.function +// ^^^^^ keyword.declaration.async +// ^^^ meta.function.parameters +// ^ variable.parameter.function +// ^^ keyword.declaration.function.arrow +// ^ variable.other.readwrite + + async => {}; +// ^^^^^^^^^^^ meta.function +// ^^^^^ meta.function.parameters variable.parameter.function +// ^^ keyword.declaration.function.arrow + + async; +// ^^^^^ variable.other.readwrite + + async (); +// ^^^^^ variable.function + +const test = ({a, b, c=()=>({active:false}) }) => {}; +// ^ entity.name.function +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function.parameters +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring +// ^ punctuation.section.block.begin +// ^ variable.parameter +// ^ variable.parameter +// ^ variable.parameter +// ^^^^ meta.function meta.function +// ^^ meta.function meta.function.parameters +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^^^^^^^^^^^^^^^^ meta.group +// ^ constant.language +// ^ punctuation.section.block.end + +([a, + b]) => { return x; } +// ^^^^^^^^^^^^^^^^ meta.function +// ^^ keyword.declaration.function.arrow +// ^^^^^^ meta.block keyword.control.flow + +( + () + => { return; } +// ^^ keyword.declaration.function.arrow +// ^^^^^^^^^^^ meta.block - meta.mapping +// ^^^^^^ keyword.control.flow +); + +({ + a = {}, +// ^ keyword.operator.assignment +// ^^ punctuation.section.block +// ^ punctuation.separator.parameter - keyword.operator.comma + b, +// ^ punctuation.separator.parameter - keyword.operator.comma +}) => null; +// ^^ keyword.declaration.function.arrow + +MyClass.foo = function() {} +// ^ support.class +// ^ entity.name.function +// ^^^^^^^^^^^^^ meta.function + +MyClass.foo = () => {} +// ^ support.class +// ^ entity.name.function +// ^^^^^^^^ meta.function + +xhr.onload = function() {} +// ^ entity.name.function +// ^^^^^^^^^^^^^ meta.function + +xhr.onload = () => {} +// ^ entity.name.function +// ^^^^^^^^ meta.function + +var simpleArrow = foo => bar; +// ^ entity.name.function +// ^^^^^^^^^^ meta.function +// ^^^ variable.parameter.function +// ^^ keyword.declaration.function.arrow + +var Proto = () => { +// ^ entity.name.function +// ^^^^^^^ meta.function +// ^ keyword.declaration.function.arrow + this._var = 1; +} + +var notAFunc = function$; +// ^^^^^^^^ - entity.name.function + +Proto.prototype.getVar = () => this._var; +// ^^^^^^^^^^^^^^^ meta.function +// ^ support.class +// ^ support.constant.prototype +// ^ entity.name.function +// ^ keyword.declaration.function.arrow + +Class3.prototype = function() { +// ^ support.class +// ^ support.constant.prototype +// ^^^^^^^^^^^^ meta.function +} + +Proto.prototype.attr +// ^ support.class +// ^ support.constant.prototype +// ^ meta.property.object + +Proto.prototype = { + funcName: function() { +// ^^^^^^^^ entity.name.function +// ^ punctuation.separator.key-value +// ^^^^^^^^^^^^ meta.function + } +} + +sources.DOM.status() +sources.DOM +// <- variable.other.readwrite + .status() + // ^ meta.function-call.method variable.function + + foo.#bar(); +// ^^^^^^^^^^ meta.function-call.method.js +// ^^^^ variable.function.js +// ^ punctuation.definition.js +// ^^ meta.group.js + +return new Promise(resolve => preferenceObject.set({value}, resolve)); +// ^ meta.function-call.constructor punctuation.section.group.end + +var anotherSingle = function(){a = param => param; return param2 => param2 * a} +// ^ meta.function variable.parameter.function +// ^ meta.block meta.block variable.other.readwrite +// ^ meta.block punctuation.terminator.statement +// ^ meta.function variable.parameter.function +// ^ meta.block meta.block variable.other.readwrite +// ^ meta.block punctuation.section.block.end + +var foo = ~{a:function(){}.a()} +// ^^^ meta.binding.name +// ^^^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^ keyword.operator.bitwise +// ^ punctuation.section.block.begin +// ^^^^^^^^^^^^^^^^^^^^ meta.mapping +// ^^^^^^^^^^^^ meta.function +// ^ entity.name.function +// ^ punctuation.separator.key-value +// ^^^^^^^^ keyword.declaration.function +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^ meta.block punctuation.section.block.begin +// ^ meta.block punctuation.section.block.end +// ^ meta.mapping +// ^^^ - meta.function +// ^ variable.function - entity.name.function +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^ punctuation.section.block.end +// ^ - meta + +baz(foo(x => x('bar'))); +// ^ meta.function-call meta.function-call punctuation.section.group.end +// ^ meta.function-call punctuation.section.group.end + +func(a, b); +//^^^^^^^^ meta.function-call +// ^ variable.function +// ^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^ variable.other.readwrite +// ^ punctuation.separator.comma +// ^ variable.other.readwrite +// ^ punctuation.section.group.end + +var instance = new Constructor(param1, param2) +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.constructor +// ^^^^^^^^^^^ variable.type +// ^^^^^^^^^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^ variable.other.readwrite +// ^ punctuation.section.group.end + +var obj = new function() {}(); +// ^^^^^^^^ keyword.declaration.function + +var obj2 = new class Foo{}(); +// ^^^^^ keyword.declaration.class + +this.func() +// <- variable.language.this +arguments; +// <- variable.language.arguments +super.func(); +// <- variable.language.super +globalThis; +// <- variable.language.global + +foo[bar]; +// ^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ punctuation.section.brackets.end + +var Constructor = function() { + this._var = 1; + // ^ variable.language.this + this._method = function() {} + // ^ variable.language.this + // ^ entity.name.function +} + +// Tests to ensure the new keyword is highlighted properly even when the +// following element is not an identifier +var abc = new ABC( +// ^^^ keyword.operator.word.new +// ^^^^ meta.function-call.constructor +// ^^^^^^^^ - meta.instance.constructor + 'my-name-is-abc', + new (function () { +// ^^^ keyword.operator.word.new +// ^^^^^^^^^^^^^^^^^^ - meta.instance.constructor +// ^^^^^^^^^^^^^^ meta.function-call.constructor meta.function-call.constructor meta.group + var foo = 1; +// ^^^^^^^^^^^^ meta.function-call.constructor meta.function-call.constructor meta.group meta.block + }) +); + +new foo()/**/; +// ^ - meta.function-call.constructor + +function f() { + new.target; +// ^^^ keyword.operator.word.new +// ^ punctuation.accessor.dot.js +// ^^^^^^ variable.language.target + + new +// ^^^ keyword.operator.word.new + .target; +// ^ punctuation.accessor.dot.js +// ^^^^^^ variable.language.target +} + +new Date().getTime() +// ^^^^^^ meta.function-call.constructor +// ^^^^ support.class +//^^^^^^^^^^^^^^^^^^ - meta.instance.constructor + +new $(); +// ^ variable.type.dollar.only punctuation.dollar + +new $Dollar(); +// ^ variable.type.dollar punctuation.dollar + +void { + 'test1': [], + 'test2': new SomeObjectHash["default"], +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.constructor +// ^ meta.brackets + 'test3': "asdf" +} +// <- meta.mapping punctuation.section.block.end + +// This tests parsing semi-broken object literals, which should help while a +// user is in the middle of typing code +void { + key1: true +// ^^^^ meta.mapping.key.js + key2: 0 +// ^^^^ meta.mapping.key.js + key3: function() +// ^^^^ meta.mapping.key.js entity.name.function + { + + } +} + +a = b.c +d = e.f +// <- variable.other.readwrite + +foo.bar().baz +// ^ punctuation.accessor +// ^ punctuation.accessor + +width/2 + lineStart * Math.sin(i * 30 * π/180) +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic +// ^^^^^^^^^^^^^^^^^^^ meta.function-call.method + +var reg = /a+/gimy.exec('aabb') +// ^^^^^^^^ meta.string string.regexp +// ^^^^ keyword.other +// ^ punctuation.accessor + +'aabbcc'.replace(/b+/, 'd'); +// ^^^^ meta.string string.regexp +// ^ keyword.operator.quantifier.regexp + +/a+(?:bc)/; +// <- meta.string string.regexp +// ^^ punctuation.definition.group.no-capture.regexp + +'str'.match(/[" ]+/g); +// ^^^^^^^^ meta.string string.regexp.js + +myvar = myvar.replace(/RTP\/SAVPF .*/, 'RTP/SAVPF ' + suffix); +// ^^^^^^^^^^^^^^^ meta.string string.regexp.js + +'foo'.bar() / baz +// ^ variable.other.readwrite + +var g = 50 + +g / 20 + 30 /g +//^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +var h = foo() / 20 + 30 /g +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +foo['bar']/ 20 + 30 /g +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +foo.bar/ 20 + 30 /g +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +var result = 200 / 400 + 500 / +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic +100; + +var re = / +[a-z] +/g +// <- meta.string string.regexp.js punctuation.definition.string.end + // <- keyword.other + +const a = 1 / /This is regex./ / 'This should be a string, not a regex.'; +// ^ keyword.operator +// ^^^^^^^^^^^^^^^^ meta.string string.regexp +// ^ keyword.operator +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.string string.quoted + +a = /\//u + 0; +// ^^^^ meta.string string.regexp +// ^ keyword.other +// ^ keyword.operator +// ^ constant.numeric + +1 /**/ / 2 / /**/ 3; +// ^ keyword.operator +// ^ constant.numeric +// ^ keyword.operator + + x + in y; +// ^^ keyword.operator + + x + instanceof y; +// ^^^^^^^^^^ keyword.operator + +var π = 3.141592653 +// ^ variable.other.readwrite + +var angle = 2*π / count // angle between circles +// ^ keyword.operator.arithmetic + +var angle = 2*π / count /* angle between circles */ +// ^ keyword.operator.arithmetic + +undefined / (8 * 5) / "1" +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +'5' / 8 / '1' +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +"5" / 8 / "1" +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +`5` / 8 / `1` +// ^ keyword.operator.arithmetic +// ^ keyword.operator.arithmetic + +a = /foo\/bar/g // Ensure handling of escape / in regex detection +// ^^^^^^^^^^^ meta.string string.regexp +// ^ constant.character.escape + +var re = /^\/[^/]+/; +// ^ constant.other.character-class.set.regexp +// ^ keyword.operator.quantifier + +(y - 1) / ((x - 1) / -2); +// ^ keyword.operator.arithmetic +// ^ punctuation.section.group.begin +(y - 1) / ((x - 1) / 2); +// ^ punctuation.section.group.end +// ^ keyword.operator.arithmetic + y / ((x - 1) / -2); + + 1, 2; +// ^ keyword.operator.comma - punctuation + + a; + [1, 2]; +// ^ meta.sequence punctuation.separator.comma - meta.brackets - keyword + + a + [1, 2]; +// ^ meta.brackets keyword.operator.comma - meta.sequence - punctuation + +define(['common'], function(common) { +// ^^^^^^^^^^^^^^^^^^ meta.function + var namedFunc = function() { +// ^ meta.function + } +}); + +new FooBar(function(){ +// ^ meta.function + var namedFunc2 = function() { +// ^ meta.function + } +}) + +['foo'].bar = function() { +// ^^^ entity.name.function meta.property.object +} + +['foo'].$ = function() { +// ^ entity.name.function meta.property.object.dollar.only punctuation.dollar +} + +['foo'].$bar = function() { +// ^^^^ entity.name.function meta.property.object.dollar +// ^ punctuation.dollar +} + +{ +// <- meta.block punctuation.section.block.begin + let foo = 1; +// ^^^ meta.block keyword.declaration +// ^^^ variable.other.readwrite +} +// <- meta.block punctuation.section.block.end + +var test = +{a: 1} +// <- meta.mapping punctuation.section.block.begin + +var arrowFuncBraceNextLine = () => /* comments! */ +// ^ entity.name.function +// ^^ keyword.declaration.function +// ^^^^^^^^^^^^^^^ comment +{ + foo.bar(); +// ^ - entity.name.function +} + +// Handle multi-line "concise" arrow function bodies +var conciseFunc = () => + foo +//^^^ meta.block variable.other.readwrite + .bar(); +//^^^^^^ meta.block + +// Handle an arrow function in a parenthetical group +(myFunc = (a) => a*2) +// <- meta.group punctuation.section.group.begin +// ^^^^ entity.name.function +// ^ meta.group punctuation.section.group.end - meta.block + +var o = { a: i => i * 2, b: i => i * 3 } +// ^ entity.name.function +// ^ - meta.block +// ^ entity.name.function + +function test() { + return {a: 1}; +// ^^^^^^ meta.mapping +// ^ meta.mapping.key +// ^ constant.numeric +} + +$.each({}) +// <- variable.other.dollar.only punctuation.dollar +// ^ meta.mapping + +$varname.method() +// <- variable.other.dollar punctuation.dollar - variable.object.dollar.only +// ^ variable.other.dollar + +$.fn.new_plugin = function() {} +// <- variable.other.dollar.only punctuation.dollar + +$var.fn.name = () => {} +// <- variable.other.dollar punctuation.dollar - variable.other.dollar.only +// ^ variable.other.dollar - punctuation.dollar + +someFunction(() => [() => 'X']); +// ^ punctuation.section.brackets.end + +string = 'invalid +// ^ invalid.illegal.newline + +string = 'invalid\ +// ^ invalid.illegal.newline + +hex = 0xFA.5; +// ^ invalid.illegal - constant.numeric + +hex = 0xFA.toString; + +octal = 079.0; +// ^ invalid.illegal - constant.numeric + +strayBracket = ()); +// ^ invalid.illegal.stray-bracket-end + +strayBracket = []]; +// ^ invalid.illegal.stray-bracket-end + +strayBracket = {}}; +// ^ invalid.illegal.stray-bracket-end + +(a +) + c; +// ^^^^ - meta.group + +(a =>) + c; +// ^^^^ - meta.group + +function optionalParam(b=0) {}; +// ^ punctuation.section.group.begin +// ^ keyword.operator.assignment +// ^ punctuation.section.group.end + + +var CONST; +// ^^^^^ variable.other.constant + +return; +{a: 1}; +// ^ meta.block - meta.mapping + +return/**/{a: 1} +// ^^^^^^ meta.mapping - meta.block + +return +{a: 1}; +// ^ meta.block - meta.mapping + +return/* +*/{a: 1} +//^^^^^^ meta.block - meta.mapping + +const abc = new Set + + const x = + const y = 1; // Better highlighting while typing. +// ^^^^^ keyword.declaration + + let x = + const y = 1; // Better highlighting while typing. +// ^^^^^ keyword.declaration + +var o = { + a, + b, + c // comment +// ^ variable.other.readwrite - entity.name.function +// ^^ comment +} + +var query = { + type: type==undefined ? null : {$in: type.split(',')} +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.mapping +// ^^^^^^^^^ constant.language.undefined +// ^ keyword.operator.ternary +// ^^^^ constant.language.null +// ^ keyword.operator.ternary +// ^ punctuation.section.block.begin +// ^^ meta.mapping.key.js +// ^ punctuation.separator.key-value.js +// ^ punctuation.section.block.end +}; + +var str = `Hello, ${name}!`; +// ^^^^^^^^^^^^^^^^^ meta.string +// ^^^^^^^^ string.quoted.other +// ^^^^^^^ meta.interpolation - string +// ^^ string.quoted.other +// ^^ punctuation.section.interpolation.begin +// ^^^^ source.js.embedded variable.other.readwrite +// ^ punctuation.section.interpolation.end + +function yy (a, b) { +// ^^^^^^^^^^^^^^^^^ meta.function +// ^^ entity.name.function +// ^^^^^^ meta.function.parameters +// ^ punctuation.section.group.begin +// ^ variable.parameter.function +// ^ punctuation.separator.parameter.function +// ^ variable.parameter.function +// ^ punctuation.section.group.end +// ^ meta.block punctuation.section.block.begin +} +// <- meta.function meta.block punctuation.section.block + +// Integers + + 123_456_789_0n; +// ^^^^^^^^^^^^^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ meta.number.integer.decimal.js constant.numeric.suffix.js + + 0; +// ^ meta.number.integer.decimal.js constant.numeric.value.js + + 123 .foo; +// ^^^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.accessor +// ^^^ meta.property.object + + +123; +// ^ keyword.operator.arithmetic +// ^^^ meta.number.integer.decimal.js constant.numeric.value.js - keyword + + -123; +// ^ keyword.operator.arithmetic +// ^^^ meta.number.integer.decimal.js constant.numeric.value.js - keyword + + + 123; +// ^ keyword.operator.arithmetic +// ^ - keyword - constant +// ^^^ meta.number.integer.decimal.js constant.numeric.value.js - keyword + + 123xyz; +// ^^^^^^ invalid.illegal.numeric.decimal + + 0123456789; +// ^ meta.number.integer.octal.js constant.numeric.base.js invalid.deprecated.numeric.octal.js +// ^^^^^^^^^ meta.number.integer.octal.js constant.numeric.value.js invalid.deprecated.numeric.octal.js + + 0123456789xyz; +// ^^^^^^^^^^^^^ invalid.illegal.numeric.octal + + 0123456789.xyz; +// ^ meta.number.integer.octal.js constant.numeric.base.js invalid.deprecated.numeric.octal.js +// ^^^^^^^^^ meta.number.integer.octal.js constant.numeric.value.js invalid.deprecated.numeric.octal.js +// ^ punctuation.accessor +// ^^^ meta.property.object + + 0123456789.123; +// ^ meta.number.integer.octal.js constant.numeric.base.js invalid.deprecated.numeric.octal.js +// ^^^^^^^^^ meta.number.integer.octal.js constant.numeric.value.js invalid.deprecated.numeric.octal.js +// ^ punctuation.accessor.js +// ^^^ invalid.illegal.illegal-identifier + + 0b0110_1001_1001_0110n; +// ^^ meta.number.integer.binary.js constant.numeric.base.js +// ^^^^^^^^^^^^^^^^^^^ meta.number.integer.binary.js constant.numeric.value.js +// ^ meta.number.integer.binary.js constant.numeric.suffix.js + + 0o0123_4567n; +// ^^ meta.number.integer.octal.js constant.numeric.base.js +// ^^^^^^^^^ meta.number.integer.octal.js constant.numeric.value.js +// ^ meta.number.integer.octal.js constant.numeric.suffix.js + + 0x01_23_45_67_89_ab_CD_efn; +// ^^ meta.number.integer.hexadecimal.js constant.numeric.base.js +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.number.integer.hexadecimal.js constant.numeric.value.js +// ^ meta.number.integer.hexadecimal.js constant.numeric.suffix.js + + 0B0; 0O0; 0X0; +// ^^ meta.number.integer.binary.js constant.numeric.base.js +// ^ meta.number.integer.binary.js constant.numeric.value.js +// ^ punctuation.terminator.statement.js +// ^^ meta.number.integer.octal.js constant.numeric.base.js +// ^ meta.number.integer.octal.js constant.numeric.value.js +// ^ punctuation.terminator.statement.js +// ^^ meta.number.integer.hexadecimal.js constant.numeric.base.js +// ^ meta.number.integer.hexadecimal.js constant.numeric.value.js +// ^ punctuation.terminator.statement.js + + 0b1.foo; +// ^^^^^^^ - invalid +// ^^ meta.number.integer.binary.js constant.numeric.base.js +// ^ meta.number.integer.binary.js constant.numeric.value.js +// ^ punctuation.accessor +// ^^^ meta.property.object + + 0b1.0; +// ^^ meta.number.integer.binary.js constant.numeric.base.js +// ^ meta.number.integer.binary.js constant.numeric.value.js +// ^ punctuation.accessor +// ^ invalid.illegal.illegal-identifier + + 0b123; +// ^^^^^ invalid.illegal.numeric.binary + + +// Floats + + 1_234_567_890.123_456_789_0; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.number.float.decimal.js constant.numeric.value.js +// ^ punctuation.separator.decimal.js + + .123_456_789_0; +// ^^^^^^^^^^^^^^ meta.number.float.decimal.js constant.numeric.value.js +// ^ punctuation.separator.decimal + + 12345e6_7_8; +// ^^^^^^^^^^^ meta.number.float.decimal.js constant.numeric.value.js + + 123.456e+789; +// ^^^^^^^^^^^^ meta.number.float.decimal.js constant.numeric.value.js +// ^ punctuation.separator.decimal + + .123E-7_8_9; +// ^^^^^^^^^^^ meta.number.float.decimal.js constant.numeric.value.js +// ^ punctuation.separator.decimal + + 0123.45; +// ^ meta.number.integer.octal.js constant.numeric.base.js invalid.deprecated.numeric.octal.js +// ^^^ meta.number.integer.octal.js constant.numeric.value.js invalid.deprecated.numeric.octal.js +// ^ punctuation.accessor +// ^^ invalid.illegal - constant.numeric + + 123.4foo; +// ^^^^^^^^ invalid.illegal.numeric.decimal + + 123.4e+foo; +// ^^^^^^ invalid.illegal.numeric.decimal + + 123..foo; +// ^^^^ meta.number.float.decimal.js constant.numeric.value.js +// ^ punctuation.accessor +// ^^^ meta.property.object + +debugger; +// <- keyword.control.flow.debugger.js + +debugger +[] +// <- meta.sequence + + a ?? b; +// ^^ keyword.operator.logical + + a &&= b; +// ^^^ keyword.operator.assignment.augmented + + a ||= b; +// ^^^ keyword.operator.assignment.augmented + + a ??= b; +// ^^^ keyword.operator.assignment.augmented + + a ?.5 : .7; +// ^ keyword.operator.ternary +// ^^ constant.numeric +// ^ keyword.operator.ternary + + a?.b?.c; +// ^^ punctuation.accessor +// ^ meta.property.object +// ^^ punctuation.accessor +// ^ meta.property.object + + a?.[propName]; +// ^^^^^^^^^^^^ meta.brackets +// ^^ punctuation.accessor +// ^ punctuation.section.brackets.begin + + a?.(); +// ^^^^^ meta.function-call +// ^ variable.function +// ^^^^ meta.group +// ^^ punctuation.accessor +// ^ punctuation.section.group.begin + + a.b?.(); +// ^^^^^^^ meta.function-call.method +// ^ variable.function +// diff --git a/syntaxes/JavaScript/tests/syntax_test_js_bindings.js b/syntaxes/JavaScript/tests/syntax_test_js_bindings.js @@ -0,0 +1,206 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + +// Variable declarations + +const x = value; +// ^ meta.binding.name variable.other.readwrite + + +const [ x, y, ...z, ] = value; +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ meta.binding.name variable.other.readwrite +// ^ punctuation.separator.comma +// ^ meta.binding.name variable.other.readwrite +// ^ punctuation.separator.comma +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.other.readwrite +// ^ punctuation.separator.comma + +const [ x, [a, b], z] = value; +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^^^^^^ meta.binding.destructuring.sequence meta.binding.destructuring.sequence +// ^ meta.binding.name variable.other.readwrite +// ^ meta.binding.name variable.other.readwrite + +const [ x = 42, y = [a, b, c] ] = value; +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ keyword.operator.assignment +// ^^ meta.binding.destructuring.sequence.js meta.number.integer.decimal.js constant.numeric.value.js +// ^ keyword.operator.assignment +// ^^^^^^^^^ meta.sequence +// ^ variable.other.readwrite - meta.binding.name + +const { a, b: c, ...d } = value; +// ^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^ meta.mapping.key meta.binding.name variable.other.readwrite +// ^ punctuation.separator.comma +// ^ meta.mapping.key - variable +// ^ punctuation.separator.key-value +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.other.readwrite + +const { 'a': x, "b": y, [c]: z } = value; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^^^ meta.mapping.key string.quoted.single +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.other.readwrite +// ^^^ meta.mapping.key string.quoted.double +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.other.readwrite +// ^^^ meta.mapping.key +// ^ variable.other.readwrite +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.other.readwrite + +const x; +// ^ meta.binding.name variable.other.readwrite + +let +// <- keyword.declaration +w +// <- meta.binding.name variable.other.readwrite +, +// <- punctuation.separator.comma +x +// <- meta.binding.name variable.other.readwrite +y +// <- variable.other.readwrite - meta.binding.name +, +// <- keyword.operator.comma +z +// <- variable.other.readwrite - meta.binding.name + +// `let` is only reserved in strict mode, and we can't distinguish that yet. + +let let; +// ^^^ meta.binding.name variable.other.readwrite + +let +let; +// <- meta.binding.name variable.other.readwrite + +const +const x = 0; +// <- keyword.declaration + +// Function parameters + +function f ([ x, y, ...z, ]) {} +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter + +function f ([ x, [a, b], z]) {} +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^^^^^^ meta.binding.destructuring.sequence meta.binding.destructuring.sequence +// ^ meta.binding.name variable.parameter.function +// ^ meta.binding.name variable.parameter.function + +function f ([ x = 42, y = [a, b, c] ]) {} +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ keyword.operator.assignment +// ^^ meta.function meta.binding.destructuring.sequence meta.number.integer.decimal constant.numeric.value +// ^ keyword.operator.assignment +// ^^^^^^^^^ meta.sequence +// ^ variable.other.readwrite - meta.binding.name + +function f ({ a, b: c, ...d }) {} +// ^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^ meta.mapping.key meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^ meta.mapping.key - variable +// ^ punctuation.separator.key-value +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.parameter.function + +function f ({ 'a': x, "b": y, [c]: z }) = value; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^^^ meta.mapping.key string.quoted.single +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function +// ^^^ meta.mapping.key string.quoted.double +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function +// ^^^ meta.mapping.key +// ^ variable.other.readwrite +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function + +function f (a, ...rest) {} +// ^ meta.binding.name variable.parameter.function +// ^^^ keyword.operator.spread +// ^^^^ variable.parameter.function + +function f (new) {} +// ^^^^^^^^^^^^^^^^ meta.function +// ^^^ invalid.illegal.identifier meta.binding.name variable.parameter.function + +let f = ([ x, y, ...z, ]) => {}; +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter + +let f = ([ x, [a, b], z]) => {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^^^^^^ meta.binding.destructuring.sequence meta.binding.destructuring.sequence +// ^ meta.binding.name variable.parameter.function +// ^ meta.binding.name variable.parameter.function + +let f = ([ x = 42, y = [a, b, c] ]) => {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.sequence +// ^ keyword.operator.assignment +// ^^ meta.binding.destructuring.sequence.js meta.number.integer.decimal.js constant.numeric.value.js +// ^ keyword.operator.assignment +// ^^^^^^^^^ meta.sequence +// ^ variable.other.readwrite - meta.binding.name + +let f = ({ a, b: c, ...d }) => {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^ meta.mapping.key meta.binding.name variable.parameter.function +// ^ punctuation.separator.parameter +// ^ meta.mapping.key - variable +// ^ punctuation.separator.key-value +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.parameter.function + +let f = ({ 'a': x, "b": y, [c]: z }) => {}; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.binding.destructuring.mapping +// ^^^ meta.mapping.key string.quoted.single +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function +// ^^^ meta.mapping.key string.quoted.double +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function +// ^^^ meta.mapping.key +// ^ variable.other.readwrite +// ^ punctuation.separator.key-value +// ^ meta.binding.name variable.parameter.function + +let f = (a, ...rest) => {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^ meta.function +// ^ meta.binding.name variable.parameter.function +// ^^^ keyword.operator.spread +// ^^^^ meta.binding.name variable.parameter.function + +let f = (new) => {}; +// ^^^^^^^^^^^ meta.function +// ^^^ invalid.illegal.identifier meta.binding.name variable.parameter.function diff --git a/syntaxes/JavaScript/tests/syntax_test_js_class.js b/syntaxes/JavaScript/tests/syntax_test_js_class.js @@ -0,0 +1,320 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + +class MyClass extends TheirClass { +// <- keyword.declaration.class +// ^^^^^^^ entity.name.class +// ^^^^^^^ storage.modifier.extends +// ^^^^^^^^^^ entity.other.inherited-class +// ^ meta.block punctuation.section.block.begin + + x = 42; +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + 'y' = 42; +// ^^^ meta.string string.quoted.single +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + "z" = 42; +// ^^^ meta.string string.quoted.double +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + [w] = 42; +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^ punctuation.section.brackets.end +// ^ keyword.operator.assignment +// ^^ constant.numeric + + #v = 42; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + f = a => b; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^ meta.function +// ^ variable.parameter.function + + g = function() {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + #h = function() {}; +// ^ punctuation.definition.variable +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + class = null; +// ^^^^^ variable.other.readwrite + + static x = 42; +// ^^^^^^ storage.modifier.js +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static 'y' = 42; +// ^^^^^^ storage.modifier.js +// ^^^ meta.string string.quoted.single +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static "z" = 42; +// ^^^^^^ storage.modifier.js +// ^^^ meta.string string.quoted.double +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static [w] = 42; +// ^^^^^^ storage.modifier.js +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^ punctuation.section.brackets.end +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static #v = 42; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^^ constant.numeric + + static f = a => b; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^ meta.function +// ^ variable.parameter.function + + static g = function() {}; +// ^ entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^ meta.function + + static = 42; +// ^^^^^^ variable.other.readwrite + + static() {} +// ^^^^^^^^^^^ meta.function +// ^^^^^^ entity.name.function + + foo // You thought I was a field... + () { return '...but was a method all along!'; } +// ^^ meta.class meta.block meta.function + + someMethod() { + return #e * 2; +// ^ punctuation.definition.variable +// ^ variable.other.readwrite +// ^ keyword.operator.arithmetic + + for (const param of this.#data.get('value')) {} +// ^ punctuation.definition.variable +// ^^^^ meta.property.object + } + + #privateMethod() {} +// ^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^^^^^^^^^ entity.name.function.js +// ^ punctuation.definition.js + + constructor(el) +// ^^^^^^^^^^^^^^^ meta.function + // ^ entity.name.function.constructor + { +// ^ meta.class meta.block meta.function meta.block punctuation.section.block + $.foo = ""; + super(el); + } +// ^ meta.class meta.block meta.function meta.block punctuation.section.block + + get foo() +// ^^^^^^^^^ meta.function + // <- storage.type.accessor + // ^ entity.name.function + { + return this._foo; + } + + get *foo() + + static foo(baz) { +// ^^^^^^ storage.modifier +// ^^^^^^^^^^ meta.function + // ^^^ entity.name.function + + } + + qux() +// ^^^^^ meta.function + { } +// ^ meta.class meta.block meta.block punctuation.section.block.begin + + get bar () { +// ^^^^^^^^^^^^ meta.function +// ^ meta.class meta.block meta.block punctuation.section.block.begin + // <- storage.type.accessor + // ^ entity.name.function + return false; + } + + baz() { return null } +// ^^^^^^^^^^^^^^^^^^^^^ meta.function + // <- entity.name.function + + get() { return "foobar"; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^ entity.name.function.js - storage.type.accessor + + set (value) { return value; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^ variable.parameter.function.js +// ^^^ entity.name.function.js - storage.type.accessor + + set abc(value1, value2) { return value1 + value2; } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^ storage.type.accessor - entity.name.function.js +// ^^^ entity.name.function.js +// ^^^^^^ variable.parameter.function.js +// ^ punctuation.separator.parameter.function.js +// ^^^^^^ variable.parameter.function.js + + static$ +// ^^^^^^^ - storage + () {}; + + constructor$() {} +// ^^^^^^^^^^^^ entity.name.function - entity.name.function.constructor + + @foo bar() {} +// ^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.annotation +// ^^^ entity.name.function + + @foo.bar bar() {} +// ^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.other.readwrite - variable.annotation +// ^^^ variable.annotation +// ^^^ entity.name.function + + @(whatever) bar() {} +// ^^^^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^^^^^^^^ meta.group +// ^^^ entity.name.function + + ['foo']() {} +// ^^^^^^^^^^^^ meta.function + + static ['foo']() {} +// ^^^^^^^^^^^^ meta.function + + async foo() {} +// ^^^^^ keyword.declaration.async + + *foo() {} +// ^ keyword.generator.asterisk + + async *foo() {} +// ^^^^^ keyword.declaration.async +// ^ keyword.generator.asterisk + + static *foo() {} +// ^^^^^^ storage.modifier +// ^ keyword.generator.asterisk +// ^^^ entity.name.function + + static async foo() {} +// ^^^^^^ storage.modifier +// ^^^^^ keyword.declaration.async + + async() {} +// ^^^^^^^^^^ meta.function +// ^^^^^ entity.name.function +// ^^ meta.function.parameters +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end + + static async() {} +// ^^^^^^ storage.modifier +// ^^^^^ entity.name.function +} +// <- meta.block punctuation.section.block.end + +class Foo extends React.Component { +// ^^^^^ - entity.other.inherited-class +// ^^^^^^^^^ entity.other.inherited-class + constructor() + {} + + [foo.bar](arg) { +// ^^^ variable.other +// ^^^ meta.property +// ^^^ variable.parameter + return this.a; + } +} + +class Foo extends (Foo).Bar {} +// ^^^ entity.other.inherited-class + +class Foo extends Bar +// ^^^ entity.other.inherited-class + .baz {} +// ^^^^^^^ meta.class +// ^ punctuation.accessor +// ^^^ entity.other.inherited-class + +class Foo extends +// ^^^^^^^ storage.modifier.extends +Bar {} + +class Foo extends getSomeClass() {} +// ^^^^^^^^^^^^ meta.function-call variable.function - entity.other.inherited-class + + (class extends Bar {}); +// ^^^^^^^ storage.modifier.extends - entity.name.class + + (class extends class {} {}); +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.class +// ^^^^^^^ storage.modifier.extends +// ^^^^^^^^ meta.class meta.class +// ^^^^^ keyword.declaration.class + +// Better highlighting while typing. +class +class +// <- keyword.declaration.class - entity.name.class + +class{}/**/ +// ^ - meta.class + + @foo class Foo {} +// ^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.annotation +// ^^^^^ keyword.declaration.class + + @foo.bar class Foo {} +// ^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.other.readwrite - variable.annotation +// ^^^ variable.annotation +// ^^^^^ keyword.declaration.class + + @(whatever) class Foo {} +// ^^^^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^^^^^^^^ meta.group +// ^^^^^ keyword.declaration.class diff --git a/syntaxes/JavaScript/tests/syntax_test_js_control.js b/syntaxes/JavaScript/tests/syntax_test_js_control.js @@ -0,0 +1,365 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + if ( true ) { } ; +// ^^^^^^^^^^^^^^^ meta.conditional +// ^^ keyword.control.conditional.if +// ^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^ - meta.conditional +// ^ punctuation.terminator.statement.empty + + if ( true ) null ; +// ^^^^^^^^^^^^^^^^^^ meta.conditional +// ^^ keyword.control.conditional.if +// ^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^^^^ constant.language.null +// ^ punctuation.terminator.statement - punctuation.terminator.statement.empty +// ^ - meta.conditional + + if (true) {}/**/ +// ^^^^ - meta.conditional + + if (true) ; +// ^^^^^^^^^^ meta.conditional +// ^ punctuation.terminator.statement.empty + + if (true) ; + else { } ; +// ^^^^^^^^ meta.conditional +// ^^^^ keyword.control.conditional.else +// ^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^ - meta.conditional +// ^ punctuation.terminator.statement.empty + + else if (true) { } ; +// ^^^^^^^^^^^^^^^^^^ meta.conditional +// ^^^^^^^ keyword.control.conditional.elseif +// ^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^^^ - meta.conditional +// ^ punctuation.terminator.statement.empty + + do { } while ( true ) ; +// ^^^^^^^^^^^^^^^^^^^^^ meta.do-while +// ^^ keyword.control.loop.do-while +// ^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^^^^^ keyword.control.loop.while +// ^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^ - meta.do-while +// ^ punctuation.terminator.statement.empty + + do 42 ; while ( true ) ; +// ^^^^^^^^^^^^^^^^^^^^^^ meta.do-while +// ^^ keyword.control.loop.do-while +// ^^ meta.number.integer.decimal constant.numeric.value +// ^ punctuation.terminator.statement +// ^^^^^ keyword.control.loop.while +// ^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^ punctuation.terminator.statement.empty + + do {} while (false)/**/ +// ^ - meta.do-while + + for (var i = 0; i < 10; i++) { } ; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.group +// ^ punctuation.section.group +// ^^^ storage.type +// ^ meta.binding.name variable.other.readwrite +// ^ keyword.operator.assignment +// ^ meta.number.integer.decimal constant.numeric.value +// ^ punctuation.separator.expression +// ^ variable.other.readwrite +// ^ keyword.operator.comparison +// ^^ meta.number.integer.decimal constant.numeric.value +// ^ punctuation.separator.expression +// ^ variable.other.readwrite +// ^^ keyword.operator.arithmetic +// ^ punctuation.section.group +// ^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^ - meta.for +// ^ punctuation.terminator.statement.empty + + for (;;) 42; +// ^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^ meta.group +// ^ punctuation.section.group +// ^^ punctuation.separator.expression +// ^ punctuation.section.group +// ^^ meta.number.integer.decimal constant.numeric.value +// ^ punctuation.terminator.statement - punctuation.terminator.statement.empty +// ^ - meta.for + + for (; x in list;) {} +// ^^^^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^^^^ meta.group +// ^ punctuation.separator.expression +// ^^ keyword.operator +// ^ punctuation.separator.expression + + for (a[x in list];;) {} +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^^^^^^ meta.group +// ^^^^^^^^^^^ meta.brackets +// ^^ keyword.operator +// ^ punctuation.separator.expression +// ^ punctuation.separator.expression + + for (;function () {}/a/g;) {} +// ^ keyword.operator + + for (const x in list) {} +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^^^^^^^ meta.group +// ^^^^^ storage.type +// ^^ keyword.operator.word + + for (const x of list) {} +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^^^^^^^ meta.group +// ^^^^^ storage.type +// ^^ keyword.operator.word + + for (x in list) {} +// ^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^ meta.group +// ^^ keyword.operator.word + + for (x of list) {} +// ^^^^^^^^^^^^^^^^^^ meta.for +// ^^^ keyword.control.loop.for +// ^^^^^^^^^^^ meta.group +// ^^ keyword.operator.word + + for await (const x of list) {} +// ^^^ keyword.control.loop.for +// ^^^^^ keyword.control.flow.await + +for + 42; +// ^^ constant.numeric - meta.for + +for(;;){}/**/ +// ^ - meta.for + +{}/**/ +//^ - meta.block + +while (true) +// ^^^^^^^^^ meta.while +// ^^^^ meta.group +{ +// <- meta.block + x = yield; +// ^^^^^ keyword.control.flow.yield + + x = yield * 42; +// ^^^^^ keyword.control.flow.yield +// ^ keyword.generator.asterisk + + x = yield + function f() {} + []; +// ^^ meta.sequence - meta.brackets + + + x = yield* + function f() {} + []; +// ^^ meta.brackets - meta.sequence + + y = await 42; +// ^^^^^ keyword.control.flow.await + + y = yield await 42; +// ^^^^^ keyword.control.flow.yield +// ^^^^^ keyword.control.flow.await + + yield (parenthesized_expression); +// ^^^^^ keyword.control.flow.yield + + yield `template`; +// ^^^^^ keyword.control.flow.yield + + break; +// ^^^^^ keyword.control.flow.break + + break foo; +// ^^^^^ keyword.control.flow.break +// ^^^ variable.label + + break + foo; +// ^^^ variable.other.readwrite - variable.label + + break/**/foo; +// ^^^ variable.label - variable.other.readwrite + + break/* + */foo; +// ^^^ variable.other.readwrite - variable.label + + break function; +// ^^^^^^^^ invalid.illegal.identifier variable.label + + continue; +// ^^^^^^^^ keyword.control.flow.continue + + continue foo; +// ^^^^^^^^ keyword.control.flow.continue +// ^^^ variable.label + + continue + foo; +// ^^^ variable.other.readwrite - variable.label + + continue/**/foo; +// ^^^ variable.label - variable.other.readwrite + + continue/* + */ foo; +// ^^^ variable.other.readwrite - variable.label + + goto; +// ^^^^ variable.other.readwrite - keyword +} +// <- meta.block + + while (true) 42 ; +// ^^^^^^^^^^^^^ meta.while +// ^^^^^ keyword.control.loop.while +// ^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^ constant.language.boolean.true +// ^ punctuation.section.group.end +// ^^ meta.number.integer.decimal constant.numeric.value +// ^ punctuation.terminator.statement - punctuation.terminator.statement.empty + +while // Incomplete statement + 42; +// ^^ constant.numeric - meta.while + +while(false){}/**/ +// ^ - meta.while + +with (undefined) { +// <- keyword.control.import.with +//^^^^^^^^^^ meta.with +// ^^^^^^^^^ constant.language.undefined + return; +// ^^^^^^ meta.with.js meta.block.js keyword.control.flow.return +} + +with // Incomplete statement + 42; +// ^^ constant.numeric - meta.while + +with(false){}/**/ +// ^ - meta.with + +switch ($foo) { +// <- meta.switch.js keyword.control.conditional.switch +// ^^^^^^^^^^^^ meta.switch +//^^^^ keyword.control.conditional.switch +// ^^^^ meta.group +// ^ meta.block punctuation.section.block.begin + case foo: + // ^ meta.switch meta.block keyword.control.conditional.case + // ^ - punctuation.separator.key-value + qux = 1; + break; + // ^ keyword.control.flow.break + case "baz": + // ^ keyword.control.conditional.case + // ^ - punctuation.separator.key-value string + qux = 2; + break; + // ^ keyword.control.flow.break + default: + // ^ meta.switch meta.block keyword.control.conditional.default + // ^ - punctuation.separator.key-value + qux = 3; + + case$ +// ^^^^^ - keyword + ; + + default$ +// ^^^^^^^^ - keyword + ; + + case 0: {} + case 1: +// ^^^^ keyword.control.conditional.case +} +// <- meta.block punctuation.section.block.end + +try { +// <- meta.try keyword.control.exception.try +// ^^ meta.try +// ^ meta.block + foobar = qux.bar(); +// ^^^^^^^^^^^^^^^^^^^ meta.try meta.block +} catch (e) { +// <- meta.block +//^^^^^^^^^^^^ meta.catch +//^^^^^ keyword.control.exception.catch +// ^ meta.group +// ^ meta.block + foobar = 0 +// ^^^^^^^^^^ meta.catch meta.block +} finally { +// <- meta.block +//^^^^^^^^^^ meta.finally +//^^^^^^^ keyword.control.exception.finally +// ^ meta.block + foobar += 1 +// ^^^^^^^^^^^ meta.finally meta.block +} +// <- meta.block + +switch // Incomplete statement + 42; +// ^^ constant.numeric - meta.switch + +switch(x){}/**/ +// ^^ - meta.switch + +try{}/**/ +// ^ - meta.try +catch{}/**/ +// ^ - meta.catch +finally{}/**/ +// ^ - meta.finally diff --git a/syntaxes/JavaScript/tests/syntax_test_js_import_export.js b/syntaxes/JavaScript/tests/syntax_test_js_import_export.js @@ -0,0 +1,231 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + +import TheirClass from "./mypath"; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.import.js +// ^ keyword.control.import-export +// ^ keyword.control.import-export + +import {identifier, otherIdentifier} from "somewhere"; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.import +// ^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^ meta.import meta.block variable.other.readwrite + +import thing, {identifier as otherIdentifier}, * as otherName from "otherplace"; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.import +// ^ keyword.control.import-export +// ^ variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.block +// ^ variable.other.readwrite +// ^ keyword.control.import-export +// ^ variable.other.readwrite +// ^ constant.other.js +// ^ keyword.control.import-export + +import 'module'; +// ^^^^^^^^^^^^^ meta.import + +// Better highlighting while typing. +import +import; +// <- keyword.control.import-export + +import;/**/ +// ^ - meta.import + +export { name1, name2 as name3 }; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.block +// ^ punctuation.separator.comma +// ^^ keyword.control.import-export + +export let name1, name2; +//^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^ keyword.declaration +// ^ punctuation.separator.comma + +export var name3; +//^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^ keyword.declaration + +export const name1 = 5; +//^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^^^ keyword.declaration +// ^ keyword.operator.assignment + +export let foo = 123 // No semicolon +export function bar() {} +// <- keyword.control.import-export + +export function foo() {}; +//^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.terminator.statement.empty + +export function* foo() {}; +//^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.terminator.statement.empty + +export async function foo() {}; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.terminator.statement.empty + +export class Foo {}; +//^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^^^^^^ meta.class +// ^ punctuation.terminator.statement.empty + +export default expression; +//^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^ keyword.control.import-export + +export default function (a) { }; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.terminator.statement.empty - meta.export + +export default function* (a) { }; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.terminator.statement.empty - meta.export + +export default function name1(b) { } +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^ keyword.control.import-export +// ^^^^^^^^ keyword.declaration.function +// ^ entity.name.function + +export default class Foo {}; +//^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^ meta.class +// ^ punctuation.terminator.statement.empty + +export default +function (a) { }; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^^^^ keyword.control.import-export +// ^^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^ meta.function + +export { name1 as default }; +//^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^^^ meta.block +// ^ keyword.control.import-export +// ^ keyword.control.import-export + +export * from "./othermod"; +//^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^ constant.other +// ^ keyword.control.import-export + +export { name1, name2 } from "./othermod"; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end +// ^ keyword.control.import-export + +export { import1 as name1, import2 as name2, nameN } from "./othermod"; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export +//^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.block +// ^ keyword.control.import-export +// ^ keyword.control.import-export +// ^ keyword.control.import-export + +// Better highlighting while typing. +export +export; +// <- keyword.control.import-export + +export;/**/ +// ^ - meta.export + +import * as + alias from "module"; +// ^^^^^^^^^^^^^^^^^^^^^ meta.import.js + +import { member as + alias } from "module"; +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.import.js + +import { * as + alias } from "module"; +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.import.js + +export { member as + alias } from "module"; +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.export.js + +export { member as + default } from "module"; +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.export.js + +let from; +// ^^^^ variable.other.readwrite.js + +import from from "./othermod"; +// ^^^^ variable.other.readwrite.js + +import { from } from "./othermod"; +// ^^^^ variable.other.readwrite.js + +export from from "./othermod"; +// ^^^^ variable.other.readwrite.js + +export { from } from "./othermod"; +// ^^^^ variable.other.readwrite.js + +export default$ +// ^^^^^^^^ - keyword +; + +let x = import.meta; +// ^^^^^^^^^^^ - meta.import +// ^^^^^^ keyword.import +// ^ punctuation.accessor +// ^^^^ variable.language.import + + import.meta; +// ^^^^^^^^^^^ - meta.import +// ^^^^^^ keyword.import +// ^ punctuation.accessor +// ^^^^ variable.language.import + + import +// ^^^^^^ - meta.import + .meta; +// ^^^^^ - meta.import +// ^ punctuation.accessor +// ^^^^ variable.language.import + + import('foo'); +// ^^^^^^ keyword.import +// ^^^^^^^ meta.group + + import +// ^^^^^^ - meta.import + ('foo'); +// ^^^^^^^ meta.group diff --git a/syntaxes/JavaScript/tests/syntax_test_js_jsdoc.js b/syntaxes/JavaScript/tests/syntax_test_js_jsdoc.js @@ -0,0 +1,42 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + /**@a*/ +// ^^^ punctuation.definition.comment.begin +// ^^ entity.other.attribute-name.documentation +// ^^ punctuation.definition.comment.end - entity.other.attribute-name.documentation +// ^^^^^^^ comment.block.documentation.js + +/** @a b */ +// ^^ entity.other.attribute-name.documentation +// ^ - entity.other.attribute-name.documentation +// ^^ punctuation.definition.comment.end + +/** @a@b */ +// ^^ entity.other.attribute-name.documentation +// ^^ - entity.other.attribute-name.documentation + +/** + * @a b +// ^^ entity.other.attribute-name.documentation +// ^ comment.block.documentation +*/ +// <- punctuation.definition.comment.end + +/** + * First line + * @a @b c */ +// ^^ entity.other.attribute-name.documentation +// ^^ - entity.other.attribute-name.documentation +// ^^^^ comment.block.documentation +// ^^^^ - comment.block.documentation comment.block.documentation +// ^^ comment.block.documentation punctuation.definition.comment.end + +/** + + @a */ +//^^ - entity.other.attribute-name.documentation +// ^^ punctuation.definition.comment.end + +/*@a */ +//^^ - entity.other.attribute-name.documentation +// ^^ punctuation.definition.comment.end diff --git a/syntaxes/JavaScript/tests/syntax_test_js_regexp.js b/syntaxes/JavaScript/tests/syntax_test_js_regexp.js @@ -0,0 +1,241 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + +/* LITERAL */ + + // +// ^^ comment - string.regexp + + /abc/; +// ^^^^^ string.regexp +// ^ punctuation.definition.string.begin +// ^ punctuation.definition.string.end + + /ab\/c/; +// ^^^^^^^ string.regexp +// ^^ constant.character.escape.backslash + + /ab\//; +// ^^^^^^ string.regexp - comment +// ^^ constant.character.escape.backslash + + /ab\/*/; +// ^^^^^^^ string.regexp - comment +// ^^ constant.character.escape.backslash +// ^ keyword.operator.quantifier + + /abc/gimuys; +// ^^^^^^^^^^^ string.regexp +// ^^^^^^ keyword.other.js + + /abc/ + gimuys; +// ^^^^^^ variable.other.readwrite - string.regexp; + + /abc//* + */gimuys; +// ^^^^^^ variable.other.readwrite - string.regexp; + + /abc//i; +// ^^^^^ string.regexp +// ^^ - string.regexp +// ^ keyword.operator.arithmetic +// ^ variable.other.readwrite + + /abc/*i; +// ^^^^^ string.regexp +// ^^ - string.regexp +// ^ keyword.operator.arithmetic - string.regexp +// ^ variable.other.readwrite + + /abc/**i; +// ^^^^^ string.regexp +// ^^^ - string.regexp +// ^^ keyword.operator.arithmetic - string.regexp +// ^ variable.other.readwrite + + + /a|b/; +// ^ keyword.operator.or + +/* ESCAPES */ + + /a.c/; +// ^ constant.other.character-class.escape + + /\d\D\w\W\s\S/; +// ^^^^^^^^^^^^ constant.other.character-class.escape.backslash + + /\t\r\n\v\f\0/; +// ^^^^^^^^^^^^ constant.character.escape.backslash + + /\cAB/; +// ^^^ constant.character.escape.backslash +// ^ - constant.character.escape + + /\x0ff/; +// ^^^^ constant.character.escape.backslash +// ^ - constant.character.escape + + /\x0/; +// ^^ constant.character.escape.backslash +// ^ - constant.character.escape + + /\u12abc/; +// ^^^^^^ constant.character.escape.backslash +// ^ - constant.character.escape + + /\u12a/; +// ^^ constant.character.escape.backslash +// ^^^ - constant.character.escape + + /\b\B^$/; +// ^^^^^^ keyword.control.anchor + + /\p{General_Category=Letter} \P{Letter}/; +// ^^ constant.other.character-class.escape.unicode-property +// ^ punctuation.definition.unicode-property.begin +// ^^^^^^^^^^^^^^^^ support.constant.unicode-property +// ^ punctuation.separator.key-value.unicode-property +// ^^^^^^ support.constant.unicode-property +// ^ punctuation.definition.unicode-property.end +// ^^ constant.other.character-class.escape.unicode-property +// ^ punctuation.definition.unicode-property.begin +// ^^^^^^ support.constant.unicode-property +// ^ punctuation.definition.unicode-property.end + +/* QUANTIFIERS */ + + /a*b+c?/; +// ^ keyword.operator.quantifier.regexp +// ^ keyword.operator.quantifier.regexp +// ^ keyword.operator.quantifier.regexp + + /a*?b+?c??/; +// ^^ keyword.operator.quantifier.regexp +// ^^ keyword.operator.quantifier.regexp +// ^^ keyword.operator.quantifier.regexp + + /a{10}b{1,2}c{1,}d{,2}/; +// ^^^^ keyword.operator.quantifier +// ^^^^^ keyword.operator.quantifier +// ^^^^ keyword.operator.quantifier +// ^^^^ keyword.operator.quantifier + + + /a{10}?b{1,2}?c{1,}?d{,2}?/; +// ^^^^^ keyword.operator.quantifier +// ^^^^^^ keyword.operator.quantifier +// ^^^^^ keyword.operator.quantifier +// ^^^^^ keyword.operator.quantifier + + /a{b{}c{,}d{1, 2}/; +// ^^^^^^^^^^^^^^^^ - keyword.operator.quantifier + +/* GROUPING */ + + /a(bc)d/; +// ^^^^ meta.group +// ^ punctuation.definition.group +// ^ punctuation.definition.group + + /a(?:bc)d/; +// ^^^^^^ meta.group +// ^^^ punctuation.definition.group +// ^^ punctuation.definition.group.no-capture +// ^ punctuation.definition.group + + /a(b(c)d)e/; +// ^^^^^^^ meta.group +// ^^^ meta.group meta.group +// ^ punctuation.definition.group +// ^ punctuation.definition.group +// ^ punctuation.definition.group +// ^ punctuation.definition.group + + /a(b)c\1/; +// ^^ keyword.other.back-reference + + /a(?<foo>bc)d\k<foo>/; +// ^^^^^^^^^^ meta.group +// ^^ punctuation.definition.group +// ^ punctuation.definition.group.named.begin +// ^^^ entity.name.other.group +// ^ punctuation.definition.group.named.end +// ^ punctuation.definition.group +// ^^ keyword.other.back-reference +// ^ punctuation.definition.group.named.begin +// ^^^ variable.other.group +// ^ punctuation.definition.group.named.end + +/* ASSERTIONS */ + + /(?=foo)/; +// ^^^^^^^ meta.group.assertion +// ^ punctuation.definition.group +// ^^ punctuation.definition.group.assertion meta.assertion.look-ahead +// ^ punctuation.definition.group + + /(?!foo)/; +// ^^^^^^^ meta.group.assertion +// ^ punctuation.definition.group +// ^^ punctuation.definition.group.assertion meta.assertion.negative-look-ahead +// ^ punctuation.definition.group + + /(?<=foo)/; +// ^^^^^^^^ meta.group.assertion +// ^ punctuation.definition.group +// ^^^ punctuation.definition.group.assertion meta.assertion.look-behind +// ^ punctuation.definition.group + + /(?<!foo)/; +// ^^^^^^^^ meta.group.assertion +// ^ punctuation.definition.group +// ^^^ punctuation.definition.group.assertion meta.assertion.negative-look-behind +// ^ punctuation.definition.group + +/* CHARACTER CLASSES */ + + /[abc]/; +// ^^^^^ constant.other.character-class.set +// ^ punctuation.definition.character-class +// ^ punctuation.definition.character-class + + /[^abc]/; +// ^^^^^^ constant.other.character-class.set +// ^ punctuation.definition.character-class +// ^ keyword.operator.negation +// ^ punctuation.definition.character-class + + /[\b]/; +// ^^ constant.character.escape.backslash - keyword.control.anchor + + /[/]/; +// ^^^^^ string.regexp +// ^^^ constant.other.character-class.set + + /][[]]/; +// ^ - punctuation +// ^^^ constant.other.character-class.set.regexp +// ^ punctuation.definition.character-class +// ^ punctuation.definition.character-class +// ^ - punctuation + + /[a-z]/; +// ^^^^^ constant.other.character-class.set +// ^^^ constant.other.character-class.range +// ^ punctuation.definition.range +// ^ punctuation.definition.character-class +// ^ punctuation.definition.character-class + + /[a-]/; +// ^^ - constant.other.character-class.range +// ^ - punctuation.definition.range + + + /[-z]/; +// ^^ - constant.other.character-class.range +// ^ - punctuation.definition.range + + /[^-z]/; +// ^^^ - constant.other.character-class.range +// ^ - punctuation.definition.range diff --git a/syntaxes/JavaScript/tests/syntax_test_js_support_builtin.js b/syntaxes/JavaScript/tests/syntax_test_js_support_builtin.js @@ -0,0 +1,457 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + isNaN; +// ^^^^^ support.function - meta.function-call + + isNaN(); +// ^^^^^^^ meta.function-call - meta.function-call.method +// ^^^^^ support.function +// ^^ meta.group + + isNaN.call(); +// ^^^^^^^^^^^^ meta.function-call.method - meta.function-call meta.function-call +// ^^^^^ support.function + + new Error(); +// ^^^^^ support.class.builtin + + Array; +// ^^^^^ support.class.builtin + ArrayBuffer; +// ^^^^^^^^^^^ support.class.builtin + Boolean; +// ^^^^^^^ support.class.builtin + BigInt; +// ^^^^^^ support.class.builtin + BigInt64Array; +// ^^^^^^^^^^^^^ support.class.builtin + BigUint64Array; +// ^^^^^^^^^^^^^^ support.class.builtin + DataView; +// ^^^^^^^^ support.class.builtin + Date; +// ^^^^ support.class.builtin + Float32Array; +// ^^^^^^^^^^^^ support.class.builtin + Float64Array; +// ^^^^^^^^^^^^ support.class.builtin + Function; +// ^^^^^^^^ support.class.builtin + Int8Array; +// ^^^^^^^^^ support.class.builtin + Int16Array; +// ^^^^^^^^^^ support.class.builtin + Int32Array; +// ^^^^^^^^^^ support.class.builtin + Map; +// ^^^ support.class.builtin + Number; +// ^^^^^^ support.class.builtin + Object; +// ^^^^^^ support.class.builtin + Promise; +// ^^^^^^^ support.class.builtin + Proxy; +// ^^^^^ support.class.builtin + RegExp; +// ^^^^^^ support.class.builtin + Set; +// ^^^ support.class.builtin + String; +// ^^^^^^ support.class.builtin + Symbol; +// ^^^^^^ support.class.builtin + Uint8Array; +// ^^^^^^^^^^ support.class.builtin + Uint16Array; +// ^^^^^^^^^^^ support.class.builtin + Uint32Array; +// ^^^^^^^^^^^ support.class.builtin + Uint32ClampedArray; +// ^^^^^^^^^^^^^^^^^^ support.class.builtin + WeakMap; +// ^^^^^^^ support.class.builtin + WeakSet; +// ^^^^^^^ support.class.builtin + + Error; +// ^^^^^ support.class.builtin + EvalError; +// ^^^^^^^^^ support.class.builtin + RangeError; +// ^^^^^^^^^^ support.class.builtin + ReferenceError; +// ^^^^^^^^^^^^^^ support.class.builtin + SyntaxError; +// ^^^^^^^^^^^ support.class.builtin + TypeError; +// ^^^^^^^^^ support.class.builtin + URIError; +// ^^^^^^^^ support.class.builtin + + Atomics; +// ^^^^^^^ support.constant.builtin + Math; +// ^^^^ support.constant.builtin + JSON; +// ^^^^ support.constant.builtin + Reflect; +// ^^^^^^^ support.constant.builtin + + eval; +// ^^^^ support.function + isFinite; +// ^^^^^^^^ support.function + isNaN; +// ^^^^^ support.function + parseFloat; +// ^^^^^^^^^^ support.function + parseInt; +// ^^^^^^^^ support.function + decodeURI; +// ^^^^^^^^^ support.function + decodeURIComponent; +// ^^^^^^^^^^^^^^^^^^ support.function + encodeURI; +// ^^^^^^^^^ support.function + encodeURIComponent; +// ^^^^^^^^^^^^^^^^^^ support.function + + +foo.constructor; +// ^^^^^^^^^^^ variable.language.constructor +foo.__proto__; +// ^^^^^^^^^ invalid.deprecated variable.language.prototype +foo.__defineGetter__; +// ^^^^^^^^^^^^^^^^ invalid.deprecated support.function +foo.__defineSetter__; +// ^^^^^^^^^^^^^^^^ invalid.deprecated support.function +foo.__lookupGetter__; +// ^^^^^^^^^^^^^^^^ invalid.deprecated support.function + +foo.hasOwnProperty; +// ^^^^^^^^^^^^^^ support.function +foo.isPrototypeOf; +// ^^^^^^^^^^^^^ support.function +foo.propertyIsEnumerable; +// ^^^^^^^^^^^^^^^^^^^^ support.function +foo.toLocaleString; +// ^^^^^^^^^^^^^^ support.function +foo.toString; +// ^^^^^^^^ support.function +foo.valueOf; +// ^^^^^^^ support.function + +Array.from; +// ^^^^ support.function.builtin +Array.isArray; +// ^^^^^^^ support.function.builtin +Array.of; +// ^^ support.function.builtin + +ArrayBuffer.isView; +// ^^^^^^ support.function.builtin + +Atomics.and; +// ^^^ support.function.builtin +Atomics.add; +// ^^^ support.function.builtin +Atomics.compareExchange; +// ^^^^^^^^^^^^^^^ support.function.builtin +Atomics.exchange; +// ^^^^^^^^ support.function.builtin +Atomics.isLockFree; +// ^^^^^^^^^^ support.function.builtin +Atomics.load; +// ^^^^ support.function.builtin +Atomics.or; +// ^^ support.function.builtin +Atomics.store; +// ^^^^^ support.function.builtin +Atomics.sub; +// ^^^ support.function.builtin +Atomics.wait; +// ^^^^ support.function.builtin +Atomics.wake; +// ^^^^ support.function.builtin +Atomics.xor; +// ^^^ support.function.builtin + +BigInt.asUintN; +// ^^^^^^^ support.function.builtin +BigInt.asIntN; +// ^^^^^^ support.function.builtin + +Date.now; +// ^^^ support.function.builtin +Date.parse; +// ^^^^^ support.function.builtin +Date.UTC; +// ^^^ support.function.builtin + +JSON.parse; +// ^^^^^ support.function.builtin +JSON.stringify; +// ^^^^^^^^^ support.function.builtin + +Math.E; +// ^ support.constant.builtin +Math.LN10; +// ^^^^ support.constant.builtin +Math.LN2; +// ^^^ support.constant.builtin +Math.LOG10E; +// ^^^^^^ support.constant.builtin +Math.LOG2E; +// ^^^^^ support.constant.builtin +Math.PI; +// ^^ support.constant.builtin +Math.SQRT1_2; +// ^^^^^^^ support.constant.builtin +Math.SQRT2; +// ^^^^^ support.constant.builtin +Math.abs; +// ^^^ support.function.builtin +Math.acos; +// ^^^^ support.function.builtin +Math.acosh; +// ^^^^^ support.function.builtin +Math.asin; +// ^^^^ support.function.builtin +Math.asin; +// ^^^^ support.function.builtin +Math.atan; +// ^^^^ support.function.builtin +Math.atanh; +// ^^^^^ support.function.builtin +Math.atan2; +// ^^^^^ support.function.builtin +Math.cbrt; +// ^^^^ support.function.builtin +Math.ceil; +// ^^^^ support.function.builtin +Math.clz32; +// ^^^^^ support.function.builtin +Math.cos; +// ^^^ support.function.builtin +Math.cosh; +// ^^^^ support.function.builtin +Math.exp; +// ^^^ support.function.builtin +Math.expm1; +// ^^^^^ support.function.builtin +Math.floor; +// ^^^^^ support.function.builtin +Math.fround; +// ^^^^^^ support.function.builtin +Math.hypot; +// ^^^^^ support.function.builtin +Math.imul; +// ^^^^ support.function.builtin +Math.log; +// ^^^ support.function.builtin +Math.log1p; +// ^^^^^ support.function.builtin +Math.log10; +// ^^^^^ support.function.builtin +Math.log2; +// ^^^^ support.function.builtin +Math.max; +// ^^^ support.function.builtin +Math.min; +// ^^^ support.function.builtin +Math.pow; +// ^^^ support.function.builtin +Math.random; +// ^^^^^^ support.function.builtin +Math.round; +// ^^^^^ support.function.builtin +Math.sign; +// ^^^^ support.function.builtin +Math.sin; +// ^^^ support.function.builtin +Math.sinh; +// ^^^^ support.function.builtin +Math.sqrt; +// ^^^^ support.function.builtin +Math.tan; +// ^^^ support.function.builtin +Math.tanh; +// ^^^^ support.function.builtin +Math.trunc; +// ^^^^^ support.function.builtin + +Number.EPSILON; +// ^^^^^^^ support.constant.builtin +Number.MAX_SAFE_INTEGER; +// ^^^^^^^^^^^^^^^^ support.constant.builtin +Number.MAX_VALUE; +// ^^^^^^^^^ support.constant.builtin +Number.MIN_SAFE_INTEGER; +// ^^^^^^^^^^^^^^^^ support.constant.builtin +Number.MIN_VALUE; +// ^^^^^^^^^ support.constant.builtin +Number.NEGATIVE_INFINITY; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Number.POSITIVE_INFINITY; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Number.isFinite; +// ^^^^^^^^ support.function.builtin +Number.isInteger; +// ^^^^^^^^^ support.function.builtin +Number.isNaN; +// ^^^^^ support.function.builtin +Number.isSafeInteger; +// ^^^^^^^^^^^^^ support.function.builtin +Number.NaN; +// ^^^ support.function.builtin +Number.parseFloat; +// ^^^^^^^^^^ support.function.builtin +Number.parseInt; +// ^^^^^^^^ support.function.builtin + +Object.assign; +// ^^^^^^ support.function.builtin +Object.create; +// ^^^^^^ support.function.builtin +Object.defineProperties; +// ^^^^^^^^^^^^^^^^ support.function.builtin +Object.defineProperty; +// ^^^^^^^^^^^^^^ support.function.builtin +Object.entries; +// ^^^^^^^ support.function.builtin +Object.freeze; +// ^^^^^^ support.function.builtin +Object.fromEntries; +// ^^^^^^^^^^^ support.function.builtin +Object.getOwnPropertyDescriptors; +// ^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.builtin +Object.getOwnPropertyNames; +// ^^^^^^^^^^^^^^^^^^^ support.function.builtin +Object.getOwnPropertySymbols; +// ^^^^^^^^^^^^^^^^^^^^^ support.function.builtin +Object.getPrototypeOf; +// ^^^^^^^^^^^^^^ support.function.builtin +Object.is; +// ^^ support.function.builtin +Object.isExtensible; +// ^^^^^^^^^^^^ support.function.builtin +Object.isFrozen; +// ^^^^^^^^ support.function.builtin +Object.isSealed; +// ^^^^^^^^ support.function.builtin +Object.keys; +// ^^^^ support.function.builtin +Object.preventExtensions; +// ^^^^^^^^^^^^^^^^^ support.function.builtin +Object.seal; +// ^^^^ support.function.builtin +Object.setPrototypeOf; +// ^^^^^^^^^^^^^^ support.function.builtin +Object.values; +// ^^^^^^ support.function.builtin +Object.notABuiltin; +// ^^^^^^^^^^^ meta.property.object - support + +Promise.all; +// ^^^ support.function.builtin +Promise.race; +// ^^^^ support.function.builtin +Promise.reject; +// ^^^^^^ support.function.builtin +Promise.resolve; +// ^^^^^^^ support.function.builtin +Promise.allSettled; +// ^^^^^^^^^^ support.function.builtin +Promise.any; +// ^^^ support.function.builtin + +Reflect.apply; +// ^^^^^ support.function.builtin +Reflect.construct; +// ^^^^^^^^^ support.function.builtin +Reflect.defineProperty; +// ^^^^^^^^^^^^^^ support.function.builtin +Reflect.deleteProperty; +// ^^^^^^^^^^^^^^ support.function.builtin +Reflect.get; +// ^^^ support.function.builtin +Reflect.getOwnPropertyDescriptor; +// ^^^^^^^^^^^^^^^^^^^^^^^^ support.function.builtin +Reflect.getPrototypeOf; +// ^^^^^^^^^^^^^^ support.function.builtin +Reflect.has; +// ^^^ support.function.builtin +Reflect.isExtensible; +// ^^^^^^^^^^^^ support.function.builtin +Reflect.ownKeys; +// ^^^^^^^ support.function.builtin +Reflect.preventExtensions; +// ^^^^^^^^^^^^^^^^^ support.function.builtin +Reflect.set; +// ^^^ support.function.builtin +Reflect.setPrototypeOf; +// ^^^^^^^^^^^^^^ support.function.builtin + +String.fromCharCode; +// ^^^^^^^^^^^^ support.function.builtin +String.fromCodePoint; +// ^^^^^^^^^^^^^ support.function.builtin +String.raw; +// ^^^ support.function.builtin + +Symbol.asyncIterator; +// ^^^^^^^^^^^^^ support.constant.builtin +Symbol.hasInstance; +// ^^^^^^^^^^^ support.constant.builtin +Symbol.isConcatSpreadable; +// ^^^^^^^^^^^^^^^^^^ support.constant.builtin +Symbol.iterator; +// ^^^^^^^^ support.constant.builtin +Symbol.match; +// ^^^^^ support.constant.builtin +Symbol.replace; +// ^^^^^^^ support.constant.builtin +Symbol.search; +// ^^^^^^ support.constant.builtin +Symbol.species; +// ^^^^^^^ support.constant.builtin +Symbol.split; +// ^^^^^ support.constant.builtin +Symbol.toPrimitive; +// ^^^^^^^^^^^ support.constant.builtin +Symbol.toStringTag; +// ^^^^^^^^^^^ support.constant.builtin +Symbol.unscopeables; +// ^^^^^^^^^^^^ support.constant.builtin +Symbol.for; +// ^^^ support.function.builtin +Symbol.keyFor; +// ^^^^^^ support.function.builtin +Symbol.notABuiltin; +// ^^^^^^^^^^^ meta.property.object - support + +BigInt64Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +BigUint64Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Int8Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Float32Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Float64Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Int8Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Int16Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Int32Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Uint8Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Uint16Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Uint32Array.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin +Uint32ClampedArray.BYTES_PER_ELEMENT; +// ^^^^^^^^^^^^^^^^^ support.constant.builtin diff --git a/syntaxes/JavaScript/tests/syntax_test_js_support_console.js b/syntaxes/JavaScript/tests/syntax_test_js_support_console.js @@ -0,0 +1,58 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + console; +// ^^^^^^^ support.type.object.console + + console.log(); +// ^^^^^^^^^^^^^ meta.function-call.method +// ^^^^^^^ support.type.object.console +// ^ punctuation.accessor +// ^^^ support.function.console +// ^^ meta.group + + console.log; +// ^^^^^^^^^^^ - meta.function-call +// ^^^^^^^ support.type.object.console +// ^ punctuation.accessor +// ^^^ support.function.console + + console.log.toString(); +// ^^^^^^^^^^^^^^^^^^^^^^ meta.function-call.method - meta.function-call meta.function-call +// ^^^^^^^ support.type.object.console +// ^ punctuation.accessor +// ^^^ support.function.console + +console.warn; +// ^^^^ support.function.console +console.info; +// ^^^^ support.function.console +console.log; +// ^^^ support.function.console +console.error; +// ^^^^^ support.function.console +console.time; +// ^^^^ support.function.console +console.timeEnd; +// ^^^^^^^ support.function.console +console.assert; +// ^^^^^^ support.function.console +console.count; +// ^^^^^ support.function.console +console.dir; +// ^^^ support.function.console +console.group; +// ^^^^^ support.function.console +console.groupCollapsed; +// ^^^^^^^^^^^^^^ support.function.console +console.groupEnd; +// ^^^^^^^^ support.function.console +console.profile; +// ^^^^^^^ support.function.console +console.profileEnd; +// ^^^^^^^^^^ support.function.console +console.table; +// ^^^^^ support.function.console +console.trace; +// ^^^^^ support.function.console +console.timeStamp; +// ^^^^^^^^^ support.function.console diff --git a/syntaxes/JavaScript/tests/syntax_test_js_support_dom.js b/syntaxes/JavaScript/tests/syntax_test_js_support_dom.js @@ -0,0 +1,14 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + XMLHttpRequest; +// ^^^^^^^^^^^^^^ support.class.dom + document; +// ^^^^^^^^ support.type.object.dom + window; +// ^^^^^^ support.type.object.dom + navigator; +// ^^^^^^^^^ support.type.object.dom + clearTimeout; +// ^^^^^^^^^^^^ support.function.dom + setTimeout; +// ^^^^^^^^^^ support.function.dom diff --git a/syntaxes/JavaScript/tests/syntax_test_js_support_node.js b/syntaxes/JavaScript/tests/syntax_test_js_support_node.js @@ -0,0 +1,144 @@ +// SYNTAX TEST "Packages/JavaScript/JavaScript.sublime-syntax" + + global; +// ^^^^^^ support.type.object.node + + __dirname; +// ^^^^^^^^^ support.constant.node + __filename; +// ^^^^^^^^^ support.constant.node + exports; +// ^^^^^^^ support.constant.node + module; +// ^^^^^^ support.constant.node + require; +// ^^^^^^^ support.function.node + Buffer; +// ^^^^^^ support.class.node + +nodeClass = new Buffer(); +// ^^^^^^ support.class.node + +module.children; +// ^^^^^^^^ support.constant.node +module.exports; +// ^^^^^^^ support.constant.node +module.filename; +// ^^^^^^^^ support.constant.node +module.id; +// ^^ support.constant.node +module.loaded; +// ^^^^^^ support.constant.node +module.parent; +// ^^^^^^ support.constant.node +module.paths; +// ^^^^^ support.constant.node +module.require; +// ^^^^^^^ support.function.node + +process.arch; +// ^^^^ support.constant.node.js +process.argv; +// ^^^^ support.constant.node.js +process.argv0; +// ^^^^^ support.constant.node.js +process.channel; +// ^^^^^^^ support.constant.node.js +process.config; +// ^^^^^^ support.constant.node.js +process.connected; +// ^^^^^^^^^ support.constant.node.js +process.debugPort; +// ^^^^^^^^^ support.constant.node.js +process.env; +// ^^^ support.constant.node.js +process.execArgv; +// ^^^^^^^^ support.constant.node.js +process.execPath; +// ^^^^^^^^ support.constant.node.js +process.exitCode; +// ^^^^^^^^ support.constant.node.js +process.mainModule; +// ^^^^^^^^^^ support.constant.node.js +process.noDeprecation; +// ^^^^^^^^^^^^^ support.constant.node.js +process.pid; +// ^^^ support.constant.node.js +process.platform; +// ^^^^^^^^ support.constant.node.js +process.ppid; +// ^^^^ support.constant.node.js +process.release; +// ^^^^^^^ support.constant.node.js +process.stderr; +// ^^^^^^ support.constant.node.js +process.stdin; +// ^^^^^ support.constant.node.js +process.stdout; +// ^^^^^^ support.constant.node.js +process.throwDeprecation; +// ^^^^^^^^^^^^^^^^ support.constant.node.js +process.title; +// ^^^^^ support.constant.node.js +process.traceDeprecation; +// ^^^^^^^^^^^^^^^^ support.constant.node.js +process.version; +// ^^^^^^^ support.constant.node.js +process.versions; +// ^^^^^^^^ support.constant.node.js +process.abort; +// ^^^^^ support.function.node.js +process.chdir; +// ^^^^^ support.function.node.js +process.cpuUsage; +// ^^^^^^^^ support.function.node.js +process.cwd; +// ^^^ support.function.node.js +process.disconnect; +// ^^^^^^^^^^ support.function.node.js +process.dlopen; +// ^^^^^^ support.function.node.js +process.emitWarning; +// ^^^^^^^^^^^ support.function.node.js +process.exit; +// ^^^^ support.function.node.js +process.getegid; +// ^^^^^^^ support.function.node.js +process.geteuid; +// ^^^^^^^ support.function.node.js +process.getgit; +// ^^^^^^ support.function.node.js +process.getgroups; +// ^^^^^^^^^ support.function.node.js +process.getuid; +// ^^^^^^ support.function.node.js +process.hasUncaughtExceptionCaptureCallback; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.node.js +process.hrtime; +// ^^^^^^ support.function.node.js +process.initGroups; +// ^^^^^^^^^^ support.function.node.js +process.kill; +// ^^^^ support.function.node.js +process.memoryUsage; +// ^^^^^^^^^^^ support.function.node.js +process.nextTick; +// ^^^^^^^^ support.function.node.js +process.send; +// ^^^^ support.function.node.js +process.setegid; +// ^^^^^^^ support.function.node.js +process.seteuid; +// ^^^^^^^ support.function.node.js +process.setgid; +// ^^^^^^ support.function.node.js +process.setgroups; +// ^^^^^^^^^ support.function.node.js +process.setuid; +// ^^^^^^ support.function.node.js +process.hasUncaughtExceptionCaptureCallback; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ support.function.node.js +process.umask; +// ^^^^^ support.function.node.js +process.uptime; +// ^^^^^^ support.function.node.js diff --git a/syntaxes/JavaScript/tests/syntax_test_jsx.jsx b/syntaxes/JavaScript/tests/syntax_test_jsx.jsx @@ -0,0 +1,205 @@ +// SYNTAX TEST "Packages/JavaScript/JSX.sublime-syntax" + + <foo />; +// ^^^^^^^ meta.jsx meta.tag +// ^ punctuation.definition.tag.begin +// ^^^ meta.tag.name entity.name.tag +// ^^ punctuation.definition.tag.end + + <foo>Hello!</foo>; +// ^^^^^^^^^^^^^^^^^ meta.jsx +// ^^^^^ meta.tag +// ^ punctuation.definition.tag.begin +// ^^^ meta.tag.name entity.name.tag +// ^ punctuation.definition.tag.end +// ^^^^^^ - meta.tag +// ^^^^^^ meta.tag +// ^^ punctuation.definition.tag.begin +// ^^^ meta.tag.name entity.name.tag +// ^ punctuation.definition.tag.end + + <foo.bar.baz>Hello!</foo.bar.baz>; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.jsx +// ^^^^^^^^^^^^^ meta.tag +// ^^^^^^^^^^^ meta.tag.name +// ^ punctuation.accessor +// ^ punctuation.accessor +// ^^^ entity.name.tag +// ^^^^^^ - meta.tag +// ^^^^^^^^^^^^^^ meta.tag +// ^^^^^^^^^^^ meta.tag.name +// ^ punctuation.accessor +// ^ punctuation.accessor +// ^^^ entity.name.tag + + <foo>Hello!<bar/>World!</foo>; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.jsx +// ^^^^^ meta.tag +// ^^^^^^ - meta.tag +// ^^^^^^ meta.tag +// ^^^^^^ - meta.tag +// ^^^^^^ meta.tag + + <foo></foo><bar> +// ^^^^^^^^^^^ meta.jsx +// ^^^^^ - meta.jsx +// ^ keyword.operator.comparison +// ^^^ variable +// ^ keyword.operator.comparison +0; + + <>Hello!</>; +// ^^^^^^^^^^^ meta.jsx +// ^^ meta.tag +// ^ punctuation.definition.tag.begin +// ^ punctuation.definition.tag.end +// ^^^^^^ - meta.tag +// ^^^ meta.tag +// ^^ punctuation.definition.tag.begin +// ^ punctuation.definition.tag.end + + <foo></foo> + <bar> +// ^^^^^ - meta.jsx +// ^ keyword.operator.comparison +// ^^^ variable +// ^ keyword.operator.comparison +0; + + </foo>; +// ^^^^ invalid.illegal.unmatched-tag + +<foo + bar +// ^^^ meta.jsx meta.tag.attributes entity.other.attribute-name + + = +// ^ punctuation.separator.key-value + + 'test' +// ^^^^^^ string.quoted.single + + baz='test' +// ^^^^^^^^^^ meta.jsx meta.tag.attributes +// ^^^ entity.other.attribute-name +// ^ punctuation.separator.key-value +// ^^^^^^ string.quoted.single +// ^ punctuation.definition.string.begin +// ^ punctuation.definition.string.end + + baz="test" +// ^^^^^^^^^^ meta.jsx meta.tag.attributes +// ^^^ entity.other.attribute-name +// ^ punctuation.separator.key-value +// ^^^^^^ string.quoted.double +// ^ punctuation.definition.string.begin +// ^ punctuation.definition.string.end + + baz="\n" +// ^^^^ string.quoted.double - constant.character.escape + + baz="  " +// ^^^^^^ constant.character.escape +// ^ punctuation.definition.entity +// ^ punctuation.definition.entity +// ^^^^^ - constant.character.escape + + baz={xyzzy} +// ^^^^^^^ meta.interpolation +// ^ punctuation.definition.interpolation.begin +// ^^^^^ source.js.embedded.jsx variable.other.readwrite +// ^ punctuation.definition.interpolation.end + + baz={{ xyzzy:42 }} +// ^^^^^^^^^^^^^^ meta.interpolation +// ^ punctuation.definition.interpolation.begin +// ^^^^^^^^^^^^ source.js.embedded.jsx meta.mapping +// ^^^^^ meta.mapping.key +// ^ punctuation.separator.key-value +// ^^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.definition.interpolation.end + + + {...attrs} +// ^^^^^^^^^^ meta.interpolation +// ^^^^^^^^ source.js.embedded.jsx +// ^^^ keyword.operator.spread +// ^^^^^ variable.other.readwrite + + {...{ xyzzy:42 }} +// ^^^^^^^^^^^^^^^^^ meta.interpolation +// ^^^^^^^^^^^^^^^ source.js.embedded.jsx +// ^^^ keyword.operator.spread +// ^^^^^^^^^^^^ meta.mapping +// ^^^^^ meta.mapping.key +// ^ punctuation.separator.key-value +// ^^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.definition.interpolation.end + + // baz +// ^^^^^^ comment.line.double-slash +// ^^ punctuation.definition.comment + + /* baz */ +// ^^^^^^^^^ comment.block +// ^^ punctuation.definition.comment +// ^^ punctuation.definition.comment + +/>; +// <- meta.jsx meta.tag punctuation.definition.tag.end + +<foo> + // test +// ^^^^^^^^ - comment + + /* test */ +// ^^^^^^^^^^ - comment + +   ; +// ^^^^^^ constant.character.escape +// ^ punctuation.definition.entity +// ^ punctuation.definition.entity +// ^^^^^^^ - constant.character.escape + + {xyzzy} +// ^^^^^^^ meta.interpolation +// ^^^^^ source.js.embedded.jsx variable.other.readwrite + + {{ xyzzy:42 }} +// ^^^^^^^^^^^^^^ meta.interpolation +// ^^^^^^^^^^^^ source.js.embedded.jsx +// ^^^^^^^^^^^^ meta.mapping +// ^^^^^ meta.mapping.key +// ^ punctuation.separator.key-value +// ^^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.definition.interpolation.end + + {//} +// ^ punctuation.definition.interpolation.begin +// ^^^ comment.line.double-slash +// ^^ punctuation.definition.comment +// ^ - punctuation + } +// ^ punctuation.definition.interpolation.end + + {/* foo */} +// ^^^^^^^^^^^ meta.jsx meta.interpolation comment.block - source.embedded +// ^ punctuation.definition.interpolation.begin +// ^^ punctuation.definition.comment.begin +// ^^ punctuation.definition.comment.end +// ^ punctuation.definition.interpolation.end + + {/* foo */ bar} +// ^^^^^^^^^^^^^^^ meta.jsx meta.interpolation +// ^^^^^^^^^^^^^ source.js.embedded +// ^ punctuation.definition.interpolation.begin - comment +// ^^ punctuation.definition.comment.begin +// ^^ punctuation.definition.comment.end +// ^^^^^ - comment +// ^^^ meta.jsx meta.interpolation variable.other.readwrite +// ^ punctuation.definition.interpolation.end + +</foo>; + + <class />; +// ^^^^^ entity.name.tag diff --git a/syntaxes/JavaScript/tests/syntax_test_tsx.tsx b/syntaxes/JavaScript/tests/syntax_test_tsx.tsx @@ -0,0 +1,41 @@ +// SYNTAX TEST "Packages/JavaScript/TSX.sublime-syntax" + + <foo />; +// ^^^^^^^ meta.jsx meta.tag +// ^ punctuation.definition.tag.begin +// ^^^ meta.tag.name entity.name.tag +// ^^ punctuation.definition.tag.end + + type x < T = Foo > = any; +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.type-alias +// ^^^^ storage.type +// ^ entity.name.type +// ^^^^^^^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ variable.parameter.generic +// ^ keyword.operator.assignment +// ^^^ support.class +// ^ punctuation.definition.generic.end +// ^ keyword.operator.assignment +// ^^^ meta.type-alias support.type.any + +let x : T.U<V>; +// ^^^^^^ meta.type +// ^ support.class +// ^ punctuation.accessor +// ^ support.class +// ^^^ meta.generic +// ^ support.class + +// This is invalid TSX as the TypeScript type assertion is parsed as a JSX tag +let strLength: number = (<string>someValue).length; // </string> ); +// ^^^^^^^^ meta.tag - meta.assertion +// ^^^^^^^^^ meta.tag - comment + +var foo = 1 << 0; +// ^^ keyword.operator.bitwise + +if (a < b || c <= d) {} +// ^ keyword.operator.comparison +// ^^ keyword.operator.logical +// ^^ keyword.operator.comparison diff --git a/syntaxes/JavaScript/tests/syntax_test_typescript.ts b/syntaxes/JavaScript/tests/syntax_test_typescript.ts @@ -0,0 +1,973 @@ +// SYNTAX TEST "Packages/JavaScript/TypeScript.sublime-syntax" + +/* Import/Export */ + + import type T from 'somewhere'; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.import +// ^^^^^^ keyword.control.import-export +// ^^^^ keyword.control.import-export +// ^ variable.other.readwrite +// ^^^^ keyword.control.import-export +// ^^^^^^^^^^^ meta.string string.quoted.single + + import type { U, V } from 'somewhere'; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.import +// ^^^^^^ keyword.control.import-export +// ^^^^ keyword.control.import-export +// ^^^^^^^^ meta.block +// ^ variable.other.readwrite +// ^ punctuation.separator.comma +// ^ variable.other.readwrite +// ^^^^ keyword.control.import-export +// ^^^^^^^^^^^ meta.string string.quoted.single + + export type T = any; +// ^^^^^^^^^^^^^^^^^^^ meta.export +// ^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^ meta.type-alias +// ^ punctuation.terminator.statement.empty - meta.export + + export interface Foo {} +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.export +// ^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^ meta.interface +// ^^^^^^^^^ keyword.declaration +// ^^^ entity.name.interface +// ^^ meta.block + + export namespace Foo {} +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.export +// ^^^^^^ keyword.control.import-export +// ^^^^^^^^^^^^^^^^ meta.namespace +// ^^^^^^^^^ keyword.declaration +// ^^^ entity.name.namespace +// ^^ meta.block + +/* Declarations */ + + interface Foo { +// ^^^^^^^^^^^^^^^^ meta.interface +// ^^^^^^^^^ keyword.declaration +// ^^^ entity.name.interface +// ^ meta.block punctuation.section.block.begin + foo: any; +//^^^^^^^^^^^^^^^^ meta.interface meta.block +// ^^^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^ punctuation.separator + bar?: any; +//^^^^^^^^^^^^^^^^^ meta.interface meta.block +// ^^^ variable.other.readwrite +// ^ storage.modifier.optional +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^ punctuation.separator + } +// ^ meta.block punctuation.section.block.end + + interface Foo < T > extends Bar < T > {} +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interface +// ^^^^^^^^^ keyword.declaration +// ^^^ entity.name.interface +// ^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^^^^^^^ storage.modifier.extends +// ^^^ entity.other.inherited-class +// ^^^^^ meta.interface meta.generic +// ^ punctuation.definition.generic.begin +// ^ support.class +// ^ punctuation.definition.generic.end + + interface Foo extends Bar, Baz {} +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interface +// ^^^^^^^ storage.modifier.extends +// ^^^ entity.other.inherited-class +// ^ punctuation.separator.comma +// ^^^ entity.other.inherited-class + + enum Foo { +// ^^^^^^^^^^^ meta.enum +// ^^^^ storage.type +// ^^^ entity.name.enum +// ^ punctuation.section.block.begin + x, +// ^ variable.other.readwrite +// ^ punctuation.separator.comma + y = 2, +// ^ variable.other.readwrite +// ^ keyword.operator.assignment +// ^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.separator.comma + + 'FOO' +// ^^^^^ meta.string string.quoted.single + "FOO" +// ^^^^^ meta.string string.quoted.double + } +// ^ meta.enum meta.block punctuation.section.block.end + + const enum Foo {} +// ^^^^^ keyword.declaration +// ^^^^^^^^^^^ meta.enum +// ^^^^ storage.type +// ^^^ entity.name.enum + + declare enum Foo {} +// ^^^^^^^ storage.type +// ^^^^^^^^^^^ meta.enum +// ^^^^ storage.type +// ^^^ entity.name.enum + + type x < T > = any; +// ^^^^^^^^^^^^^^^^^^ meta.type-alias +// ^^^^ storage.type +// ^ entity.name.type +// ^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^ keyword.operator.assignment +// ^^^ meta.type-alias support.type.any + + type x < T = Foo > = any; +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.type-alias +// ^^^^ storage.type +// ^ entity.name.type +// ^^^^^^^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ variable.parameter.generic +// ^ keyword.operator.assignment +// ^^^ support.class +// ^ punctuation.definition.generic.end +// ^ keyword.operator.assignment +// ^^^ meta.type-alias support.type.any + + class Foo { + foo: any = 42; +// ^^^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^ keyword.operator.assignment + + foo?: any; +// ^^^ variable.other.readwrite +// ^ storage.modifier.optional +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any + + declare foo; +// ^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + + #foo: any; +// ^ punctuation.definition.variable +// ^^^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any + + public foo; +// ^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + private foo; +// ^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + protected foo; +// ^^^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + readonly foo; +// ^^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + + readonly; +// ^^^^^^^^ variable.other.readwrite + + readonly() {} +// ^^^^^^^^^^ meta.function +// ^^^^^^^^ entity.name.function + + private static readonly abstract declare public; +// ^^^^^^^ storage.modifier +// ^^^^^^ storage.modifier +// ^^^^^^^^ storage.modifier +// ^^^^^^^^ storage.modifier +// ^^^^^^^ storage.modifier +// ^^^^^^ variable.other.readwrite + + foo(): any {} +// ^^^^^^^^^^^^^ meta.function +// ^^^ entity.name.function +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^ meta.function meta.block + + foo<T>(): any {} +// ^^^^^^^^^^^^^^^^ meta.function +// ^^^ entity.name.function +// ^^^ meta.generic +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^ meta.function meta.block + + @decorator<T>() +// ^^^^^^^^^^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^^^^^^^ variable.annotation +// ^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ support.class +// ^ punctuation.definition.generic.end +// ^^ meta.group +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end + + foo() {} +// ^^^^^^^^ meta.function +// ^^^ entity.name.function +// ^^ meta.function.parameters +// ^ punctuation.section.group.begin +// ^ punctuation.section.group.end +// ^^ meta.block +// ^ punctuation.section.block.begin +// ^ punctuation.section.block.end + } + + abstract class Foo { +// ^^^^^^^^ storage.modifier +// ^^^^^ meta.class keyword.declaration.class + + abstract foo; +// ^^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite + + abstract foo(); +// ^^^^^^^^ storage.modifier +// ^^^ entity.name.function + + abstract *foo(); +// ^^^^^^^^ storage.modifier +// ^ keyword.generator.asterisk +// ^^^ entity.name.function + + abstract async foo(); +// ^^^^^^^^ storage.modifier +// ^^^^^ keyword.declaration.async +// ^^^ entity.name.function + + abstract async() {} +// ^^^^^^^^ storage.modifier +// ^^^^^ entity.name.function + + abstract get foo() {} +// ^^^^^^^^ storage.modifier +// ^^^ storage.type.accessor +// ^^^ entity.name.function + + abstract get() {} +// ^^^^^^^^ storage.modifier +// ^^^ entity.name.function + + } + + class Foo < T > extends Bar implements Baz, Xyzzy { } +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.class +// ^^^^^ keyword.declaration.class +// ^^^ entity.name.class +// ^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^^^^^^^ storage.modifier.extends +// ^^^ entity.other.inherited-class +// ^^^^^^^^^^ storage.modifier.implements +// ^^^ entity.other.inherited-class +// ^ punctuation.separator.comma +// ^^^^^ entity.other.inherited-class +// ^^^ meta.block + + class Foo extends Bar < T > implements Bar < T > {} +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.class +// ^^^ entity.other.inherited-class +// ^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ support.class +// ^ punctuation.definition.generic.end +// ^^^ entity.other.inherited-class +// ^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ support.class +// ^ punctuation.definition.generic.end +// ^^ meta.block + + namespace Foo { +// ^^^^^^^^^^^^^^^^ meta.namespace +// ^^^^^^^^^ keyword.declaration +// ^^^ entity.name.namespace +// ^ meta.block punctuation.section.block.begin + } +// ^ meta.block punctuation.section.block.end + +/* Annotations */ + +var x: any = 42; +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^^^^^ - meta.type +// ^ keyword.operator.assignment + +let x: any = 42; +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^^^^^ - meta.type +// ^ keyword.operator.assignment + +const x: any = 42; +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^^^^^ - meta.type +// ^ keyword.operator.assignment + +let [ x: any = 42 ]; +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^ keyword.operator.assignment + +let x !: any ; +// ^ variable.other.readwrite +// ^ storage.modifier.definite +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any + +function f(x: any = 42) {} +// ^ punctuation.separator.type +// ^^^meta.type support.type.any +// ^ keyword.operator.assignment + +function f(public x) {} +// ^^^^^^ storage.modifier +// ^ meta.binding.name variable.parameter.function + +function f(readonly x) {} +// ^^^^^^^^ storage.modifier +// ^ meta.binding.name variable.parameter.function + +function f(readonly ...x) {} +// ^^^^^^^^ storage.modifier +// ^^^keyword.operator.spread +// ^ meta.binding.name variable.parameter.function + +function f(readonly) {} +// ^^^^^^^^ meta.binding.name variable.parameter.function + +function f(x?: any) {} +// ^ storage.modifier.optional +// ^ punctuation.separator.type + +function f(): any {} +//^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.separator.type +// ^^^meta.type support.type.any +// ^^ meta.block + +function f ( x : any , ... y : any ) {} +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^ punctuation.separator.parameter.function +// ^^^ keyword.operator.spread +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any + +function f ( @foo x , @bar() y ) {} +// ^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^ variable.annotation +// ^ meta.binding.name variable.parameter.function +// ^^^^^^ meta.annotation +// ^ punctuation.definition.annotation +// ^^^^^ meta.function-call +// ^^^ variable.function +// ^ meta.binding.name variable.parameter.function + +function f<T, U>() {} +//^^^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^^ meta.generic +// ^ variable.parameter.generic +// ^ punctuation.separator.comma +// ^ variable.parameter.generic + +function f(x): x is any {}; +//^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.separator.type +// ^^^^^^^^^ meta.type +// ^^ keyword.operator.word +// ^^^ support.type.any + +function f(x): asserts x is any {}; +//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.separator.type +// ^^^^^^^^^^^^^^^^^ meta.type +// ^^^^^^^ storage.modifier.asserts +// ^^ keyword.operator.word +// ^^^ support.type.any + +function f(this : any) {} +// ^^^^ variable.language.this +// ^ punctuation.separator.type +// ^^^ support.type.any + + (x: any) => 42; +// ^^^^^^^^^^^^^^ meta.function +// ^ punctuation.separator.type +// ^^^ meta.type support.type.any +// ^^ keyword.declaration.function.arrow + + x ? (y) : z; +// ^ variable.other.readwrite +// ^ keyword.operator.ternary +// ^^^ meta.group +// ^ variable.other.readwrite +// ^ keyword.operator.ternary + + x ? (y) : T => r : z; +// ^ variable.other.readwrite +// ^ keyword.operator.ternary +// ^^^^^^^^^^^^^ meta.function +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^ meta.type support.class +// ^^ keyword.declaration.function.arrow +// ^meta.block variable.other.readwrite +// ^ keyword.operator.ternary +// ^ variable.other.readwrite + + x ? y : T => z; +// ^ variable.other.readwrite - variable.parameter +// ^ keyword.operator.ternary +// ^^^^^^ meta.function +// ^ variable.parameter.function +// ^^ keyword.declaration.function.arrow + + async (x): T => y; +// ^^^^^^^^^^^^^^^^^ meta.function +// ^^^^^ keyword.declaration.async +// ^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^ meta.type support.class +// ^^ keyword.declaration.function.arrow +// ^ meta.block variable.other.readwrite + + x ? async (y) : T => r : z; +// ^^^^^^^^^^^^^^^^^^ meta.function +// ^ punctuation.separator.type +// ^ keyword.operator.ternary + + x ? async (y) : T; +// ^^^^^ variable.function +// ^ keyword.operator.ternary + +/* Assertions */ + +x as boolean; +//^^ keyword.operator.type +// ^^^^^^^ meta.type support.type.primitive.boolean + +x as const; +//^^ keyword.operator.type +// ^^^^^ storage.modifier.const + + foo!.bar; +// ^^ punctuation.accessor + + x ! ; +// ^ variable.other.readwrite +// ^ keyword.operator.type +// ^ punctuation.terminator.statement + +/* Types */ + +let x: any; +// ^^^ support.type.any +let x: void; +// ^^^^ support.type.void +let x: never; +// ^^^^^ support.type.never +let x: unknown; +// ^^^^^^^ support.type.unknown + +let x: boolean; +// ^^^^^^^ support.type.primitive.boolean +let x: number; +// ^^^^^^ support.type.primitive.number +let x: string; +// ^^^^^^ support.type.primitive.string +let x: null; +// ^^^^ support.type.primitive.null +let x: undefined; +// ^^^^^^^^^ support.type.primitive.undefined +let x: object; +// ^^^^^^ support.type.primitive.object +let x: symbol; +// ^^^^^^ support.type.primitive.symbol +let x: unique symbol; +// ^^^^^^ storage.modifier.unique +// ^^^^^^ support.type.primitive.symbol +let x: bigint; +// ^^^^^^ support.type.primitive.bigint + +let x: Foo; +// ^^^ support.class + +let x: any [ ]; +// ^^^^^^ meta.type +// ^^^ support.type.any +// ^ storage.modifier.array +// ^ storage.modifier.array + +let x: readonly any []; +// ^^^^^^^^^^^^^^^ meta.type +// ^^^^^^^^ storage.modifier.readonly +// ^^^ support.type.any +// ^^ storage.modifier.array + +let x: any [ "foo" | 'bar' ]; +// ^^^^^^^^^^^^^^^^^^^^^ meta.type +// ^^^ support.type.any +// ^^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^^^^^ meta.string string.quoted.double +// ^ keyword.operator.type.union +// ^^^^^ meta.string string.quoted.single +// ^ punctuation.section.brackets.end + + +let x: any [ 0 ]; +// ^^^^^ meta.type meta.brackets +// ^ punctuation.section.brackets.begin +// ^ meta.number.integer.decimal.js constant.numeric.value.js +// ^ punctuation.section.brackets.end + +let x: any [ +// ^^^^^^ meta.type +// ^^^ support.type.any +// ^ punctuation.section.brackets.begin + ]; +// ^ punctuation.section.brackets.end + + +let x: any +// ^^^ meta.type support.type.any + []; +// ^^ meta.sequence punctuation.section.brackets - meta.type + +let x: Foo<any, any>; +// ^^^^^^^^^^^^^ meta.type +// ^^^ support.class +// ^^^^^^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^^^ support.type.any +// ^ punctuation.separator.comma +// ^^^ support.type.any +// ^ punctuation.definition.generic.end + + +function f<T extends Foo>() {} +// ^^^^^^^^^^^^^^^ meta.function meta.generic +// ^ variable.parameter.generic +// ^^^^^^^ storage.modifier.extends +// ^^^ support.class + +let x: [ any , any ? , ... any [] ]; +// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.type meta.sequence +// ^ punctuation.section.brackets.begin +// ^^^ support.type.any +// ^ punctuation.separator.comma +// ^^^ support.type.any +// ^ storage.modifier.optional +// ^ punctuation.separator.comma +// ^^^ keyword.operator.spread +// ^^^ support.type.any +// ^^ storage.modifier.array +// ^ punctuation.section.brackets.end + +let x: any & any; +// ^^^^^^^^^ meta.type +// ^^^ support.type.any +// ^ keyword.operator.type.intersection +// ^^^ support.type.any + +let x: any | any; +// ^^^^^^^^^ meta.type +// ^^^ support.type.any +// ^ keyword.operator.type.union +// ^^^ support.type.any + +let x: "a string"; +// ^ meta.type meta.string string.quoted.double + +let x: 'a string'; +// ^ meta.type meta.string string.quoted.single + +let x: `a string${any}`; +// ^^^^^^^^^^^^^^^^ meta.type meta.string +// ^^^^^^^^^ string.quoted.other +// ^ punctuation.definition.string.begin +// ^^^^^^ meta.interpolation - string +// ^^ punctuation.section.interpolation.begin +// ^^^ source.js.embedded support.type.any +// ^ punctuation.section.interpolation.end +// ^ string.quoted.other punctuation.definition.string.end + +let x: 42; +// ^^ meta.type meta.number.integer.decimal constant.numeric.value + +let x: -42; +// ^^^ meta.type +// ^ keyword.operator.arithmetic +// ^^ meta.number.integer.decimal constant.numeric.value + +let x: 1.5; +// ^^^ meta.type meta.number.float.decimal constant.numeric.value + +let x: 1e10; +// ^^^^ meta.type meta.number.float.decimal constant.numeric.value + +let x: 0xabc; +// ^^^^^ meta.type meta.number.integer.hexadecimal + +let x: typeof Foo; +// ^^^^^^^^^^ meta.type +// ^^^^^ keyword.operator.type +// ^^^ support.class +let x: keyof Foo; +// ^^^^^^^^^ meta.type +// ^^^^^ keyword.operator.type +// ^^^ support.class + +let x: Foo.bar; +// ^^^^^^^ meta.type +// ^^^ support.class +// ^ punctuation.accessor +// ^^^ support.class + +let x: { +// ^ meta.type punctuation.section.block.begin + + a : any , +// ^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + b ? : any ; +// ^ variable.other.readwrite +// ^ storage.modifier.optional +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + readonly c : any ; +// ^^^^^^^^ storage.modifier +// ^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + ( foo : any ) : any ; +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + + <T>( foo : any ) : any ; +// ^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ meta.generic variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + a ( foo : any ) : any ; +// ^ variable.other.readwrite +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + + a <T>( foo : any ) : any ; +// ^ variable.other.readwrite +// ^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ meta.generic variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + new ( foo : any ) : any ; +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + new <T>( foo : any ) : any ; +// ^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^ meta.generic variable.parameter.generic +// ^ punctuation.definition.generic.end +// ^ punctuation.section.group.begin +// ^^^ meta.binding.name variable.parameter.function +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + [ foo : string ] : any ; +// ^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^^^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^^^^ support.type.primitive.string +// ^ punctuation.section.brackets.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + [ foo : number ] : any ; +// ^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^^^ variable.other.readwrite +// ^ punctuation.separator.type +// ^^^^^^ support.type.primitive.number +// ^ punctuation.section.brackets.end +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.separator + + [ P in keyof T ] : T [ P ] ; +// ^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^^ keyword.operator.type +// ^^^^^ keyword.operator.type +// ^ meta.brackets support.class +// ^ punctuation.section.brackets.end +// ^ punctuation.separator.type +// ^ support.class +// ^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ support.class +// ^ punctuation.section.brackets.end +// ^ punctuation.separator + + [ P in keyof T as U ] : any ; +// ^^^^^^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^^ keyword.operator.type +// ^^^^^ keyword.operator.type +// ^ meta.brackets support.class +// ^^ keyword.operator.type +// ^ meta.brackets support.class +// ^ punctuation.section.brackets.end + + - readonly [ P in keyof T ] - ? : T [ P ] ; +// ^ storage.modifier +// ^^^^^^^^ storage.modifier +// ^^^^^^^^^^^^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ variable.other.readwrite +// ^^ keyword.operator.type +// ^^^^^ keyword.operator.type +// ^ meta.brackets support.class +// ^ punctuation.section.brackets.end +// ^ storage.modifier +// ^ storage.modifier.optional +// ^ punctuation.separator.type +// ^ support.class +// ^^^^^ meta.brackets +// ^ punctuation.section.brackets.begin +// ^ support.class +// ^ punctuation.section.brackets.end +// ^ punctuation.separator + + } +// ^ meta.type punctuation.section.block.end + +let x: ( foo ? : any ) => bar; +// ^^^^^^^^^^^^^^^^^^^^^^ meta.type +// ^^^^^^^^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^ variable.parameter - support.class +// ^ storage.modifier.optional +// ^ punctuation.separator.type +// ^^^ support.type.any +// ^ punctuation.section.group.end +// ^^ keyword.declaration.function +// ^^^ support.class + +let x: ( ... foo : any ) => any; +// ^^^^^^^^^^^^^^^^^^^^^^^^ meta.type +// ^^^^^^^^^^^^^^^^^ meta.group +// ^^^ keyword.operator.spread +// ^^^ variable.parameter +// ^ punctuation.separator.type +// ^^^ support.type.any + +let x: () => T + U +// ^ variable.other.constant - meta.type + +let x: new () => T; +// ^^^^^^^^^^^ meta.type +// ^^^ keyword.operator.new +// ^^ meta.group +// ^^ keyword.declaration.function +// ^ support.class + +let x: abstract new () => T; +// ^^^^^^^^^^^^^^^^^^^^ meta.type +// ^^^^^^^^ storage.modifier.abstract +// ^^^ keyword.operator.new +// ^^ meta.group +// ^^ keyword.declaration.function +// ^ support.class + +let x: ( foo ); +// ^^^^^^^ meta.type meta.group +// ^ punctuation.section.group.begin +// ^^^ support.class +// ^ punctuation.section.group.end + +let x: T extends U ? V : W; +// ^^^^^^^^^^^^^^^^^^^ meta.type +// ^ support.class +// ^^^^^^^ keyword.operator.type.extends +// ^ support.class +// ^ keyword.operator.type +// ^ support.class +// ^ keyword.operator.type +// ^ support.class + +let x: T extends infer U ? V : W; +// ^^^^^^^^^^^^^^^^^^^^^^^^^ meta.type +// ^ support.class +// ^^^^^^^ keyword.operator.type.extends +// ^^^^^ keyword.operator.type +// ^ support.class +// ^ keyword.operator.type +// ^ support.class +// ^ keyword.operator.type +// ^ support.class + +let x: import ( "foo" ) . Bar ; +// ^^^^^^^^^^^^^^^^^^^^^^^ meta.type +// ^^^^^^ keyword.operator.type +// ^^^^^^^^^ meta.group +// ^ punctuation.section.group.begin +// ^^^^^ meta.string string.quoted.double +// ^ punctuation.section.group.end +// ^ punctuation.accessor +// ^^^ support.class + + foo < bar > (); +// ^^^ variable.function +// ^^^^^^^ meta.generic +// ^ punctuation.definition.generic.begin +// ^^^ support.class +// ^ punctuation.definition.generic.end +// ^^ meta.group + + foo < bar +// ^^^ variable.other.readwrite +// ^ keyword.operator.comparison +// ^^^ variable.other.readwrite + ; + + new Foo<bar>; +// ^^^ keyword.operator.word.new +// ^^^ variable.other.constant +// ^^^^^ meta.generic + + foo<bar>``; +// ^^^ variable.other.readwrite +// ^^^^^ meta.generic +// ^^ meta.string string.quoted.other + +var foo = 1 << 0 /x/g; +// ^^ keyword.operator.bitwise +// ^ keyword.operator.arithmetic +// ^ variable.other.readwrite +// ^ keyword.operator.arithmetic +// ^ variable.other.readwrite + +if (a < b || c <= d) {} +// ^ keyword.operator.comparison +// ^^ keyword.operator.logical +// ^^ keyword.operator.comparison + +const f = (): any => {}; +// ^ meta.binding.name entity.name.function variable.other.readwrite +// ^^^^^^^^^^^^^^^^^^ - entity.name.function + + a != b; +// ^^ keyword.operator.comparison + +const x = { + readonly: true, +// ^^^^^^^^ meta.mapping.key + readonly readonly: true, +// ^^^^^^^^ storage.modifier +// ^^^^^^^^ meta.mapping.key + + readonly, +// ^^^^^^^^ variable.other.readwrite + + readonly get() {}, +// ^^^^^^^^ storage.modifier +// ^^^ entity.name.function + + readonly get foo() {}, +// ^^^^^^^^ storage.modifier +// ^^^ storage.type.accessor +// ^^^ entity.name.function + + readonly get: 42, +// ^^^^^^^^ storage.modifier +// ^^^ meta.mapping.key + + readonly get, +// ^^^^^^^^ storage.modifier +// ^^^ variable.other.readwrite +} diff --git a/syntaxes/JavaScript/tests/syntax_test_typescript_not_tsx.ts b/syntaxes/JavaScript/tests/syntax_test_typescript_not_tsx.ts @@ -0,0 +1,27 @@ +// SYNTAX TEST "Packages/JavaScript/TypeScript.sublime-syntax" + + < T > foo; +// ^^^^^ meta.assertion +// ^ punctuation.definition.assertion.begin +// ^ support.class +// ^ punctuation.definition.assertion.end +// ^^^ variable.other.readwrite + + foo < T > bar; +// ^^^ variable.other.readwrite +// ^ keyword.operator.comparison +// ^ variable.other.constant +// ^ keyword.operator.comparison +// ^^^ variable.other.readwrite + + foo + < T > bar; +// ^ keyword.operator.comparison +// ^ variable.other.constant +// ^ keyword.operator.comparison +// ^^^ variable.other.readwrite + +// This is a type assertion that is incompatible with JSX +let strLength: number = (<string>someValue).length; // </string> +// ^^^^^^^^ meta.assertion - meta.tag +// ^^^^^^^^^ comment - meta.tag
