Nextjs and styled jsx single global amp-custom style in amp pages

[maheshcharig]

I am reporting a bug that related AMP support in nexjs 12 version

please check here nextjs amp page where jsx not rendering into amp-custom style .

What is the current behavior?

By default all global jsx styles are adding to body but as per amp standards each page should have only one inline style that also should be in head tag, i tried to tweak but could not help. this is my package.json that helps to understand

"dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.16", "@fullhuman/postcss-purgecss": "^4.1.3", "@material-ui/core": "^4.12.3", "@next/bundle-analyzer": "^12.0.2", "@types/history": "^4.7.9", "@types/node": "^16.11.17", "axios": "^0.24.0", "body-parser": "^1.19.1", "bootstrap": "^5.1.3", "build-css": "^0.2.0", "classnames": "^2.3.1", "cors": "^2.8.5", "cssnano": "^5.0.17", "fs": "0.0.1-security", "lodash": "^4.17.21", "moment": "^2.29.3", "namor": "^2.0.3", "next": "^12.1.6", "next-pagination": "^3.1.1", "next-pwa": "^5.4.4", "next-seo": "^5.1.0", "node-fetch-cache": "^3.0.3", "query-string": "^7.0.1", "raw-loader": "^4.0.2", "react": "^18.1.0", "react-accessible-dropdown-menu-hook": "^3.1.0", "react-bootstrap": "^2.0.2", "react-copy-to-clipboard": "^5.0.4", "react-dom": "^18.2.0", "react-facebook-login": "^4.1.1", "react-hook-form": "^7.26.1", "react-icons": "^4.3.1", "react-image-gallery": "^1.2.8", "react-infinite-scroll-component": "^6.1.0", "react-router": "^6.2.1", "react-router-dom": "^6.2.1", "react-scroll-up-button": "^1.6.4", "react-search-autocomplete": "^5.4.4", "react-table": "^7.7.0", "react-tabs": "^3.2.3", "styled-components": "^5.3.3", "styled-jsx-plugin-postcss": "^4.0.1", "swr": "^1.2.1", "tailwindcss": "^2.2.19", "typescript": "^4.5.4", "webpack-cli": "^3.3.11" }, "devDependencies": { "@types/body-parser": "^1.19.2", "@types/lodash": "^4.14.178", "@types/react": "^17.0.33", "@types/react-router": "^5.1.17", "@types/react-router-dom": "^5.1.3", "@types/react-tabs": "^2.3.3", "@types/styled-components": "^5.1.17", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "autoprefixer": "^10.4.0", "cross-env": "^7.0.3", "eslint": "^7.32.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-config-airbnb-typescript": "^14.0.1", "eslint-config-next": "^12.0.2", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-unused-imports": "^1.1.5", "faker": "^5.5.3", "husky": "^7.0.4", "lint-staged": "^11.2.6", "npm-run-all": "^4.1.5", "postcss": "^8.4.7", "postcss-cli": "^9.1.0", "postcss-preset-env": "^7.4.1", "prettier": "^2.4.1", "rimraf": "^3.0.2", "sass": "^1.44.0" }, Thank youf for wonderfull work.