{"id":23490376,"url":"https://github.com/pjlamb12/scully-plugin-amp-css","last_synced_at":"2026-05-17T17:40:34.157Z","repository":{"id":54164104,"uuid":"317640875","full_name":"pjlamb12/scully-plugin-amp-css","owner":"pjlamb12","description":"Scully plugin that combines all the contents of style tags into a single style tag, to match AMP convention","archived":false,"fork":false,"pushed_at":"2021-03-06T07:31:52.000Z","size":2211,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T17:57:58.650Z","etag":null,"topics":["amp","angular","scully"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pjlamb12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["pjlamb12"]}},"created_at":"2020-12-01T19:05:27.000Z","updated_at":"2021-03-06T07:42:31.000Z","dependencies_parsed_at":"2022-08-13T08:01:10.196Z","dependency_job_id":null,"html_url":"https://github.com/pjlamb12/scully-plugin-amp-css","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fscully-plugin-amp-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fscully-plugin-amp-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fscully-plugin-amp-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjlamb12%2Fscully-plugin-amp-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pjlamb12","download_url":"https://codeload.github.com/pjlamb12/scully-plugin-amp-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248933350,"owners_count":21185460,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amp","angular","scully"],"created_at":"2024-12-25T00:25:42.946Z","updated_at":"2026-05-17T17:40:29.099Z","avatar_url":"https://github.com/pjlamb12.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pjlamb12"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg width=\"20%\" height=\"20%\" src=\"https://raw.githubusercontent.com/pjlamb12/scully-plugin-amp-css/main/logo.svg\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=flat-square)]()\n[![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)]()\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)\n\n# Scully AMP CSS Plugin\n\nThe purpose of the Scully AMP CSS plugin is to take all `style` tags from rendered pages and combine them into a single style tag located in the `head` tag of a given page. This is a requirement for AMP pages given by Google. [This talk here](https://www.loom.com/share/35330a858cd741ba92e8be0c0496ffbb) talks in some part about this requirement. Scully makes this relatively easy because after each page is rendered, a plugin can be run to do something to that page; in this case to combine all the styles into a single `style` tag.\n\n## Features\n\n- ✅ Combines the contents of all `style` tags into a single `style` tag\n- ✅ Puts the combined styles into the document's `head` tag\n- ✅ Removes all the extra `style` tags\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [FAQ](#faq)\n\n## Installation\n\n### NPM\n\n`npm install scully-plugin-amp-css --save-dev`\n\n### Yarn\n\n`yarn add scully-plugin-amp-css --dev`\n\n## Usage\n\nTo use this plugin, you need to just require the package inside the Scully `config.ts` for your project, i.e. `scully.your-project-name.config.ts`. After requiring the plugin, add it to the `defaultPostRenderers` array for the desired routes that the plugin should be run on. In most (if not all cases), this would be on all routes, but you need to add it to those routes for it to work.\n\n```ts\n// scully.your-project-name.config.ts\nrequire('scully-plugin-amp-css');\n\nexport const config: ScullyConfig = {\n\tprojectRoot: './src',\n\tprojectName: 'your-project-name',\n\toutDir: './dist/static',\n\troutes: {},\n\tdefaultPostRenderers: ['combineStylesAmpPlugin'],\n};\n```\n\nThat's all it takes for the plugin to be included and run on the pages in your app.\n\n**_Make sure to run include this plugin before other CSS plugins, like the [critical CSS plugin](https://www.npmjs.com/package/@scullyio/scully-plugin-critical-css)._**\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.prestonlamb.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2006222?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePreston Lamb\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/pjlamb12/scully-plugin-amp-css/commits?author=pjlamb12\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/pjlamb12/scully-plugin-amp-css/commits?author=pjlamb12\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://anglebrackets.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1952116?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDuncan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/pjlamb12/scully-plugin-amp-css/commits?author=DuncanFaulkner\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjlamb12%2Fscully-plugin-amp-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpjlamb12%2Fscully-plugin-amp-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjlamb12%2Fscully-plugin-amp-css/lists"}