feat(analyzer): css prop fallbacks

bennypowers · bennypowers · commit c83cfc50c3a2 · 2023-04-17T12:37:19.000+03:00
diff --git a/.changeset/modern-numbers-turn.md b/.changeset/modern-numbers-turn.md
@@ -0,0 +1,5 @@
+---
+'@lit-labs/analyzer': minor
+---
+
+Add CSS Custom Property fallback (default) values to manifest
diff --git a/packages/labs/analyzer/src/lib/model.ts b/packages/labs/analyzer/src/lib/model.ts
@@ -536,6 +536,10 @@ export interface NamedDescribed extends Described {
   name: string;
 }
 
+export interface NamedDescribedDefault extends NamedDescribed {
+  default?: string;
+}
+
 export interface TypedNamedDescribed extends NamedDescribed {
   type?: string;
 }
@@ -569,7 +573,7 @@ export class CustomElementDeclaration extends ClassDeclaration {
   readonly tagname: string | undefined;
   readonly events: Map<string, Event>;
   readonly slots: Map<string, NamedDescribed>;
-  readonly cssProperties: Map<string, NamedDescribed>;
+  readonly cssProperties: Map<string, NamedDescribedDefault>;
   readonly cssParts: Map<string, NamedDescribed>;
 
   constructor(init: CustomElementDeclarationInit) {
diff --git a/packages/labs/analyzer/src/test/lit-element/jsdoc_test.ts b/packages/labs/analyzer/src/test/lit-element/jsdoc_test.ts
@@ -104,7 +104,7 @@ for (const lang of languages) {
   test('cssProperties - Correct number found', ({getModule}) => {
     const element = getModule('element-a').getDeclaration('ElementA');
     assert.ok(element.isLitElementDeclaration());
-    assert.equal(element.cssProperties.size, 6);
+    assert.equal(element.cssProperties.size, 9);
   });
 
   test('cssProperties - no-description', ({getModule}) => {
@@ -137,6 +137,37 @@ for (const lang of languages) {
     assert.equal(prop.description, 'Description for --with-description-dash');
   });
 
+  /**
+   * @cssProperty [--default-no-description=#324fff]
+   * @cssProperty [--default-with-description=#324fff] Description for --default-with-description
+   * with wraparound
+   * @cssProperty [--default-with-description-dash=#324fff] - Description for --default-with-description-dash
+   */
+
+  test('cssProperties - default-no-description', ({getModule}) => {
+    const element = getModule('element-a').getDeclaration('ElementA');
+    assert.ok(element.isLitElementDeclaration());
+    const prop = element.cssProperties.get('--default-no-description');
+    assert.ok(prop);
+    assert.equal(prop.default, '#324fff');
+  });
+
+  test('cssProperties - default-with-description', ({getModule}) => {
+    const element = getModule('element-a').getDeclaration('ElementA');
+    assert.ok(element.isLitElementDeclaration());
+    const prop = element.cssProperties.get('--with-description');
+    assert.ok(prop);
+    assert.equal(prop.default, '#324fff');
+  });
+
+  test('cssProperties - default-with-description-dash', ({getModule}) => {
+    const element = getModule('element-a').getDeclaration('ElementA');
+    assert.ok(element.isLitElementDeclaration());
+    const prop = element.cssProperties.get('--with-description-dash');
+    assert.ok(prop);
+    assert.equal(prop.default, '#324fff');
+  });
+
   test('cssProperties - short-no-description', ({getModule}) => {
     const element = getModule('element-a').getDeclaration('ElementA');
     assert.ok(element.isLitElementDeclaration());
diff --git a/packages/labs/analyzer/test-files/ts/vanilla-jsdoc/src/element-a.ts b/packages/labs/analyzer/test-files/ts/vanilla-jsdoc/src/element-a.ts
@@ -20,6 +20,10 @@
  * @cssProperty --with-description Description for --with-description
  * with wraparound
  * @cssProperty --with-description-dash - Description for --with-description-dash
+ * @cssProperty [--default-no-description=#324fff]
+ * @cssProperty [--default-with-description=#324fff] Description for --default-with-description
+ * with wraparound
+ * @cssProperty [--default-with-description-dash=#324fff] - Description for --default-with-description-dash
  * @cssProp --short-no-description
  * @cssProp --short-with-description Description for --short-with-description
  * with wraparound

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@lit-labs/analyzer': minor
 +---
++
 +Add CSS Custom Property fallback (default) values to manifest