feat: ssg critical css

README.md

@@ -38,6 +38,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 🖨 Server-side generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
 
+- 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters)
+
 - 🦾 TypeScript, of course
 
 - ☁️ Deploy on Netlify, zero-config
@@ -83,6 +85,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 - [TypeScript](https://www.typescriptlang.org/)
 - [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
 - [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
+  - [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS
 - [Netlify](https://www.netlify.com/) - zero-config deployment
 - [VS Code Extensions](./.vscode/extensions.json)
   - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically

package.json

@@ -26,6 +26,7 @@
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.1.5",
     "@vue/server-renderer": "^3.1.5",
+    "critters": "^0.0.10",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "https-localhost": "^4.6.5",
@@ -41,7 +42,7 @@
     "vite-plugin-pwa": "^0.9.3",
     "vite-plugin-vue-layouts": "^0.3.1",
     "vite-plugin-windicss": "^1.2.7",
-    "vite-ssg": "^0.13.0",
+    "vite-ssg": "^0.14.4",
     "vue-tsc": "^0.2.2"
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,7 @@ specifiers:
   '@vue/server-renderer': ^3.1.5
   '@vueuse/core': ^5.2.0
   '@vueuse/head': ^0.6.0
+  critters: ^0.0.10
   cross-env: ^7.0.3
   eslint: ^7.32.0
   https-localhost: ^4.6.5
@@ -28,7 +29,7 @@ specifiers:
   vite-plugin-pwa: ^0.9.3
   vite-plugin-vue-layouts: ^0.3.1
   vite-plugin-windicss: ^1.2.7
-  vite-ssg: ^0.13.0
+  vite-ssg: ^0.14.4
   vue: ^3.1.5
   vue-demi: ^0.11.2
   vue-global-api: ^0.4.1
@@ -56,6 +57,7 @@ devDependencies:
   '@vitejs/plugin-vue': 1.3.0_@vue+compiler-sfc@3.1.5
   '@vue/compiler-sfc': 3.1.5_vue@3.1.5
   '@vue/server-renderer': 3.1.5_vue@3.1.5
+  critters: 0.0.10
   cross-env: 7.0.3
   eslint: 7.32.0
   https-localhost: 4.6.5
@@ -71,7 +73,7 @@ devDependencies:
   vite-plugin-pwa: 0.9.3_vite@2.4.4
   vite-plugin-vue-layouts: 0.3.1_vite@2.4.4
   vite-plugin-windicss: 1.2.7_vite@2.4.4
-  vite-ssg: 0.13.0_b0c93b2db9b0c7e1ffb2e29b00915306
+  vite-ssg: 0.14.4_4d4bc60af3721dd3f198b31f3d098737
   vue-tsc: 0.2.2_typescript@4.3.5
 
 packages:
@@ -2179,6 +2181,12 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /atob/2.1.2:
+    resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
+    engines: {node: '>= 4.5.0'}
+    hasBin: true
+    dev: true
+
   /available-typed-arrays/1.0.4:
     resolution: {integrity: sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==}
     engines: {node: '>= 0.4'}
@@ -2515,6 +2523,16 @@ packages:
       vary: 1.1.2
     dev: true
 
+  /critters/0.0.10:
+    resolution: {integrity: sha512-p5VKhP1803+f+0Jq5P03w1SbiHtpAKm+1EpJHkiPxQPq0Vu9QLZHviJ02GRrWi0dlcJqrmzMWInbwp4d22RsGw==}
+    dependencies:
+      chalk: 4.1.2
+      css: 3.0.0
+      parse5: 6.0.1
+      parse5-htmlparser2-tree-adapter: 6.0.1
+      pretty-bytes: 5.6.0
+    dev: true
+
   /cross-env/7.0.3:
     resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
@@ -2537,6 +2555,14 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /css/3.0.0:
+    resolution: {integrity: sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==}
+    dependencies:
+      inherits: 2.0.4
+      source-map: 0.6.1
+      source-map-resolve: 0.6.0
+    dev: true
+
   /cssesc/3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
@@ -2598,6 +2624,11 @@ packages:
     resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
     dev: true
 
+  /decode-uri-component/0.2.0:
+    resolution: {integrity: sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=}
+    engines: {node: '>=0.10'}
+    dev: true
+
   /deep-equal/2.0.5:
     resolution: {integrity: sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==}
     dependencies:
@@ -4496,6 +4527,12 @@ packages:
       lines-and-columns: 1.1.6
     dev: true
 
+  /parse5-htmlparser2-tree-adapter/6.0.1:
+    resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
+    dependencies:
+      parse5: 6.0.1
+    dev: true
+
   /parse5/6.0.1:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
@@ -5197,6 +5234,13 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /source-map-resolve/0.6.0:
+    resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
+    dependencies:
+      atob: 2.1.2
+      decode-uri-component: 0.2.0
+    dev: true
+
   /source-map-support/0.5.19:
     resolution: {integrity: sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==}
     dependencies:
@@ -5764,22 +5808,27 @@ packages:
       - supports-color
     dev: true
 
-  /vite-ssg/0.13.0_b0c93b2db9b0c7e1ffb2e29b00915306:
+  /vite-ssg/0.14.4_4d4bc60af3721dd3f198b31f3d098737:
-    resolution: {integrity: sha512-CoG6uHfjZ8ALJan9IafutwxLxrT8fSRNQ5aI2hsv5D/dcMY37fetvt2RA4+0FUkVAhvOhbDNAL74ZSo7JrjLOg==}
+    resolution: {integrity: sha512-Y2Q8Mx1FBqNcuAzRc9fx7N43uIYpkvrt0GssMa3hFVnXKZ7Zi1A0fvgvShwgH7WjZCwucZQFA5v40IvCaz1bOg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     peerDependencies:
       '@vue/compiler-sfc': ^3.0.4
       '@vue/server-renderer': ^3.0.4
       '@vueuse/head': ^0.5.1
+      critters: ^0.0.10
       vite: ^2.0.0
       vue: ^3.0.4
       vue-router: ^4.0.1
+    peerDependenciesMeta:
+      critters:
+        optional: true
     dependencies:
       '@vue/compiler-sfc': 3.1.5_vue@3.1.5
       '@vue/server-renderer': 3.1.5_vue@3.1.5
       '@vueuse/head': 0.6.0_vue@3.1.5
       chalk: 4.1.2
+      critters: 0.0.10
       fs-extra: 10.0.0
       html-minifier: 4.0.0
       jsdom: 16.6.0

src/styles/markdown.css

@@ -1,11 +1,11 @@
 /* https://github.com/antfu/prism-theme-vars */
 @import 'prism-theme-vars/base.css';
 
-:root {
+.prose {
   --prism-font-family: 'Input Mono', monospace;
 }
 
-html:not(.dark) {
+html:not(.dark) .prose {
   --prism-foreground: #393a34;
   --prism-background: #fbfbfb;
   --prism-comment: #a0ada0;
@@ -27,7 +27,7 @@ html:not(.dark) {
   --prism-json-property: #698c96;
 }
 
-html.dark {
+html.dark .prose {
   --prism-foreground: #d4cfbf;
   --prism-background: #151515;
   --prism-comment: #758575;