Duplicate amp-custom

Bug report

Describe the bug

I was working on Next.js with Netlify CMS by using withAmp().
I add <style amp-custom> in Next Head but because of using withAmp() which (likely to) auto generate <style amp-custom> with blank style.

The result is duplication of using <style amp-custom> which will failed if used AMP validator.
I try searching around about adding CSS to withAmp and changing the ‘auto added’ amp-custom style but result was no luck, plus I can’t seem to find a proper way to fix this and documentation about using withAmp properly (which is not on ‘learn’ and blog post) like: second parameter options of withAmp, does it only include { hybrid: true } ?

I can’t seem to find a good documentation of withAmp and can’t add <style amp-custom>

To Reproduce

1. I set up a repo if you wanted to properly take a look at:

git clone -b next-amp-issue-1 https://github.com/dusit-thani-core-team/Dusit-Blog

1. run yarn dev and go to localhost:3000, you should see there’s two <style amp-custom="">, one contains style, one doesn’t
2. yarn export, build failed as a result of failed AMP Validator from duplication of <style amp-custom>

Expected behavior

Is there a way to reduce <style amp-custom> to one, like adding a config to remove ‘auto added’ <style amp-custom> or add style to ‘auto added’ <style amp-custom>.

Screenshots

System information

• OS: Windows 10 Tried on Chrome and Firefox.
• Next.js 8.1.0, react: 16.8.6, react-dom: 16.8.6
• Node 12.3.1, yarn 1.15.2

Additional context

Add any other context about the problem here. Is there a clear documentation of using AMP with CSS or using AMP or just example using similar to this?

[rizkiandrianto]

@ijjk what if I just want to use styles on some page (only on AMP page, for example)? I try to add <style> with dangerouslySetInnerHTML but still not working, I have 1 style with attribute amp-custom, but empty.

[ijjk]

Hi, you can add custom styles using a custom _document. Any styles returned in getInitialProps for _document will be combined into the one automatic style[amp-custom].

Example:

import Document from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps (ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style dangerouslySetInnerHTML={{
            __html: `body{ background: orange; }`
          }} />
        </>
      )
    }
  }
}

If you are still having trouble with this feel free to reply with additional info.