sander/criticalCss (scullyio#954)

* feat(lib): plugin to inlice critical css * WIP criticalCSS * feat(lib): add plugin to inline critical CSS * docs(lib): fix settings for criticalCss * fix(lib): add missing dep to package.json * fix(lib): add tsconfig optiosn * add key for package.lock * add nrwl/cli * add nrwl/cli Co-authored-by: jorgeucano <[email protected]>
burke-software · Sep 24, 2020 · 4367831 · 4367831
1 parent 43c52a2
commit 4367831
Show file tree

Hide file tree

Showing 27 changed files with 1,454 additions and 422 deletions.
diff --git a/.github/workflows/cache.yml b/.github/workflows/cache.yml
@@ -16,11 +16,11 @@ jobs:
         with:
           # npm cache files are stored in `~/node_modules` on Linux/macOS
           path: ~/node_modules
-          key: ${{ runner.os }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}
-            ${{ runner.os }}
-            ${{ runner.os }}
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
 
       - name: Install Dependencies
         run: npm install
@@ -32,8 +32,8 @@ jobs:
         with:
           # npm cache files are stored in `~/node_modules` on Linux/macOS
           path: ~/node_modules
-          key: ${{ runner.os }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-            ${{ runner.os }}
-            ${{ runner.os }}
-            ${{ runner.os }}
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -15,11 +15,12 @@ jobs:
       - uses: actions/cache@v2
         with:
           path: node_modules
-          key: ${{ runner.os }}
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
+      - run: npm i
       - run: npm run symlinks
       - run: npx nx run-many --target=build --all --prod
       - run: node ./dist/libs/scully/scully --tds --project=sample-blog

diff --git a/apps/scully-docs/src/app/components/header/component/nav-header/nav-header.component.ts b/apps/scully-docs/src/app/components/header/component/nav-header/nav-header.component.ts
@@ -5,12 +5,12 @@ import { Component, ViewEncapsulation, Input, HostBinding } from '@angular/core'
   encapsulation: ViewEncapsulation.None,
   template: `
     <ul>
-      <li class="logo"><a routerLink="/"></a></li>
+      <li class="logo"><a aria-label="go to home page" routerLink="/"></a></li>
       <li class="text">#BlackLivesMatter</li>
       <li class="feature"><a routerLink="/docs/learn/getting-started/overview">get started</a></li>
       <li><a routerLink="/docs/learn/overview">docs</a></li>
       <li><a routerLink="/docs/community/showcase">showcase</a></li>
-      <li class="icon github"><a href="https://github.com/scullyio/scully"></a></li>
+      <li class="icon github"><a aria-label="to our github page" href="https://github.com/scullyio/scully"></a></li>
     </ul>
   `,
 })

diff --git a/apps/scully-docs/src/index.html b/apps/scully-docs/src/index.html
@@ -6,6 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
   </head>
   <body>
     <app-root></app-root>

diff --git a/docs/learn/overview.md b/docs/learn/overview.md
@@ -16,7 +16,7 @@ Also, we have an easy to use and extend plugins system that will allow you to ma
 
 All about Scully in one video:
 <a class="docs-icon-button" href="https://thinkster.io/tutorials/scully-webinar-building-the-fastest-angular-apps-possible">
-<img src="/assets/img/icons/play-solid.svg" />
+<img src="/assets/img/icons/play-solid.svg" alt="play video"/>
 Building the Fastest Angular Apps Possible
 </a>
 

