Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AMP: styles missing when importing standard css files in a project using styled components

See original GitHub issue

Bug report

Describe the bug

When importing standard css files from node modules, e.g.:

import 'reset-css/reset.css';
import 'semantic-ui-css/components/form.min.css';
import 'semantic-ui-css/components/message.min.css';

and when you’re using styled components, only the styled components remain. The styles of the normal css files imported from node modules disappear / are missing (in the AMP version).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Use styled components in your project
Import css from a lib that doesn’t use styled components, e.g. css reset (import 'reset-css/reset.css';)
Use withAmp on your page
View the amp version and notice standard imported css is missing

Expected behavior

Import both styled components and other imported css from files.

System information

OS: macOS 10.14.4
Browser: Chrome 73.0.3683.103 (Official Build) (64-bit)
Version of Next.js: 8.1.1-canary.3

Additional context

Styled components seem to be working as of this version for AMP, but other css next to styled components is being thrown away in the AMP version.

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:24 (7 by maintainers)

Top GitHub Comments

15reactions

eglovecommented, Dec 25, 2019

Styled JSX throws amp-validation errors.

The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom (transformed)'.

When using <style amp-custom>{'...'}</style> in <Head> (as it is supposed to be) it compiles in HTML as: <style amp-custom content=""></style><style>(styled JSX here)</style>

That’s why this is a problem.

8reactions

joelcoluccinbccommented, Aug 3, 2020

Another workaround is to leverage the styled-css global feature + Next.js useAmp hook. See blog here: https://nextjs.org/blog/styling-next-with-styled-jsx#writing-styles-in-external-files

Example usage:

import React from 'react';
import { useAmp } from 'next/amp';

import globalStyles from '../styles/global.js';

function DefaultLayout () {
  const isAmp = useAmp();
  return (
    <div>
      {isAmp && <style jsx global>
        {globalStyles}
      </style>
      }
    </div>
  );
}

Downside is copying versioned files to your project.

Top Results From Across the Web

FAQs - styled-components

In general, always use the css helper when composing styling partials to be interpolated into a styled component.. import styled, { keyframes }...

Cant Import CSS files into React Project - Stack Overflow

so i have installed css-loader and style-loader packages. if i add those packages to webpack.config.js i get following error. i dont know how...

Server-side rendered styled-components with Nextjs

To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering.

How To Import CSS Files in React? Are There Better Ways To ...

The most obvious and simple way to style the React apps is by importing CSS files. This is actually the default way of...

next/link | Next.js

For an example, consider a pages directory with the following files: ... import Link from 'next/link' import styled from 'styled-components' // This creates ......