🚀 [Story performance] Remove media query matcher

extensions/amp-story/1.0/amp-story.css

@@ -197,7 +197,6 @@ amp-story .amp-video-eq:not(.amp-video-eq-play), .i-amphtml-story-no-audio-ui .a
 }
 
 /** Page level */
-.i-amphtml-story-media-query-matcher,
 amp-story-page {
   bottom: 0 !important;
   height: auto !important;
@@ -212,13 +211,6 @@ amp-story-page {
   z-index: 0 !important;
 }
 
-.i-amphtml-story-media-query-matcher {
-  height: inherit !important;
-  width: inherit !important;
-  border: 0 !important;
-  z-index: -1 !important;
-}
-
 amp-story-page[active] {
   z-index: 1 !important;
 }

extensions/amp-story/1.0/amp-story.js

@@ -78,7 +78,6 @@ import {findIndex, lastItem, toArray} from '#core/types/array';
 import {getConsentPolicyState} from '../../../src/consent';
 import {getDetail} from '#utils/event-helper';
 import {getLocalizationService} from './amp-story-localization-service';
-import {getMediaQueryService} from './amp-story-media-query-service';
 import {getMode, isModeDevelopment} from '../../../src/mode';
 import {getHistoryState as getWindowHistoryState} from '#core/window/history';
 import {isExperimentOn} from '#experiments';
@@ -474,45 +473,13 @@ export class AmpStory extends AMP.BaseElement {
 
   /** @private */
   initializeStyles_() {
-    const mediaQueryEls = this.element.querySelectorAll('media-query');
-
-    if (mediaQueryEls.length) {
-      this.initializeMediaQueries_(mediaQueryEls);
-    }
-
     const styleEl = this.win.document.querySelector('style[amp-custom]');
 
     if (styleEl) {
       this.rewriteStyles_(styleEl);
     }
   }
 
-  /**
-   * Registers the media queries
-   * @param {!NodeList<!Element>} mediaQueryEls
-   * @private
-   */
-  initializeMediaQueries_(mediaQueryEls) {
-    const service = getMediaQueryService(this.win);
-
-    const onMediaQueryMatch = (matches, className) => {
-      this.mutateElement(() => {
-        this.element.classList.toggle(className, matches);
-      });
-    };
-
-    toArray(mediaQueryEls).forEach((el) => {
-      const className = el.getAttribute('class-name');
-      const media = el.getAttribute('media');
-
-      if (className && media) {
-        service.onMediaQueryMatch(media, (matches) =>
-          onMediaQueryMatch(matches, className)
-        );
-      }
-    });
-  }
-
   /**
    * Initializes page ids by deduplicating them.
    * @private

src/service/index.js

@@ -492,17 +492,6 @@ export const Services = {
     );
   },
 
-  /**
-   * @param {!Window} win
-   * @return {?../extensions/amp-story/1.0/amp-story-media-query-service.AmpStoryMediaQueryService}
-   */
-  storyMediaQueryService: (win) => {
-    return (
-      /** @type {?../extensions/amp-story/1.0/amp-story-media-query-service.AmpStoryMediaQueryService} */
-      (getExistingServiceOrNull(win, 'story-media-query'))
-    );
-  },
-
   /**
    * Get promise with story request service
    * @param {!Window} win