Merge branch 'canary' into fix-meta-undefined

packages/next/build/babel/plugins/jsx-pragma.ts

@@ -51,17 +51,24 @@ export default function({
 
               // if the React binding came from a require('react'),
               // make sure that our usage comes after it.
+              let newPath
               if (
                 existingBinding &&
                 t.isVariableDeclarator(existingBinding.path.node) &&
                 t.isCallExpression(existingBinding.path.node.init) &&
                 t.isIdentifier(existingBinding.path.node.init.callee) &&
                 existingBinding.path.node.init.callee.name === 'require'
               ) {
-                existingBinding.path.parentPath.insertAfter(mapping)
+                ;[newPath] = existingBinding.path.parentPath.insertAfter(
+                  mapping
+                )
               } else {
                 // @ts-ignore
-                path.unshiftContainer('body', mapping)
+                ;[newPath] = path.unshiftContainer('body', mapping)
+              }
+
+              for (const declar of newPath.get('declarations')) {
+                path.scope.registerBinding(newPath.node.kind, declar)
               }
             }
 
@@ -83,7 +90,10 @@ export default function({
               )
 
               // @ts-ignore
-              path.unshiftContainer('body', importSpecifier)
+              const [newPath] = path.unshiftContainer('body', importSpecifier)
+              for (const specifier of newPath.get('specifiers')) {
+                path.scope.registerBinding('module', specifier)
+              }
             }
           }
         },

test/integration/css-fixtures/nm-module-nested/pages/index.js

@@ -0,0 +1,12 @@
+import * as data from 'example'
+import * as classes from 'example/index.module.css'
+
+function Home() {
+  return (
+    <div id="nm-div">
+      {JSON.stringify(data)} {JSON.stringify(classes)}
+    </div>
+  )
+}
+
+export default Home

test/integration/css-fixtures/npm-import-nested/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.css'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/css-fixtures/npm-import-nested/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/css-fixtures/npm-import-nested/styles/global.css

@@ -0,0 +1 @@
+@import '~example/test.css';

test/integration/css-modules/test/index.test.js

@@ -245,6 +245,49 @@ describe('Valid CSS Module Usage from within node_modules', () => {
   })
 })
 
+describe('Valid Nested CSS Module Usage from within node_modules', () => {
+  const appDir = join(fixturesDir, 'nm-module-nested')
+
+  beforeAll(async () => {
+    await remove(join(appDir, '.next'))
+  })
+
+  let appPort
+  let app
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(async () => {
+    await killApp(app)
+  })
+
+  it(`should've prerendered with relevant data`, async () => {
+    const content = await renderViaHTTP(appPort, '/')
+    const $ = cheerio.load(content)
+
+    const cssPreload = $('#nm-div')
+    expect(cssPreload.text()).toMatchInlineSnapshot(
+      `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__2YUgj other_className__bt_-E\\"}"`
+    )
+  })
+
+  it(`should've emitted a single CSS file`, async () => {
+    const cssFolder = join(appDir, '.next/static/css')
+
+    const files = await readdir(cssFolder)
+    const cssFiles = files.filter(f => /\.css$/.test(f))
+
+    expect(cssFiles.length).toBe(1)
+    const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+    expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
+      `".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"`
+    )
+  })
+})
+
 describe('CSS Module Composes Usage (Basic)', () => {
   // This is a very bad feature. Do not use it.
   const appDir = join(fixturesDir, 'composes-basic')

test/integration/css/test/index.test.js

@@ -537,6 +537,31 @@ describe('CSS Support', () => {
     })
   })
 
+  describe('Good Nested CSS Import from node_modules', () => {
+    const appDir = join(fixturesDir, 'npm-import-nested')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should build successfully', async () => {
+      await nextBuild(appDir)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter(f => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+      expect(
+        cssContent.replace(/\/\*.*?\*\//g, '').trim()
+      ).toMatchInlineSnapshot(`".other{color:#00f}.test{color:red}"`)
+    })
+  })
+
   describe('Bad CSS Import from node_modules', () => {
     const appDir = join(fixturesDir, 'npm-import-bad')