Global CSS not applied to AMP pages

Bug report

Describe the bug

Global CSS (via _app.tsx/_app.js) are not being applied to AMP pages.

Non-AMP pages do not have this issue.

To Reproduce

Reproduction sandbox: https://github.com/achrinza/issue-sandbox-nexjs-global-css-amp

Step-by-step:

1. Run npm init next-app
2. Create styles.css

   body {
       color: #f00;
   }
   

3. Create pages/_app.js

   import '../styles.css';
   
   export default ({ Component, pageProps }) => (
     <Component {...pageProps} />
   );
   

4. Create pages/NonAmp.js page:

   const NonAmp = () => (
     <p>Hello, world!</p>
   );
   
   export default NonAmp;
   

5. Create pages/Amp.js page

   export const config = { amp: true }
   const Amp = () => (
     <p>Hello, world!</p>
   );
   
   export default Amp;
   

6. Run npm run dev
7. View localhost:3000/Amp and localhost:3000/NonAmp - observe the lack of color: red on the AMP page.

Expected behavior

The AMP page should have a global CSS applied.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows 10
• Firefox 73.0
• Version of Next.js: 9.2.1

Additional context

N/A

[masihjahangiri]

It’s a really big issue because I use tailwind and I need style AMP pages with tailwindcss classes.

[apoorvmote]

@timneutkens You are the guy I was trying to reach out. I have few related questions. Please let me know if I should create new issue for any of them.

Is it better to write amp pages with jsx or is it better with .md?

The benefit of using .md is the front matter(date or cateogory) that I can use to sort blog post and generate blog list pages.

How would someone go about automatically generating list pages from amp page written in jsx? or add front matter to jsx page? Ideally I would like to keep front matter, images and other static assets and the actual blog post right next to each other. Because all of these are static.

How good is .md to amp page conversion? I am using marked (as per documentation) to convert .md to html, adding dangerous inner html and making export config = { amp: true } and hoping that nextjs will do the rest. Like importing relevant amp libraries.

How to add disqus comments for amp pages/blog posts in Next js?

My preference has changed from .md to jsx. Because I can use reusable components with jsx. This is complicated and time consuming to do with .md. I have literally learned about Nextjs 4 days ago. So I am trying things out and figuring out what I like. FYI when I say jsx then I actually mean tsx. But that shouldn’t matter.

How do I pull title, description, categories, date from 100’s of jsx files to build list page?

Also I was able to replicate SASS mixins with js variables. Only thing I miss from SASS is nesting css. Currently I have to write full form css.