Add Recurse Option to getShorthandComputedProperties

- fixes issue #4
- #4

Author: Mahir Shah

README.md

@@ -13,12 +13,13 @@
 - [API](#api)
   - [isShorthandProperty(property: string): boolean](#isshorthandpropertyproperty-string-boolean)
     - [Examples](#examples)
-  - [[Experimental] isValidDeclaration(property: string, value: string): boolean](#experimental-isvaliddeclarationproperty-string-value-string-boolean)
+  - [[Experimental] [isValidDeclaration(property: string, value: string): boolean](./src/isValidDeclaration.js)](#experimental-isvaliddeclarationproperty-string-value-string-booleansrcisvaliddeclarationjs)
     - [Examples](#examples-1)
-  - [getShorthandComputedProperties(property: string): Array](#getshorthandcomputedpropertiesproperty-string-array)
+  - [getShorthandComputedProperties(property: string, [recursivelyResolve=false]): Array](#getshorthandcomputedpropertiesproperty-string-recursivelyresolvefalse-array)
       - [Examples](#examples-2)
-  - [expandShorthandProperty(property: string, value: string, [recursivelyResolve=false]): Object](#expandshorthandpropertyproperty-string-value-string-recursivelyresolvetrue-object)
+  - [expandShorthandProperty(property: string, value: string, [recursivelyResolve=false]): Object](#expandshorthandpropertyproperty-string-value-string-recursivelyresolvefalse-object)
       - [Examples](#examples-3)
+  - [Developer/Contribution HOWTO](#developercontribution-howto)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -30,7 +31,7 @@
 
 ## Installation
 ```
-$ npm instal css-property-parser
+$ npm install css-property-parser
 ```
 
 ## Usage
@@ -142,35 +143,57 @@ isValidDeclaration('width', '300ms')
 // => false ('ms' is not a valid length unit)
 ```
 
-### [getShorthandComputedProperties(property: string): Array](./src/getShorthandComputedProperties.js)
+### [getShorthandComputedProperties(property: string, [recursivelyResolve=false]): Array](./src/getShorthandComputedProperties.js)
 Given a shorthand property, returns an array of the computed properties for that shorthand property. If given
 a known property that is not a shorthand, simply returns the given property. If given an unknown property,
 returns an empty array.
 
  * shorthandProperty - the shorthand property name. For example, "background" or "border".
+ * [recursivelyResolve=false] - recursively resolve additional longhand properties if the shorthands expand to additional shorthands. For example, the border property expands to border-width, which expands further to border-left-width, border-right-width, etc.
  * returns an array containing the computed properties for the given shorthand property. Returns an empty array if the given property is not a valid property.
 
 ##### Examples
 
 ```js
 getShorthandComputedProperties('background');
- // -> [
- //   "background-image",
- //   "background-position",
- //   "background-size",
- //   "background-repeat",
- //   "background-origin",
- //   "background-clip",
- //   "background-attachment",
- //   "background-color"
- // ]
+// -> [
+//   "background-image",
+//   "background-position",
+//   "background-size",
+//   "background-repeat",
+//   "background-origin",
+//   "background-clip",
+//   "background-attachment",
+//   "background-color"
+// ]
 ```
 
 ```js
 getShorthandComputedProperties('color');
 // -> ["color"]
 ```
 
+```js
+getShorthandComputedProperties('border', true); 
+// -> [
+//       'border-width',
+//       'border-style',
+//       'border-color',
+//       'border-bottom-width',
+//       'border-left-width',
+//       'border-right-width',
+//       'border-top-width',
+//       'border-bottom-style',
+//       'border-left-style',
+//       'border-right-style',
+//       'border-top-style',
+//       'border-bottom-color',
+//       'border-left-color',
+//       'border-right-color',
+//       'border-top-color'
+// ];
+```
+
 ```js
  getShorthandComputedProperties('unknownProperty');
 // -> []

src/getShorthandComputedProperties.js

@@ -6,6 +6,10 @@ const { css: { properties } } = require('mdn-data');
  * returns an empty array.
  *
  * @param {string} shorthandProperty - the shorthand property name. For example, "background" or "border".
+ * @param {boolean} [recursivelyResolve=false] - recursively resolve additional longhand properties if the shorthands
+ *                                              expand to additional shorthands. For example, the border property
+ *                                              expands to border-width, which expands further to border-left-width,
+ *                                              border-right-width, etc.
  * @returns {Array} - an array containing the computed properties for the given shorthand property. Returns an
  *                    empty array if the given property is not a valid property.
  *
@@ -23,17 +27,44 @@ const { css: { properties } } = require('mdn-data');
  * ]
  *
  * @example
+ * getShorthandComputedProperties('border', true) ->
+ * [
+ *     "border-width",
+ *     "border-style",
+ *     "border-color",
+ *     "border-bottom-width",
+ *     "border-left-width",
+ *     "border-right-width",
+ *     "border-top-width",
+ *     "border-bottom-style",
+ *     "border-left-style",
+ *     "border-right-style",
+ *     "border-top-style",
+ *     "border-bottom-color",
+ *     "border-left-color",
+ *     "border-right-color",
+ *     "border-top-color",
+ * ]
+ *
+ * @example
  * getShorthandComputedProperties('color') ->
  * ["color"]
  *
  * @example
  * getShorthandComputedProperties('unknownProperty') ->
  * []
  */
-module.exports = function getShorthandComputedProperties(shorthandProperty) {
+module.exports = function getShorthandComputedProperties(shorthandProperty, recursivelyResolve = false) {
   if (properties[shorthandProperty]) {
     if (Array.isArray(properties[shorthandProperty].computed)) {
-      return properties[shorthandProperty].computed;
+      const computedProperties = properties[shorthandProperty].computed;
+
+      return recursivelyResolve
+        ? computedProperties.concat(...computedProperties
+          .filter(property => Array.isArray(properties[property].computed))
+          .map(property => getShorthandComputedProperties(property, true))
+        )
+        : computedProperties;
     }
 
     return [shorthandProperty];

test/GetShorthandComputedPropertiesTest.js

@@ -25,4 +25,32 @@ describe('getShorthandComputedProperties', function () {
       'background-color',
     ]);
   });
+
+  it('should not recursively resolve properties by default', function () {
+    assert.deepEqual(getShorthandComputedProperties('border'), [
+      'border-width',
+      'border-style',
+      'border-color',
+    ]);
+  });
+
+  it('should recursively resolve properties', function () {
+    assert.deepEqual(getShorthandComputedProperties('border', true), [
+      'border-width',
+      'border-style',
+      'border-color',
+      'border-bottom-width',
+      'border-left-width',
+      'border-right-width',
+      'border-top-width',
+      'border-bottom-style',
+      'border-left-style',
+      'border-right-style',
+      'border-top-style',
+      'border-bottom-color',
+      'border-left-color',
+      'border-right-color',
+      'border-top-color',
+    ]);
+  });
 });