From 35b18829d1235ae17718ec5be5b7a23db349f356 Mon Sep 17 00:00:00 2001
From: Shaun Hamilton <shauhami020@gmail.com>
Date: Mon, 7 Jun 2021 22:33:58 +0100
Subject: [PATCH] fix(curriculum): use mediaText for CSSHelp (#42393)

* fix(curriculum): use mediaText in CSSHelp

prevent selection of style elements with class or media attributes
this should avoid picking up some browser extensions
---
 client/src/utils/css-help.ts                             | 9 ++++++---
 .../create-a-media-query.md                              | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/css-help.ts b/client/src/utils/css-help.ts
index f7fad182b1..251c447e53 100644
--- a/client/src/utils/css-help.ts
+++ b/client/src/utils/css-help.ts
@@ -75,9 +75,9 @@ class CSSHelp {
       ele.style?.getPropertyValue(property)
     );
   }
-  getRuleListsWithinMedia(conditionText: string): CSSStyleRule[] {
+  getRuleListsWithinMedia(mediaText: string): CSSStyleRule[] {
     const medias = this.getCSSRules('media') as CSSMediaRule[];
-    const cond = medias?.find(x => x.conditionText === conditionText);
+    const cond = medias?.find(x => x?.media?.mediaText === mediaText);
     const cssRules = cond?.cssRules;
     return Array.from(cssRules || []) as CSSStyleRule[];
   }
@@ -86,7 +86,10 @@ class CSSHelp {
     const link: HTMLLinkElement | null = this.doc?.querySelector(
       "link[href*='styles']"
     );
-    const style: HTMLStyleElement | null = this.doc?.querySelector('style');
+    // Most* browser extensions inject styles with class/media attributes
+    const style: HTMLStyleElement | null = this.doc?.querySelector(
+      'style:not([class]):not([media])'
+    );
     if (link?.sheet?.cssRules?.length) {
       return link.sheet;
     } else if (style) {
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
index 40ef0ec505..f126c72dc9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
@@ -37,14 +37,14 @@ You should declare a `@media` query for devices with a `height` less than or equ
 
 ```js
 const media = new __helpers.CSSHelp(document).getCSSRules('media');
-assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
+assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
 ```
 
 Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`.
 
 ```js
 const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
-assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
+assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
 ```
 
 Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.