Add Babel plugin that fixes className for Amp elements (#6486)

This is a simple Babel plugin that overwrites certain attributes for `amp-` elements.

packages/next/build/babel/plugins/amp-attributes.ts

@@ -0,0 +1,32 @@
+import { PluginObj } from '@babel/core'
+import { NodePath } from '@babel/traverse'
+import { JSXOpeningElement } from '@babel/types'
+
+export default function AmpAttributePatcher(...args: any): PluginObj {
+  return {
+    visitor: {
+      JSXOpeningElement(path: NodePath<JSXOpeningElement>) {
+        const openingElement = path.node
+
+        const { name, attributes } = openingElement
+        if (!(name && name.type === 'JSXIdentifier')) {
+          return
+        }
+
+        if (!name.name.startsWith('amp-')) {
+          return
+        }
+
+        for (const attribute of attributes) {
+          if (attribute.type !== 'JSXAttribute') {
+            continue
+          }
+
+          if (attribute.name.name === 'className') {
+            attribute.name.name = 'class'
+          }
+        }
+      },
+    },
+  }
+}

packages/next/build/babel/preset.ts

@@ -78,6 +78,7 @@ module.exports = (context: any, options: NextBabelPresetOptions = {}): BabelPres
         ...options['transform-runtime']
       }],
       [require('styled-jsx/babel'), styledJsxOptions(options['styled-jsx'])],
+      require('./plugins/amp-attributes'),
       isProduction && require('babel-plugin-transform-react-remove-prop-types')
     ].filter(Boolean)
   }

test/integration/amphtml/pages/index.js

@@ -1 +1,5 @@
-export default () => 'Hello World'
+export default () => (
+  <amp-layout className='abc' layout='responsive' width='1' height='1'>
+    <span>Hello World</span>
+  </amp-layout>
+)

test/integration/amphtml/test/index.test.js

@@ -68,6 +68,9 @@ describe('AMP Usage', () => {
       const html = await renderViaHTTP(appPort, '/?amp=1')
       await validateAMP(html)
       expect(html).toMatch(/Hello World/)
+
+      const $ = cheerio.load(html)
+      expect($('.abc').length === 1)
     })
 
     it('should add link preload for amp script', async () => {