0

Nextjs製のブログサービスをビルドした際、AMP validation でタイトルのエラーが発生しています。
対象画面のhtmlソースを見ると、確かに<head>内に以下の記載がありました。

<style amp-keyframes>
        @keyframes spin {
            to {
                transform: rotate(1turn)
            }
        }

        @keyframes ping {

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

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

しかし、上記のコードは埋め込んでいません。
依存ライブラリがビルド時に自動でマージしていると予想しています。
どのライブラリが影響しているかわかる方いらっしゃればご教示いただきたく。

package.jsonの一部は以下です。

"devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@hookform/resolvers": "1.3.0 because 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/styles": "^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-renderer": "^17.0.1",
    "@types/rss": "^0.0.28",
    "@types/styled-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-renderer": "^17.0.1",
    "rss": "^1.2.2",
    "serverless": "^2.23.0",
    "styled-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"
  }

1 件の回答 1

1

自己解決しました。
実装ミスでした。
$ROOT/pages/_document.tsxでビルドしたインラインCSSを読み込んでおり、その中にamp系CSSが含まれていた為でした。
以下対象コードです。


# [...]

// 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}`,
                        }}
                    />,

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。