@qualcomm-ui/mdx-vite 2.3.0 → 2.4.0

package/dist/index.js

@@ -5,7 +5,7 @@ import chalk4 from "chalk";
 import { watch } from "chokidar";
 import { glob as glob2 } from "glob";
 import { existsSync } from "node:fs";
-import { readFile, stat } from "node:fs/promises";
+import { readFile as readFile2, stat } from "node:fs/promises";
 import { basename, dirname, join as join2, relative, resolve as resolve2 } from "node:path";
 import {
   createHighlighter
@@ -14,6 +14,7 @@ import * as ts from "typescript";
 import {
   quiCustomDarkTheme as quiCustomDarkTheme2
 } from "@qualcomm-ui/mdx-common";
+import { dedent as dedent2 } from "@qualcomm-ui/utils/dedent";
 
 // src/docs-plugin/docs-plugin.ts
 import chalk3 from "chalk";
@@ -2240,6 +2241,55 @@ function removeCodeAnnotations(code) {
     return true;
   }).map(({ processed }) => processed).join("\n");
 }
+function extractPreviewFromHighlightedHtml(highlightedHtml) {
+  const preMatch = highlightedHtml.match(/<pre((?:\s+[\w-]+="[^"]*")*)>/);
+  const codeMatch = highlightedHtml.match(/<code([^>]*)>(.*?)<\/code>/s);
+  if (!preMatch || !codeMatch) {
+    return null;
+  }
+  const codeContent = codeMatch[2];
+  const parts = codeContent.split(/<span class="line/);
+  const previewLineParts = parts.slice(1).filter((part) => part.includes('data-preview-line="true"'));
+  const indents = previewLineParts.map((part) => {
+    const indentMatches = part.match(/<span class="indent">(.+?)<\/span>/g) || [];
+    let total = 0;
+    for (const match of indentMatches) {
+      const content = match.match(/<span class="indent">(.+?)<\/span>/);
+      if (content) {
+        total += content[1].length;
+      } else {
+        break;
+      }
+    }
+    return total;
+  });
+  const minIndent = Math.min(...indents.filter((n) => n > 0));
+  const previewLines = previewLineParts.map((part) => {
+    let processed = `<span class="line${part}`;
+    let remaining = minIndent;
+    while (remaining > 0 && processed.includes('<span class="indent">')) {
+      const before = processed;
+      processed = processed.replace(
+        /<span class="indent">(.+?)<\/span>/,
+        (match, spaces) => {
+          if (spaces.length <= remaining) {
+            remaining -= spaces.length;
+            return "";
+          } else {
+            const kept = spaces.substring(remaining);
+            remaining = 0;
+            return `<span class="indent">${kept}</span>`;
+          }
+        }
+      );
+      if (before === processed) {
+        break;
+      }
+    }
+    return processed;
+  });
+  return `<pre${preMatch[1]}><code${codeMatch[1]}>${previewLines.join("")}</code></pre>`;
+}
 
 // src/docs-plugin/shiki/shiki-transformer-code-attribute.ts
 function transformerCodeAttribute(opts = { attributeName: "data-code" }) {
@@ -2315,10 +2365,11 @@ function transformerPreviewBlock(options = {
     },
     name: "transformer-preview-block",
     pre(node) {
-      if (previewContent && options.attributeName != null) {
-        node.properties[options.attributeName] = previewContent;
+      const content = previewContent ? removeCodeAnnotations(previewContent) : null;
+      if (content && options.attributeName != null) {
+        node.properties[options.attributeName] = content;
       }
-      options.onComplete?.(previewContent || null);
+      options.onComplete?.(content || null);
     },
     preprocess(code) {
       previewContent = null;
@@ -2412,6 +2463,406 @@ function getRemarkPlugins() {
   ];
 }
 
+// src/docs-plugin/shiki/internal/shiki-transformer-tailwind.ts
+import { fromHtml as fromHtml2 } from "hast-util-from-html";
+import { toHtml } from "hast-util-to-html";
+import { readFile } from "node:fs/promises";
+import postcss from "postcss";
+import selectorParser from "postcss-selector-parser";
+import { compile } from "tailwindcss";
+import { visit as visit7 } from "unist-util-visit";
+import { camelCase } from "@qualcomm-ui/utils/change-case";
+async function loadStylesheetContent(id) {
+  const resolveId = id === "tailwindcss" ? "tailwindcss/index.css" : id;
+  let resolvedPath;
+  if (typeof createRequire !== "undefined") {
+    resolvedPath = createRequire(import.meta.url).resolve(resolveId);
+  } else {
+    const createRequire2 = await import("node:module").then(
+      (module) => module.createRequire
+    );
+    resolvedPath = createRequire2(import.meta.url).resolve(resolveId);
+  }
+  return readFile(resolvedPath, "utf-8");
+}
+async function createCompiler(styles) {
+  return compile(styles, {
+    loadStylesheet: async (id, base) => {
+      const content = await loadStylesheetContent(id);
+      return {
+        base,
+        content,
+        path: `virtual:${id}`
+      };
+    }
+  });
+}
+function extractCssVariables(css) {
+  const variables = /* @__PURE__ */ new Map();
+  const root = postcss.parse(css);
+  root.walkAtRules("layer", (atRule) => {
+    if (atRule.params !== "theme") {
+      return;
+    }
+    atRule.walkRules(":root, :host", (rule) => {
+      rule.walkDecls((decl) => {
+        if (decl.prop.startsWith("--")) {
+          variables.set(decl.prop, decl.value);
+        }
+      });
+    });
+  });
+  return variables;
+}
+function evaluateCalc(expression) {
+  const expr = expression.trim();
+  const withUnitFirst = expr.match(
+    /^([\d.]+)(rem|px|em|%|vh|vw)\s*([*/+-])\s*([\d.]+)$/
+  );
+  if (withUnitFirst) {
+    const [, num1, unit, op, num2] = withUnitFirst;
+    const result = evaluateOperation(parseFloat(num1), op, parseFloat(num2));
+    if (!Number.isFinite(result)) {
+      return null;
+    }
+    return formatNumber(result) + unit;
+  }
+  const withUnitSecond = expr.match(
+    /^([\d.]+)\s*([*/+-])\s*([\d.]+)(rem|px|em|%|vh|vw)$/
+  );
+  if (withUnitSecond) {
+    const [, num1, op, num2, unit] = withUnitSecond;
+    const result = evaluateOperation(parseFloat(num1), op, parseFloat(num2));
+    if (!Number.isFinite(result)) {
+      return null;
+    }
+    return formatNumber(result) + unit;
+  }
+  const unitless = expr.match(/^([\d.]+)\s*([*/+-])\s*([\d.]+)$/);
+  if (unitless) {
+    const [, num1, op, num2] = unitless;
+    const result = evaluateOperation(parseFloat(num1), op, parseFloat(num2));
+    if (!Number.isFinite(result)) {
+      return null;
+    }
+    return formatNumber(result);
+  }
+  return null;
+}
+function evaluateOperation(a, op, b) {
+  switch (op) {
+    case "*":
+      return a * b;
+    case "/":
+      return a / b;
+    case "+":
+      return a + b;
+    case "-":
+      return a - b;
+    default:
+      return NaN;
+  }
+}
+function formatNumber(num) {
+  const rounded = Math.round(num * 1e4) / 1e4;
+  return String(rounded);
+}
+function remToPx(value) {
+  return value.replace(/([\d.]+)rem/g, (_, num) => {
+    const px = parseFloat(num) * 16;
+    return `${formatNumber(px)}px`;
+  });
+}
+function findVarEnd(str, start) {
+  let depth = 0;
+  for (let i = start; i < str.length; i++) {
+    if (str[i] === "(") {
+      depth++;
+    } else if (str[i] === ")") {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+function parseVar(str, startIndex) {
+  const varStart = str.indexOf("var(", startIndex);
+  if (varStart === -1) {
+    return null;
+  }
+  const contentStart = varStart + 4;
+  const end = findVarEnd(str, varStart);
+  if (end === -1) {
+    return null;
+  }
+  const content = str.slice(contentStart, end);
+  let commaIndex = -1;
+  let depth = 0;
+  for (let i = 0; i < content.length; i++) {
+    if (content[i] === "(") {
+      depth++;
+    } else if (content[i] === ")") {
+      depth--;
+    } else if (content[i] === "," && depth === 0) {
+      commaIndex = i;
+      break;
+    }
+  }
+  if (commaIndex === -1) {
+    return {
+      end,
+      fallback: null,
+      varName: content.trim()
+    };
+  }
+  return {
+    end,
+    fallback: content.slice(commaIndex + 1).trim(),
+    varName: content.slice(0, commaIndex).trim()
+  };
+}
+function resolveCssValue(value, variables, depth = 0) {
+  if (depth > 10) {
+    return value;
+  }
+  let resolved = value;
+  let searchStart = 0;
+  while (true) {
+    const parsed = parseVar(resolved, searchStart);
+    if (!parsed) {
+      break;
+    }
+    const { end, fallback, varName } = parsed;
+    const varStart = resolved.indexOf("var(", searchStart);
+    let replacement;
+    const varValue = variables.get(varName);
+    if (varValue !== void 0) {
+      replacement = resolveCssValue(varValue, variables, depth + 1);
+    } else if (fallback) {
+      replacement = resolveCssValue(fallback, variables, depth + 1);
+    } else {
+      searchStart = end + 1;
+      continue;
+    }
+    resolved = resolved.slice(0, varStart) + replacement + resolved.slice(end + 1);
+  }
+  resolved = resolved.replace(
+    /calc\(([^)]+)\)/g,
+    (match, expression) => {
+      const evaluated = evaluateCalc(expression);
+      return evaluated ?? match;
+    }
+  );
+  resolved = remToPx(resolved);
+  return resolved;
+}
+function analyzeSelector(selector) {
+  let inlineable = true;
+  let className = null;
+  const processor = selectorParser((selectors) => {
+    if (selectors.nodes.length !== 1) {
+      inlineable = false;
+      return;
+    }
+    const selectorNode = selectors.nodes[0];
+    if (selectorNode.nodes.length !== 1) {
+      inlineable = false;
+      return;
+    }
+    const node = selectorNode.nodes[0];
+    if (node.type !== "class") {
+      inlineable = false;
+      return;
+    }
+    className = node.value;
+    selectorNode.walk((n) => {
+      if (n.type === "pseudo" || n.type === "combinator" || n.type === "nesting" || n.type === "attribute") {
+        inlineable = false;
+      }
+    });
+  });
+  processor.processSync(selector);
+  return { className, inlineable };
+}
+function parseCompiledCss(css) {
+  const rules = [];
+  const root = postcss.parse(css);
+  const variables = extractCssVariables(css);
+  function processRule(rule, insideAtRule) {
+    const { className, inlineable } = analyzeSelector(rule.selector);
+    if (!className) {
+      return;
+    }
+    let hasNestedAtRule = false;
+    rule.walkAtRules(() => {
+      hasNestedAtRule = true;
+    });
+    const declarations = [];
+    rule.each((node) => {
+      if (node.type === "decl") {
+        const resolvedValue = resolveCssValue(node.value, variables);
+        declarations.push(`${node.prop}: ${resolvedValue}`);
+      }
+    });
+    if (declarations.length === 0 && !hasNestedAtRule) {
+      return;
+    }
+    rules.push({
+      className,
+      declarations: declarations.join("; "),
+      inlineable: inlineable && !insideAtRule && !hasNestedAtRule,
+      originalRule: rule.toString()
+    });
+  }
+  root.walkAtRules("layer", (atRule) => {
+    atRule.walkRules((rule) => {
+      const parent = rule.parent;
+      const insideNestedAtRule = parent?.type === "atrule" && parent.name !== "layer";
+      processRule(rule, insideNestedAtRule);
+    });
+    atRule.walkAtRules((nested) => {
+      if (nested.name !== "layer") {
+        nested.walkRules((rule) => {
+          processRule(rule, true);
+        });
+      }
+    });
+  });
+  root.walkRules((rule) => {
+    if (rule.parent?.type === "root") {
+      processRule(rule, false);
+    }
+  });
+  return rules;
+}
+function compileClasses(classes, compiler) {
+  const compiledCss = compiler.build(classes);
+  const parsedRules = parseCompiledCss(compiledCss);
+  const inlineableStyles = /* @__PURE__ */ new Map();
+  const residualRules = /* @__PURE__ */ new Map();
+  for (const rule of parsedRules) {
+    if (rule.inlineable) {
+      inlineableStyles.set(rule.className, rule.declarations);
+    } else {
+      residualRules.set(rule.className, rule.originalRule);
+    }
+  }
+  const inlineStyles = [];
+  const remainingClasses = [];
+  for (const cls of classes) {
+    const style = inlineableStyles.get(cls);
+    if (style) {
+      inlineStyles.push(style);
+    } else {
+      remainingClasses.push(cls);
+    }
+  }
+  return { inlineStyles, remainingClasses, residualRules };
+}
+function cssToJsxObject(cssDeclarations) {
+  const props = cssDeclarations.flatMap((decl) => {
+    return decl.split(";").map((d) => d.trim()).filter(Boolean);
+  }).map((declaration) => {
+    const colonIndex = declaration.indexOf(":");
+    if (colonIndex === -1) {
+      return null;
+    }
+    const prop = declaration.slice(0, colonIndex).trim();
+    const value = declaration.slice(colonIndex + 1).trim();
+    const camelProp = camelCase(prop);
+    return `${camelProp}: '${value}'`;
+  }).filter(Boolean);
+  return `{ ${props.join(", ")} }`;
+}
+function computeLineReplacements(lineText, compiler, styleFormat = "html") {
+  const replacements = /* @__PURE__ */ new Map();
+  const allResidualRules = /* @__PURE__ */ new Map();
+  const classAttrPattern = /(className|class)=(["'`])([^"'`]*)\2/g;
+  let match;
+  while ((match = classAttrPattern.exec(lineText)) !== null) {
+    const fullMatch = match[0];
+    const attrName = match[1];
+    const quote = match[2];
+    const classValue = match[3];
+    const classes = classValue.split(/\s+/).filter(Boolean);
+    if (classes.length === 0) {
+      continue;
+    }
+    const { inlineStyles, remainingClasses, residualRules } = compileClasses(
+      classes,
+      compiler
+    );
+    for (const [className, rule] of residualRules) {
+      allResidualRules.set(className, rule);
+    }
+    if (inlineStyles.length === 0) {
+      continue;
+    }
+    let replacement;
+    if (styleFormat === "jsx") {
+      const jsxStyleObj = cssToJsxObject(inlineStyles);
+      replacement = `style={${jsxStyleObj}}`;
+    } else {
+      replacement = `style=${quote}${inlineStyles.join("; ")}${quote}`;
+    }
+    if (remainingClasses.length > 0) {
+      replacement += ` ${attrName}=${quote}${remainingClasses.join(" ")}${quote}`;
+    }
+    replacements.set(fullMatch, replacement);
+  }
+  return { replacements, residualRules: allResidualRules };
+}
+function transformSourceCode(source, compiler, styleFormat = "html") {
+  const allResidualRules = /* @__PURE__ */ new Map();
+  let classesDetected = false;
+  const { replacements, residualRules } = computeLineReplacements(
+    source,
+    compiler,
+    styleFormat
+  );
+  if (replacements.size > 0 || residualRules.size > 0) {
+    classesDetected = true;
+  }
+  for (const [cls, rule] of residualRules) {
+    allResidualRules.set(cls, rule);
+  }
+  let transformed = source;
+  for (const [original, replacement] of replacements) {
+    transformed = transformed.replaceAll(original, replacement);
+  }
+  return {
+    classesDetected,
+    residualRules: allResidualRules,
+    source: transformed
+  };
+}
+async function createShikiTailwindTransformer(options) {
+  const {
+    onClassesDetected,
+    onResidualCss,
+    styleFormat = "html",
+    styles
+  } = options;
+  const compiler = await createCompiler(styles);
+  return {
+    name: "shiki-transformer-tailwind-to-inline",
+    preprocess(code) {
+      const { classesDetected, residualRules, source } = transformSourceCode(
+        code,
+        compiler,
+        styleFormat
+      );
+      onClassesDetected?.(classesDetected);
+      if (onResidualCss && residualRules.size > 0) {
+        onResidualCss(residualRules);
+      }
+      return source;
+    }
+  };
+}
+
 // src/angular-demo-plugin/angular-demo-plugin.ts
 var VIRTUAL_MODULE_ID2 = "\0virtual:angular-demo-registry";
 var LOG_PREFIX = "[angular-demo]";
@@ -2434,7 +2885,8 @@ function angularDemoPlugin({
   theme = {
     dark: quiCustomDarkTheme2,
     light: "github-light-high-contrast"
-  }
+  },
+  transformTailwindStyles
 } = {}) {
   let watcher = null;
   let devServer = null;
@@ -2461,7 +2913,7 @@ function angularDemoPlugin({
       if (!highlighter) {
         try {
           highlighter = await createHighlighter({
-            langs: ["angular-ts", "angular-html"],
+            langs: ["angular-ts", "angular-html", "css"],
             themes: [theme.dark, theme.light]
           });
           logDev(`${chalk4.blue.bold(LOG_PREFIX)} Shiki highlighter initialized`);
@@ -2539,7 +2991,7 @@ function angularDemoPlugin({
       logDev(
         `${chalk4.blue.bold(LOG_PREFIX)} Processing Angular demo change: ${chalk4.cyan(file)}`
       );
-      const code = await readFile(file, "utf-8");
+      const code = await readFile2(file, "utf-8");
       const demoInfo = await parseAngularDemo(file, code);
       if (!demoInfo || !isAngularDemoEntrypoint(file)) {
         const affectedDemos = await scanDemosForFileImport(file);
@@ -2605,7 +3057,7 @@ function angularDemoPlugin({
     const demoFiles = await glob2(demoPattern);
     demoRegistry.clear();
     for (const filePath of demoFiles) {
-      const code = await readFile(filePath, "utf-8");
+      const code = await readFile2(filePath, "utf-8");
       const demoInfo = await parseAngularDemo(filePath, code);
       if (demoInfo) {
         demoRegistry.set(demoInfo.id, demoInfo);
@@ -2619,7 +3071,7 @@ function angularDemoPlugin({
         logDev(
           `${chalk4.blue.bold(LOG_PREFIX)} Reloading demo ${chalk4.cyan(demoId)} due to imported file change: ${chalk4.yellow(file)}`
         );
-        const code = await readFile(demo.filePath, "utf-8");
+        const code = await readFile2(demo.filePath, "utf-8");
         const updatedDemo = await parseAngularDemo(demo.filePath, code);
         if (updatedDemo) {
           delete demoDimensionsCache[updatedDemo.id];
@@ -2631,29 +3083,44 @@ function angularDemoPlugin({
     }
     return affectedDemos;
   }
-  async function highlightCode(code, language = "angular-ts") {
+  async function highlightCode(code, language = "angular-ts", options = {}) {
+    const { onClassesDetected, onResidualCss } = options;
     if (!highlighter) {
-      return { codeWithoutSnippets: code, highlightedCode: code };
+      return { full: code };
     }
     let previewCode = null;
-    let codeWithoutSnippets = "";
+    const tailwindTransformers = [];
+    if (transformTailwindStyles && onResidualCss) {
+      const transformer = await createShikiTailwindTransformer({
+        onClassesDetected: (detected) => {
+          onClassesDetected?.(detected);
+        },
+        onResidualCss,
+        styleFormat: "html",
+        styles: dedent2`
+          @layer theme, base, components, utilities;
+          @import "tailwindcss/theme.css" layer(theme);
+          @import "tailwindcss/utilities.css" layer(utilities);
+          @import "@qualcomm-ui/tailwind-plugin/qui-strict.css";
+        `
+      });
+      tailwindTransformers.push(transformer);
+    }
     try {
       const highlightedCode = highlighter.codeToHtml(code, {
         ...defaultShikiOptions,
         lang: language,
         transformers: [
           ...getShikiTransformers(),
+          ...tailwindTransformers,
           transformerPreviewBlock({
-            attributeName: null,
+            attributeName: "data-preview",
             onComplete: (extractedPreview) => {
-              previewCode = extractedPreview ? removeCodeAnnotations(extractedPreview) : null;
+              previewCode = extractedPreview;
             }
           }),
           transformerCodeAttribute({
-            attributeName: null,
-            onComplete: (formattedSource) => {
-              codeWithoutSnippets = formattedSource;
-            }
+            attributeName: "data-code"
           }),
           {
             enforce: "post",
@@ -2665,22 +3132,20 @@ function angularDemoPlugin({
         ]
       });
       return {
-        codeWithoutSnippets,
-        highlightedCode,
-        highlightedPreview: previewCode ? extractPreviewFromHighlightedHtml(highlightedCode) : null,
-        previewCodeWithoutSnippets: previewCode
+        full: highlightedCode,
+        preview: previewCode ? extractPreviewFromHighlightedHtml(highlightedCode) : null
       };
     } catch (error) {
       console.warn(
         `${chalk4.blue.bold(LOG_PREFIX)} Failed to highlight code with ${language} language:`,
         error
       );
-      return { codeWithoutSnippets: code, highlightedCode: code };
+      return { full: code };
     }
   }
   async function extractRelativeImports(filePath) {
     try {
-      let visit8 = function(node) {
+      let visit9 = function(node) {
         if (ts.isImportDeclaration(node)) {
           const moduleSpecifier = node.moduleSpecifier;
           if (ts.isStringLiteral(moduleSpecifier)) {
@@ -2699,10 +3164,10 @@ function angularDemoPlugin({
             }
           }
         }
-        ts.forEachChild(node, visit8);
+        ts.forEachChild(node, visit9);
       };
-      var visit7 = visit8;
-      const content = await readFile(filePath, "utf-8");
+      var visit8 = visit9;
+      const content = await readFile2(filePath, "utf-8");
       const sourceFile = ts.createSourceFile(
         filePath,
         content,
@@ -2711,7 +3176,7 @@ function angularDemoPlugin({
         ts.ScriptKind.TS
       );
       const relativeImports = [];
-      visit8(sourceFile);
+      visit9(sourceFile);
       return relativeImports;
     } catch (error) {
       logDev(
@@ -2734,16 +3199,16 @@ function angularDemoPlugin({
   }
   function stripImports(code, fileName) {
     try {
-      let visit8 = function(node) {
+      let visit9 = function(node) {
         if (ts.isImportDeclaration(node)) {
           importRanges.push({
             end: node.getEnd(),
             start: node.getFullStart()
           });
         }
-        ts.forEachChild(node, visit8);
+        ts.forEachChild(node, visit9);
       };
-      var visit7 = visit8;
+      var visit8 = visit9;
       const sourceFile = ts.createSourceFile(
         fileName,
         code,
@@ -2752,7 +3217,7 @@ function angularDemoPlugin({
         ts.ScriptKind.TS
       );
       const importRanges = [];
-      visit8(sourceFile);
+      visit9(sourceFile);
       return importRanges.map((range) => {
         let endPos = range.end;
         if (code[endPos] === "\n") {
@@ -2785,24 +3250,51 @@ function angularDemoPlugin({
       const fileName = basename(filePath);
       const importsWithoutStrip = stripImports(code, filePath);
       const sourceCode = [];
+      const aggregatedRules = /* @__PURE__ */ new Map();
       const mainSourceEntry = await buildAngularSourceEntry({
         code,
         fileName,
         filePath,
         language: "angular-ts"
       });
-      sourceCode.push(mainSourceEntry);
+      sourceCode.push(mainSourceEntry.sourceCodeData);
+      if (mainSourceEntry.residualRules) {
+        for (const [className, rule] of mainSourceEntry.residualRules) {
+          aggregatedRules.set(className, rule);
+        }
+      }
       if (templateUrl) {
         const templateEntry = await maybeBuildTemplateSourceEntry(
           templateUrl,
           filePath
         );
         if (templateEntry) {
-          sourceCode.push(templateEntry);
+          sourceCode.push(templateEntry.sourceCodeData);
+          if (templateEntry.residualRules) {
+            for (const [className, rule] of templateEntry.residualRules) {
+              aggregatedRules.set(className, rule);
+            }
+          }
         }
       }
       const importedEntries = await buildImportedSourceEntries(filePath);
-      sourceCode.push(...importedEntries);
+      for (const entry of importedEntries) {
+        sourceCode.push(entry.sourceCodeData);
+        if (entry.residualRules) {
+          for (const [className, rule] of entry.residualRules) {
+            aggregatedRules.set(className, rule);
+          }
+        }
+      }
+      const aggregatedResidualCss = aggregatedRules.size > 0 ? [...aggregatedRules.values()].join("\n\n") : void 0;
+      if (aggregatedResidualCss) {
+        const cssHighlighted = await highlightCode(aggregatedResidualCss, "css");
+        sourceCode.push({
+          fileName: "styles.css",
+          highlighted: cssHighlighted,
+          type: "residual-css"
+        });
+      }
       return {
         componentClass,
         filePath: importPath.startsWith(".") ? importPath : `./${importPath}`,
@@ -2837,7 +3329,7 @@ function angularDemoPlugin({
     let templateUrl = null;
     let hasDefaultExport = false;
     const importsFromAst = [];
-    function visit7(node) {
+    function visit8(node) {
       if (ts.isImportDeclaration(node)) {
         importsFromAst.push(node.getFullText(sourceFile).trim());
       }
@@ -2885,9 +3377,9 @@ function angularDemoPlugin({
       if (ts.isExportAssignment(node) && !node.isExportEquals) {
         hasDefaultExport = true;
       }
-      ts.forEachChild(node, visit7);
+      ts.forEachChild(node, visit8);
     }
-    visit7(sourceFile);
+    visit8(sourceFile);
     return {
       componentClass,
       hasDefaultExport,
@@ -2899,24 +3391,34 @@ function angularDemoPlugin({
   }
   async function buildAngularSourceEntry(params) {
     const { code, fileName, filePath, language } = params;
-    if (params.language === "angular-ts") {
-    }
-    const {
-      codeWithoutSnippets,
-      highlightedCode,
-      highlightedPreview,
-      previewCodeWithoutSnippets
-    } = await highlightCode(code, language);
+    const baseResult = await highlightCode(code, language);
+    let inlineResult;
+    let classesDetected = false;
+    let residualRules;
+    if (transformTailwindStyles) {
+      inlineResult = await highlightCode(code, language, {
+        onClassesDetected: (detected) => {
+          classesDetected = detected;
+        },
+        onResidualCss: (rules) => {
+          residualRules = rules;
+        }
+      });
+    }
     return {
-      fileName,
-      filePath,
-      highlighted: {
-        full: highlightedCode,
-        preview: highlightedPreview ?? null
-      },
-      raw: {
-        full: codeWithoutSnippets,
-        preview: previewCodeWithoutSnippets ?? null
+      residualRules,
+      sourceCodeData: {
+        fileName,
+        filePath,
+        highlighted: {
+          full: baseResult.full,
+          preview: baseResult.preview
+        },
+        highlightedInline: classesDetected && inlineResult ? {
+          full: inlineResult.full,
+          preview: inlineResult.preview
+        } : void 0,
+        type: "file"
       }
     };
   }
@@ -2926,7 +3428,7 @@ function angularDemoPlugin({
       return null;
     }
     try {
-      const templateCode = await readFile(templatePath, "utf-8");
+      const templateCode = await readFile2(templatePath, "utf-8");
       return buildAngularSourceEntry({
         code: templateCode,
         fileName: basename(templatePath),
@@ -2942,25 +3444,25 @@ function angularDemoPlugin({
     }
   }
   async function buildImportedSourceEntries(fromFilePath) {
-    const sourceCode = [];
+    const entries = [];
     const relativeImports = await collectAllImports(fromFilePath);
     for (const resolvedPath of relativeImports) {
       try {
-        const importedCode = await readFile(resolvedPath, "utf-8");
+        const importedCode = await readFile2(resolvedPath, "utf-8");
         const entry = await buildAngularSourceEntry({
           code: importedCode,
           fileName: basename(resolvedPath),
           filePath: resolvedPath,
           language: "angular-ts"
         });
-        sourceCode.push(entry);
+        entries.push(entry);
       } catch (error) {
         logDev(
           `${chalk4.blue.bold(LOG_PREFIX)} ${chalk4.yellowBright("Failed to process relative import:")} ${chalk4.cyan(resolvedPath)}`
         );
       }
     }
-    return sourceCode;
+    return entries;
   }
   function generateRegistryModule() {
     const demos = Array.from(demoRegistry.values());
@@ -3039,7 +3541,7 @@ export function getAngularDemoInfo(demoId) {
   function resolveRelativeImport2(source, fromFile) {
     const fromDir = dirname(fromFile);
     const resolved = resolve2(fromDir, source);
-    const extensions = [".ts", ".tsx", ".js", ".jsx"];
+    const extensions = [".ts", ".js"];
     for (const ext of extensions) {
       const withExt = resolved + ext;
       if (existsSync(withExt)) {
@@ -3149,7 +3651,7 @@ export function getAngularDemoInfo(demoId) {
     });
   }
   async function handleAngularDemoUpdate(filePath) {
-    const code = await readFile(filePath, "utf-8");
+    const code = await readFile2(filePath, "utf-8");
     const demoInfo = await parseAngularDemo(filePath, code);
     if (demoInfo) {
       demoRegistry.set(demoInfo.id, demoInfo);
@@ -3223,7 +3725,7 @@ function resolvePathAlias(source, pathAliases) {
   for (const alias of pathAliases) {
     if (alias.pattern.test(source)) {
       const resolvedPath = source.replace(alias.pattern, alias.replacement);
-      const extensions = [".ts", ".tsx", ".js", ".jsx"];
+      const extensions = [".ts", ".js"];
       for (const ext of extensions) {
         const withExt = resolvedPath + ext;
         if (existsSync(withExt)) {
@@ -3255,55 +3757,6 @@ function resolveTemplateFile(templateUrl, fromFile) {
   }
   return resolved;
 }
-function extractPreviewFromHighlightedHtml(highlightedHtml) {
-  const preMatch = highlightedHtml.match(/<pre([^>]*)>/);
-  const codeMatch = highlightedHtml.match(/<code([^>]*)>(.*?)<\/code>/s);
-  if (!preMatch || !codeMatch) {
-    return null;
-  }
-  const codeContent = codeMatch[2];
-  const parts = codeContent.split(/<span class="line/);
-  const previewLineParts = parts.slice(1).filter((part) => part.includes('data-preview-line="true"'));
-  const indents = previewLineParts.map((part) => {
-    const indentMatches = part.match(/<span class="indent">(.+?)<\/span>/g) || [];
-    let total = 0;
-    for (const match of indentMatches) {
-      const content = match.match(/<span class="indent">(.+?)<\/span>/);
-      if (content) {
-        total += content[1].length;
-      } else {
-        break;
-      }
-    }
-    return total;
-  });
-  const minIndent = Math.min(...indents.filter((n) => n > 0));
-  const previewLines = previewLineParts.map((part) => {
-    let processed = `<span class="line${part}`;
-    let remaining = minIndent;
-    while (remaining > 0 && processed.includes('<span class="indent">')) {
-      const before = processed;
-      processed = processed.replace(
-        /<span class="indent">(.+?)<\/span>/,
-        (match, spaces) => {
-          if (spaces.length <= remaining) {
-            remaining -= spaces.length;
-            return "";
-          } else {
-            const kept = spaces.substring(remaining);
-            remaining = 0;
-            return `<span class="indent">${kept}</span>`;
-          }
-        }
-      );
-      if (before === processed) {
-        break;
-      }
-    }
-    return processed;
-  });
-  return `<pre${preMatch[1]}><code${codeMatch[1]}>${previewLines.join("")}</code></pre>`;
-}
 
 // src/react-demo-plugin/demo-plugin-constants.ts
 var VIRTUAL_MODULE_IDS = {
@@ -3341,7 +3794,7 @@ var NODE_BUILTINS = [
 // src/react-demo-plugin/demo-plugin-utils.ts
 import chalk5 from "chalk";
 import { existsSync as existsSync2, readFileSync as readFileSync3 } from "node:fs";
-import { readFile as readFile2 } from "node:fs/promises";
+import { readFile as readFile3 } from "node:fs/promises";
 import { dirname as dirname2, join as join3, relative as relative2, resolve as resolve3, sep } from "node:path";
 import * as ts2 from "typescript";
 import { pascalCase } from "@qualcomm-ui/utils/change-case";
@@ -3358,7 +3811,7 @@ function createDemoName(filePath) {
 }
 async function extractFileImports(filePath) {
   try {
-    const content = await readFile2(filePath, "utf-8");
+    const content = await readFile3(filePath, "utf-8");
     return extractImports(content, filePath);
   } catch (error) {
     console.log(
@@ -3378,7 +3831,7 @@ function extractImports(code, fileName) {
   );
   const thirdPartyImports = [];
   const relativeImports = [];
-  function visit7(node) {
+  function visit8(node) {
     if (ts2.isImportDeclaration(node)) {
       const importSpec = parseImportDeclaration(node, fileName);
       if (importSpec) {
@@ -3389,9 +3842,9 @@ function extractImports(code, fileName) {
         }
       }
     }
-    ts2.forEachChild(node, visit7);
+    ts2.forEachChild(node, visit8);
   }
-  visit7(sourceFile);
+  visit8(sourceFile);
   return { relativeImports, thirdPartyImports };
 }
 function getScriptKind(fileName) {
@@ -3638,14 +4091,14 @@ function isDemoFile(filePath) {
 // src/react-demo-plugin/react-demo-plugin.ts
 import chalk6 from "chalk";
 import { glob as glob3 } from "glob";
-import { readFile as readFile3 } from "node:fs/promises";
+import { readFile as readFile4 } from "node:fs/promises";
 import { basename as basename2, resolve as resolve4 } from "node:path";
 import { createHighlighter as createHighlighter2 } from "shiki";
 import * as ts3 from "typescript";
 import {
   quiCustomDarkTheme as quiCustomDarkTheme3
 } from "@qualcomm-ui/mdx-common";
-import { dedent as dedent2 } from "@qualcomm-ui/utils/dedent";
+import { dedent as dedent3 } from "@qualcomm-ui/utils/dedent";
 var highlighter2 = null;
 var initializingHighlighter = false;
 var demoRegistry2 = /* @__PURE__ */ new Map();
@@ -3659,7 +4112,8 @@ function reactDemoPlugin({
     light: "github-light-high-contrast"
   },
   transformers = [],
-  transformLine
+  transformLine,
+  transformTailwindStyles
 } = {}) {
   const defaultShikiOptions = {
     defaultColor: "light-dark()",
@@ -3678,10 +4132,8 @@ function reactDemoPlugin({
         initializingHighlighter = true;
         try {
           highlighter2 = await createHighlighter2({
-            langs: ["tsx", "typescript"],
+            langs: ["tsx", "typescript", "css"],
             themes: [theme.dark, theme.light]
-          }).finally(() => {
-            initializingHighlighter = false;
           });
           console.log(
             `${chalk6.magenta.bold(LOG_PREFIX2)} Shiki highlighter initialized`
@@ -3691,6 +4143,8 @@ function reactDemoPlugin({
             `${chalk6.magenta.bold(LOG_PREFIX2)} Failed to initialize highlighter:`,
             error
           );
+        } finally {
+          initializingHighlighter = false;
         }
       }
       await collectReactDemos();
@@ -3772,26 +4226,46 @@ function reactDemoPlugin({
       }
     }
   }
-  async function highlightCode(code) {
+  async function highlightCode(code, options = {}) {
+    const { extraTransformers = [], onResidualCss } = options;
     if (!highlighter2) {
-      return { codeWithoutSnippets: code, highlightedCode: code };
+      return { full: code };
     }
     let previewCode = null;
-    let codeWithoutSnippets = "";
+    const tailwindTransformers = [];
+    if (transformTailwindStyles && onResidualCss) {
+      const transformer = await createShikiTailwindTransformer({
+        onClassesDetected: (detected) => {
+          options.onClassesDetected?.(detected);
+        },
+        onResidualCss,
+        styleFormat: "jsx",
+        styles: dedent3`
+          @layer theme, base, components, utilities;
+          @import "tailwindcss/theme.css" layer(theme);
+          @import "tailwindcss/utilities.css" layer(utilities);
+          @import "@qualcomm-ui/tailwind-plugin/qui-strict.css";
+        `
+      });
+      tailwindTransformers.push(transformer);
+    } else if (extraTransformers.length > 0) {
+      tailwindTransformers.push(...extraTransformers);
+    }
     try {
-      const result = highlighter2.codeToHtml(code, {
+      const highlightedCode = highlighter2.codeToHtml(code, {
         ...defaultShikiOptions,
         transformers: [
           ...getShikiTransformers(),
+          ...transformers,
+          ...tailwindTransformers,
           transformerPreviewBlock({
+            attributeName: "data-preview",
             onComplete: (extractedPreview) => {
-              previewCode = extractedPreview ? removeCodeAnnotations(extractedPreview) : null;
+              previewCode = extractedPreview;
             }
           }),
           transformerCodeAttribute({
-            onComplete: (formattedSource) => {
-              codeWithoutSnippets = formattedSource;
-            }
+            attributeName: "data-code"
           }),
           {
             enforce: "post",
@@ -3803,38 +4277,16 @@ function reactDemoPlugin({
           ...transformers
         ]
       });
-      let highlightedPreview = null;
-      if (previewCode) {
-        highlightedPreview = highlighter2.codeToHtml(code, {
-          ...defaultShikiOptions,
-          transformers: [
-            ...getShikiTransformers(),
-            transformerPreviewBlock({
-              displayMode: "only-preview"
-            }),
-            {
-              enforce: "post",
-              name: "shiki-transformer-trim",
-              preprocess(code2) {
-                return code2.trim();
-              }
-            },
-            ...transformers
-          ]
-        });
-      }
       return {
-        codeWithoutSnippets,
-        highlightedCode: result,
-        highlightedPreview,
-        previewCodeWithoutSnippets: previewCode
+        full: highlightedCode,
+        preview: previewCode ? extractPreviewFromHighlightedHtml(highlightedCode) : null
       };
     } catch (error) {
       console.warn(
         `${chalk6.magenta.bold(LOG_PREFIX2)} Failed to highlight code:`,
         error
       );
-      return { codeWithoutSnippets: code, highlightedCode: code };
+      return { full: code };
     }
   }
   async function collectReactDemos() {
@@ -3894,22 +4346,34 @@ function reactDemoPlugin({
   async function extractHighlightedCode(filePath, code) {
     try {
       const fileName = basename2(filePath);
-      const {
-        codeWithoutSnippets,
-        highlightedCode,
-        highlightedPreview,
-        previewCodeWithoutSnippets
-      } = await highlightCode(code);
+      const baseResult = await highlightCode(code);
+      let inlineResult;
+      let classesDetected = false;
+      let residualRules;
+      if (transformTailwindStyles) {
+        inlineResult = await highlightCode(code, {
+          onClassesDetected: (detected) => {
+            classesDetected = detected;
+          },
+          onResidualCss: (rules) => {
+            residualRules = rules;
+          }
+        });
+      }
       return {
-        fileName,
-        filePath,
-        highlighted: {
-          full: highlightedCode,
-          preview: highlightedPreview
-        },
-        raw: {
-          full: codeWithoutSnippets,
-          preview: previewCodeWithoutSnippets
+        residualRules,
+        sourceCodeData: {
+          fileName,
+          filePath,
+          highlighted: {
+            full: baseResult.full,
+            preview: baseResult.preview
+          },
+          highlightedInline: classesDetected && inlineResult ? {
+            full: inlineResult.full,
+            preview: inlineResult.preview
+          } : void 0,
+          type: "file"
         }
       };
     } catch {
@@ -3918,36 +4382,55 @@ function reactDemoPlugin({
   }
   async function extractFileData(filePath) {
     try {
-      const code = await readFile3(filePath, "utf-8").then(transformLines);
+      const code = await readFile4(filePath, "utf-8").then(transformLines);
       const imports = stripImports(code, filePath);
       const sourceCode = [];
-      const sourceCodeData = await extractHighlightedCode(filePath, code);
-      if (sourceCodeData) {
-        sourceCode.push(sourceCodeData);
+      const aggregatedRules = /* @__PURE__ */ new Map();
+      const extractedMain = await extractHighlightedCode(filePath, code);
+      if (extractedMain) {
+        sourceCode.push(extractedMain.sourceCodeData);
+        if (extractedMain.residualRules) {
+          for (const [className, rule] of extractedMain.residualRules) {
+            aggregatedRules.set(className, rule);
+          }
+        }
       }
       const fileImports = await extractFileImports(filePath);
       if (fileImports) {
         for (const relativeImport of fileImports.relativeImports) {
           try {
-            const importedCode = await readFile3(
+            const importedCode = await readFile4(
               relativeImport.resolvedPath,
               "utf-8"
             ).then(transformLines);
-            const sourceCodeData2 = await extractHighlightedCode(
+            const extracted = await extractHighlightedCode(
               relativeImport.resolvedPath,
               importedCode
             );
-            if (sourceCodeData2) {
-              sourceCode.push(sourceCodeData2);
+            if (extracted) {
+              sourceCode.push(extracted.sourceCodeData);
+              if (extracted.residualRules) {
+                for (const [className, rule] of extracted.residualRules) {
+                  aggregatedRules.set(className, rule);
+                }
+              }
             }
           } catch {
             console.debug("Failed to process file", relativeImport.resolvedPath);
           }
         }
       }
+      const aggregatedResidualCss = aggregatedRules.size > 0 ? [...aggregatedRules.values()].join("\n\n") : void 0;
+      if (aggregatedResidualCss) {
+        sourceCode.push({
+          fileName: "styles.css",
+          highlighted: await highlightCode(aggregatedResidualCss),
+          type: "residual-css"
+        });
+      }
       return {
         demoName: createDemoName(filePath),
-        fileName: sourceCodeData?.fileName || basename2(filePath),
+        fileName: extractedMain?.sourceCodeData.fileName || basename2(filePath),
         filePath,
         imports,
         sourceCode
@@ -3958,16 +4441,16 @@ function reactDemoPlugin({
   }
   function stripImports(code, fileName) {
     try {
-      let visit8 = function(node) {
+      let visit9 = function(node) {
         if (ts3.isImportDeclaration(node)) {
           importRanges.push({
             end: node.getEnd(),
             start: node.getFullStart()
           });
         }
-        ts3.forEachChild(node, visit8);
+        ts3.forEachChild(node, visit9);
       };
-      var visit7 = visit8;
+      var visit8 = visit9;
       const sourceFile = ts3.createSourceFile(
         fileName,
         code,
@@ -3976,7 +4459,7 @@ function reactDemoPlugin({
         getScriptKind(fileName)
       );
       const importRanges = [];
-      visit8(sourceFile);
+      visit9(sourceFile);
       return importRanges.map((range) => {
         let endPos = range.end;
         if (code[endPos] === "\n") {
@@ -3997,7 +4480,7 @@ ${entries}
 ])`;
   }
   function generateExportedFunctions() {
-    return dedent2`
+    return dedent3`
     export function getDemo(demoName) {
       const demo = demoRegistry.get(demoName)
       if (!demo) {