diff --git a/libs/plugins/scully-plugin-critical-css/.eslintrc b/libs/plugins/scully-plugin-critical-css/.eslintrc
@@ -0,0 +1 @@
+{ "extends": "../../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }
diff --git a/libs/plugins/scully-plugin-critical-css/README.md b/libs/plugins/scully-plugin-critical-css/README.md
@@ -0,0 +1,3 @@
+# scully-plugin-critical-css
+
+This plugins uses the [critcal](https://github.com/addyosmani/critical#critical) script to inline and defer unneeded CSS
diff --git a/libs/plugins/scully-plugin-critical-css/jest.config.js b/libs/plugins/scully-plugin-critical-css/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  name: 'plugins-scully-plugin-critical-css',
+  preset: '../../../jest.config.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  coverageDirectory: '../../../coverage/libs/plugins/scully-plugin-critical-css',
+};
diff --git a/libs/plugins/scully-plugin-critical-css/package.json b/libs/plugins/scully-plugin-critical-css/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@scullyio/scully-plugin-critical-css",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@scullyio/scully": "*",
+    "jsdom": "*"
+  },
+  "repository": {
+    "type": "GIT",
+    "url": "https://github.com/scullyio/scully/tree/main/libs/plugins/scully-plugin-critical-css"
+  },
+  "keywords": [
+    "angular",
+    "scully",
+    "seo",
+    "scully-plugin",
+    "plugin"
+  ],
+  "dependencies": {
+    "critical": "^2.0.4"
+  }
+}
diff --git a/libs/plugins/scully-plugin-critical-css/src/index.ts b/libs/plugins/scully-plugin-critical-css/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/plugins-scully-plugin-critical-css';
diff --git a/libs/plugins/scully-plugin-critical-css/src/lib/plugins-scully-plugin-critical-css.spec.ts b/libs/plugins/scully-plugin-critical-css/src/lib/plugins-scully-plugin-critical-css.spec.ts
@@ -0,0 +1,7 @@
+import { pluginsScullyPluginCriticalCss } from './plugins-scully-plugin-critical-css';
+
+describe('pluginsScullyPluginCriticalCss', () => {
+  it('should work', () => {
+    expect(pluginsScullyPluginCriticalCss()).toEqual('plugins-scully-plugin-critical-css');
+  });
+});
diff --git a/libs/plugins/scully-plugin-critical-css/src/lib/plugins-scully-plugin-critical-css.ts b/libs/plugins/scully-plugin-critical-css/src/lib/plugins-scully-plugin-critical-css.ts
@@ -0,0 +1,36 @@
+import { HandledRoute, logWarn, registerPlugin, scullyConfig, createFolderFor } from '@scullyio/scully';
+import * as critical from 'critical';
+import { join } from 'path';
+
+export const criticalCSS = 'criticalCss';
+
+registerPlugin('render', criticalCSS, async (incomingHtml: string, route: HandledRoute) => {
+  try {
+    const base = join(scullyConfig.outDir, route.route);
+    const file = join(base, '/pagestyle.css');
+    const assetPaths = [scullyConfig.outDir, join(scullyConfig.outDir, '/assets')];
+    createFolderFor(file);
+    const { html } = await critical.generate({
+      html: incomingHtml,
+      base,
+      css: join(scullyConfig.outDir, '/styles.css'),
+      assetPaths,
+      // target: {
+      //   css: file,
+      // },
+      rebase: () => undefined,
+      // extract: true,
+      inlineImages: true,
+      height: 1400,
+      width: 1800,
+      inline: {
+        preload: true,
+      },
+    });
+    return html;
+    // console.log(css);
+  } catch (e) {
+    logWarn(`route: "${route.route}" could not inline CSS`, e);
+  }
+  return incomingHtml;
+});
diff --git a/libs/plugins/scully-plugin-critical-css/tsconfig.json b/libs/plugins/scully-plugin-critical-css/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/plugins/scully-plugin-critical-css/tsconfig.lib.json b/libs/plugins/scully-plugin-critical-css/tsconfig.lib.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "rootDir": "./src",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}
diff --git a/libs/plugins/scully-plugin-critical-css/tsconfig.spec.json b/libs/plugins/scully-plugin-critical-css/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.spec.js", "**/*.spec.jsx", "**/*.d.ts"]
+}
diff --git a/libs/plugins/scully-plugin-remove-scripts/README.md b/libs/plugins/scully-plugin-remove-scripts/README.md
@@ -18,7 +18,7 @@ export interface RemoveScriptsConfig {
 You can use this plugin in scully by adding something like this to your `scully.<projectname>.config.ts`
 
 ```typescript
-import { removeScripts, RemoveScriptsConfig } from '@scullyio/plugins/scully-plugin-remove-scripts';
+import { removeScripts, RemoveScriptsConfig } from '@scullyio/scully-plugin-remove-scripts';
 
 const defaultPostRenderers = [removeScripts, 'seoHrefOptimise'];
 setPluginConfig<RemoveScriptsConfig>(removeScripts, {

diff --git a/libs/plugins/scully-plugin-remove-scripts/package.json b/libs/plugins/scully-plugin-remove-scripts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@scullyio/plugins-scully-plugin-remove-scripts",
+  "name": "@scullyio/scully-plugin-remove-scripts",
   "version": "1.0.0",
   "peerDependencies": {
     "@scullyio/scully": "*",

diff --git a/libs/scully/src/index.ts b/libs/scully/src/index.ts
@@ -17,6 +17,7 @@ import { renderRoute } from './lib/renderPlugins/executePlugins';
 import { WriteToStorage } from './lib/systemPlugins/writeToFs.plugin';
 import { prod } from './lib/utils/cli-options';
 import './lib/utils/exitHandler';
+import { createFolderFor } from './lib/utils';
 export * from './lib/utils/log';
 export {
   configValidator,
@@ -36,6 +37,7 @@ export {
   setPluginConfig,
   getPluginConfig,
   findPlugin,
+  createFolderFor,
   /** WIP part, those might be remove again in near future. */
   staticServer,
   loadConfig,

diff --git a/nx.json b/nx.json
@@ -15,12 +15,7 @@
       "runner": "@nrwl/nx-cloud",
       "options": {
         "accessToken": "YzliMjIxNGUtZDFiYS00NWY4LWExNjItYTBiMTI3MjliMTYxfHJlYWQ=",
-        "cacheableOperations": [
-          "build",
-          "test",
-          "lint",
-          "e2e"
-        ],
+        "cacheableOperations": ["build", "test", "lint", "e2e"],
         "canTrackAnalytics": true,
         "showUsageWarnings": true
       }
@@ -34,9 +29,7 @@
       "tags": []
     },
     "scully-schematics": {
-      "tags": [
-        "schematics"
-      ]
+      "tags": ["schematics"]
     },
     "sample-blog": {
       "tags": []
@@ -70,6 +63,9 @@
     },
     "plugins-scully-plugin-remove-scripts": {
       "tags": []
+    },
+    "plugins-scully-plugin-critical-css": {
+      "tags": []
     }
   },
   "affected": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{ "extends": "../../../.eslintrc", "rules": {}, "ignorePatterns": ["!*/"] }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# scully-plugin-critical-css

		This plugins uses the [critcal](https://github.com/addyosmani/critical#critical) script to inline and defer unneeded CSS
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from './lib/plugins-scully-plugin-critical-css';