Next.js: Global CSS not applied to AMP pages

Created on 16 Feb 2020  路  25Comments  路  Source: vercel/next.js

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
    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

bug 3
Source
picture achrinza
👍22

All 25 comments

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

MistaPidaus picture MistaPidaus on 6 Mar 2020

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 picture filipesmedeiros on 25 Mar 2020

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 picture filipesmedeiros on 25 Mar 2020

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.

filipesmedeiros picture filipesmedeiros on 25 Mar 2020

@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鈥檚 a no-no for my projects

achrinza picture achrinza on 25 Mar 2020

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

achrinza picture achrinza on 25 Mar 2020
👍1

@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 picture filipesmedeiros on 25 Mar 2020

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