Show estimated size of generated classes

Author: thecrypticace

packages/tailwindcss-language-server/tests/code-lens/source-inline.test.ts

@@ -37,3 +37,59 @@ defineTest({
     ])
   },
 })
+
+defineTest({
+  name: 'The user is warned when @source inline(…) generates a lerge amount of CSS',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({
+    client: await createClient({ root }),
+  }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'css',
+      text: css`
+        @import 'tailwindcss';
+        @source inline("{,dark:}{,{sm,md,lg,xl,2xl}:}{,{hover,focus,active}:}{flex,underline,bg-red-{50,{100..900.100},950}{,/{0..100}}}");
+      `,
+    })
+
+    let lenses = await document.codeLenses()
+
+    expect(lenses).toEqual([
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'Generates 14,784 classes',
+          command: '',
+        },
+      },
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'At least 3MB of CSS',
+          command: '',
+        },
+      },
+      {
+        range: {
+          start: { line: 1, character: 15 },
+          end: { line: 1, character: 129 },
+        },
+        command: {
+          title: 'This may slow down your bundler/browser',
+          command: '',
+        },
+      },
+    ])
+  },
+})

packages/tailwindcss-language-service/src/codeLensProvider.ts

@@ -4,6 +4,8 @@ import type { CodeLens } from 'vscode-languageserver'
 import braces from 'braces'
 import { findAll, indexToPosition } from './util/find'
 import { absoluteRange } from './util/absoluteRange'
+import { formatBytes } from './util/format-bytes'
+import { estimatedClassSize } from './util/estimated-class-size'
 
 export async function getCodeLens(state: State, doc: TextDocument): Promise<CodeLens[]> {
   if (!state.enabled) return []
@@ -38,13 +40,36 @@ async function sourceInlineCodeLens(state: State, doc: TextDocument): Promise<Co
       end: indexToPosition(text, match.indices.groups.glob[1]),
     })
 
+    let size = 0
+    for (let className of expanded) {
+      size += estimatedClassSize(className)
+    }
+
     lenses.push({
       range: slice,
       command: {
         title: `Generates ${countFormatter.format(expanded.size)} classes`,
         command: '',
       },
     })
+
+    if (size >= 1_000_000) {
+      lenses.push({
+        range: slice,
+        command: {
+          title: `At least ${formatBytes(size)} of CSS`,
+          command: '',
+        },
+      })
+
+      lenses.push({
+        range: slice,
+        command: {
+          title: `This may slow down your bundler/browser`,
+          command: '',
+        },
+      })
+    }
   }
 
   return lenses

packages/tailwindcss-language-service/src/util/estimated-class-size.ts

@@ -0,0 +1,35 @@
+import { segment } from './segment'
+
+/**
+ * Calculates the approximate size of a generated class
+ *
+ * This is meant to be a lower bound, as the actual size of a class can vary
+ * depending on the actual CSS properties and values, configured theme, etc…
+ */
+export function estimatedClassSize(className: string) {
+  let size = 0
+
+  // We estimate the size using the following structure which gives a reasonable
+  // lower bound on the size of the generated CSS:
+  //
+  // .class-name {
+  //   &:variant-1 {
+  //     &:variant-2 {
+  //       …
+  //     }
+  //   }
+  // }
+
+  // Class name
+  size += 1 + className.length + 3
+  size += 2
+
+  // Variants + nesting
+  for (let [depth, variantName] of segment(className, ':').entries()) {
+    size += (depth + 1) * 2 + 2 + variantName.length + 3
+    size += (depth + 1) * 2 + 2
+  }
+
+  // ~1.95x is a rough growth factor due to the actual properties being present
+  return size * 1.95
+}

packages/tailwindcss-language-service/src/util/format-bytes.ts

@@ -0,0 +1,11 @@
+const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte']
+
+export function formatBytes(n: number) {
+  let i = n == 0 ? 0 : Math.floor(Math.log(n) / Math.log(1000))
+  return new Intl.NumberFormat('en', {
+    notation: 'compact',
+    style: 'unit',
+    unit: UNITS[i],
+    unitDisplay: 'narrow',
+  }).format(n / 1000 ** i)
+}