CssNodeModifier

Interface for modifying CSS nodes in email templates.

interface CssNodeModifier extends TemplateModifier<HtmlNodeModifier, CssNodeModifier>

Description

CssNodeModifier provides methods for manipulating CSS rules, properties, and media queries in email templates. It enables adding, modifying, and removing CSS rules while maintaining email client compatibility.

Import

import { CssNodeModifier } from '@stripoinc/ui-editor-extensions';

Inheritance

Extends: TemplateModifier

Methods

Rule Management Methods

insertRuleBefore()

Inserts a CSS rule before a specified node.

insertRuleBefore(css: string, beforeNode: ImmutableCssNode): CssNodeModifier

Parameter	Type	Description
css	string	The CSS rule string to insert
beforeNode	ImmutableCssNode	The node to insert before

Returns: CssNodeModifier for method chaining

Throws: Error if the node is not a rule or media type

Example:

modifier.modifyCss(documentNode)
    .insertRuleBefore('.new-class { color: red; }', existingRule);

---

insertRuleAfter()

Inserts a CSS rule after a specified node.

insertRuleAfter(css: string, afterNode: ImmutableCssNode): CssNodeModifier

Parameter	Type	Description
css	string	The CSS rule string to insert
afterNode	ImmutableCssNode	The node to insert after

Returns: CssNodeModifier for method chaining

Throws: Error if the node is not a rule or media type

Example:

modifier.modifyCss(documentNode)
    .insertRuleAfter('@media (max-width: 600px) { .mobile { display: block; } }', mediaQuery);

---

appendRule()

Appends a CSS rule as the last child of the current node.

appendRule(css: string): CssNodeModifier

Parameter	Type	Description
css	string	The CSS rule string to append

Returns: CssNodeModifier for method chaining

Throws: Error if the node is not a rule or media type

Example:

modifier.modifyCss(styleNode)
    .appendRule('.footer { background: #f0f0f0; padding: 20px; }');

---

prependRule()

Prepends a CSS rule as the first child of the current node.

prependRule(css: string): CssNodeModifier

Parameter	Type	Description
css	string	The CSS rule string to prepend

Returns: CssNodeModifier for method chaining

Throws: Error if the node is not a rule or media type

Example:

modifier.modifyCss(styleNode)
    .prependRule('* { box-sizing: border-box; }');

---

removeRule()

Removes the current CSS rule or media node.

removeRule(): CssNodeModifier

Returns: CssNodeModifier for method chaining

Throws: Error if the node is not a rule or media type

Example:

modifier.modifyCss(outdatedRule)
    .removeRule();

---

Property Methods

setProperty()

Sets or updates a CSS property in the current rule.

setProperty(name: string, value: string): CssNodeModifier

Parameter	Type	Description
name	string	The CSS property name
value	string	The CSS property value

Returns: CssNodeModifier for method chaining

Throws: Error if multiple properties with the same name are found

Example:

modifier.modifyCss(ruleNode)
    .setProperty('color', '#333333')
    .setProperty('font-size', '16px')
    .setProperty('line-height', '1.5');

---

removeProperty()

Removes a CSS property from the current rule.

removeProperty(name: string): CssNodeModifier

Parameter	Type	Description
name	string	The CSS property name to remove

Returns: CssNodeModifier for method chaining

Throws: Error if multiple properties with the same name are found

Example:

modifier.modifyCss(ruleNode)
    .removeProperty('text-decoration')
    .removeProperty('text-transform');