Merge pull request #110 from Microsoft/octref/pseudo-selectors-only

Add new pseudo selectors / elements from MDN. Fix microsoft/vscode#41248

build/generate_browserjs.js

@@ -2,7 +2,9 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-/* global __dirname */
+
+//@ts-check
+
 const fs = require('fs')
 const path = require('path')
 const xml2js = require('xml2js')
@@ -343,17 +345,22 @@ 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-importer')
+const { addMDNPseudoElements, 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) {
+fs.readFile(path.resolve(__dirname, schemaFileName), (err, data) => {
   parser.parseString(data, function(err, result) {
-    const atdirectives = toSource(result, 'atDirectives')
-    const pseudoclasses = toSource(result, 'pseudoClasses')
-    const pseudoelements = toSource(result, 'pseudoElements')
+		const atdirectives = toSource(result, 'atDirectives')
+
+		let pseudoclasses = toSource(result, 'pseudoClasses')
+		pseudoclasses = addMDNPseudoSelectors(pseudoclasses)
+
+		let pseudoelements = toSource(result, 'pseudoElements')
+		pseudoelements = addMDNPseudoElements(pseudoelements)
 
     let properties = toSource(result, 'properties')
-		properties = buildPropertiesWithMDNData(properties)
+		properties = addMDNProperties(properties)
 
     addBrowserCompatDataToProperties(atdirectives, pseudoclasses, pseudoelements, properties)
 

build/mdn-browser-compat-data-importer.js → build/mdn/mdn-browser-compat-data-importer.js

@@ -3,6 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+//@ts-check
+
 const bcd = require('mdn-browser-compat-data')
 
 function addBrowserCompatDataToProperties(atdirectives, pseudoclasses, pseudoelements, properties) {

build/mdn-data-importer.js → build/mdn/mdn-data-importer.js

@@ -3,17 +3,19 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-const mdnDocumentations = require('./mdn-documentation')
+//@ts-check
+
+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')
-  const mdnAtRules = require('mdn-data/css/at-rules.json')
+  const mdnProperties = require('mdn-data').css.properties
+  const mdnAtRules = require('mdn-data').css.atRules
 
   // Flatten at-rule properties and put all properties together
   const allMDNProperties = mdnProperties
@@ -52,7 +54,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 +92,5 @@ function abbreviateStatus(status) {
 }
 
 module.exports = {
-  buildPropertiesWithMDNData
+  addMDNProperties
 }

build/mdn/mdn-data-selector-importer.js

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+const mdnData = require('mdn-data')
+const { pseudoSelectorDescriptions, pseudoElementDescriptions } = require('./mdn-documentation')
+
+function addMDNPseudoElements(vscPseudoElements) {
+	const mdnSelectors = mdnData.css.selectors
+	const allPseudoElements = vscPseudoElements
+
+	const allPseudoElementNames = vscPseudoElements.map(s => s.name)
+
+	for (const selectorName of Object.keys(mdnSelectors)) {
+		const selector = mdnSelectors[selectorName]
+		if (selector.syntax.startsWith('::')) {
+			if (
+				!allPseudoElementNames.includes(selectorName) &&
+				!allPseudoElementNames.includes(selectorName + '()')
+			) {
+				allPseudoElements.push({
+					name: selectorName,
+					desc: pseudoElementDescriptions[selectorName] ? pseudoElementDescriptions[selectorName] : ''
+				})
+			}
+		}
+	}
+	return allPseudoElements
+}
+
+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 mdnSelectors = mdnData.css.selectors
+	const allPseudoSelectors = vscPseudoClasses
+
+	const allPseudoSelectorNames = vscPseudoClasses.map(s => s.name)
+
+	for (const selectorName of Object.keys(mdnSelectors)) {
+		const selector = mdnSelectors[selectorName]
+		if (selector.syntax.startsWith(':') && !selector.syntax.startsWith('::')) {
+			if (
+				!mdnExcludedPseudoSelectors.includes(selectorName) &&
+				!allPseudoSelectorNames.includes(selectorName) &&
+				!allPseudoSelectorNames.includes(selectorName + '()')
+			) {
+				allPseudoSelectors.push({
+					name: selectorName,
+					desc: pseudoSelectorDescriptions[selectorName] ? pseudoSelectorDescriptions[selectorName] : ''
+				})
+			}
+		}
+	}
+	return allPseudoSelectors
+}
+
+module.exports = {
+	addMDNPseudoElements,
+	addMDNPseudoSelectors
+}