Skip to content

Commit

Permalink
[CSS] Add support for container at-rule (#3819)
Browse files Browse the repository at this point in the history 
This commit adds support for `@container`.

It's fully supported by all browsers.

see:
- https://developer.mozilla.org/en-US/docs/Web/CSS/@container
- https://drafts.csswg.org/css-contain-3/#container-queries
  • Loading branch information
@deathaxe
deathaxe authored Aug 4, 2023
1 parent f0756c2 commit 0a97be5
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 10 deletions.
110 changes: 100 additions & 10 deletions CSS/CSS.sublime-syntax
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ variables:
%
| {{absolute_lengths}}
| {{angle_units}}
| {{container_units}}
| {{duration_units}}
| {{font_relative_lengths}}
| {{frequency_units}}
Expand All @@ -73,10 +74,13 @@ variables:
viewport_percentage_lengths: (?i:[sld]?(?:vh|vw|vi|vb|vmin|vmax))\b
absolute_lengths: (?i:cm|mm|q|in|pt|pc|px|fr)\b
angle_units: (?i:deg|grad|rad|turn)\b
container_units: (?i:cqw|cqh|cqi|cqb|cqmin|cqmax)\b
duration_units: (?i:s|ms)\b
frequency_units: (?i:Hz|kHz)\b
resolution_units: (?i:dpi|dpcm|dppx)\b

logical_operators: (?i:and|or|not|only)

# Selectors
selector_begin: (?={{selector_start}})
selector_end: (?=[;@(){}])
Expand Down Expand Up @@ -394,6 +398,7 @@ contexts:

at-rules:
- include: at-charset
- include: at-container
- include: at-counter-style
- include: at-custom-media
- include: at-document
Expand Down Expand Up @@ -424,6 +429,36 @@ contexts:
- include: quoted-strings
- include: at-rule-end

# @container
# https://drafts.csswg.org/css-contain-3/#container-rule
at-container:
- match: (@)(?i:container){{break}}
scope: keyword.control.directive.css
captures:
1: punctuation.definition.keyword.css
push:
- at-container-body
- at-container-identifier

at-container-identifier:
- meta_include_prototype: false
- match: (?=(?i:{{logical_operators}}|style){{break}})
pop: 1
- match: '{{ident_begin}}'
set: at-container-identifier-content
- include: comments
- include: else-pop

at-container-identifier-content:
- meta_scope: entity.other.container.css
- include: identifier-content

at-container-body:
- meta_scope: meta.at-rule.container.css
- include: at-rule-block
- include: container-queries
- include: else-pop

# @counter-style
# https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule
at-counter-style:
Expand Down Expand Up @@ -874,7 +909,7 @@ contexts:
at-supports-body:
- meta_scope: meta.at-rule.supports.css
- include: at-supports-groups
- include: at-supports-operators
- include: logical-operators
- include: font-format-functions
- include: selector-functions
- include: at-rule-block
Expand All @@ -891,15 +926,11 @@ contexts:
- include: group-end
- include: at-rule-end
- include: at-supports-groups
- include: at-supports-operators
- include: logical-operators
- include: font-format-functions
- include: selector-functions
- include: rule-list-body

at-supports-operators:
- match: \b(?i:and|or|not){{break}}
scope: keyword.operator.logical.css

# @<ident>
# Fallback context for incomplete or unknown at-rules.
# https://www.w3.org/TR/css-syntax-3/#at-rule
Expand Down Expand Up @@ -934,6 +965,53 @@ contexts:
pop: 1
- include: comments

###[ CONTAINER QUERIES ]#######################################################

# https://drafts.csswg.org/css-contain-3/#container-rule
container-queries:
- match: \(
scope: punctuation.section.group.begin.css
push: container-query-group-body
- include: comments
- include: logical-operators
- include: comparison-operators
- include: container-style-functions
- include: property-identifiers
- include: property-values

container-query-group-body:
- meta_scope: meta.group.css
- include: group-end
- include: container-queries
- include: else-pop

container-style-functions:
- match: \b(?i:style)(?=\()
scope: meta.function-call.identifier.css support.function.style.css
push:
- container-style-function-arguments-list-body
- function-arguments-list-begin

container-style-function-arguments-list-body:
- meta_content_scope: meta.function-call.arguments.css meta.group.css
- include: function-arguments-list-end
- include: container-style-queries

container-style-queries:
- match: \(
scope: punctuation.section.group.begin.css
push: container-style-query-group-body
- include: comments
- include: logical-operators
- include: comparison-operators
- include: property-identifiers
- include: property-values

container-style-query-group-body:
- meta_scope: meta.group.css
- include: group-end
- include: container-style-queries

###[ MEDIA QUERIES ]###########################################################

# https://drafts.csswg.org/mediaqueries-4/#media
Expand All @@ -946,10 +1024,8 @@ contexts:
- match: \(
scope: punctuation.section.group.begin.css
push: media-query-group-body
- match: '[<>]=?|='
scope: keyword.operator.comparison.css
- match: \b(?i:and|or|not|only){{break}}
scope: keyword.operator.logical.css
- include: comparison-operators
- include: logical-operators

media-query-group-body:
- meta_scope: meta.group.css
Expand Down Expand Up @@ -3226,10 +3302,24 @@ contexts:
- match: /
scope: keyword.operator.arithmetic.css

comparison-operators:
- match: '[<>]=?|='
scope: keyword.operator.comparison.css
push: comparison-value

comparison-value:
- match: (?={{logical_operators}}{{break}})
pop: 1
- include: values

important-operators:
- match: \!\s*(?i:important){{break}}
scope: keyword.other.important.css

logical-operators:
- match: '{{logical_operators}}{{break}}'
scope: keyword.operator.logical.css

color-adjuster-operators:
- match: '[-+*](?=\s)'
scope: keyword.operator.arithmetic.css
Expand Down
14 changes: 14 additions & 0 deletions CSS/Symbol List - Container.tmPreferences
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
<key>scope</key>
<string>source.css meta.at-rule.container entity.other.container - source.css meta.at-rule.import meta.function-call.arguments</string>
<key>settings</key>
<dict>
<key>showInSymbolList</key>
<integer>1</integer>
<key>showInIndexedSymbolList</key>
<integer>1</integer>
</dict>
</dict>
</plist>
1 change: 1 addition & 0 deletions CSS/completions/common.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ def get_common_values():
"yellow",
"yellowgreen",
],
"container-type": ["normal", "size", "inline-size"],
"content-distribution": ["space-between", "space-around", "space-evenly", "stretch"],
"content-position": ["center", "start", "end", "flex-start", "flex-end"],
"counter-style": [["symbols()", "symbols($1)"]],
Expand Down
3 changes: 3 additions & 0 deletions CSS/completions/properties.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,6 +273,9 @@ def get_properties():
"auto",
],
"columns": ["<calc>", "auto"],
"container": ["<container-type>"],
"container-name": [],
"container-type": ["<container-type>"],
"contain": ["content", "layout", "none", "paint", "inline-size", "size", "strict", "style"],
"contain-intrinsic-size": ["none", "auto"],
"contain-intrinsic-block-size": ["none", "auto"],
Expand Down
112 changes: 112 additions & 0 deletions CSS/syntax_test_css.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -553,6 +553,118 @@
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^^^^ keyword.control.directive.css - punctuation */

@container
/* ^^^^^^^^^^^ meta.at-rule.container.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */

@container ( {}
/* ^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^ punctuation.section.group.begin.css */
/* ^^ meta.block.css */

@container not (width > 2cqw) or (orientation = landscape) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^^^ keyword.operator.logical.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^^^^^^^^^ meta.group.css */
/* ^^^^^ meta.property-name.css support.type.property-name.css */
/* ^ keyword.operator.comparison.css */
/* ^^^^ meta.number.integer.decimal.css */
/* ^ constant.numeric.value.css */
/* ^^^ constant.numeric.suffix.css */
/* ^ punctuation.section.group.end.css */
/* ^^ keyword.operator.logical.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^^^^^^ support.type.property-name.css */
/* ^ keyword.operator.comparison.css */
/* ^^^^^^^^^ support.constant.property-value.css */
/* ^ punctuation.section.group.end.css */
/* ^^ meta.block.css */

@container (min-width: 800px) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^^^^^^^^^^^^^ meta.group.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.section.group.end.css */
/* ^^ meta.block.css */

@container style(property) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^^^^^ meta.function-call.identifier.css */
/* ^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^^^^^ support.function.style.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^^^ meta.property-name.css support.type.property-name.css */
/* ^ punctuation.section.group.end.css */
/* ^^ meta.block.css */

@container style(: black) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^^^^^ meta.function-call.identifier.css */
/* ^^^^^^^^^ meta.function-call.arguments.css meta.group.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^^^^^ support.function.style.css */
/* ^ punctuation.section.group.begin.css */
/* ^ punctuation.separator.key-value.css */
/* ^^^^^^ meta.property-value.css */
/* ^^^^^ support.constant.color.w3c.standard.css */
/* ^ punctuation.section.group.end.css */
/* ^^ meta.block.css */

@container style(background: black) {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css */
/* ^^^^^ meta.function-call.identifier.css */
/* ^^^^^^^^^^^^^^^^^^^ meta.function-call.arguments.css meta.group.css */
/* ^ keyword.control.directive.css punctuation.definition.keyword.css */
/* ^^^^^^^^^ keyword.control.directive.css */
/* ^ punctuation.section.group.begin.css */
/* ^^^^^^^^^^^^^^^^^^ meta.group.css */
/* ^^^^^^^^^^ meta.property-name.css support.type.property-name.css */
/* ^ punctuation.separator.key-value.css */
/* ^^^^^^ meta.property-value.css */
/* ^^^^^ support.constant.color.w3c.standard.css */
/* ^ punctuation.section.group.end.css */
/* ^^ meta.block.css */

@container /**/ my-layout /**/ ( /**/ inline-size /**/ > /**/ 45em /**/ ) and /**/ style( /**/ ( /**/ background: /**/ black /**/ ) /**/ ) { .media-object {} }
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css - meta.block */
/* ^^^^^^^^^^^^^^^^^^^^ meta.at-rule.container.css meta.block.css */
/* ^^^^^^^^^^ keyword.control.directive.css */
/* ^^^^ comment.block.css */
/* ^^^^^^^^^ entity.other.container.css */
/* ^^^^ comment.block.css */
/* ^^^^ comment.block.css */
/* ^^^^^^^^^^^ support.type.property-name.css */
/* ^^^^ comment.block.css */
/* ^ keyword.operator.comparison.css */
/* ^^^^ comment.block.css */
/* ^^^^ meta.number.integer.decimal.css */
/* ^^^^ comment.block.css */
/* ^^^ keyword.operator.logical.css */
/* ^^^^ comment.block.css */
/* ^^^^^ support.function.style.css */
/* ^^^^ comment.block.css */
/* ^^^^ comment.block.css */
/* ^^^^^^^^^^ support.type.property-name.css */
/* ^^^^ comment.block.css */
/* ^^^^^ support.constant.color.w3c.standard.css */
/* ^^^^ comment.block.css */
/* ^^^^ comment.block.css */

@media onlyℜ screenℜ screen\211C {}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.at-rule.media.css - meta.block */
/* ^^ meta.at-rule.media.css meta.block.css - meta.property-list */
Expand Down

0 comments on commit 0a97be5

Please sign in to comment.