astro Architecture Docs
Home / File/ parse-inline-css-to-react.ts — astro Source File

parse-inline-css-to-react.ts — astro Source File

Architecture documentation for parse-inline-css-to-react.ts, a typescript file in the astro codebase. 1 imports, 0 dependents.

File typescript CoreAstro RenderingEngine 1 imports 2 functions

Entity Profile

Dependency Diagram

graph LR
  1a1626cf_4043_99b2_c85a_aca5ce991757["parse-inline-css-to-react.ts"]
  4e85205f_f4a0_024e_eb1f_59580889d88a["./style-to-object.js"]
  1a1626cf_4043_99b2_c85a_aca5ce991757 --> 4e85205f_f4a0_024e_eb1f_59580889d88a
  style 1a1626cf_4043_99b2_c85a_aca5ce991757 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { styleToObject } from './style-to-object.js';

export function parseInlineCSSToReactLikeObject(
	css: string | undefined | null,
): React.CSSProperties | undefined {
	if (typeof css === 'string') {
		const cssObject: Record<string, string> = {};
		styleToObject(css, (originalCssDirective: string, value: string) => {
			const reactCssDirective = convertCssDirectiveNameToReactCamelCase(originalCssDirective);
			cssObject[reactCssDirective] = value;
		});
		return cssObject;
	}

	return undefined;
}

function convertCssDirectiveNameToReactCamelCase(original: string): string {
	// capture group 1 is the character to capitalize, the hyphen is omitted by virtue of being outside the capture group
	const replaced = original.replace(/-([a-z\d])/gi, (_match, char) => {
		return char.toUpperCase();
	});
	return replaced;
}

Domain

Subdomains

Functions

Dependencies

  • ./style-to-object.js

Source

Frequently Asked Questions

What does parse-inline-css-to-react.ts do?
parse-inline-css-to-react.ts is a source file in the astro codebase, written in typescript. It belongs to the CoreAstro domain, RenderingEngine subdomain.
What functions are defined in parse-inline-css-to-react.ts?
parse-inline-css-to-react.ts defines 2 function(s): convertCssDirectiveNameToReactCamelCase, parseInlineCSSToReactLikeObject.
What does parse-inline-css-to-react.ts depend on?
parse-inline-css-to-react.ts imports 1 module(s): ./style-to-object.js.
Where is parse-inline-css-to-react.ts in the architecture?
parse-inline-css-to-react.ts is located at packages/integrations/markdoc/src/html/css/parse-inline-css-to-react.ts (domain: CoreAstro, subdomain: RenderingEngine, directory: packages/integrations/markdoc/src/html/css).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free