tessl/npm-stylis

A lightweight CSS preprocessor that provides CSS parsing, AST manipulation, vendor prefixing, and serialization capabilities.

—

Pending

Overview

Eval results

Files

Parser and Compilation

Name: tessl/npm-stylis
Author: tessl

Core CSS parsing functionality that transforms CSS strings into Abstract Syntax Trees (AST) with support for nesting, at-rules, comments, and declarations.

Capabilities

Compile Function

The primary entry point for parsing CSS strings into AST structures. Handles CSS nesting, at-rules, comments, and declarations.

/**
 * Parse CSS string into Abstract Syntax Tree
 * @param value - CSS string to parse
 * @returns Array of AST node objects
 */
function compile(value: string): object[];

Usage Examples:

import { compile } from 'stylis';

// Basic CSS compilation
const ast = compile('h1 { color: red; }');
console.log(ast);
// [{ value: 'h1', type: 'rule', props: ['h1'], children: [...] }]

// Nested CSS compilation  
const nested = compile(`
  .container {
    padding: 20px;
    
    h1 {
      color: blue;
      &:hover {
        color: red;
      }
    }
  }
`);

// At-rule compilation
const media = compile('@media (max-width: 768px) { .mobile { display: block; } }');

// Declaration compilation
const decl = compile('--custom-property: value;');

Parse Function

Low-level parsing function with extensive parameter control for advanced use cases and custom parsing workflows.

/**
 * Low-level parsing function with extensive parameter control
 * @param value - CSS string segment to parse
 * @param root - Root AST node
 * @param parent - Parent AST node  
 * @param rule - Current rule context
 * @param rules - Rule stack
 * @param rulesets - Ruleset collection
 * @param pseudo - Pseudo-selector tracking
 * @param points - Parsing position markers
 * @param declarations - Declaration collection
 * @returns Parsed AST object
 */
function parse(
  value: string, 
  root: object, 
  parent: object, 
  rule: string[], 
  rules: string[], 
  rulesets: string[], 
  pseudo: number[], 
  points: number[], 
  declarations: string[]
): object;

Ruleset Creation

Creates ruleset AST nodes for CSS rules and selectors.

/**
 * Create ruleset AST node for CSS rules and selectors
 * @param value - CSS rule text
 * @param root - Root AST node
 * @param parent - Parent AST node
 * @param index - Current index
 * @param offset - Parsing offset
 * @param rules - Rule context
 * @param points - Position markers
 * @param type - Node type
 * @param props - Properties array
 * @param children - Child nodes
 * @param length - Character length
 * @param siblings - Sibling nodes
 * @returns Ruleset AST node
 */
function ruleset(
  value: string, 
  root: object, 
  parent: object, 
  index: number, 
  offset: number, 
  rules: string[], 
  points: number[], 
  type: string, 
  props: string[], 
  children: string[], 
  length: number, 
  siblings: object[]
): object;

Comment Creation

Creates comment AST nodes for CSS comments.

/**
 * Create comment AST node for CSS comments
 * @param value - Comment content with delimiters
 * @param root - Root AST node
 * @param parent - Parent AST node
 * @param siblings - Sibling nodes
 * @returns Comment AST node
 */
function comment(value: number, root: object, parent: object, siblings: object[]): object;

Declaration Creation

Creates declaration AST nodes for CSS property-value pairs.

/**
 * Create declaration AST node for CSS property-value pairs
 * @param value - Declaration text (property: value;)
 * @param root - Root AST node
 * @param parent - Parent AST node
 * @param length - Property name length
 * @param siblings - Sibling nodes
 * @returns Declaration AST node
 */
function declaration(
  value: string, 
  root: object, 
  parent: object, 
  length: number, 
  siblings: object[]
): object;

AST Node Types

The parser generates different types of AST nodes based on CSS content:

Rule Nodes

interface RuleNode {
  value: string;        // 'h1, h2'
  type: 'rule';        // Always 'rule' for selectors
  props: string[];     // ['h1', 'h2'] - parsed selectors
  children: object[];  // Child declaration and rule nodes
  // ...standard node properties
}

Declaration Nodes

interface DeclarationNode {
  value: string;       // 'color: red;'
  type: 'decl';       // Always 'decl' for properties
  props: string;      // 'color' - property name
  children: string;   // 'red' - property value
  // ...standard node properties
}

Comment Nodes

interface CommentNode {
  value: string;       // '/* comment text */'
  type: 'comm';       // Always 'comm' for comments
  props: string;      // '/' - comment delimiter
  children: string;   // 'comment text' - comment content
  // ...standard node properties
}

At-Rule Nodes

interface AtRuleNode {
  value: string;       // '@media (max-width: 768px)'
  type: string;       // '@media', '@keyframes', etc.
  props: string[];    // ['(max-width: 768px)'] - parsed conditions
  children: object[]; // Child nodes within at-rule
  // ...standard node properties
}

Parsing Features

CSS Nesting Support

The parser handles CSS nesting with & parent selector references:

compile(`
  .parent {
    color: blue;
    &:hover { color: red; }
    & .child { font-size: 14px; }
  }
`);

At-Rule Processing

Full support for CSS at-rules including media queries, keyframes, imports, and more:

compile(`
  @import url('styles.css');
  @media (min-width: 768px) {
    .desktop { display: block; }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
`);

Comment Preservation

CSS comments are preserved in the AST and can be processed by middleware:

compile(`
  /* Main styles */
  .component {
    /* TODO: add responsive styles */
    padding: 20px;
  }
`);

Install with Tessl CLI

npx tessl i tessl/npm-stylis

docs