or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdmiddleware.mdparser.mdserialization.mdtokenization.mdutilities.md
tile.json

tessl/npm-stylis

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/stylis@4.3.x

To install, run

npx @tessl/cli install tessl/npm-stylis@4.3.0

index.mddocs/

Stylis

Stylis is a lightweight CSS preprocessor that provides essential CSS preprocessing capabilities including CSS nesting, selector namespacing, automatic vendor prefixing, CSS minification, and ES module compatibility. The library operates on an Abstract Syntax Tree (AST) structure offering a compile-serialize-stringify workflow for parsing CSS strings, manipulating them through middleware functions, and outputting processed CSS.

Package Information

  • Package Name: stylis
  • Package Type: npm
  • Language: JavaScript (ES Module)
  • Installation: npm install stylis

Core Imports

import { compile, serialize, stringify } from 'stylis';

For individual module imports:

import { compile, parse } from 'stylis';              // Parser functions
import { serialize, stringify } from 'stylis';        // Serializer functions  
import { middleware, prefixer, namespace } from 'stylis'; // Middleware system
import { tokenize } from 'stylis';                     // Tokenization utilities

Basic Usage

import { compile, serialize, stringify } from 'stylis';

// Basic CSS processing
const css = 'h1 { color: red; &:hover { color: blue; } }';
const processed = serialize(compile(css), stringify);
console.log(processed); // "h1{color:red;}h1:hover{color:blue;}"

// With vendor prefixing
import { middleware, prefixer } from 'stylis';
const prefixed = serialize(
  compile('div { display: flex; }'), 
  middleware([prefixer, stringify])
);
console.log(prefixed); // Includes -webkit-box, -ms-flexbox, etc.

Architecture

Stylis is built around several key components:

  • Parser: Transforms CSS strings into Abstract Syntax Trees (AST) with support for nesting, at-rules, and comments
  • AST Structure: Unified node structure with value, type, props, children, and metadata properties
  • Middleware System: Pluggable transformation pipeline allowing custom CSS processing and built-in utilities
  • Serializer: Converts AST back to CSS strings with customizable output formatting
  • Tokenizer: Low-level parsing utilities for character-by-character CSS analysis
  • Utilities: Helper functions for string manipulation, array operations, and CSS processing

Capabilities

CSS Parsing and Compilation

Transform CSS strings into Abstract Syntax Trees with support for nesting, at-rules, comments, and declarations.

function compile(value: string): object[];
function parse(
  value: string, 
  root: object, 
  parent: object, 
  rule: string[], 
  rules: string[], 
  rulesets: string[], 
  pseudo: number[], 
  points: number[], 
  declarations: string[]
): object;

Parser and Compilation

CSS Serialization and Output

Convert AST nodes back into CSS strings with customizable formatting and processing.

function serialize(children: object[], callback: function): string;
function stringify(element: object, index: number, children: object[], callback: function): string;

Serialization and Stringification

Middleware System

Pluggable transformation pipeline with built-in middleware for vendor prefixing, namespacing, and custom processing.

function middleware(collection: function[]): function;
function prefixer(element: object, index: number, children: object[], callback: function): void;
function namespace(element: object): void;

Middleware System

Tokenization and Low-level Parsing

Character-by-character parsing utilities for custom CSS processing and analysis.

function tokenize(value: string): string[];
function alloc(value: string): any[];
function dealloc(value: any): any;

Tokenization

Utility Functions and Constants

Helper functions for string manipulation, array operations, and CSS processing constants.

// Constants
const COMMENT: string; // 'comm'
const RULESET: string; // 'rule' 
const DECLARATION: string; // 'decl'

// Utility functions
function hash(value: string, length: number): number;
function trim(value: string): string;
function replace(value: string, pattern: string|RegExp, replacement: string): string;

Utilities

AST Node Structure

All AST nodes in Stylis follow a consistent structure:

interface StylisNode {
  value: string;           // Original CSS text
  type: string;            // Node type ('rule', 'decl', 'comm', or at-rule name)
  props: string | string[]; // Parsed properties (selectors for rules, property name for declarations)
  children: object[] | string; // Child nodes or property value
  line: number;            // Source line number
  column: number;          // Source column number
  length: number;          // Character length
  return: string;          // Generated output (used by serializers)
  root: object;            // Parent node in compiled output
  parent: object;          // Parent node in input structure
  siblings: object[];      // Sibling nodes
}

Error Handling

Stylis is designed to be fault-tolerant and will parse most CSS input without throwing errors. Invalid CSS is typically preserved in the AST structure and passed through to the output, allowing downstream tools to handle validation and error reporting.