Import pseudo selectors. Fix microsoft/vscode#41248

Author: octref

build/generate_browserjs.js

@@ -343,30 +343,32 @@ function toSource(object, keyName) {
 const parser = new xml2js.Parser({ explicitArray: false })
 const schemaFileName = 'css-schema.xml'
 
-const { buildPropertiesWithMDNData } = require('./mdn-data-importer')
-const { addBrowserCompatDataToProperties } = require('./mdn-browser-compat-data-importer')
+const { addMDNProperties } = require('./mdn/mdn-data-property-importer')
+const { addMDNPseudoSelectors } = require('./mdn/mdn-data-selector-importer')
+const { addBrowserCompatDataToProperties } = require('./mdn/mdn-browser-compat-data-importer')
 
 fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) {
   parser.parseString(data, function(err, result) {
     const atdirectives = toSource(result, 'atDirectives')
-    const pseudoclasses = toSource(result, 'pseudoClasses')
-    const pseudoelements = toSource(result, 'pseudoElements')
+		const pseudoelements = toSource(result, 'pseudoElements')
 
-    let properties = toSource(result, 'properties')
-		properties = buildPropertiesWithMDNData(properties)
+		let pseudoclasses = toSource(result, 'pseudoClasses')
+		pseudoclasses = addMDNPseudoSelectors(pseudoclasses)
 
+    let properties = toSource(result, 'properties')
+		properties = addMDNProperties(properties)
     addBrowserCompatDataToProperties(atdirectives, pseudoclasses, pseudoelements, properties)
 
     const descriptions = internalizeDescriptions([].concat(atdirectives, pseudoclasses, pseudoelements, properties))
 
-    const resultObject = {
-      css: {
-        atdirectives,
-        pseudoclasses,
-        pseudoelements,
-        properties,
-      }
-    }
+		const resultObject = {
+			css: {
+				atdirectives: atdirectives,
+				pseudoelements: pseudoelements,
+				pseudoclasses: pseudoclasses,
+				properties: properties
+			}
+		};
 
     function toJavaScript(obj) {
       const str = JSON.stringify(obj, null, '\t')
@@ -386,9 +388,9 @@ fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) {
       'export const descriptions : any = ' + toJavaScript(descriptions) + ';'
     ]
 
-    var outputPath = path.resolve(__dirname, '../src/data/browsers.ts')
+    const outputPath = path.resolve(__dirname, '../src/data/browsers.ts')
     console.log('Writing to: ' + outputPath)
-    var content = output.join(os.EOL)
+    const content = output.join(os.EOL)
     fs.writeFileSync(outputPath, content)
     console.log('Done')
   })

build/mdn-documentation.js

@@ -152,4 +152,6 @@ function isSupported(support) {
   return false
 }
 
-module.exports.addBrowserCompatDataToProperties = addBrowserCompatDataToProperties
+module.exports = {
+  addBrowserCompatDataToProperties
+}

build/mdn-browser-compat-data-importer.js renamed to build/mdn/mdn-browser-compat-data-importer.js

@@ -3,13 +3,13 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-const mdnDocumentations = require('./mdn-documentation')
+const { propertyDescriptions } = require('./mdn-documentation')
 
 const mdnExcludedProperties = [
   '--*' // custom properties
 ]
 
-function buildPropertiesWithMDNData(vscProperties) {
+function addMDNProperties(vscProperties) {
   const propertyMap = {}
 
   const mdnProperties = require('mdn-data/css/properties.json')
@@ -52,7 +52,7 @@ function buildPropertiesWithMDNData(vscProperties) {
     if (!propertyMap[pn]) {
       propertyMap[pn] = {
         name: pn,
-        desc: mdnDocumentations[pn] ? mdnDocumentations[pn] : '',
+        desc: propertyDescriptions[pn] ? propertyDescriptions[pn] : '',
         restriction: 'none',
         ...extractMDNProperties(allMDNProperties[pn])
       }
@@ -90,5 +90,5 @@ function abbreviateStatus(status) {
 }
 
 module.exports = {
-  buildPropertiesWithMDNData
+  addMDNProperties
 }

build/mdn-data-importer.js renamed to build/mdn/mdn-data-property-importer.js

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const mdnData = require('mdn-data')
+const { pseudoSelectorDescriptions } = require('./mdn-documentation')
+
+const mdnExcludedPseudoSelectors = [
+  /**
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/:matches
+   * -moz-any and -webkit-any are already in css-schema.xml
+   */
+  ':any'
+]
+
+function addMDNPseudoSelectors(vscPseudoClasses) {
+  const mdnPseudoSelectors = mdnData.css.selectors
+  const allPseudoSelectors = vscPseudoClasses
+
+  const allSelectorNames = vscPseudoClasses.map(s => s.name)
+
+  for (const selectorName of Object.keys(mdnPseudoSelectors)) {
+    const selector = mdnPseudoSelectors[selectorName]
+    if (selector.syntax.startsWith(':') && !selector.syntax.startsWith('::')) {
+      if (
+        !mdnExcludedPseudoSelectors.includes(selectorName) &&
+        !allSelectorNames.includes(selectorName) &&
+        !allSelectorNames.includes(selectorName + '()')
+      ) {
+        allPseudoSelectors.push({
+          name: selectorName,
+          desc: pseudoSelectorDescriptions[selectorName] ? pseudoSelectorDescriptions[selectorName] : ''
+        })
+      }
+    }
+  }
+  return allPseudoSelectors
+}
+
+module.exports = {
+  addMDNPseudoSelectors
+}