---
url: https://plugin.stripo.email/extensions/reference/nodes/BaseImmutableCssNode.md
---
# BaseImmutableCssNode

Base interface for CSS-specific node operations.

```typescript
interface BaseImmutableCssNode extends BaseImmutableNode<ImmutableCssNode>
```

## Description

`BaseImmutableCssNode` extends the base immutable node interface with CSS-specific type casting methods and properties. It provides the foundation for all CSS nodes (rules, attributes, comments, and documents) and enables safe type conversion between different CSS node types.

## Import

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

## Inheritance

Extends: [`BaseImmutableNode<ImmutableCssNode>`](./BaseImmutableNode.md)

## Methods

### isCommented()

Checks if the CSS node is commented out.

```typescript
isCommented(): boolean
```

**Returns:** `boolean` - True if the node is commented, false otherwise

**Throws:** `Error` if the node cannot be found

**Description:** Determines if the current CSS node has been commented out. This is useful for identifying disabled styles or temporarily excluded rules.

**Example:**

```typescript
if (cssNode.isCommented()) {
    console.log('This CSS node is commented out');
}
```

***

### asDocument()

Casts the current node to an `ImmutableCssDocumentNode`.

```typescript
asDocument(): ImmutableCssDocumentNode
```

**Returns:** [`ImmutableCssDocumentNode`](./ImmutableCssDocumentNode.md) - The current node as a document node

**Description:** Type casts the node as a CSS document node. Use this for root stylesheets or media query blocks.

**Example:**

```typescript
if (node.getType() === 'document' || node.getType() === 'media') {
    const doc = node.asDocument();
    // Process document or media query
}
```

***

### asRule()

Casts the current node to an `ImmutableCssRuleNode`.

```typescript
asRule(): ImmutableCssRuleNode
```

**Returns:** [`ImmutableCssRuleNode`](./ImmutableCssRuleNode.md) - The current node as a rule node

**Description:** Type casts the node as a CSS rule node. Use this when working with CSS rules that have selectors.

**Example:**

```typescript
if (node.getType() === 'rule') {
    const rule = node.asRule();
    const selector = rule.getSelector();
}
```

***

### asAttribute()

Casts the current node to an `ImmutableCssAttributeNode`.

```typescript
asAttribute(): ImmutableCssAttributeNode
```

**Returns:** [`ImmutableCssAttributeNode`](./ImmutableCssAttributeNode.md) - The current node as an attribute node

**Description:** Type casts the node as a CSS attribute (property) node. Use this for accessing CSS property names and values.

**Example:**

```typescript
if (node.getType() === 'attr') {
    const attr = node.asAttribute();
    const name = attr.getAttributeName();
    const value = attr.getAttributeValue();
}
```

***

### asComment()

Casts the current node to an `ImmutableCssCommentNode`.

```typescript
asComment(): ImmutableCssCommentNode
```

**Returns:** [`ImmutableCssCommentNode`](./ImmutableCssCommentNode.md) - The current node as a comment node

**Description:** Type casts the node as a CSS comment node. Use this for accessing comment text content.

**Example:**

```typescript
if (node.getType() === 'comment') {
    const comment = node.asComment();
    const text = comment.getTextContent();
}
```

## Type Casting Pattern

### Safe Type Casting

Always check the node type before casting:

```typescript
function processCssNode(node: BaseImmutableCssNode) {
    const nodeType = node.getType();
    
    switch(nodeType) {
        case 'rule':
            const rule = node.asRule();
            console.log(`Rule: ${rule.getSelector()}`);
            break;
            
        case 'attr':
            const attr = node.asAttribute();
            console.log(`Property: ${attr.getAttributeName()}: ${attr.getAttributeValue()}`);
            break;
            
        case 'comment':
            const comment = node.asComment();
            console.log(`Comment: ${comment.getTextContent()}`);
            break;
            
        case 'document':
        case 'media':
            const doc = node.asDocument();
            console.log('Document or media query node');
            break;
            
        default:
            console.log(`Unknown CSS node type: ${nodeType}`);
    }
}
```