Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CSS] Support CSS Nesting #3688

Closed
iccir opened this issue Mar 29, 2023 · 7 comments · Fixed by #3785
Closed

[CSS] Support CSS Nesting #3688

iccir opened this issue Mar 29, 2023 · 7 comments · Fixed by #3785
Labels
C: Syntax T: feature major update for a syntax to support new language features

Comments

@iccir
Copy link

iccir commented Mar 29, 2023

What happened?

Both Chrome 112 and Safari Technical Preview 162 now implement CSS Nesting.

More information is available here:
https://developer.chrome.com/articles/css-nesting/
https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/

Sublime doesn't yet highlight nested selectors. In the following example, color lacks the support.type.property-name.css scope:

.foo { .bar { color: red; } }

I worked around this in my local CSS.sublime-syntax file by appending the following to rule-list-body:

    - match: (?=[&:.*#\[]|{{combinators}})
      push: main
@deathaxe
Copy link
Collaborator

Once nesting becomes a stable enough feature, support might be added. A draft filed at just now, is not intended to be supported.

@iccir
Copy link
Author

iccir commented Mar 30, 2023

Note that this will be enabled by default in browsers shipping next week.

Chrome 112: 2023-04-04
Edge 112: Week of 2023-04-06
Safari 16.5, iOS WebKit 16.5: In beta now, likely shipping in the next few months.
Firefox: No estimate.

@deathaxe
Copy link
Collaborator

Doesn't change its draft state.

@deathaxe deathaxe added T: feature major update for a syntax to support new language features C: Syntax labels Apr 2, 2023
@deathaxe
Copy link
Collaborator

FWIW, nested CSS files are supported by Tailwind CSS

It extends ST's default CSS adding tailwind related at-rules and nesting.

deathaxe added a commit to deathaxe/sublime-packages that referenced this issue Jun 3, 2023
@deathaxe
[CSS] Add nested rules support
db80768 
Resolves sublimehq#3688

This commit implements support for nested selectors and rule lists according to
current draft specification at https://drafts.csswg.org/css-nesting-1.
@deathaxe deathaxe mentioned this issue Jun 3, 2023
Merged
deathaxe added a commit that referenced this issue Jul 15, 2023
@deathaxe
[CSS] Add nested rules support (#3785)
dd81bb8 
* [CSS] Add nested rules support

Resolves #3688

This commit implements support for nested selectors and rule lists according to
current draft specification at https://drafts.csswg.org/css-nesting-1.

* [CSS] Reduce unused patterns from property lists

This commit removes obsolete includes from `property-list-body` context.

- `property-values` is no longer matched as `:` pushes `nested-selectors`
- `illegal-blocks` is replaced by nested `property-lists`

* [CSS] Fix template interpolation in CSS property names

By excluding `prototype` from rule-lists this commit ensures, template tags
are correctly scoped as part of a selector, property-name or property-value.

That's important as `:` no longer denotes beginning of property-values, but
is the beginning of nested selectors.

Some extra `;` are added in syntax tests to make sure the following content is
scoped correctly. That's required as assertion comments are sometimes scoped as
selectors, caused by comment styles not being supported within CSS.
@gnat
Copy link

gnat commented Aug 15, 2023

The modification of CSS.sublime-syntax mentioned in OP seems to work well, for people waiting.

Not yet in Sublime as of build 4154

@michaelblyons
Copy link
Collaborator

Or you could apply the PR that closed this issue for more rigor. #3785

@gnat
Copy link

gnat commented Aug 15, 2023

Thanks but I'll pass. OP's is 1 line and works.

The official change should hurry up into core.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C: Syntax T: feature major update for a syntax to support new language features
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[CSS] Add nested rules support deathaxe/sublime-packages
4 participants
@gnat @iccir @michaelblyons @deathaxe