cssinjs / cssinjs/jss

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

Open
#1,339 2 comments 3 reactions 0 assignees View on GitHub
feature request help wanted question
Dominant language
JavaScript
Stars
7.1k
Forks
386
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](https://cssinjs.org/react-jss/?v=v10.1.1) with Next.js as described in [Next.js official example](https://github.com/zeit/next.js/tree/master/examples/with-react-jss). However if I try to use it with Next.js amp build configuration, `amp-custom` attribute gets striped from the `` 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

Open the contributing guide

Research direction

Start by running the two projects in the linked nextjs-amp-jss repository and compare the generated tags during the AMP build with the linked Next.js issue. Done means the AMP output preserves amp-custom on the head style element; the issue does not identify a JSS or Next.js source file.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.