[css] support /deep/ selector

[tomwanzek]

• VSCode Version: 1.1.1
• OS Version: Windows 10

When writing Angular 2 components using view encapsulation, it may be necessary to use CSS scoping, i.e. special selectors in accordance with:
Angular 2 Guide and the related reference CSS Scoping.

VS Code currently produces and error as follows:

Steps to Reproduce:

1. Entering the following code into a css file (as for a ng2 component)

:host /deep/ rect.d3chart-background {
  fill: rgba(250,250,250,0.8);
  border-radius: 3px;
}

1. VS Code creates an error with message "{ expected". The error is triggered on the first backslash of /deep/.

Thanks in advance.

[aeschli]

'/' is not a valid character in a selector, at least not in CSS3.
I wasn't able to find any details in a newer spec. Is '/' now a valid part of an identifier, or is it an operator or is just /deep/ a new special selector?

[Tyriar]

Did /deep/ ever make it into a spec? I think Polymer backtracked on using it in favor of a shadow DOM shim.

[tomwanzek]

By way of this some more detail. The issue currently arises in the context of some use cases when styling components in accordance with Angular 2 (RC1). Here a few snippets from the Angular documentation section, I linked in my initial comment:

/deep/

Component styles normally apply only to the HTML in the component's own template.

We can use the /deep/selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component.

...

The/deep/selector also has the alias >>>. We can use either of the two interchangeably.

The /deep/ and >>> selectors should only be used with emulated view encapsulation. This is the default and it is what we use most of the time.

Angular 2 supports the use of /deep/and >>> in emulated view encapsulation, i. e. when there there is no native shadow DOM support.

The >>> alias causes an error in a css stylesheets edited in VS Code as well.

Otherwise, the cross-references would lead to the shadow DOM as the note in Section 2.3 of W3C Shadow DOM and the more specific discussion in Deep Combinator W3C CSS Scoping.

[aeschli]

Thanks for the link, which led me to this: https://www.w3.org/TR/2013/WD-selectors4-20130502/#idref-combinators

[dstorey]

/deep/ no longer exists, so I don't think we should support it. >>> is the new version, which should probably be supported, but I don't know how stable it is right now. These kind of things usually get renamed a lot before being widely supported.

https://drafts.csswg.org/css-scoping-1/#deep-combinator

[zhenwenc]

Is there any workaround for this issue? Its breaking the syntax checking and syntax highlight.

No matter its been deprecated in the future (who knows when, at least its valid at this point), or change to a new version (shouldn't we support both versions then?), it does supported by the parser (it works find if you ignored the vscode error), and has been recommended (or at lease been mentioned) in the Angular2 official doc.

[aeschli]

There's no workaround except disabling the syntax checking.
Changing the parser and syntax highlighting grammar is considerable work. We have limited resources and want to focus on what's in the standards.
We have an extension APIs that allow external developers to contribute advanced language supports, including replacing grammars.
Closing this issue

[zhenwenc]

Thanks! Disable syntax checking would be enough (transpiler will tell me the syntax error anyway).

[aeschli]

The settings is "css.validate": false

[tomwanzek]

That is what I ended up doing in the interim. Toggling back and forth manually, when I actually change the css files and then screening the real issues out. Not ideal, but I understand your take. Thanks for all the amazing work on VS Code.

[DmitryEfimenko]

does anyone know if an extension exists that supports this /deep/ selector?

[tomwanzek]

Not to my knowledge. Although, I would be more interested now than even before, since there were some recent changes on the Angular2 final (and the last couple of RCs before that), which made me have to use /deep/ or >>> again.

Until recently I could avoid it.

[canda]

using >>> alias, vscode shows an error but doesn't break the syntax checking for the rest of the file. It seems like a suitable workaround

[szykov]

I hope you guys will change your mind or at least make possible to disable css validation locally in vscode. Thanks.

[aeschli]

use "css.validate": false to disable css validation

[szykov]

@aeschli yeap, I'm aware of it, thanks. But mentioning this in vscode settings file will disable css validation globally. I wold like to see something like:

// disable-css-validation-next-line
:host /deep/ >>> other criminal  css stuff.

it would be a good workaround.

update:
Or exclude specific file in vscode settings:

  "css-validation.exclude": {
    "illegal.css": true,
    "criminal/*.css": true
  },

But I believe it's off-topic here. Just thinking out loud. Now I ended up by disabling css encapsulation of my Angular 2 component instead of disabling css validation.

[leviathanbadger]

Another workaround: instead of disabling css validation, just use #{"/deep/"}. It's more verbose, but it produces the same thing, and the syntax checker ignores it as far as I can tell.

[andregs]

@aboveyou00 can you please explain that syntax?

[leviathanbadger]

It's basically just an "insert raw" command. You can use it to make variable contents part of a selector; this is the example that they give in the documentation.

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

A feature that doesn't seem to be documented is that you can just insert raw text there by wrapping it in a string. I'm not sure where I found out about it, but you can use it (for example) to prevent SCSS from collapsing expressions in calc() values. Example:

div {
    width: calc(#{"100% - 80px"});
}

Without that it would set the width to either 20% or 20px, I don't remember which, but either is invalid.

[szykov]

Some updates from my side: I ended up switching on again angular encapsulation and moving from standard linter to stylelint. It is more advanced and flexible. If you don't search compromises and use experimental things, I would definitely to stick with this.

[aeschli]

I added support for /deep/ and >>> to the cssParser.

[oldbasilbear]

Has this being fixed on Linux platform? - I still have a syntax error in 1.11.2 Ubuntu

[aeschli]

Its fixed for the April release, which is 1.12.0. You can already try it in the insiders build

[oldbasilbear]

Thanks very much.

[SchneMa]

@aeschli is the cssParser support for ">>>" allready live?
VSCode still telling me that a "{" is expected.

[aeschli]

It should work in the insiders build.
If not, please file a new bug with your code sample.

[SchneMa]

Thank you for this info!

[luchillo17]

@aeschli I've downloaded right now the build 1.12.0 just released and /deep/ and >>> still breaks scss validation, did you fix it in css only?

[aeschli]

@luchillo17 It should work for css, less and scss.
I just tried the example from the description of this bug and it works for me, also in scss.
Please disable all extensions to make sure it is not caused by an extension.
Otherwise please file an issue with sample code that shows the problem.

[tx8821]

I can confirm that it is still broken in 1.12.1 (updated today). Please view screenshots at #26004