perf(docs): lower bundle size by using shiki transformer

shiki by default uses inline styles for the codeblocks but we can convert it into common classes to lower its html output size hence lowering the bundle size too https://shiki.style/packages/transformers#transformerstyletoclass

Author: siduck

docs/.vitepress/config.ts

@@ -3,27 +3,32 @@ import { lucideIcons } from '../../vite/lucideIcons'
 import path from 'path'
 import { meta } from './meta'
 import { getComponentItems } from './utils'
-
+import { transformerStyleToClass } from '@shikijs/transformers'
 import componentPreview from './plugins/componentPreview'
+import fs from 'fs'
+
+// needed for transforming shiki inline styles to classes
+const toClass = transformerStyleToClass({
+  classPrefix: 's_',
+})
 
 export default defineConfig({
   srcDir: 'content',
   lastUpdated: true,
   title: meta.name,
   description: meta.description,
   titleTemplate: meta.name,
-
   markdown: {
     theme: {
-      dark: "tokyo-night",
-      light: "github-light",
+      dark: 'tokyo-night',
+      light: 'github-light',
     },
+    codeTransformers: [toClass],
     config(md) {
       md.use(componentPreview)
     },
   },
   cleanUrls: true,
-
   head: [
     // newsreader font
     ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
@@ -38,7 +43,6 @@ export default defineConfig({
         rel: 'stylesheet',
       },
     ],
-
     // set data-theme attribute since vitepress uses just the dark class.
     [
       'script',
@@ -50,7 +54,6 @@ export default defineConfig({
       localStorage.theme = theme
     })()`,
     ],
-
     // ===== Open Graph =====
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:site_name', content: meta.name }],
@@ -67,7 +70,6 @@ export default defineConfig({
     ['meta', { property: 'og:image:width', content: '1200' }],
     ['meta', { property: 'og:image:height', content: '630' }],
     ['meta', { property: 'og:image:alt', content: meta.description }],
-
     // ===== Twitter =====
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'twitter:title', content: meta.name }],
@@ -80,7 +82,6 @@ export default defineConfig({
       },
     ],
   ],
-
   themeConfig: {
     componentList: getComponentItems(),
     outline: [2, 3],
@@ -95,15 +96,19 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/frappe/frappe-ui' },
     ],
   },
-
   vite: {
     plugins: [lucideIcons()],
     resolve: {
       alias: {
         '@/components': path.resolve(__dirname, '../components/'),
         'frappe-ui': path.resolve(__dirname, '../../src'),
-        'dayjs/esm': 'dayjs'
+        'dayjs/esm': 'dayjs',
       },
     },
   },
+  buildEnd: async () => {
+    const str = '/* Auto-generated on build-time */ \n\n ' + toClass.getCSS()
+    const cssPath = path.resolve(__dirname, '../css/shiki.css')
+    await fs.promises.writeFile(cssPath, str, 'utf-8')
+  },
 })

docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import type { Theme } from 'vitepress'
 import "../../../src/fonts/Inter/inter.css"
 import "../../css/style.css"
+import "../../css/shiki.css"
 import Demo from '../../components/Docs/Demo.vue'
 import Layout from '../../components/Layout.vue'
 

docs/css/shiki.css

@@ -0,0 +1,181 @@
+/* Auto-generated on build-time */
+
+.s_edvzsf {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #d73a49;
+}
+.s_13ahmt {
+  --shiki-dark: #9abdf5;
+  --shiki-light: #24292e;
+}
+.s_4q1z3w {
+  --shiki-dark: #0db9d7;
+  --shiki-light: #24292e;
+}
+.s_w1p9wo {
+  --shiki-dark: #89ddff;
+  --shiki-light: #032f62;
+}
+.s_2575z4 {
+  --shiki-dark: #9ece6a;
+  --shiki-light: #032f62;
+}
+.s_50ecpt {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #d73a49;
+}
+.s_euu481 {
+  --shiki-dark: #c0caf5;
+  --shiki-light: #6f42c1;
+}
+.s_1th9sy {
+  --shiki-dark: #51597d;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #6a737d;
+  --shiki-light-font-style: inherit;
+}
+.s_bsv8nz {
+  --shiki-dark: #73daca;
+  --shiki-light: #e36209;
+}
+.s_2ekfrt {
+  --shiki-dark: #89ddff;
+  --shiki-light: #d73a49;
+}
+.s_i592pt {
+  --shiki-dark: #0db9d7;
+  --shiki-light: #005cc5;
+}
+.s_indoxt {
+  --shiki-dark: #7aa2f7;
+  --shiki-light: #6f42c1;
+}
+.s_fsg3al {
+  --shiki-dark: #e0af68;
+  --shiki-light: #e36209;
+}
+.s_2cy0ei {
+  --shiki-dark: #a9b1d6;
+  --shiki-light: #24292e;
+  --shiki-dark-bg: #1a1b26;
+  --shiki-light-bg: #fff;
+}
+.s_1zd9e2 {
+  --shiki-dark: #ba3c97;
+  --shiki-light: #24292e;
+}
+.s_1uuh8p {
+  --shiki-dark: #f7768e;
+  --shiki-light: #22863a;
+}
+.s_1i4ay4 {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #6f42c1;
+}
+.s_1jjt6x {
+  --shiki-dark: #89ddff;
+  --shiki-light: #24292e;
+}
+.s_wac0bt {
+  --shiki-dark: #de5971;
+  --shiki-light: #22863a;
+}
+.s_r4oegk {
+  --shiki-dark: #73daca;
+  --shiki-light: #24292e;
+}
+.s_11933w {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #24292e;
+}
+.s_22m8k2 {
+  --shiki-dark: #c0caf5;
+  --shiki-light: #24292e;
+}
+.s_6am9cx {
+  --shiki-dark: #9aa5ce;
+  --shiki-light: #24292e;
+}
+.s_252irl {
+  --shiki-dark: #9d7cd8;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_295sjd {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #005cc5;
+}
+.s_40mev6 {
+  --shiki-dark: #ff9e64;
+  --shiki-light: #005cc5;
+}
+.s_29n2kq {
+  --shiki-dark: #bb9af7;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_20l85h {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #032f62;
+}
+.s_28rvie {
+  --shiki-dark: #ff5370;
+  --shiki-dark-font-style: inherit;
+  --shiki-light: #b31d28;
+  --shiki-light-font-style: italic;
+}
+.s_y1rh3e {
+  --shiki-dark: #646e9c;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #d73a49;
+  --shiki-light-font-style: inherit;
+}
+.s_21q2v7 {
+  --shiki-dark: #89ddff;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #032f62;
+  --shiki-light-font-style: inherit;
+}
+.s_1cpno3 {
+  --shiki-dark: #5a638c;
+  --shiki-dark-font-style: italic;
+  --shiki-light: #24292e;
+  --shiki-light-font-style: inherit;
+}
+.s_12xt1b {
+  --shiki-dark: #41a6b5;
+  --shiki-light: #24292e;
+}
+.s_1vt12c {
+  --shiki-dark: #7dcfff;
+  --shiki-light: #005cc5;
+}
+.s_fjrnv8 {
+  --shiki-dark: #f7768e;
+  --shiki-dark-font-weight: bold;
+  --shiki-light: #d73a49;
+  --shiki-light-font-weight: inherit;
+}
+.s_2a1oer {
+  --shiki-dark: #bb9af7;
+  --shiki-light: #24292e;
+}
+.s_kq5psm {
+  --shiki-dark: #a9b1d6;
+  --shiki-light: #24292e;
+}
+.s_118ozv {
+  --shiki-dark: #f7768e;
+  --shiki-light: #005cc5;
+}
+.s_2d41qv {
+  --shiki-dark: #e0af68;
+  --shiki-light: #005cc5;
+}
+.s_g1fsda {
+  --shiki-dark: #73daca;
+  --shiki-light: #6f42c1;
+}
+