set_style() — svelte Function Reference

Architecture documentation for the set_style() function in style.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 2 called by 1

Entity Profile

ClientRuntime→ Hydration→ set_style() — svelte Function Reference

Dependency Diagram

graph TD
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97["set_style()"]
  e6776a33_ae8b_fb40_7de7_0a08f609b2db["style.js"]
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97 -->|defined in| e6776a33_ae8b_fb40_7de7_0a08f609b2db
  4c70ef10_16f1_40f4_1d51_8a7169bd1dba["set_attributes()"]
  4c70ef10_16f1_40f4_1d51_8a7169bd1dba -->|calls| cdcce596_d5f9_cd9b_91b7_5b23f82ccf97
  82b89a82_43eb_55e9_a708_1e7df64f688c["to_style()"]
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97 -->|calls| 82b89a82_43eb_55e9_a708_1e7df64f688c
  1fc2e6fc_fcdb_af67_e342_1e09bcc3c6d3["update_styles()"]
  cdcce596_d5f9_cd9b_91b7_5b23f82ccf97 -->|calls| 1fc2e6fc_fcdb_af67_e342_1e09bcc3c6d3
  style cdcce596_d5f9_cd9b_91b7_5b23f82ccf97 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/style.js lines 30–57

export function set_style(dom, value, prev_styles, next_styles) {
	// @ts-expect-error
	var prev = dom.__style;

	if (hydrating || prev !== value) {
		var next_style_attr = to_style(value, next_styles);

		if (!hydrating || next_style_attr !== dom.getAttribute('style')) {
			if (next_style_attr == null) {
				dom.removeAttribute('style');
			} else {
				dom.style.cssText = next_style_attr;
			}
		}

		// @ts-expect-error
		dom.__style = value;
	} else if (next_styles) {
		if (Array.isArray(next_styles)) {
			update_styles(dom, prev_styles?.[0], next_styles[0]);
			update_styles(dom, prev_styles?.[1], next_styles[1], 'important');
		} else {
			update_styles(dom, prev_styles, next_styles);
		}
	}

	return next_styles;
}