@astrojs/markdown-remark 7.0.0-beta.6 → 7.0.0-beta.7

package/dist/highlight.d.ts

@@ -11,6 +11,7 @@ export declare const defaultExcludeLanguages: string[];
  * @param highlighter
  *   A function which receives the code and language, and returns the HTML of a syntax
  *   highlighted `<pre>` element.
+ * @returns The number of code blocks that were highlighted.
  */
-export declare function highlightCodeBlocks(tree: Root, highlighter: Highlighter, excludeLanguages?: string[]): Promise<void>;
+export declare function highlightCodeBlocks(tree: Root, highlighter: Highlighter, excludeLanguages?: string[]): Promise<number>;
 export {};

package/dist/highlight.js

@@ -54,6 +54,7 @@ async function highlightCodeBlocks(tree, highlighter, excludeLanguages = []) {
     const index = grandParent.children.indexOf(parent);
     grandParent.children[index] = replacement;
   }
+  return nodes.length;
 }
 export {
   defaultExcludeLanguages,

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export { rehypePrism } from './rehype-prism.js';
 export { rehypeShiki } from './rehype-shiki.js';
 export { remarkCollectImages } from './remark-collect-images.js';
 export { type CreateShikiHighlighterOptions, createShikiHighlighter, type ShikiHighlighter, type ShikiHighlighterHighlightOptions, } from './shiki.js';
+export { globalShikiStyleCollector } from './shiki-style-collector.js';
+export { transformerStyleToClass, type ShikiTransformerStyleToClass, } from './transformers/style-to-class.js';
 export * from './types.js';
 export declare const syntaxHighlightDefaults: Required<SyntaxHighlightConfig>;
 export declare const markdownConfigDefaults: Required<AstroMarkdownOptions>;

package/dist/index.js

@@ -25,6 +25,10 @@ import { remarkCollectImages as remarkCollectImages2 } from "./remark-collect-im
 import {
   createShikiHighlighter
 } from "./shiki.js";
+import { globalShikiStyleCollector } from "./shiki-style-collector.js";
+import {
+  transformerStyleToClass
+} from "./transformers/style-to-class.js";
 export * from "./types.js";
 const syntaxHighlightDefaults = {
   type: "shiki",
@@ -118,7 +122,8 @@ async function createMarkdownProcessor(opts) {
           headings: result.data.astro?.headings ?? [],
           localImagePaths: result.data.astro?.localImagePaths ?? [],
           remoteImagePaths: result.data.astro?.remoteImagePaths ?? [],
-          frontmatter: result.data.astro?.frontmatter ?? {}
+          frontmatter: result.data.astro?.frontmatter ?? {},
+          hasCodeBlocks: result.data.astro?.hasCodeBlocks ?? false
         }
       };
     }
