cssinjs/jss

Next.js & amp & react-jss - amp-custom attribute gets striped from the <style> tag

Open

#1,339 opened on Apr 29, 2020

View on GitHub
 (2 comments) (3 reactions) (0 assignees)JavaScript (434 forks)batch import
feature requesthelp wantedquestion

Repository metrics

Stars
 (7,000 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Hello!

I am not sure if what I'm about to describe is Next.js bug or react-jss's, but here we go:

Describe the bug: I'm trying to use react-jss with Next.js as described in Next.js official example. However if I try to use it with Next.js amp build configuration, amp-custom attribute gets striped from the <style> element.

I've created issue about it here: https://github.com/zeit/next.js/issues/12243.

Expected behavior: amp-custom attribute should not get striped from <style> tag in <head>.

Codesandbox link: As the issue is connected to Next.js, I couldn't really create a Sandbox link. Instead I've created repository with 2 Next.js projects (and different implementations of react-jss). Repo is here: Repo is here: https://github.com/cibulka/nextjs-amp-jss

Versions (please complete the following information):

  • jss: 10.1.1
  • Browser: Chrome
  • OS: macOS (10.15.4)

I'm only just starting with AMP, so I might be missing something obvious. Thank you!

Contributor guide

Research direction
Investigate how Next.js handles <style> tags during AMP rendering. Check the Next.js issue #12243 for similar reports. Examine the JSS output to see if the 'amp custom' attribute is present before Next.js processes the HTML. Consider looking at how react jss injects styles and whether the attribute is lost in the DOM or during serialization.
Tech stack
javascriptreactnextjs
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
Next.js basicsJSS/React JSS usageAMP custom styles requirement
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55