[css] add ':focus-within' pseudo class

[mattez]

CSS autocomplete does not know 'focus-within' css property. It's currently in use with all modern browsers excluding Edge as listed on caniuse
My setup:

Version 1.19.1
Commit 0759f77bb8d86658bc935a10a64f6182c5a1eeba
Date 2017-12-19T09:41:01.414Z
Shell 1.7.9
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64

Steps to Reproduce:

Create Any CSS element and start typing 'focus-within'.

[aeschli]

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

[connorshea]

I have :focus suggested for me, but not :focus-within.

mdn/data has the :focus-within selector, but I guess the vscode-css-language-server doesn't use it?

I guess selectors were outside the scope of microsoft/vscode-css-languageservice#68?

[connorshea]

pseudoClasses such as :focus (and :focus-within if it was in the dataset) are listed in css-schema.xml, so that'd be where it should be added. Maybe the language service should source pseudoclasses from mdn/data as well so it stays up-to-date?

cc: @octref

[octref]

@connorshea Yes they are in here: https://github.com/mdn/data/blob/master/css/selectors.json#L202, and we could source the selectors.

[ely-alamillo]

If this hasn't been taken up, I'd like to give it a shot.

[octref]

@ely-alamillo Sure! Here are some hints to get you started:

• We run this code (https://github.com/Microsoft/vscode-css-languageservice/blob/master/build/generate_browserjs.js) to import MDN's data and generate https://github.com/Microsoft/vscode-css-languageservice/blob/master/src/data/browsers.ts
• We already have pseudo classes here: https://github.com/Microsoft/vscode-css-languageservice/blob/master/src/data/browsers.ts#L86. So it's just a matter of importing the correct MDN data into our browser.ts
• In vscode-css-languageservice, you can add unit tests and test behaviors. But if you want to play with it in VS Code, try
  • npm link in vscode-css-languageservice
  • npm link vscode-css-languageservice in https://github.com/Microsoft/vscode/tree/master/extensions/css-language-features/server
  • Open /extensions/css-language-features and run this Launch Config: https://github.com/Microsoft/vscode/blob/master/extensions/css-language-features/.vscode/launch.json#L10-L23

We look forward to your PR 🌟

[octref]

@aeschli Just FYI, I also added the instruction to css-language-features: 6745661

[connorshea]

I added some info about mapping pseudo-classes between mdn/data and mdn/browser-compat-data to microsoft/vscode-css-languageservice#102

[aeschli]

@octref @connorshea Thanks a lot!

[ely-alamillo]

@octref I have been exploring the code and how it all works together and I'm not 100% sure on which part I should put my focus on. I see that generate_browserjs.js is generating the data used in vscode-language-service. However I'm having trouble on figuring out "importing the correct MDN data" as mentioned by you earlier. Would appreciate further guidance in possible.

[octref]

@ely-alamillo Sure, here is the instruction for developing css-language-features: https://github.com/Microsoft/vscode/tree/master/extensions/css-language-features

Here is how we import data from mdn/data:

• https://github.com/Microsoft/vscode-css-languageservice/blob/master/build/generate_browserjs.js#L347
• https://github.com/Microsoft/vscode-css-languageservice/blob/master/build/mdn-data-importer.js

When you run generate_browserjs.js, it generates src/data/browsers.ts.

You want to do something similar for this file, import its data to complement this section: https://github.com/Microsoft/vscode-css-languageservice/blob/master/src/data/browsers.ts#L86-L474

[octref]

@ely-alamillo Are you still interested in contributing or hitting any blocking issues? We'll need to close this issue by this Friday.

[octref]

These new pseudo selectors and elements have been sourced from mdn/data

{
  pseudoSelectorDescriptions: {
    ':defined': 'The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).',
    ':dir': 'The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.',
    ':focus-visible': 'The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element.',
    ':focus-within': 'The :focus-within pseudo-class applies to any element for which the :focus pseudo class applies as well as to an element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus.',
    ':placeholder-shown': 'The :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text.'
  },
  pseudoElementDescriptions: {
    '::-moz-range-progress': 'The ::-moz-range-progress CSS pseudo-element is a Mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <input> of type="range". This portion corresponds to values lower than the value currently selected by the thumb (i.e., virtual knob).',
    '::-moz-range-thumb': `The ::-moz-range-thumb CSS pseudo-element is a Mozilla extension that represents the thumb (i.e., virtual knob) of an <input> of type="range". The user can move the thumb along the input's track to alter its numerical value.`,
    '::-moz-range-track': 'The ::-moz-range-track CSS pseudo-element is a Mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <input> of type="range".',
    '::-webkit-progress-inner-element': 'The ::-webkit-progress-inner-element CSS pseudo-element represents the outermost container of the <progress> element. It is the parent of the ::-webkit-progress-bar pseudo-element.',
    '::grammar-error': 'The ::grammar-error CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.',
    '::placeholder': 'The ::placeholder CSS pseudo-element represents the placeholder text of a form element.',
    '::spelling-error': 'The ::spelling-error CSS pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.'
  }
}

[ely-alamillo]

@octref I wasn't able to get to a working solution within time. Thanks for all the help, will keep looking to contribute in the future 👍