Amp Validation for Nextjs error The parent tag of tag 'style [amp-keyframes] 'is 'head', but it can only be 'body'

AMP validation encountered a title error when building a Nextjs blogging service.
If you look at the html source on the target screen, you can see the following in <head>:

<styleamp-keyframes>
        @keyframespin{
            to {
                transform —rotate (1 turn)
            }
        }

        @keyframes ping {

            75%,
            to {
                transform —scale(2);
                opacity: 0
            }
        }

        @keyframes pulse {
            50% {
                opacity :5
            }
        }
    </style>

However, the above code is not embedded.
You expect the dependent libraries to merge automatically at build time.
If anyone knows which libraries are affected, please let me know.

Some of the package.json are as follows:

"devDependencies": {
    "@fullhuman/postcss-purgescss": "^4.0.3",
    "@hookform/resolvers": "1.3.0 cause of https://github.com/react-hook-form/resolvers/issues/100",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/style": "^4.11.3",
    "@serverless/aws-cloudfront": "^6.0.0",
    "@serverless/aws-lambda": "^3.0.3",
    "@serverless/aws-s3": "^4.2.0",
    "@serverless/domain": "^6.1.0",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/highlight.js": "^10.1.0",
    "@types/jest": "^26.0.20",
    "@types/marked": "^1.2.0",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-test-render": "^17.0.1",
    "@types/rss": "^0.0.28",
    "@types/style-components": "^5.1.7",
    "@types/yup": "^0.29.11",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "@zeit/next-css": "^1.0.1",
    "babel-plugin-inline-react-svg": "^1.1.2",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "cssnano": "^5.0.1",
    "date-fns": "^2.16.1",
    "dotenv": "^8.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "enzyme-to-json": "^3.6.1",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.0.1",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "gray-matter": "^4.0.2",
    "highlight.js": "^10.4.0",
    "jest": "^26.6.3",
    marked: "^1.2.5",
    "next": "^10.0.2",
    "next-pwa": "^5.2.14",
    "nextjs-progressbar": "^0.0.7",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.1.8",
    "postcss-cli": "^8.3.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.2.0",
    "pretty-quick": "^3.1.0",
    "raw-loader": "^4.0.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hook-form": "^6.15.1",
    "react-test-render": "^17.0.1",
    "rss": "^1.2.2",
    "serverless": "^2.23.0",
    "style-components": "^5.2.1",
    "stylelint": "^13.8.0",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-standard": "^20.0.0",
    "ts-jest": "^26.5.3",
    "typescript": "^4.3.2",
    "yup": "^0.32.8"
  }

next.js

2022-09-30 21:59

1 Answers

I solved myself.
It was a misimplementation.
$ROOT/pages/_document.tsx read the built inline CSS, which included the amp CSS.
Here are the target codes.


# ［...]

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import inlineCss from '!raw-loader!../../styles/output.css';

# ［...]

                    <style
                        key={`custom`}
                        dangerouslySetInnerHTML = {{
                            __html: `${inlineCss}',
                        }}
                    />,

2022-09-30 21:59

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656