fix: corrects behavior of style removal (#3261)

* fix style removal behavior

* adding tests

* limit exports from package root

Co-authored-by: Rob Eisenberg <EisenbergEffect@users.noreply.github.com>

packages/web-components/fast-element/src/__test__/styles.spec.ts

@@ -0,0 +1,38 @@
+import { expect } from "chai";
+import { AdoptedStyleSheetsStyles, StyleTarget } from "../styles";
+
+describe("AdoptedStyleSheetsStyles", () => {
+    context("when removing styles", () => {
+        it("should remove an associated stylesheet", () => {
+            const cache = new Map();
+            const sheet = new AdoptedStyleSheetsStyles([``], cache);
+            const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
+                adoptedStyleSheets: [],
+            };
+
+            sheet.addStylesTo(target as StyleTarget);
+            expect(target.adoptedStyleSheets!.length).to.equal(1);
+
+            sheet.removeStylesFrom(target as StyleTarget);
+            expect(target.adoptedStyleSheets!.length).to.equal(0);
+        });
+
+        it("should not remove unassociated styles", () => {
+            const cache = new Map();
+            const sheet = new AdoptedStyleSheetsStyles(["test"], cache);
+            const style = new CSSStyleSheet();
+            const target: Pick<StyleTarget, "adoptedStyleSheets"> = {
+                adoptedStyleSheets: [style],
+            };
+            sheet.addStylesTo(target as StyleTarget);
+
+            expect(target.adoptedStyleSheets!.length).to.equal(2);
+            expect(target.adoptedStyleSheets).to.contain(cache.get("test"));
+
+            sheet.removeStylesFrom(target as StyleTarget);
+
+            expect(target.adoptedStyleSheets!.length).to.equal(1);
+            expect(target.adoptedStyleSheets).not.to.contain(cache.get("test"));
+        });
+    });
+});

packages/web-components/fast-element/src/index.ts

@@ -5,7 +5,7 @@ export * from "./attributes";
 export * from "./controller";
 export * from "./interfaces";
 export * from "./template-compiler";
-export * from "./styles";
+export { StyleTarget, ElementStyles, css } from "./styles";
 export * from "./view";
 export * from "./observation/observable";
 export * from "./observation/notifier";

packages/web-components/fast-element/src/styles.ts

@@ -106,9 +106,13 @@ function reduceBehaviors(
         }, null as Behavior[] | null);
 }
 
-// https://wicg.github.io/construct-stylesheets/
-// https://developers.google.com/web/updates/2019/02/constructable-stylesheets
-class AdoptedStyleSheetsStyles extends ElementStyles {
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+export class AdoptedStyleSheetsStyles extends ElementStyles {
     private readonly styleSheets: CSSStyleSheet[];
     public readonly behaviors: ReadonlyArray<Behavior> | null = null;
 
@@ -138,7 +142,7 @@ class AdoptedStyleSheetsStyles extends ElementStyles {
     public removeStylesFrom(target: StyleTarget): void {
         const sourceSheets = this.styleSheets;
         target.adoptedStyleSheets = target.adoptedStyleSheets!.filter(
-            (x: CSSStyleSheet) => sourceSheets.indexOf(x) !== -1
+            (x: CSSStyleSheet) => sourceSheets.indexOf(x) === -1
         );
     }
 }