to_style() — svelte Function Reference

Architecture documentation for the to_style() function in attributes.js from the svelte codebase.

Function javascript SharedInternal BitFlags calls 2 called by 3

Entity Profile

SharedInternal→ BitFlags→ to_style() — svelte Function Reference

Dependency Diagram

graph TD
  82b89a82_43eb_55e9_a708_1e7df64f688c["to_style()"]
  22eadd41_615a_90cd_7963_26c9a3fc58cb["attributes.js"]
  82b89a82_43eb_55e9_a708_1e7df64f688c -->|defined in| 22eadd41_615a_90cd_7963_26c9a3fc58cb
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97["set_style()"]
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97 -->|calls| 82b89a82_43eb_55e9_a708_1e7df64f688c
  30cd611d_dc10_8cb7_0b6a_cde40be8727a["attributes()"]
  30cd611d_dc10_8cb7_0b6a_cde40be8727a -->|calls| 82b89a82_43eb_55e9_a708_1e7df64f688c
  d261eea5_e3b2_bab9_63a0_198a8131668f["attr_style()"]
  d261eea5_e3b2_bab9_63a0_198a8131668f -->|calls| 82b89a82_43eb_55e9_a708_1e7df64f688c
  9358cf61_0851_258e_9668_2d6f341108ba["to_css_name()"]
  82b89a82_43eb_55e9_a708_1e7df64f688c -->|calls| 9358cf61_0851_258e_9668_2d6f341108ba
  07f91395_5f51_09ec_7b9c_e009d1d9806f["append_styles()"]
  82b89a82_43eb_55e9_a708_1e7df64f688c -->|calls| 07f91395_5f51_09ec_7b9c_e009d1d9806f
  style 82b89a82_43eb_55e9_a708_1e7df64f688c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/shared/attributes.js lines 125–223

export function to_style(value, styles) {
	if (styles) {
		var new_style = '';

		/** @type {Record<string,any> | undefined} */
		var normal_styles;

		/** @type {Record<string,any> | undefined} */
		var important_styles;

		if (Array.isArray(styles)) {
			normal_styles = styles[0];
			important_styles = styles[1];
		} else {
			normal_styles = styles;
		}

		if (value) {
			value = String(value)
				.replaceAll(/\s*\/\*.*?\*\/\s*/g, '')
				.trim();

			/** @type {boolean | '"' | "'"} */
			var in_str = false;
			var in_apo = 0;
			var in_comment = false;

			var reserved_names = [];

			if (normal_styles) {
				reserved_names.push(...Object.keys(normal_styles).map(to_css_name));
			}
			if (important_styles) {
				reserved_names.push(...Object.keys(important_styles).map(to_css_name));
			}

			var start_index = 0;
			var name_index = -1;

			const len = value.length;
			for (var i = 0; i < len; i++) {
				var c = value[i];

				if (in_comment) {
					if (c === '/' && value[i - 1] === '*') {
						in_comment = false;
					}
				} else if (in_str) {
					if (in_str === c) {
						in_str = false;
					}
				} else if (c === '/' && value[i + 1] === '*') {
					in_comment = true;
				} else if (c === '"' || c === "'") {
					in_str = c;
				} else if (c === '(') {
					in_apo++;
				} else if (c === ')') {
					in_apo--;
				}

				if (!in_comment && in_str === false && in_apo === 0) {
					if (c === ':' && name_index === -1) {
						name_index = i;
					} else if (c === ';' || i === len - 1) {
						if (name_index !== -1) {
							var name = to_css_name(value.substring(start_index, name_index).trim());

							if (!reserved_names.includes(name)) {
								if (c !== ';') {
									i++;
								}

								var property = value.substring(start_index, i).trim();
								new_style += ' ' + property + ';';
							}
						}

						start_index = i + 1;
						name_index = -1;
					}