Use MDN to enhance CSS LS. Part of #68

README.md

@@ -61,3 +61,8 @@ License
 (MIT License)
 
 Copyright 2016, Microsoft
+
+With the exceptions of,
+
+- `build/mdn-documentation.js`, which is built upon content from [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web)
+and distributed under CC BY-SA 2.5.

build/generate_browserjs.js

@@ -343,6 +343,9 @@ function toSource(object, keyName) {
 
 var parser = new xml2js.Parser({explicitArray : false});
 var schemaFileName= 'css-schema.xml';
+
+var { buildPropertiesWithMDNData } = require('./mdn-data-importer')
+
 fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) {
 	parser.parseString(data, function (err, result) {
 
@@ -360,7 +363,7 @@ fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) {
 				atdirectives: atdirectives,
 				pseudoclasses: pseudoclasses,
 				pseudoelements: pseudoelements,
-				properties: properties
+				properties: buildPropertiesWithMDNData(properties)
 			}
 		};
 
@@ -376,7 +379,7 @@ fs.readFile(path.resolve(__dirname, schemaFileName), function(err, data) {
 			' *  Copyright (c) Microsoft Corporation. All rights reserved.',
 			' *  Licensed under the MIT License. See License.txt in the project root for license information.',
 			' *--------------------------------------------------------------------------------------------*/',
-			'// file generated from ' + schemaFileName + ' using css-exclude_generate_browserjs.js',
+			'// file generated from ' + schemaFileName + ' and https://github.com/mdn/data using css-exclude_generate_browserjs.js',
 			'',
 			'export const data : any = ' + toJavaScript(resultObject) + ';',
 			'export const descriptions : any = ' + toJavaScript(descriptions) + ';',

build/mdn-data-importer.js

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+const path = require('path')
+const fs = require('fs')
+
+const mdnDocumentations = require('./mdn-documentation')
+
+const mdnExcludedProperties = [
+  '--*', // custom properties
+  'gap', // grid-gap
+  'row-gap', // grid-row-gap
+  'image-resolution', // https://www.w3.org/TR/css-images-4/#propdef-image-resolution
+]
+
+function buildPropertiesWithMDNData(vscProperties) {
+  const propertyMap = {}
+
+  const mdnProperties = require('mdn-data/css/properties.json')
+  const mdnAtRules = require('mdn-data/css/at-rules.json')
+
+  // Flatten at-rule properties and put all properties together
+  const allMDNProperties = mdnProperties
+  for (const atRuleName of Object.keys(mdnAtRules)) {
+    if (mdnAtRules[atRuleName].descriptors) {
+      for (const atRulePropertyName of Object.keys(mdnAtRules[atRuleName].descriptors)) {
+        allMDNProperties[atRulePropertyName] = mdnAtRules[atRuleName].descriptors[atRulePropertyName]
+      }
+    }
+  }
+
+  mdnExcludedProperties.forEach(p => {
+    delete allMDNProperties[p]
+  })
+
+  /**
+   * 1. Go through VSC properties. For each entry that has a matching entry in MDN, merge both entry.
+   */
+  vscProperties.forEach(p => {
+    if (p.name) {
+      if (allMDNProperties[p.name]) {
+        propertyMap[p.name] = {
+          ...p,
+          ...extractMDNProperties(allMDNProperties[p.name])
+        }
+      } else {
+        propertyMap[p.name] = p
+      }
+    }
+  })
+
+  /**
+   * 2. Go through MDN properties. For each entry that hasn't been recorded, add it with empty description.
+   */
+  for (const pn of Object.keys(allMDNProperties)) {
+    if (!propertyMap[pn]) {
+      propertyMap[pn] = {
+        name: pn,
+        desc: mdnDocumentations[pn] ? mdnDocumentations[pn] : '',
+        restriction: 'none',
+        ...extractMDNProperties(allMDNProperties[pn])
+      }
+    }
+  }
+
+  return Object.values(propertyMap)
+}
+
+/**
+ * Extract only the MDN data that we use
+ */
+function extractMDNProperties(mdnEntry) {
+  return {
+    status: mdnEntry.status,
+    syntax: mdnEntry.syntax
+  }
+}
+
+module.exports = {
+  buildPropertiesWithMDNData
+}

package.json

@@ -18,6 +18,7 @@
     "@types/mocha": "^2.2.33",
     "@types/node": "^7.0.43",
     "istanbul": "^0.4.5",
+    "mdn-data": "^1.1.1",
     "mkdirp": "^0.5.1",
     "mocha": "^5.0.4",
     "rimraf": "^2.6.2",