Next.js: AMP: AMP component-generated css classes are ignored when overridden with JSX styles

[Glomels]

Bug report

Describe the bug

When trying to override AMP component styles using <style jsx />, changes made to classes generated by AMP are ignored and are not added to the CSS bundle.

To Reproduce

First we insert an amp component like this into our JSX code:

  <amp-carousel
    type="carousel"
    controls
    className="carousel-blog"
    height="65vh"
    layout="fixed-height"
  >
  <div className="item">Item1</div>
  <div className="item">Item2</div>
  </amp-carousel>

This particular component generates the following css classes:

• .amp-carousel-button
.amp-carousel-button-prev
.amp-carousel-button-next

Then if we try overriding them with a <style jsx />, like this:

  <style jsx>{`
  .amp-carousel-button {
    background-color: transparent;
  }
  .carousel-blog {
    height: 100%;
  }
  `}</style>

.amp-carousel-button is ignored and not added to the CSS bundle, even though it is inside the same style tag as .carousel-blog, which IS added to the bundle.

Expected behavior

I expected the bundle generator to add the changes made to AMP classes written inside my <style jsx /> tags, since other classes used inside the same tags are indeed added.

System information

• OS: Windows 10
• Version of Next.js: 9.4.0
• Version of Node.js: 13.8.0

Additional context

I'm working with AMP-only mode.
The only way I was able to modify these classes was using an HTML style tag inside the _document.js file and using the dangerouslySetInnerHtml attribute.

[mxa0079]

If we could get some guidance on where to start with this issue, we would love to start contributing to next.js. Disclaimer: I am part of the same team as @Glomels