@mintlify/common 1.0.1293 → 1.0.1294

package/dist/mdx/getMDXOptions.js

@@ -2,6 +2,7 @@ import { remarkCurrencyText } from './currencyMath.js';
 import { remarkPackageIslands, } from './islands/remarkPackageIslands.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 { remarkMdxExpandExpressions, } from './plugins/remark/remarkMdxExpandExpressions.js';
+import { remarkMdxPageStyles } from './plugins/remark/remarkMdxPageStyles.js';
 import { remarkMdxDetectJs } from './plugins/remark/remarkMdxRemoveJs.js';
 import { remarkMdxRemoveUnknownJsx } from './plugins/remark/remarkMdxRemoveUnknownJsx/index.js';
 import { remarkMermaid } from './plugins/remark/remarkMermaid.js';
@@ -48,6 +49,7 @@ export const getMDXOptions = ({ data, remarkPlugins = [], earlyRemarkPlugins = [
             remarkPrompt,
             ...earlyRemarkPlugins,
             remarkMdxStyleStringToObject,
+            remarkMdxPageStyles,
             [remarkResolveRelativeLinks, { path: data.path }],
             remarkParseTitleMarkdown,
             [remarkComponentIds, data.pageMetadata],
@@ -68,7 +70,10 @@ export const getMDXOptions = ({ data, remarkPlugins = [], earlyRemarkPlugins = [
             ...remarkPlugins,
             remarkRenderTitleMarkdown,
             remarkMapExplicitAnchors,
-            [remarkMdxRemoveUnknownJsx, { allowlist: [...allowedComponents, ...knownComponents] }],
+            [
+                remarkMdxRemoveUnknownJsx,
+                { allowlist: ['style', ...allowedComponents, ...knownComponents] },
+            ],
             [remarkMdxClientComponentBoundaries, { allowlist: knownComponents }],
         ],
         rehypePlugins: [

package/dist/mdx/index.d.ts

@@ -8,6 +8,7 @@ export * from './preprocessCustomHeadingIds.js';
 export * from './preprocessMdxFragmentCode.js';
 export * from './currencyMath.js';
 export * from './getMDXOptions.js';
+export * from './page-style.js';
 export * from './astUtils.js';
 export * from './getS3ImageUri.js';
 export * from './getCodeStyling.js';

package/dist/mdx/index.js

@@ -8,6 +8,7 @@ export * from './preprocessCustomHeadingIds.js';
 export * from './preprocessMdxFragmentCode.js';
 export * from './currencyMath.js';
 export * from './getMDXOptions.js';
+export * from './page-style.js';
 export * from './astUtils.js';
 export * from './getS3ImageUri.js';
 export * from './getCodeStyling.js';

package/dist/mdx/page-style.d.ts

@@ -0,0 +1,9 @@
+import type { MdxFlowExpression, MdxJsxFlowElement, MdxJsxTextElement, MdxTextExpression } from 'mdast-util-mdx';
+import type { Node } from 'unist';
+export type PageStyleElement = MdxJsxFlowElement | MdxJsxTextElement;
+export declare const CLIENT_PAGE_STYLE_SCOPE = ".mdx-content";
+export declare function sanitizePageStyle(css: string, scope: string): string;
+export declare const isPageStyleElement: (node: Node) => node is PageStyleElement;
+export declare function pageStyleText(element: PageStyleElement): string | undefined;
+export declare function keptPageStyleExpression(element: PageStyleElement): MdxFlowExpression | MdxTextExpression | undefined;
+export declare function canonicalPageStyle(element: PageStyleElement, css: string): PageStyleElement;

package/dist/mdx/page-style.js

@@ -0,0 +1,183 @@
+import { parseExpressionAt } from 'acorn';
+import postcss from 'postcss';
+import { isMdxExpression } from './utils.js';
+const KEYFRAMES_NAME = /^page-[A-Za-z0-9_-]+$/;
+const KEYFRAME_SELECTOR = /^(?:from|to|(?:\d+|\d*\.\d+)%)$/;
+const PROPERTY_NAME = /^-{0,2}[A-Za-z][A-Za-z0-9-]*$/;
+const CSS_ESCAPE = /\\(?:([0-9a-fA-F]{1,6})[ \t\n\r\f]?|([\s\S]))/g;
+const FETCHING_FUNCTION = /(?:^|[^\w-])(?:-[a-z]+-)?(?:url|src|image|image-set|cross-fade|element|paint|expression)\s*\(/i;
+const MAX_CODE_POINT = 0x10ffff;
+const decodeCssEscapes = (value) => value.replace(CSS_ESCAPE, (_match, hex, character) => {
+    if (hex === undefined)
+        return character !== null && character !== void 0 ? character : '';
+    const codePoint = parseInt(hex, 16);
+    return codePoint === 0 || codePoint > MAX_CODE_POINT ? '�' : String.fromCodePoint(codePoint);
+});
+export const CLIENT_PAGE_STYLE_SCOPE = '.mdx-content';
+const CONDITIONAL_AT_RULES = new Set(['media', 'supports', 'container']);
+const LEADING_COMBINATOR = /^[>+~|]/;
+const BLOCK_DELIMITER = /[{};]/;
+const CONTAINED_POSITIONS = new Set([
+    'static',
+    'relative',
+    'absolute',
+    'sticky',
+    'inherit',
+    'initial',
+    'unset',
+    'revert',
+    'revert-layer',
+]);
+const isSafeText = (text) => !text.includes('/*') && !text.includes('</') && !FETCHING_FUNCTION.test(decodeCssEscapes(text));
+const isContainedPosition = (declaration) => declaration.prop.toLowerCase() !== 'position' ||
+    CONTAINED_POSITIONS.has(decodeCssEscapes(declaration.value).trim().toLowerCase());
+const isSafeDeclaration = (declaration) => PROPERTY_NAME.test(declaration.prop) &&
+    declaration.value.trim() !== '' &&
+    isSafeText(declaration.value) &&
+    isContainedPosition(declaration);
+const serializeDeclarations = (nodes, allowImportant) => nodes
+    .filter((node) => node.type === 'decl' && isSafeDeclaration(node) && (allowImportant || !node.important))
+    .map((declaration) => `${declaration.prop}:${declaration.value.trim()}${declaration.important ? '!important' : ''}`)
+    .join(';');
+function serializeKeyframe(frame) {
+    const selectors = frame.selectors.map((selector) => selector.trim().toLowerCase());
+    if (!selectors.every((selector) => KEYFRAME_SELECTOR.test(selector)))
+        return '';
+    const declarations = serializeDeclarations(frame.nodes, false);
+    return declarations ? `${selectors.join(',')}{${declarations}}` : '';
+}
+function serializeKeyframes(rule) {
+    var _a;
+    const name = rule.params.trim();
+    if (!KEYFRAMES_NAME.test(name))
+        return '';
+    const frames = ((_a = rule.nodes) !== null && _a !== void 0 ? _a : [])
+        .filter((node) => node.type === 'rule')
+        .map(serializeKeyframe)
+        .join('');
+    return frames ? `@keyframes ${name}{${frames}}` : '';
+}
+function scopeSelector(selector, scope) {
+    const prefix = `${scope} `;
+    const inner = (selector.startsWith(prefix) ? selector.slice(prefix.length) : selector).trim();
+    if (!inner ||
+        inner.includes('&') ||
+        LEADING_COMBINATOR.test(inner) ||
+        !isSafeText(inner) ||
+        BLOCK_DELIMITER.test(inner)) {
+        return undefined;
+    }
+    return `${prefix}${inner}`;
+}
+function serializeRule(rule, scope) {
+    const selectors = rule.selectors.map((selector) => scopeSelector(selector.trim(), scope));
+    if (selectors.some((selector) => selector === undefined))
+        return '';
+    const declarations = serializeDeclarations(rule.nodes, true);
+    return declarations ? `${selectors.join(',')}{${declarations}}` : '';
+}
+function serializeConditional(rule, name, scope) {
+    var _a;
+    const params = rule.params.trim();
+    if (!params || !isSafeText(params) || BLOCK_DELIMITER.test(params))
+        return '';
+    const body = ((_a = rule.nodes) !== null && _a !== void 0 ? _a : []).map((node) => serializeNode(node, scope)).join('');
+    return body ? `@${name} ${params}{${body}}` : '';
+}
+function serializeNode(node, scope) {
+    if (node.type === 'rule')
+        return serializeRule(node, scope);
+    if (node.type !== 'atrule')
+        return '';
+    const name = node.name.toLowerCase();
+    if (name === 'keyframes')
+        return serializeKeyframes(node);
+    if (CONDITIONAL_AT_RULES.has(name))
+        return serializeConditional(node, name, scope);
+    return '';
+}
+export function sanitizePageStyle(css, scope) {
+    let nodes;
+    try {
+        nodes = postcss.parse(css, { from: undefined }).nodes;
+    }
+    catch (_a) {
+        return '';
+    }
+    const sanitized = nodes.map((node) => serializeNode(node, scope)).join('');
+    return sanitized.includes('</') ? '' : sanitized;
+}
+export const isPageStyleElement = (node) => (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
+    'name' in node &&
+    node.name === 'style' &&
+    'children' in node &&
+    Array.isArray(node.children);
+const isWhitespaceText = (node) => node.type === 'text' && node.value.trim() === '';
+function significantChildren(nodes) {
+    return nodes.filter((child) => !isWhitespaceText(child));
+}
+function styleChildren(element) {
+    const children = significantChildren(element.children);
+    const [only] = children;
+    return children.length === 1 && (only === null || only === void 0 ? void 0 : only.type) === 'paragraph'
+        ? significantChildren(only.children)
+        : children;
+}
+function staticString(source) {
+    var _a, _b;
+    try {
+        const expression = parseExpressionAt(source, 0, { ecmaVersion: 'latest' });
+        if (source.slice(expression.end).trim() !== '')
+            return undefined;
+        if (expression.type === 'TemplateLiteral' && expression.expressions.length === 0) {
+            return (_b = (_a = expression.quasis[0]) === null || _a === void 0 ? void 0 : _a.value.cooked) !== null && _b !== void 0 ? _b : undefined;
+        }
+        if (expression.type === 'Literal' && typeof expression.value === 'string') {
+            return expression.value;
+        }
+    }
+    catch (_c) {
+        return undefined;
+    }
+    return undefined;
+}
+export function pageStyleText(element) {
+    const [child, ...rest] = styleChildren(element);
+    if (!child || rest.length > 0 || !isMdxExpression(child))
+        return undefined;
+    return staticString(child.value);
+}
+export function keptPageStyleExpression(element) {
+    const children = element.children;
+    const [child, ...rest] = children;
+    if (element.attributes.length > 0 || !child || rest.length > 0 || !isMdxExpression(child)) {
+        return undefined;
+    }
+    const text = staticString(child.value);
+    return text && sanitizePageStyle(text, CLIENT_PAGE_STYLE_SCOPE) === text ? child : undefined;
+}
+const escapeTemplate = (text) => text.replace(/[`\\]|\$\{/g, (match) => `\\${match}`);
+function templateProgram(css, raw) {
+    return {
+        type: 'Program',
+        sourceType: 'module',
+        comments: [],
+        body: [
+            {
+                type: 'ExpressionStatement',
+                expression: {
+                    type: 'TemplateLiteral',
+                    expressions: [],
+                    quasis: [{ type: 'TemplateElement', tail: true, value: { raw, cooked: css } }],
+                },
+            },
+        ],
+    };
+}
+export function canonicalPageStyle(element, css) {
+    const raw = escapeTemplate(css);
+    const value = `\`${raw}\``;
+    const data = { estree: templateProgram(css, raw) };
+    return element.type === 'mdxJsxFlowElement'
+        ? Object.assign(Object.assign({}, element), { attributes: [], children: [{ type: 'mdxFlowExpression', value, data }] }) : Object.assign(Object.assign({}, element), { attributes: [], children: [{ type: 'mdxTextExpression', value, data }] });
+}

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

@@ -11,6 +11,7 @@ export * from './remarkMdxClientComponentBoundaries.js';
 export * from './remarkMermaid.js';
 export * from './remarkNoCopyLanguage.js';
 export * from './remarkMdxRemoveJs.js';
+export * from './remarkMdxPageStyles.js';
 export * from './remarkExtractChangelogFilters.js';
 export * from './remarkExpandContent.js';
 export * from './remarkSplitCodeGroup.js';

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

@@ -11,6 +11,7 @@ export * from './remarkMdxClientComponentBoundaries.js';
 export * from './remarkMermaid.js';
 export * from './remarkNoCopyLanguage.js';
 export * from './remarkMdxRemoveJs.js';
+export * from './remarkMdxPageStyles.js';
 export * from './remarkExtractChangelogFilters.js';
 export * from './remarkExpandContent.js';
 export * from './remarkSplitCodeGroup.js';

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

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

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

@@ -0,0 +1,17 @@
+import { SKIP, visit } from 'unist-util-visit';
+import { CLIENT_PAGE_STYLE_SCOPE, canonicalPageStyle, isPageStyleElement, pageStyleText, sanitizePageStyle, } from '../../page-style.js';
+export const remarkMdxPageStyles = () => (tree) => {
+    visit(tree, (node, index, parent) => {
+        if (!isPageStyleElement(node) || !parent || index === undefined)
+            return;
+        const siblings = parent.children;
+        const text = pageStyleText(node);
+        const css = text === undefined ? '' : sanitizePageStyle(text, CLIENT_PAGE_STYLE_SCOPE);
+        if (css) {
+            siblings.splice(index, 1, canonicalPageStyle(node, css));
+            return SKIP;
+        }
+        siblings.splice(index, 1);
+        return [SKIP, index];
+    });
+};

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

@@ -1,8 +1,9 @@
 import { jsx as jsxHandlers, toJs } from 'estree-util-to-js';
 import { remove } from 'unist-util-remove';
-import { CONTINUE, visit } from 'unist-util-visit';
+import { CONTINUE, SKIP, visit } from 'unist-util-visit';
+import { isPageStyleElement, keptPageStyleExpression } from '../../page-style.js';
 import { UNSAFE_OBJECT_KEYS } from '../../static-object-keys.js';
-import { isMdxJsEsm } from '../../utils.js';
+import { isMdxExpression, isMdxJsEsm } from '../../utils.js';
 import { extractIdentifierRef, getKeptEsmStatements } from './pureTemplateComponents.js';
 const objectEstree = {
     type: 'Program',
@@ -552,7 +553,6 @@ function tryResolveAsString(estree, constants) {
     const val = constants.get(expr.name);
     return val !== undefined ? val : null;
 }
-const isMdxExpression = (node) => node.type === 'mdxTextExpression' || node.type === 'mdxFlowExpression';
 // mdx comments ({/* … */}) parse to an expression with an empty estree body.
 // the raw source must also be comment/whitespace-only: empty-body alone is an
 // undocumented parser detail a toolchain bump could silently widen
@@ -671,7 +671,19 @@ function sanitizer(edit) {
                 edit.replaceChild(parent, index, replacement);
             });
         }
-        edit.remove(tree, (node) => isMdxExpression(node) && !isInertExpression(node));
+        const pageStyleExpressions = new Set();
+        const unsafePageStyles = new Set();
+        visit(tree, isPageStyleElement, (node) => {
+            const expression = keptPageStyleExpression(node);
+            if (expression)
+                pageStyleExpressions.add(expression);
+            else
+                unsafePageStyles.add(node);
+            return SKIP;
+        });
+        if (unsafePageStyles.size > 0)
+            edit.remove(tree, (node) => unsafePageStyles.has(node));
+        edit.remove(tree, (node) => isMdxExpression(node) && !isInertExpression(node) && !pageStyleExpressions.has(node));
         const keptStatements = getKeptEsmStatements(tree);
         const keptNames = new Set(collectExportedNames({
             type: 'Program',

package/dist/mdx/utils.d.ts

@@ -4,6 +4,7 @@ import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
 import type { Node } from 'unist';
 import type { MdxNodeBodyChildType } from '../types/mdx/index.js';
 export declare const isMdxJsEsm: (node: Node) => node is MdxjsEsm;
+export declare const isMdxExpression: (node: Node) => node is MdxFlowExpression | MdxTextExpression;
 export declare function estreeIsProgram<T extends MdxFlowExpression | MdxTextExpression | MdxjsEsm>(node: T): node is T & {
     data: {
         estree: Program;

package/dist/mdx/utils.js

@@ -1,4 +1,5 @@
 export const isMdxJsEsm = (node) => node.type === 'mdxjsEsm';
+export const isMdxExpression = (node) => node.type === 'mdxFlowExpression' || node.type === 'mdxTextExpression';
 export function estreeIsProgram(node) {
     var _a;
     return ((_a = node.data) === null || _a === void 0 ? void 0 : _a.estree) != null;