Complementos AMP CSS

Visión general

El propósito del complemento AMP CSS para Scully es tomar todas las etiquetas style de las páginas renderizadas para combinarlas en una sola etiqueta style en el head. Este es un requerimiento que propone Google para las páginas AMP. En este link se habla sobre algunas partes sobre este requerimiento. Scully hace esto relativamente fácil porque después del renderizado de cada página, un complemento puede ser ejecutado para hacer algo a dicha página; en este caso combinar todos los styles dentro de un sólo tag style.

Características

✅ Combina el contenido de todos los style dentro de un sólo tag style
✅ Coloca todos los estilos enun documento dentro del tag head.
✅ Elimina todos los tags style extras

Instalación

NPM

npm install scully-plugin-amp-css --save-dev

Yarn

yarn add scully-plugin-amp-css --dev

Uso

Para usar el complemento, sólo necesitas agregar el paquete dentro del archivo config.ts del proyecto Scully, por ejemplo scully.your-project-name.config.ts. Luego de agregar el complemento, debe agregarse en el arreglo defaultPostRenderers en las rutas dónde debería ejecutarse. En la mayoría de los cosas (no en todos), esto debería ocurrir en todas las rutas pero puedes agregarlo sólo en equellas rutas dónde se desea.

// scully.your-project-name.config.ts
require('scully-plugin-amp-css');

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'your-project-name',
  outDir: './dist/static',
  routes: {},
  defaultPostRenderers: ['combineStylesAmpPlugin'],
};

Eso es todo lo que se necesita para que el complemento se incluya y se ejecute en las páginas de su aplicación.

Asegúrese de ejecutar incluir este complemento antes que otros complementos CSS, como el complemento CSS critico.