@@ -145,6 +150,7 @@ export {
   createMarkdownProcessor,
   createShikiHighlighter,
   extractFrontmatter,
+  globalShikiStyleCollector,
   isFrontmatterValid,
   markdownConfigDefaults,
   parseFrontmatter,
@@ -152,5 +158,6 @@ export {
   rehypePrism2 as rehypePrism,
   rehypeShiki2 as rehypeShiki,
   remarkCollectImages2 as remarkCollectImages,
-  syntaxHighlightDefaults
+  syntaxHighlightDefaults,
+  transformerStyleToClass
 };

package/dist/rehype-shiki.js

@@ -2,7 +2,7 @@ import { highlightCodeBlocks } from "./highlight.js";
 import { createShikiHighlighter } from "./shiki.js";
 const rehypeShiki = (config, excludeLangs) => {
   let highlighterAsync;
-  return async (tree) => {
+  return async (tree, vfile) => {
     highlighterAsync ??= createShikiHighlighter({
       langs: config?.langs,
       theme: config?.theme,
@@ -10,7 +10,7 @@ const rehypeShiki = (config, excludeLangs) => {
       langAlias: config?.langAlias
     });
     const highlighter = await highlighterAsync;
-    await highlightCodeBlocks(
+    const codeBlockCount = await highlightCodeBlocks(
       tree,
       (code, language, options) => {
         return highlighter.codeToHast(code, language, {
@@ -22,6 +22,10 @@ const rehypeShiki = (config, excludeLangs) => {
       },
       excludeLangs
     );
+    if (codeBlockCount > 0) {
+      vfile.data.astro ??= {};
+      vfile.data.astro.hasCodeBlocks = true;
+    }
   };
 };
 export {

package/dist/shiki-style-collector.d.ts

@@ -0,0 +1,32 @@
+import type { ShikiTransformerStyleToClass } from './transformers/style-to-class.js';
+/**
+ * Global singleton to collect Shiki styles from multiple transformer instances.
+ *
+ * Each code block (whether from Code.astro or markdown) creates a new transformer instance.
+ * This collector aggregates styles from all instances so they can be bundled into a single
+ * CSS file via the virtual module system.
+ */
+declare class ShikiStyleCollector {
+    private transformers;
+    /**
+     * Register a transformer instance to collect styles from.
+     * Returns the same transformer to allow chaining.
+     */
+    register(transformer: ShikiTransformerStyleToClass): ShikiTransformerStyleToClass;
+    /**
+     * Collect CSS from all registered transformers.
+     * This is called by the virtual CSS module to generate the final stylesheet.
+     */
+    collectCSS(): string;
+    /**
+     * Clear all registered transformers and their style registries.
+     * Called during HMR in dev mode to prevent stale styles.
+     */
+    clear(): void;
+}
+/**
+ * Global instance of the style collector.
+ * Shared between Code.astro component and markdown processing.
+ */
+export declare const globalShikiStyleCollector: ShikiStyleCollector;
+export {};

package/dist/shiki-style-collector.js

@@ -0,0 +1,36 @@
+class ShikiStyleCollector {
+  transformers = /* @__PURE__ */ new Set();
+  /**
+   * Register a transformer instance to collect styles from.
+   * Returns the same transformer to allow chaining.
+   */
+  register(transformer) {
+    this.transformers.add(transformer);
+    return transformer;
+  }
+  /**
+   * Collect CSS from all registered transformers.
+   * This is called by the virtual CSS module to generate the final stylesheet.
+   */
+  collectCSS() {
+    let css = "";
+    for (const transformer of this.transformers) {
+      css += transformer.getCSS();
+    }
+    return css;
+  }
+  /**
+   * Clear all registered transformers and their style registries.
+   * Called during HMR in dev mode to prevent stale styles.
+   */
+  clear() {
+    for (const transformer of this.transformers) {
+      transformer.clearRegistry();
+    }
+    this.transformers.clear();
+  }
+}
+const globalShikiStyleCollector = new ShikiStyleCollector();
+export {
+  globalShikiStyleCollector
+};

package/dist/shiki.js

@@ -3,6 +3,8 @@ import {
   createHighlighter,
   isSpecialLang
 } from "shiki";
+import { globalShikiStyleCollector } from "./shiki-style-collector.js";
+import { transformerStyleToClass } from "./transformers/style-to-class.js";
 let _cssVariablesTheme;
 const cssVariablesTheme = () => _cssVariablesTheme ?? (_cssVariablesTheme = createCssVariablesTheme({
   variablePrefix: "--astro-code-"
@@ -52,6 +54,8 @@ async function createShikiHighlighter({
       // they're technically not meta, nor parsed from Shiki's `parseMetaString` API.
       meta: options?.meta ? { __raw: options?.meta } : void 0,
       transformers: [
+        // Extract inline styles to CSS classes for better performance and CSP compliance
+        globalShikiStyleCollector.register(transformerStyleToClass()),
         {
           pre(node) {
             if (inline) {
@@ -64,13 +68,15 @@ async function createShikiHighlighter({
             } = options?.attributes ?? {};
             Object.assign(node.properties, rest);
             const classValue = (normalizePropAsString(node.properties.class) ?? "") + (attributesClass ? ` ${attributesClass}` : "");
-            const styleValue = (normalizePropAsString(node.properties.style) ?? "") + (attributesStyle ? `; ${attributesStyle}` : "");
             node.properties.class = classValue.replace(/shiki/g, "astro-code");
             node.properties.dataLanguage = lang;
             if (options.wrap === false || options.wrap === void 0) {
-              node.properties.style = styleValue + "; overflow-x: auto;";
+              this.addClassToHast(node, "astro-code-overflow");
             } else if (options.wrap === true) {
-              node.properties.style = styleValue + "; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;";
+              this.addClassToHast(node, "astro-code-overflow astro-code-wrap");
+            }
+            if (attributesStyle) {
+              node.properties.style = attributesStyle;
             }
           },
           line(node) {
@@ -84,7 +90,7 @@ async function createShikiHighlighter({
                   innerSpanNode.children.unshift({
                     type: "element",
                     tagName: "span",
-                    properties: { style: "user-select: none;" },
+                    properties: { class: "astro-code-no-select" },
                     children: [{ type: "text", value: start }]
                   });
                 }

package/dist/transformers/style-to-class.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copied and adapted from https://github.com/shikijs/shiki/blob/main/packages/transformers/src/transformers/style-to-class.ts
+ */
+import type { ShikiTransformer } from 'shiki';
+export interface ShikiTransformerStyleToClass extends ShikiTransformer {
+    getClassRegistry: () => Map<string, Record<string, string> | string>;
+    getCSS: () => string;
+    clearRegistry: () => void;
+}
+/**
+ * Transform Shiki inline styles to CSS classes.
+ * Based on @shikijs/transformers style-to-class transformer.
+ *
+ * This transformer extracts inline styles from Shiki-generated HTML and converts them
+ * to unique class names, allowing CSS to be collected and bundled separately for better
+ * performance and CSP compliance.
+ */
+export declare function transformerStyleToClass(): ShikiTransformerStyleToClass;

package/dist/transformers/style-to-class.js

@@ -0,0 +1,75 @@
+function transformerStyleToClass() {
+  const classToStyle = /* @__PURE__ */ new Map();
+  function stringifyStyle(style) {
+    return Object.entries(style).map(([key, value]) => `${key}:${value}`).join(";");
+  }
+  function registerStyle(style) {
+    const str = typeof style === "string" ? style : stringifyStyle(style);
+    let className = "__a_" + cyrb53(str);
+    if (!classToStyle.has(className)) {
+      classToStyle.set(className, typeof style === "string" ? style : { ...style });
+    }
+    return className;
+  }
+  return {
+    name: "@astrojs/markdown-remark:style-to-class",
+    pre(node) {
+      if (!node.properties.style) return;
+      const className = registerStyle(node.properties.style);
+      delete node.properties.style;
+      this.addClassToHast(node, className);
+    },
+    tokens(lines) {
+      for (const line of lines) {
+        for (const token of line) {
+          let className;
+          if (token.htmlStyle) {
+            className = registerStyle(token.htmlStyle);
+            token.htmlStyle = {};
+          } else {
+            className = registerStyle({ color: token.color });
+            token.color = "";
+          }
+          token.htmlAttrs ||= {};
+          if (!token.htmlAttrs.class) {
+            token.htmlAttrs.class = className;
+          } else {
+            token.htmlAttrs.class += ` ${className}`;
+          }
+        }
+      }
+    },
+    getClassRegistry() {
+      return classToStyle;
+    },
+    getCSS() {
+      let css = ".astro-code-overflow{overflow-x:auto}";
+      css += ".astro-code-wrap{white-space:pre-wrap;word-wrap:break-word}";
+      css += ".astro-code-no-select{user-select:none}";
+      for (const [className, style] of classToStyle.entries()) {
+        css += `.${className}{${typeof style === "string" ? style : stringifyStyle(style)}}`;
+      }
+      return css;
+    },
+    clearRegistry() {
+      classToStyle.clear();
+    }
+  };
+}
+function cyrb53(str, seed = 0) {
+  let h1 = 3735928559 ^ seed;
+  let h2 = 1103547991 ^ seed;
+  for (let i = 0, ch; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
+  h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
+  h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
+  return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36).slice(0, 6);
+}
+export {
+  transformerStyleToClass
+};

package/dist/types.d.ts

@@ -13,6 +13,7 @@ declare module 'vfile' {
             localImagePaths?: string[];
             remoteImagePaths?: string[];
             frontmatter?: Record<string, any>;
+            hasCodeBlocks?: boolean;
         };
     }
 }
@@ -66,6 +67,8 @@ export interface MarkdownProcessorRenderResult {
         localImagePaths: string[];
         remoteImagePaths: string[];
         frontmatter: Record<string, any>;
+        /** Whether the markdown contained code blocks that were syntax highlighted */
+        hasCodeBlocks?: boolean;
     };
 }
 export interface MarkdownHeading {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/markdown-remark",
-  "version": "7.0.0-beta.6",
+  "version": "7.0.0-beta.7",
   "type": "module",
   "author": "withastro",
   "license": "MIT",