Merge pull request #122 from aarondrabeck/css-property-types

Adds parsing of type in js doc css property declaration.
runem · Nov 20, 2019 · 4c91ba1 · 4c91ba1
2 parents c3fe025 + 14feeb5
commit 4c91ba1
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 4 deletions.
diff --git a/dev/src/custom-element/my-custom-element.js b/dev/src/custom-element/my-custom-element.js
@@ -3,7 +3,8 @@
  * @fires change - Dispatched when this element changes
  * @slot - Default content placed in the body of this element
  * @slot header - Content placed in the header of this element
- * @cssprop --my-element-color - Controls the color of this element
+ * @cssprop {Color}  --my-element-color - Controls the color of this element
+ * @cssprop {Length}  --my-element-font-size - Controls the font-size in this element
  */
 export class MyCustomElement extends HTMLElement {
 	/**

diff --git a/src/analyze/flavors/js-doc/parse-declaration-css-props.ts b/src/analyze/flavors/js-doc/parse-declaration-css-props.ts
@@ -19,7 +19,8 @@ export function parseDeclarationCSSProps(node: Node, context: ParseComponentMemb
 				if (parsed.name != null) {
 					return {
 						name: parsed.name,
-						jsDoc: parsed.comment != null ? { comment: parsed.comment } : undefined
+						jsDoc: parsed.comment != null ? { comment: parsed.comment } : undefined,
+						type: parsed.type
 					} as ComponentCSSProperty;
 				}
 			},

diff --git a/src/analyze/types/component-css-property.ts b/src/analyze/types/component-css-property.ts
@@ -3,4 +3,5 @@ import { JsDoc } from "./js-doc";
 export interface ComponentCSSProperty {
 	name: string;
 	jsDoc?: JsDoc;
+	type?: string;
 }
diff --git a/src/cli/transformer/json/custom-elements-json-data.ts b/src/cli/transformer/json/custom-elements-json-data.ts
@@ -27,7 +27,10 @@ export interface HtmlDataSlot extends HtmlDataMember {}
 
 export interface HtmlDataEvent extends HtmlDataMember {}
 
-export interface HtmlDataCssProperty extends HtmlDataMember {}
+export interface HtmlDataCssProperty extends HtmlDataMember {
+	// Suggested fields:
+	type?: string;
+}
 
 export interface HtmlDataCssPart extends HtmlDataMember {}
 

diff --git a/src/cli/transformer/json/json-transformer.ts b/src/cli/transformer/json/json-transformer.ts
@@ -86,7 +86,8 @@ function componentCssPropToHtmlCssProp(prop: ComponentCSSProperty, checker: Type
 	return {
 		name: prop.name || "",
 		description: getDescriptionFromJsDoc(prop.jsDoc),
-		jsDoc: getJsDocTextFromJsDoc(prop.jsDoc)
+		jsDoc: getJsDocTextFromJsDoc(prop.jsDoc),
+		type: prop.type
 	};
 }
 

diff --git a/test/snapshots/results/test/snapshots/vanilla-masonry-layout.ts.md b/test/snapshots/results/test/snapshots/vanilla-masonry-layout.ts.md
@@ -21,6 +21,7 @@ Generated by [AVA](https://ava.li).
                     comment: 'Transition of an item.',
                   },
                   name: '--masonry-layout-item-transition',
+                  type: undefined,
                 },
               ],
               events: [],
@@ -243,6 +244,7 @@ Generated by [AVA](https://ava.li).
                     comment: 'Transition of an item.',
                   },
                   name: '--masonry-layout-item-transition',
+                  type: undefined,
                 },
               ],
               events: [],

diff --git a/test/snapshots/results/test/snapshots/vanilla-masonry-layout.ts.snap b/test/snapshots/results/test/snapshots/vanilla-masonry-layout.ts.snap