@mintlify/common 1.0.1099 → 1.0.1101

package/dist/mdx/getMDXOptions.js

@@ -1,4 +1,4 @@
-import { rehypeCodeBlocks, rehypeDynamicTailwindCss, rehypeKeyboardSymbols, rehypeListItemText, rehypeMdxExtractEndpoint, rehypeMdxExtractExamples, rehypeParamFieldIds, rehypeRawComponents, rehypeTable, rehypeUnicodeIds, rehypeZoomImages, remarkExtractChangelogFilters, remarkExtractTableOfContents, remarkFileTree, remarkFrames, remarkComponentIds, remarkMdxInjectSnippets, remarkMdxRemoveUnusedVariables, remarkRemoveImports, remarkMdxExtractPanel, remarkResolveRelativeLinks, remarkVideo, remarkMdxClientComponentBoundaries, remarkExtractMultiView, remarkPrompt, remarkUnwrapInlineJsx, remarkUnwrapJsxHeadings, remarkMapExplicitAnchors, } from './plugins/index.js';
+import { rehypeCodeBlocks, rehypeDynamicTailwindCss, rehypeKeyboardSymbols, rehypeListItemText, rehypeMdxExtractEndpoint, rehypeMdxExtractExamples, rehypeParamFieldIds, rehypeRawComponents, rehypeTable, rehypeUnicodeIds, rehypeZoomImages, remarkExtractChangelogFilters, remarkExtractTableOfContents, remarkFileTree, remarkFrames, remarkComponentIds, remarkMdxInjectSnippets, remarkMdxStyleStringToObject, remarkMdxRemoveUnusedVariables, remarkRemoveImports, remarkMdxExtractPanel, remarkResolveRelativeLinks, remarkVideo, remarkMdxClientComponentBoundaries, remarkExtractMultiView, remarkPrompt, remarkUnwrapInlineJsx, remarkUnwrapJsxHeadings, remarkMapExplicitAnchors, } from './plugins/index.js';
 import { remarkMdxRemoveUnknownJsx } from './plugins/remark/remarkMdxRemoveUnknownJsx/index.js';
 import { remarkMermaid } from './plugins/remark/remarkMermaid.js';
 import { remarkNoCopyLanguage } from './plugins/remark/remarkNoCopyLanguage.js';
@@ -15,6 +15,7 @@ export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], md
     return {
         remarkPlugins: [
             [remarkMdxInjectSnippets, data.snippetTreeMap],
+            remarkMdxStyleStringToObject,
             [remarkResolveRelativeLinks, { path: data.path }],
             remarkPrompt,
             [remarkComponentIds, data.pageMetadata],

package/dist/mdx/plugins/remark/index.d.ts

@@ -1,4 +1,5 @@
 export * from './remarkMdxInjectSnippets.js';
+export * from './remark-mdx-style-string-to-object.js';
 export * from './remarkFileTree.js';
 export * from './remarkFrames.js';
 export * from './remarkRemoveImports.js';

package/dist/mdx/plugins/remark/index.js

@@ -1,4 +1,5 @@
 export * from './remarkMdxInjectSnippets.js';
+export * from './remark-mdx-style-string-to-object.js';
 export * from './remarkFileTree.js';
 export * from './remarkFrames.js';
 export * from './remarkRemoveImports.js';

package/dist/mdx/plugins/remark/remark-mdx-style-string-to-object.d.ts

@@ -0,0 +1,2 @@
+import type { Root } from 'mdast';
+export declare const remarkMdxStyleStringToObject: () => (tree: Root) => void;

package/dist/mdx/plugins/remark/remark-mdx-style-string-to-object.js

@@ -0,0 +1,60 @@
+import { visit } from 'unist-util-visit';
+import { parseInlineStyle } from '../../../parse-inline-style.js';
+const createStyleExpression = (style) => {
+    const properties = Object.entries(style).map(([property, value]) => ({
+        type: 'Property',
+        key: {
+            type: 'Literal',
+            value: property,
+            raw: JSON.stringify(property),
+        },
+        value: {
+            type: 'Literal',
+            value,
+            raw: JSON.stringify(value),
+        },
+        kind: 'init',
+        method: false,
+        shorthand: false,
+        computed: false,
+    }));
+    const estree = {
+        type: 'Program',
+        body: [
+            {
+                type: 'ExpressionStatement',
+                expression: {
+                    type: 'ObjectExpression',
+                    properties,
+                },
+            },
+        ],
+        sourceType: 'module',
+        comments: [],
+    };
+    return {
+        type: 'mdxJsxAttributeValueExpression',
+        value: JSON.stringify(style),
+        data: { estree },
+    };
+};
+export const remarkMdxStyleStringToObject = () => (tree) => {
+    visit(tree, (node) => {
+        var _a;
+        if (node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement')
+            return;
+        const firstCharacter = (_a = node.name) === null || _a === void 0 ? void 0 : _a[0];
+        if (!node.name || !firstCharacter || node.name.includes('.'))
+            return;
+        if (firstCharacter !== firstCharacter.toLowerCase())
+            return;
+        for (const attribute of node.attributes) {
+            if (attribute.type !== 'mdxJsxAttribute' ||
+                attribute.name !== 'style' ||
+                typeof attribute.value !== 'string') {
+                continue;
+            }
+            attribute.value = createStyleExpression(parseInlineStyle(attribute.value));
+        }
+    });
+};

package/dist/parse-inline-style.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Converts an HTML style attribute into the object shape required by React.
+ * Invalid declaration lists are treated as empty so authored HTML cannot crash rendering.
+ */
+export declare const parseInlineStyle: (style: string) => Record<string, string>;

package/dist/parse-inline-style.js

@@ -0,0 +1,33 @@
+import postcss from 'postcss';
+const CUSTOM_PROPERTY_PATTERN = /^--[a-zA-Z0-9_-]+$/;
+const HYPHEN_PATTERN = /-([a-z])/g;
+const MS_VENDOR_PREFIX_PATTERN = /^-ms-/;
+const toReactStyleProperty = (property) => {
+    if (CUSTOM_PROPERTY_PATTERN.test(property))
+        return property;
+    if (!property.includes('-'))
+        return property.toLowerCase();
+    return property
+        .toLowerCase()
+        .replace(MS_VENDOR_PREFIX_PATTERN, 'ms-')
+        .replace(HYPHEN_PATTERN, (_match, character) => character.toUpperCase());
+};
+/**
+ * Converts an HTML style attribute into the object shape required by React.
+ * Invalid declaration lists are treated as empty so authored HTML cannot crash rendering.
+ */
+export const parseInlineStyle = (style) => {
+    try {
+        const parsed = {};
+        for (const declaration of postcss.parse(style, { from: undefined }).nodes) {
+            if (declaration.type !== 'decl' || !declaration.value)
+                continue;
+            // PostCSS stores priority separately because React style objects only accept the value.
+            parsed[toReactStyleProperty(declaration.prop)] = declaration.value;
+        }
+        return parsed;
+    }
+    catch (_a) {
+        return {};
+    }
+};