search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.26k stars 26.49k forks source link

Global CSS not applied to AMP pages #10549

Closed achrinza closed 9 months ago

achrinza commented 4 years ago

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

Additional context

N/A

MistaPidaus commented 4 years ago

I have the same problem with TailwindCSS setup. I use the Hybrid AMP. Adding inline style style={{ background: '#000'}} on div works though.

My NextJS version: 9.2.2

filipesmedeiros commented 4 years ago

Wow, I've been trying to figure this one out for hours, thanks. I'll see if I can find the error and work on it and eventually do a PR

EDIT: I'm assuming this isn't solved yet, even in unstable versions, right? Also, if someone could point me to the right place, as a start, that would be awesome.

filipesmedeiros commented 4 years ago

It has to be somewhere in this file https://github.com/zeit/next.js/blob/canary/packages/next/next-server/server/render.tsx right?

filipesmedeiros commented 4 years ago

Btw @achrinza as a temp fix, you can probably import your .css like this:

export default ({ Component, pageProps }) => <>
    <Head>
        <link rel="stylesheet" src="/styles.css" />
    </Head>
    <Component {...pageProps} />
</>

Assuming, ofc, you have the .css in the public dir. This, for some reason however, throws an Amp Validation error

[ warn ]  Amp Validation

/  error  The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/styles/global.css'.  https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#custom-fonts

(This error happens even if the is the only child of )

This works fine afaik.

Also, this should point in the right direction. Why does importing with import not work, while linking inside head does? Maybe someone from the team can help.

achrinza commented 4 years ago

@filipesmedeiros Thanks for the the workaround.

Unfortunately (based on the error), this won't generate a valid AMP page which would prevent the AMP Cache from caching the web page. It'll also breaking some CI/CD pipelines that run the AMP validator.

So unfortunately it’s a no-no for my projects

achrinza commented 4 years ago

FWIW #8710 seems to be the PR that adds Global CSS

filipesmedeiros commented 4 years ago

@achrinza True, this doesn't generate valid AMP. I think for now the easiest way then, to have AMP and a "global" style would be to just inline it in the of the _app.js using styled jsx.

filipesmedeiros commented 4 years ago

So wait, this should be the cause right: webpack is not putting the imported stylesheets inside