From 91f08f3b130c2701de02b7b0ba1fee516fc21468 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 1 Aug 2021 02:18:45 +0800 Subject: [PATCH] feat: ssg critical css --- README.md | 3 +++ package.json | 3 ++- pnpm-lock.yaml | 57 ++++++++++++++++++++++++++++++++++++++--- src/styles/markdown.css | 6 ++--- 4 files changed, 61 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 0e41292..077487f 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ Mocking up web app with Vitesse(speed)
- 🖨 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 Vitesse(speed)
- [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 diff --git a/package.json b/package.json index 223d0e0..1e7da7f 100644 --- a/package.json +++ b/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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e7e73f5..dfda6e3 100644 --- a/pnpm-lock.yaml +++ b/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: - resolution: {integrity: sha512-CoG6uHfjZ8ALJan9IafutwxLxrT8fSRNQ5aI2hsv5D/dcMY37fetvt2RA4+0FUkVAhvOhbDNAL74ZSo7JrjLOg==} + /vite-ssg/0.14.4_4d4bc60af3721dd3f198b31f3d098737: + 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 diff --git a/src/styles/markdown.css b/src/styles/markdown.css index 32cb8f5..86c0543 100644 --- a/src/styles/markdown.css +++ b/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;