---
url: >-
  https://plugin.stripo.email/extensions/reference/modification/CssNodeModifier.md
---
# CssNodeModifier

Interface for modifying CSS nodes in email templates.

```typescript
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

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

## Inheritance

Extends: [`TemplateModifier`](./TemplateModifier)

## Methods

### Rule Management Methods

#### insertRuleBefore()

Inserts a CSS rule before a specified node.

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

| Parameter | Type                                                                  | Description |
|-----------|-----------------------------------------------------------------------|-------------|
| `css` | `string`                                                              | The CSS rule string to insert |
| `beforeNode` | [`ImmutableCssNode`](/extensions/reference/nodes/ImmutableCssNode) | The node to insert before |

**Returns:** `CssNodeModifier` for method chaining

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

**Example:**

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

***

#### insertRuleAfter()

Inserts a CSS rule after a specified node.

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

| Parameter | Type | Description |
|-----------|------|-------------|
| `css` | `string` | The CSS rule string to insert |
| `afterNode` | [`ImmutableCssNode`](/extensions/reference/nodes/ImmutableCssNode) | The node to insert after |

**Returns:** `CssNodeModifier` for method chaining

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

**Example:**

```typescript
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.

```typescript
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:**

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

***

#### prependRule()

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

```typescript
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:**

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

***

#### removeRule()

Removes the current CSS rule or media node.

```typescript
removeRule(): CssNodeModifier
```

**Returns:** `CssNodeModifier` for method chaining

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

**Example:**

```typescript
modifier.modifyCss(outdatedRule)
    .removeRule();
```

***

### Property Methods

#### setProperty()

Sets or updates a CSS property in the current rule.

```typescript
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:**

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

***

#### removeProperty()

Removes a CSS property from the current rule.

```typescript
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:**

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