Skip to content

Commit 927d903

Browse files
committed
Update README with @container and function notes
1 parent f10b58b commit 927d903

File tree

1 file changed

+32
-6
lines changed

1 file changed

+32
-6
lines changed

README.md

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
# CSS Nesting Syntax Highlighting
2-
3-
> Note: You may need to reload VSCode after installing this extension for it to take effect.
4-
5-
All modern browsers support CSS nesting ([Can I Use](https://caniuse.com/css-nesting)), but Visual Studio Code doesn't currently have CSS nesting syntax highlighting. This extension rectifies that by updating the CSS syntax highlighting to include nesting.
2+
All modern browsers support CSS nesting ([Can I Use](https://caniuse.com/css-nesting)), but Visual Studio Code doesn't currently have CSS nesting syntax highlighting. This extension rectifies that by updating the CSS syntax highlighting to include nesting (and more).
63

74
To learn more about CSS Nesting, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting).
85

@@ -27,15 +24,45 @@ The core CSS syntax file this extension updates can be found in the [official vs
2724
}
2825
```
2926

27+
## Includes `@container` Syntax Highlighting
28+
29+
```css
30+
/* Nested @container example */
31+
@container summary (width > 400px) {
32+
@container (min-width: 800px) {
33+
.card {
34+
margin: 50px;
35+
}
36+
@container (min-width: calc( var(--width) * 1rem)) {
37+
.card {
38+
margin: 0;
39+
}
40+
}
41+
}
42+
```
43+
44+
## Includes _function_ syntax highlighting for 'at-rules', such as in `@media`
45+
46+
```css
47+
/* calc() function example */
48+
@media (max-width: calc( (768 / 16) * 1rem )) {
49+
.example {
50+
margin: 0;
51+
}
52+
}
53+
```
54+
3055
## Installation
3156

57+
> Note: You may need to reload VSCode after installing this extension for it to take effect.
58+
3259
Search for `CSS Nesting Syntax Highlighting` in the VSCode's Extensions Marketplace panel or click the install button on the [CSS Nesting Syntax Highlighting Marketplace page](https://marketplace.visualstudio.com/items?itemName=jacobcassidy.css-nesting-syntax-highlighting).
3360

3461
You can also manually install the extension by cloning the [github repository](https://github.com/jacobcassidy/vscode-css-nesting-syntax-highlighting) into `~/.vscode/extensions` and restarting the VSCode editor.
3562

3663
## Companion Theme
3764

38-
CSS Nesting Syntax Highlighting works excellent with the [Cassidy Dark Theme](https://marketplace.visualstudio.com/items?itemName=jacobcassidy.cassidy-dark).
65+
CSS Nesting Syntax Highlighting works great with the [Cassidy Dark Theme](https://marketplace.visualstudio.com/items?itemName=jacobcassidy.cassidy-dark).
3966

4067
## What's New?
4168

@@ -46,7 +73,6 @@ View the [Changelog](https://github.com/jacobcassidy/vscode-css-nesting-syntax-h
4673
- When nested, a few obscure `#tag-names` are overridden by the same `#property-names`. Those names are:
4774
- **HTML tags**: `content`, `font`, `image`, `marquee`, `mask`, `shadow`, `style`.
4875
- **SVG tags**: `color-profile`, `cursor`, `filter`, `line`, `text`.
49-
- Nesting syntax highlighting for `at rules`, except for `@media`, has not been added.
5076

5177
## Issues?
5278

0 commit comments

Comments
 (0)