Skip to content

Commit 95a5514

Browse files
jacobcassidyjacobcassidy
committed
Update import layer in progress dev
1 parent 85f183f commit 95a5514

File tree

3 files changed

+206
-39
lines changed

3 files changed

+206
-39
lines changed

‎.dev-assets/syntax-issues/missing/at-import-layer-issue.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ supports(selector(&)) (min-width: calc(10px));
1515
@import "theme.css"
1616
layer;
1717
@import url('style.css') layer;
18-
@import url('style.css')
18+
@import url('style.css') layer
1919
layer;
2020

2121
/* Highlight layer() function */
@@ -36,7 +36,6 @@ layer(layer.name);
3636
@import "theme.css" something layer(layer-name);
3737
@import "theme.css" layer(layer-name) layer(layer-name) layer;
3838

39-
4039
/* Rule Example */
4140
@layer default {
4241
audio[controls] {

‎src/vscode-css/grammars/css.cson

Lines changed: 180 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -197,15 +197,26 @@
197197
{
198198
'include': '#url'
199199
}
200+
{
201+
'include': '#layer-function'
202+
}
200203
{
201204
'begin': '\\s+'
202205
'end': '(?=;)'
203206
'name': 'import.inner'
204207
'patterns': [
205208
{
206-
'include': '#layer-function'
209+
'match': '(?<!layer.*)layer(?=\\s|;)'
210+
'name': 'test.begin'
211+
}
212+
{
213+
'match': '(?<=layer.*).*(?=;)'
214+
'name': 'test.end'
207215
}
208216
# {
217+
# 'include': '#layer-function'
218+
# }
219+
# {
209220
# 'include': '#supports-function'
210221
# }
211222
# {
@@ -1710,39 +1721,174 @@
17101721
]
17111722
'layer-function':
17121723
'patterns': [
1713-
{
1714-
# Match "layer" keyword
1715-
'match': '''(?xi)
1716-
(?<!layer.*) # Only one "layer" keyword is allowed per import
1717-
layer
1718-
(?=\\s|;) # Keyword must end with a whitespace or semicolon
1719-
'''
1720-
'name': 'support.constant.import.css'
1721-
}
1722-
{
1723-
# Match "layer()" function
1724-
'begin': '''(?xi)
1725-
(?<!layer[\\s\\(].*) # Only one "layer" keyword or function is allowed per import
1726-
(layer)(\\()
1727-
'''
1728-
'beginCaptures':
1729-
'1':
1730-
'name': 'support.function.layer.css'
1731-
'2':
1732-
'name': 'punctuation.section.layer.begin.bracket.round.css'
1733-
'end': '\\)'
1734-
'endCaptures':
1735-
'0':
1736-
'name': 'punctuation.section.layer.end.bracket.round.css'
1737-
'name': 'meta.function.layer.css'
1738-
'patterns': [
1739-
{
1740-
'begin': '(?<=\\(\\s*)[\\w\\-\\.]*'
1741-
'end': '(?=\\s|\\))'
1742-
'name': 'variable.parameter.layer.css'
1743-
}
1744-
]
1745-
}
1724+
# {
1725+
# 'match': '.*layer(?=\\s|;)'
1726+
# 'name': 'test.begin'
1727+
# }
1728+
# {
1729+
# 'match': '.*'
1730+
# 'name': 'test.end'
1731+
# }
1732+
# {
1733+
# 'match': '.*layer(\\(|\\s|;)'
1734+
# 'name': 'test.body'
1735+
# }
1736+
1737+
# {
1738+
# 'begin': '''(?xi)
1739+
# # \\s*
1740+
# (?:
1741+
1742+
# \\s*
1743+
# (layer)
1744+
1745+
# # [^(layer)]
1746+
# # (?<= \\s (layer) )
1747+
# # layer
1748+
# # .*layer
1749+
1750+
# # (?:\\s|^)layer
1751+
# # [(layer)\\(]
1752+
# # [^(layer)]*layer
1753+
# # [^(layer)]*
1754+
# # # |
1755+
# # (?<!\\\\)(?=$|\\n)
1756+
# # .*layer
1757+
# )
1758+
# # (layer)
1759+
# # (?:
1760+
# # (?= \\s|; )
1761+
# # | (\\()
1762+
# # )
1763+
# # .*layer|(?<!\\\\)(?=$|\\n)
1764+
# # (?<!layer[\\s\\(].*) # Only one "layer" keyword or function is allowed per import
1765+
# # [^(layer)]*
1766+
# # (layer)
1767+
# # (?:
1768+
# # (?= \\s|; )
1769+
# # | ( \\( )
1770+
# # )
1771+
# '''
1772+
# 'beginCaptures':
1773+
# '0':
1774+
# 'name': 'test.begin'
1775+
# # '1':
1776+
# # 'name': 'support.function.layer.css'
1777+
# # '2':
1778+
# # 'name': 'punctuation.section.layer.begin.bracket.round.css'
1779+
# 'end': '''(?xi)
1780+
# # \\)
1781+
# # |
1782+
# (?=;)
1783+
# '''
1784+
# 'endCaptures':
1785+
# '0':
1786+
# 'name': 'test.end'
1787+
# # 'name': 'punctuation.section.layer.end.bracket.round.css'
1788+
# 'name': 'test.body'
1789+
# # 'name': 'meta.function.layer.css'
1790+
# # 'patterns': [
1791+
# # {
1792+
# # 'begin': '(?<=\\(\\s*)[\\w\\-\\.]*'
1793+
# # 'end': '(?=\\s|\\))'
1794+
# # 'name': 'variable.parameter.layer.css'
1795+
# # }
1796+
# # ]
1797+
# }
1798+
1799+
1800+
1801+
# {
1802+
# 'begin': '''(?xi)
1803+
# .*layer|(?<!\\\\)(?=$|\\n)
1804+
# '''
1805+
# 'end': '\\)|(?=$|\\n|;)'
1806+
# 'name': 'test.body'
1807+
# }
1808+
1809+
1810+
# {
1811+
# 'begin': '''(?xi)
1812+
1813+
# (?:
1814+
# [^(layer)]*
1815+
# | (?<!\\\\)(?=$|\\n)
1816+
# )
1817+
1818+
# (layer)
1819+
# # (?:
1820+
# # (?= \\s|; )
1821+
# # | (\\()
1822+
# # )
1823+
1824+
1825+
1826+
1827+
# # .*layer|(?<!\\\\)(?=$|\\n)
1828+
# # (?<!layer[\\s\\(].*) # Only one "layer" keyword or function is allowed per import
1829+
# # [^(layer)]*
1830+
# # (layer)
1831+
# # (?:
1832+
# # (?= \\s|; )
1833+
# # | (\\()
1834+
# # )
1835+
# '''
1836+
# # 'beginCaptures':
1837+
# # '1':
1838+
# # 'name': 'support.function.layer.css'
1839+
# # '2':
1840+
# # 'name': 'punctuation.section.layer.begin.bracket.round.css'
1841+
# 'end': '\\)|(?=$|\\n|;)'
1842+
# # 'endCaptures':
1843+
# # '0':
1844+
# # 'name': 'punctuation.section.layer.end.bracket.round.css'
1845+
# 'name': 'test.body'
1846+
# # 'name': 'meta.function.layer.css'
1847+
# # 'patterns': [
1848+
# # {
1849+
# # 'begin': '(?<=\\(\\s*)[\\w\\-\\.]*'
1850+
# # 'end': '(?=\\s|\\))'
1851+
# # 'name': 'variable.parameter.layer.css'
1852+
# # }
1853+
# # ]
1854+
# }
1855+
# {
1856+
# 'match': '.*layer(\\(|\\s|;)'
1857+
# 'name': 'test.body'
1858+
# }
1859+
# {
1860+
# # Match "layer" keyword
1861+
# 'match': '''(?xi)
1862+
# (?<!layer.*) # Only one "layer" keyword is allowed per import
1863+
# layer
1864+
# (?=\\s|;) # Keyword must end with a whitespace or semicolon
1865+
# '''
1866+
# 'name': 'support.constant.import.css'
1867+
# }
1868+
# {
1869+
# # Match "layer()" function
1870+
# 'begin': '''(?xi)
1871+
# (?<!layer[\\s\\(].*) # Only one "layer" keyword or function is allowed per import
1872+
# (layer)(\\()
1873+
# '''
1874+
# 'beginCaptures':
1875+
# '1':
1876+
# 'name': 'support.function.layer.css'
1877+
# '2':
1878+
# 'name': 'punctuation.section.layer.begin.bracket.round.css'
1879+
# 'end': '\\)'
1880+
# 'endCaptures':
1881+
# '0':
1882+
# 'name': 'punctuation.section.layer.end.bracket.round.css'
1883+
# 'name': 'meta.function.layer.css'
1884+
# 'patterns': [
1885+
# {
1886+
# 'begin': '(?<=\\(\\s*)[\\w\\-\\.]*'
1887+
# 'end': '(?=\\s|\\))'
1888+
# 'name': 'variable.parameter.layer.css'
1889+
# }
1890+
# ]
1891+
# }
17461892
]
17471893
'media-features':
17481894
'captures':

‎syntaxes/css.tmLanguage.json

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,22 @@
185185
"include": "#url"
186186
},
187187
{
188-
"include": "#media-query-list"
188+
"include": "#layer-function"
189+
},
190+
{
191+
"begin": "\\s+",
192+
"end": "(?=;)",
193+
"name": "import.inner",
194+
"patterns": [
195+
{
196+
"match": "(?<!layer.*)layer(?=\\s|;)",
197+
"name": "test.begin"
198+
},
199+
{
200+
"match": "(?<=layer.*).*(?=;)",
201+
"name": "test.end"
202+
}
203+
]
189204
}
190205
]
191206
},
@@ -1598,6 +1613,9 @@
15981613
}
15991614
]
16001615
},
1616+
"layer-function": {
1617+
"patterns": []
1618+
},
16011619
"media-features": {
16021620
"captures": {
16031621
"1": {
@@ -1610,7 +1628,7 @@
16101628
"name": "support.type.vendored.property-name.media.css"
16111629
}
16121630
},
1613-
"match": "(?xi)\n(?<=^|\\s|\\(|\\*/) # Preceded by whitespace, bracket or comment\n(?:\n # Standardised features\n (\n (?:min-|max-)? # Range features\n (?: height\n | width\n | aspect-ratio\n | color\n | color-index\n | monochrome\n | resolution\n )\n | grid # Discrete features\n | scan\n | orientation\n | display-mode\n | hover\n )\n |\n # Deprecated features\n (\n (?:min-|max-)? # Deprecated in Media Queries 4\n device-\n (?: height\n | width\n | aspect-ratio\n )\n )\n |\n # Vendor extensions\n (\n (?:\n # Spec-compliant syntax\n [-_]\n (?: webkit # Webkit/Blink\n | apple|khtml # Webkit aliases\n | epub # ePub3\n | moz # Gecko\n | ms # Microsoft\n | o # Presto (pre-Opera 15)\n | xv|ah|rim|atsc| # Less common vendors\n hp|tc|wap|ro\n )\n |\n # Non-standard prefixes\n (?: mso # Microsoft Office\n | prince # YesLogic\n )\n )\n -\n [\\w-]+ # Feature name\n (?= # Terminates correctly\n \\s* # Possible whitespace\n (?: # Possible injected comment\n /\\*\n (?:[^*]|\\*[^/])*\n \\*/\n )?\n \\s*\n [:)] # Ends with a colon or closed bracket\n )\n )\n)\n(?=\\s|$|[><:=]|\\)|/\\*) # Terminates cleanly"
1631+
"match": "(?xi)\n(?<=^|\\s|\\(|\\*/) # Preceded by whitespace, bracket or comment\n(?:\n # Standardised features\n (\n # Range features\n (?:min-|max-)?\n (?: height\n | width\n | aspect-ratio\n | color\n | color-index\n | monochrome\n | resolution\n )\n # Discrete features\n | any-hover\n | any-pointer\n | color-gamut\n | display-mode\n | grid\n | hover\n | orientation\n | overflow-block\n | overflow-inline\n | pointer\n | scan\n | update\n\n # Media Queries 5 features\n # Range features\n | (?:min-|max-)?\n (?: (?:horizontal|vertical)-viewport-segments\n | video-color-gamut\n )\n # Discrete features\n | (?:video-)?dynamic-range\n | environment-blending\n | forced-colors\n | inverted-colors\n | nav-controls\n | prefers-(?:color-scheme|contrast|reduced-data|reduced-motion|reduced-transparency)\n | scripting\n )\n |\n # Deprecated features\n (\n (?:min-|max-)? # Deprecated in Media Queries 4\n device-\n (?: height\n | width\n | aspect-ratio\n )\n )\n |\n # Vendor extensions\n (\n (?:\n # Spec-compliant syntax\n [-_]\n (?: webkit # Webkit/Blink\n | apple|khtml # Webkit aliases\n | epub # ePub3\n | moz # Gecko\n | ms # Microsoft\n | o # Presto (pre-Opera 15)\n | xv|ah|rim|atsc| # Less common vendors\n hp|tc|wap|ro\n )\n |\n # Non-standard prefixes\n (?: mso # Microsoft Office\n | prince # YesLogic\n )\n )\n -\n [\\w-]+ # Feature name\n (?= # Terminates correctly\n \\s* # Possible whitespace\n (?: # Possible injected comment\n /\\*\n (?:[^*]|\\*[^/])*\n \\*/\n )?\n \\s*\n [:)] # Ends with a colon or closed bracket\n )\n )\n)\n(?=\\s|$|[><:=]|\\)|/\\*) # Terminates cleanly"
16141632
},
16151633
"media-feature-keywords": {
16161634
"match": "(?xi)\n(?<=^|\\s|:|\\*/)\n(?: portrait # Orientation\n | landscape\n | progressive # Scan types\n | interlace\n | fullscreen # Display modes\n | standalone\n | minimal-ui\n | browser\n | hover\n)\n(?=\\s|\\)|$)",
@@ -2201,7 +2219,11 @@
22012219
}
22022220
]
22032221
}
2204-
]
2222+
],
2223+
"supports-function": {
2224+
"match": ".*supports\\(",
2225+
"name": "test.body"
2226+
}
22052227
},
22062228
"tag-names": {
22072229
"match": "(?xi) (?<![\\w:-])\n(?:\n # HTML\n a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound\n | big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|command\n | content|data|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|element|em|embed|fieldset\n | figcaption|figure|font|footer|form|frame|frameset|h[1-6]|head|header|hgroup|hr|html|i\n | iframe|image|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark\n | marquee|math|menu|menuitem|meta|meter|multicol|nav|nextid|nobr|noembed|noframes|noscript\n | object|ol|optgroup|option|output|p|param|picture|plaintext|pre|progress|q|rb|rp|rt|rtc\n | ruby|s|samp|script|section|select|shadow|slot|small|source|spacer|span|strike|strong\n | style|sub|summary|sup|table|tbody|td|template|textarea|tfoot|th|thead|time|title|tr\n | track|tt|u|ul|var|video|wbr|xmp\n\n # SVG\n | altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform\n | circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix\n | feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap\n | feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur\n | feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting\n | feSpotLight|feTile|feTurbulence|filter|font-face|font-face-format|font-face-name\n | font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern\n | line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata\n | missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor\n | stop|svg|switch|symbol|text|textPath|tref|tspan|use|view|vkern\n\n # MathML\n | annotation|annotation-xml|maction|maligngroup|malignmark|math|menclose|merror|mfenced\n | mfrac|mglyph|mi|mlabeledtr|mlongdiv|mmultiscripts|mn|mo|mover|mpadded|mphantom|mroot\n | mrow|ms|mscarries|mscarry|msgroup|msline|mspace|msqrt|msrow|mstack|mstyle|msub|msubsup\n | msup|mtable|mtd|mtext|mtr|munder|munderover|semantics\n)\n(?=[+~>\\s,.\\#|&){:\\[]|/\\*|$)",

0 commit comments

Comments
 (0)