BaseImmutableCssNode

Base interface for CSS-specific node operations.

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

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

Inheritance

Extends: BaseImmutableNode<ImmutableCssNode>

Methods

isCommented()

Checks if the CSS node is commented out.

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:

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

---

asDocument()

Casts the current node to an ImmutableCssDocumentNode.

asDocument(): ImmutableCssDocumentNode

Returns: ImmutableCssDocumentNode - 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:

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

---

asRule()

Casts the current node to an ImmutableCssRuleNode.

asRule(): ImmutableCssRuleNode

Returns: ImmutableCssRuleNode - 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:

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

---

asAttribute()

Casts the current node to an ImmutableCssAttributeNode.

asAttribute(): ImmutableCssAttributeNode

Returns: ImmutableCssAttributeNode - 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:

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

---

asComment()

Casts the current node to an ImmutableCssCommentNode.

asComment(): ImmutableCssCommentNode

Returns: ImmutableCssCommentNode - 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:

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:

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}`);
    }
}