@projectwallace/css-parser 0.11.3 → 0.12.0

package/README.md

@@ -7,7 +7,7 @@
 
 Built for speed and efficiency, this parser handles large CSS files with minimal memory overhead and blazing-fast parse times. Designed with a data-oriented architecture using a single contiguous memory arena for zero allocations during parsing.
 
-This parser was heavily influenced by [CSSTree](https://github.com/csstree/csstree), one of the most robust CSS parsers available. Some of the parsing mechanics are taken from CSSTree, as well as some of the performance mechanics, but a lot of things are very different which is why this isn't a direct fork.
+This parser was heavily influenced by [CSSTree](https://github.com/csstree/csstree), one of the most robust CSS parsers available. Some of the parsing mechanics are taken from CSSTree, as well as some of the performance mechanics, but a lot of things are very different which is why this isn't a direct fork and there is very little overlap in API's.
 
 ## Features
 
@@ -15,6 +15,7 @@ This parser was heavily influenced by [CSSTree](https://github.com/csstree/csstr
 - **Error recovery** - Continues parsing on malformed CSS
 - **Location tracking** - Line, column, offset, and length for all nodes
 - **Performance** - Low memory usage and excellent parsing speed
+- **Small bundle size** - Fast download and installation in any environment
 
 ## Installation
 

package/dist/css-node.js

@@ -1,6 +1,6 @@
 import { DECLARATION, DIMENSION, NUMBER, URL, STRING, AT_RULE, AT_RULE_PRELUDE, STYLE_RULE, ATTRIBUTE_SELECTOR, FLAG_IMPORTANT, FLAG_BROWSERHACK, IDENTIFIER, FUNCTION, PSEUDO_ELEMENT_SELECTOR, PSEUDO_CLASS_SELECTOR, FLAG_HAS_ERROR, FLAG_HAS_BLOCK, FLAG_HAS_DECLARATIONS, BLOCK, COMMENT, FLAG_HAS_PARENS, NTH_SELECTOR, NTH_OF_SELECTOR, SELECTOR_LIST, FEATURE_RANGE, PRELUDE_OPERATOR, LAYER_NAME, SUPPORTS_QUERY, CONTAINER_QUERY, MEDIA_TYPE, MEDIA_FEATURE, MEDIA_QUERY, LANG_SELECTOR, NESTING_SELECTOR, UNIVERSAL_SELECTOR, COMBINATOR, ID_SELECTOR, CLASS_SELECTOR, TYPE_SELECTOR, VALUE, PARENTHESIS, OPERATOR, HASH, SELECTOR, STYLESHEET } from './arena.js';
 import { str_starts_with, is_vendor_prefixed, is_whitespace, CHAR_MINUS_HYPHEN, CHAR_PLUS } from './string-utils.js';
-import { parse_dimension } from './parse-utils.js';
+import { parse_dimension } from './parse-dimension.js';
 
 const TYPE_NAMES = {
   [STYLESHEET]: "StyleSheet",

package/dist/index.d.ts

@@ -3,12 +3,13 @@ export { parse_selector } from './parse-selector';
 export { parse_atrule_prelude } from './parse-atrule-prelude';
 export { parse_declaration } from './parse-declaration';
 export { parse_value } from './parse-value';
+export { parse_dimension } from './parse-dimension';
 export { tokenize } from './tokenize';
 export { walk, traverse, SKIP, BREAK } from './walk';
 export { is_custom, is_vendor_prefixed, str_equals, str_starts_with, str_index_of } from './string-utils';
 export { type ParserOptions } from './parse';
 export { CSSNode, type CSSNodeType, TYPE_NAMES, type CloneOptions, type PlainCSSNode } from './css-node';
-export type { LexerPosition } from './tokenize';
+export type { LexerPosition, CommentInfo } from './tokenize';
 export { ATTR_OPERATOR_NONE, ATTR_OPERATOR_EQUAL, ATTR_OPERATOR_TILDE_EQUAL, ATTR_OPERATOR_PIPE_EQUAL, ATTR_OPERATOR_CARET_EQUAL, ATTR_OPERATOR_DOLLAR_EQUAL, ATTR_OPERATOR_STAR_EQUAL, ATTR_FLAG_NONE, ATTR_FLAG_CASE_INSENSITIVE, ATTR_FLAG_CASE_SENSITIVE, } from './arena';
 export * from './constants';
 export * from './token-types';

package/dist/index.js

@@ -3,6 +3,7 @@ export { parse_selector } from './parse-selector.js';
 export { parse_atrule_prelude } from './parse-atrule-prelude.js';
 export { parse_declaration } from './parse-declaration.js';
 export { parse_value } from './parse-value.js';
+export { parse_dimension } from './parse-dimension.js';
 export { tokenize } from './tokenize.js';
 export { BREAK, SKIP, traverse, walk } from './walk.js';
 export { is_custom, is_vendor_prefixed, str_equals, str_index_of, str_starts_with } from './string-utils.js';

package/dist/parse-anplusb.js

@@ -13,7 +13,7 @@ class ANplusBParser {
   constructor(arena, source) {
     this.arena = arena;
     this.source = source;
-    this.lexer = new Lexer(source, true);
+    this.lexer = new Lexer(source);
     this.expr_end = 0;
   }
   /**

package/dist/parse-atrule-prelude.js

@@ -13,7 +13,7 @@ class AtRulePreludeParser {
   constructor(arena, source) {
     this.arena = arena;
     this.source = source;
-    this.lexer = new Lexer(source, false);
+    this.lexer = new Lexer(source);
     this.prelude_end = 0;
   }
   // Parse an at-rule prelude into nodes (standalone use)

package/dist/parse-declaration.js

@@ -17,7 +17,7 @@ class DeclarationParser {
   }
   // Parse a declaration range into a declaration node (standalone use)
   parse_declaration(start, end, line = 1, column = 1) {
-    const lexer = new Lexer(this.source, false);
+    const lexer = new Lexer(this.source);
     lexer.pos = start;
     lexer.line = line;
     lexer.column = column;

package/dist/parse-dimension.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Parse a dimension string into numeric value and unit
+ *
+ * @param text - Dimension text like "100px", "50%", "1.5em"
+ * @returns Object with value (number) and unit (string)
+ *
+ * Examples:
+ * - "100px" → { value: 100, unit: "px" }
+ * - "50%" → { value: 50, unit: "%" }
+ * - "1.5em" → { value: 1.5, unit: "em" }
+ * - "-10rem" → { value: -10, unit: "rem" }
+ */
+export declare function parse_dimension(text: string): {
+    value: number;
+    unit: string;
+};

package/dist/parse-dimension.js

@@ -0,0 +1,36 @@
+import { is_digit, CHAR_PERIOD, CHAR_MINUS_HYPHEN, CHAR_PLUS } from './string-utils.js';
+
+function parse_dimension(text) {
+  let num_end = 0;
+  for (let i = 0; i < text.length; i++) {
+    let ch = text.charCodeAt(i);
+    if (ch === 101 || ch === 69) {
+      if (i + 1 < text.length) {
+        let next_ch = text.charCodeAt(i + 1);
+        if (is_digit(next_ch)) {
+          num_end = i + 1;
+          continue;
+        }
+        if ((next_ch === 43 || next_ch === 45) && i + 2 < text.length) {
+          let afterSign = text.charCodeAt(i + 2);
+          if (is_digit(afterSign)) {
+            num_end = i + 1;
+            continue;
+          }
+        }
+      }
+      break;
+    }
+    if (is_digit(ch) || ch === CHAR_PERIOD || ch === CHAR_MINUS_HYPHEN || ch === CHAR_PLUS) {
+      num_end = i + 1;
+    } else {
+      break;
+    }
+  }
+  let num_str = text.substring(0, num_end);
+  let unit = text.substring(num_end);
+  let value = num_str ? parseFloat(num_str) : 0;
+  return { value, unit };
+}
+
+export { parse_dimension };

package/dist/parse-selector.js

@@ -1,8 +1,8 @@
 import { Lexer } from './tokenize.js';
 import { CSSDataArena, SELECTOR_LIST, SELECTOR, COMBINATOR, NESTING_SELECTOR, ID_SELECTOR, TYPE_SELECTOR, UNIVERSAL_SELECTOR, CLASS_SELECTOR, ATTRIBUTE_SELECTOR, ATTR_OPERATOR_NONE, ATTR_FLAG_NONE, ATTR_OPERATOR_EQUAL, ATTR_OPERATOR_TILDE_EQUAL, ATTR_OPERATOR_PIPE_EQUAL, ATTR_OPERATOR_CARET_EQUAL, ATTR_OPERATOR_DOLLAR_EQUAL, ATTR_OPERATOR_STAR_EQUAL, ATTR_FLAG_CASE_INSENSITIVE, ATTR_FLAG_CASE_SENSITIVE, PSEUDO_ELEMENT_SELECTOR, PSEUDO_CLASS_SELECTOR, FLAG_HAS_PARENS, LANG_SELECTOR, NTH_OF_SELECTOR } from './arena.js';
-import { TOKEN_COMMENT, TOKEN_COMMA, TOKEN_DELIM, TOKEN_EOF, TOKEN_WHITESPACE, TOKEN_FUNCTION, TOKEN_COLON, TOKEN_LEFT_BRACKET, TOKEN_HASH, TOKEN_IDENT, TOKEN_RIGHT_BRACKET, TOKEN_LEFT_PAREN, TOKEN_RIGHT_PAREN, TOKEN_STRING } from './token-types.js';
+import { TOKEN_COMMA, TOKEN_DELIM, TOKEN_EOF, TOKEN_WHITESPACE, TOKEN_FUNCTION, TOKEN_COLON, TOKEN_LEFT_BRACKET, TOKEN_HASH, TOKEN_IDENT, TOKEN_RIGHT_BRACKET, TOKEN_LEFT_PAREN, TOKEN_RIGHT_PAREN, TOKEN_STRING } from './token-types.js';
 import { skip_whitespace_and_comments_forward, skip_whitespace_and_comments_backward, skip_whitespace_forward } from './parse-utils.js';
-import { CHAR_GREATER_THAN, CHAR_PLUS, CHAR_TILDE, CHAR_PERIOD, CHAR_ASTERISK, CHAR_AMPERSAND, CHAR_PIPE, CHAR_SPACE, CHAR_TAB, CHAR_NEWLINE, CHAR_CARRIAGE_RETURN, CHAR_FORM_FEED, is_combinator, is_whitespace, CHAR_EQUALS, CHAR_CARET, CHAR_DOLLAR, CHAR_SINGLE_QUOTE, CHAR_DOUBLE_QUOTE, CHAR_COLON, str_equals } from './string-utils.js';
+import { CHAR_GREATER_THAN, CHAR_PLUS, CHAR_TILDE, CHAR_PERIOD, CHAR_ASTERISK, CHAR_AMPERSAND, CHAR_PIPE, CHAR_SPACE, CHAR_TAB, CHAR_NEWLINE, CHAR_CARRIAGE_RETURN, CHAR_FORM_FEED, is_combinator, is_whitespace, CHAR_EQUALS, CHAR_CARET, CHAR_DOLLAR, CHAR_SINGLE_QUOTE, CHAR_DOUBLE_QUOTE, CHAR_COLON, str_equals, CHAR_FORWARD_SLASH } from './string-utils.js';
 import { ANplusBParser } from './parse-anplusb.js';
 import { CSSNode } from './css-node.js';
 
@@ -14,7 +14,7 @@ class SelectorParser {
   constructor(arena, source) {
     this.arena = arena;
     this.source = source;
-    this.lexer = new Lexer(source, false);
+    this.lexer = new Lexer(source);
     this.selector_end = 0;
   }
   // Parse a selector range into selector nodes (standalone use)
@@ -52,29 +52,10 @@ class SelectorParser {
       }
       this.skip_whitespace();
       if (this.lexer.pos >= this.selector_end) break;
-      let token_type = TOKEN_EOF;
-      while (this.lexer.pos < this.selector_end) {
-        this.lexer.next_token_fast(false);
-        token_type = this.lexer.token_type;
-        if (token_type === TOKEN_COMMENT) {
-          this.skip_whitespace();
-        } else {
-          break;
-        }
-      }
+      this.lexer.next_token_fast(false);
+      let token_type = this.lexer.token_type;
       if (token_type === TOKEN_COMMA) {
         this.skip_whitespace();
-        while (this.lexer.pos < this.selector_end) {
-          const saved = this.lexer.save_position();
-          this.lexer.next_token_fast(false);
-          token_type = this.lexer.token_type;
-          if (token_type === TOKEN_COMMENT) {
-            this.skip_whitespace();
-          } else {
-            this.lexer.restore_position(saved);
-            break;
-          }
-        }
         continue;
       } else {
         break;
@@ -610,10 +591,26 @@ class SelectorParser {
     this.arena.set_content_length(node, end - start);
     return node;
   }
-  // Helper to skip whitespace and update line/column
+  // Helper to skip whitespace and comments, updating line/column
   skip_whitespace() {
-    while (this.lexer.pos < this.selector_end && is_whitespace(this.source.charCodeAt(this.lexer.pos))) {
-      this.lexer.advance();
+    while (this.lexer.pos < this.selector_end) {
+      let ch = this.source.charCodeAt(this.lexer.pos);
+      if (is_whitespace(ch)) {
+        this.lexer.advance();
+        continue;
+      }
+      if (ch === CHAR_FORWARD_SLASH && this.lexer.pos + 1 < this.selector_end && this.source.charCodeAt(this.lexer.pos + 1) === CHAR_ASTERISK) {
+        this.lexer.advance(2);
+        while (this.lexer.pos < this.selector_end) {
+          if (this.source.charCodeAt(this.lexer.pos) === CHAR_ASTERISK && this.lexer.pos + 1 < this.selector_end && this.source.charCodeAt(this.lexer.pos + 1) === CHAR_FORWARD_SLASH) {
+            this.lexer.advance(2);
+            break;
+          }
+          this.lexer.advance();
+        }
+        continue;
+      }
+      break;
     }
   }
 }

package/dist/parse-utils.d.ts

@@ -1,16 +1 @@
-/**
- * Parse a dimension string into numeric value and unit
- *
- * @param text - Dimension text like "100px", "50%", "1.5em"
- * @returns Object with value (number) and unit (string)
- *
- * Examples:
- * - "100px" → { value: 100, unit: "px" }
- * - "50%" → { value: 50, unit: "%" }
- * - "1.5em" → { value: 1.5, unit: "em" }
- * - "-10rem" → { value: -10, unit: "rem" }
- */
-export declare function parse_dimension(text: string): {
-    value: number;
-    unit: string;
-};
+export {};

package/dist/parse-utils.js

@@ -1,37 +1,5 @@
-import { is_digit, CHAR_PERIOD, CHAR_MINUS_HYPHEN, CHAR_PLUS, is_whitespace, CHAR_FORWARD_SLASH, CHAR_ASTERISK } from './string-utils.js';
+import { is_whitespace, CHAR_FORWARD_SLASH, CHAR_ASTERISK } from './string-utils.js';
 
-function parse_dimension(text) {
-  let num_end = 0;
-  for (let i = 0; i < text.length; i++) {
-    let ch = text.charCodeAt(i);
-    if (ch === 101 || ch === 69) {
-      if (i + 1 < text.length) {
-        let next_ch = text.charCodeAt(i + 1);
-        if (is_digit(next_ch)) {
-          num_end = i + 1;
-          continue;
-        }
-        if ((next_ch === 43 || next_ch === 45) && i + 2 < text.length) {
-          let afterSign = text.charCodeAt(i + 2);
-          if (is_digit(afterSign)) {
-            num_end = i + 1;
-            continue;
-          }
-        }
-      }
-      break;
-    }
-    if (is_digit(ch) || ch === CHAR_PERIOD || ch === CHAR_MINUS_HYPHEN || ch === CHAR_PLUS) {
-      num_end = i + 1;
-    } else {
-      break;
-    }
-  }
-  let num_str = text.substring(0, num_end);
-  let unit = text.substring(num_end);
-  let value = num_str ? parseFloat(num_str) : 0;
-  return { value, unit };
-}
 function skip_whitespace_forward(source, pos, end) {
   while (pos < end && is_whitespace(source.charCodeAt(pos))) {
     pos++;
@@ -89,4 +57,4 @@ function trim_boundaries(source, start, end) {
   return [start, end];
 }
 
-export { parse_dimension, skip_whitespace_and_comments_backward, skip_whitespace_and_comments_forward, skip_whitespace_forward, trim_boundaries };
+export { skip_whitespace_and_comments_backward, skip_whitespace_and_comments_forward, skip_whitespace_forward, trim_boundaries };

package/dist/parse-value.js

@@ -12,7 +12,7 @@ class ValueParser {
   constructor(arena, source) {
     this.arena = arena;
     this.source = source;
-    this.lexer = new Lexer(source, false);
+    this.lexer = new Lexer(source);
     this.value_end = 0;
   }
   // Parse a declaration value range into a VALUE wrapper node

package/dist/parse.d.ts

@@ -1,9 +1,10 @@
+import { type CommentInfo } from './tokenize';
 import { CSSNode } from './css-node';
 export interface ParserOptions {
-    skip_comments?: boolean;
     parse_values?: boolean;
     parse_selectors?: boolean;
     parse_atrule_preludes?: boolean;
+    on_comment?: (info: CommentInfo) => void;
 }
 /**
  * Parse CSS and return an AST

package/dist/parse.js

@@ -23,11 +23,10 @@ class Parser {
   constructor(source, options) {
     this.source = source;
     let opts = options || {};
-    let skip_comments = opts.skip_comments ?? true;
     this.parse_values_enabled = opts.parse_values ?? true;
     this.parse_selectors_enabled = opts.parse_selectors ?? true;
     this.parse_atrule_preludes_enabled = opts.parse_atrule_preludes ?? true;
-    this.lexer = new Lexer(source, skip_comments);
+    this.lexer = new Lexer(source, opts.on_comment);
     let capacity = CSSDataArena.capacity_for_source(source.length);
     this.arena = new CSSDataArena(capacity);
     this.selector_parser = this.parse_selectors_enabled ? new SelectorParser(this.arena, source) : null;

package/dist/tokenize.d.ts

@@ -9,10 +9,17 @@ export interface LexerPosition {
     token_line: number;
     token_column: number;
 }
+export interface CommentInfo {
+    start: number;
+    end: number;
+    length: number;
+    line: number;
+    column: number;
+}
 /**
  * Tokenize CSS source code
  * @param source - The CSS source code to tokenize
- * @param skip_comments - Whether to skip comment tokens (default: true)
+ * @param on_comment - Optional callback for comment tokens
  * @yields CSS tokens
  */
-export declare function tokenize(source: string, skip_comments?: boolean): Generator<Token, void, undefined>;
+export declare function tokenize(source: string, on_comment?: (info: CommentInfo) => void): Generator<Token, void, undefined>;

package/dist/tokenize.js

@@ -1,5 +1,5 @@
 import { char_types, CHAR_WHITESPACE, CHAR_NEWLINE, CHAR_DIGIT, is_ident_start, is_newline, is_hex_digit, is_whitespace, is_ident_char } from './char-types.js';
-import { TOKEN_EOF, TOKEN_RIGHT_PAREN, TOKEN_LEFT_PAREN, TOKEN_RIGHT_BRACKET, TOKEN_LEFT_BRACKET, TOKEN_COMMA, TOKEN_SEMICOLON, TOKEN_COLON, TOKEN_RIGHT_BRACE, TOKEN_LEFT_BRACE, TOKEN_CDO, TOKEN_CDC, TOKEN_DELIM, TOKEN_WHITESPACE, TOKEN_COMMENT, TOKEN_STRING, TOKEN_BAD_STRING, TOKEN_PERCENTAGE, TOKEN_DIMENSION, TOKEN_NUMBER, TOKEN_FUNCTION, TOKEN_IDENT, TOKEN_AT_KEYWORD, TOKEN_HASH } from './token-types.js';
+import { TOKEN_EOF, TOKEN_RIGHT_PAREN, TOKEN_LEFT_PAREN, TOKEN_RIGHT_BRACKET, TOKEN_LEFT_BRACKET, TOKEN_COMMA, TOKEN_SEMICOLON, TOKEN_COLON, TOKEN_RIGHT_BRACE, TOKEN_LEFT_BRACE, TOKEN_CDO, TOKEN_CDC, TOKEN_DELIM, TOKEN_WHITESPACE, TOKEN_STRING, TOKEN_BAD_STRING, TOKEN_PERCENTAGE, TOKEN_DIMENSION, TOKEN_NUMBER, TOKEN_FUNCTION, TOKEN_IDENT, TOKEN_AT_KEYWORD, TOKEN_HASH } from './token-types.js';
 
 const CHAR_LEFT_BRACE = 123;
 const CHAR_RIGHT_BRACE = 125;
@@ -33,19 +33,19 @@ class Lexer {
   pos;
   line;
   column;
-  skip_comments;
+  on_comment;
   // Current token properties (avoiding object allocation)
   token_type;
   token_start;
   token_end;
   token_line;
   token_column;
-  constructor(source, skip_comments = false) {
+  constructor(source, on_comment) {
     this.source = source;
     this.pos = 0;
     this.line = 1;
     this.column = 1;
-    this.skip_comments = skip_comments;
+    this.on_comment = on_comment;
     this.token_type = TOKEN_EOF;
     this.token_start = 0;
     this.token_end = 0;
@@ -101,19 +101,29 @@ class Lexer {
       return this.consume_whitespace(start_line, start_column);
     }
     if (ch === CHAR_FORWARD_SLASH && this.peek() === CHAR_ASTERISK) {
-      if (this.skip_comments) {
-        this.advance(2);
-        while (this.pos < this.source.length - 1) {
-          let ch2 = this.source.charCodeAt(this.pos);
-          if (ch2 === CHAR_ASTERISK && this.peek() === CHAR_FORWARD_SLASH) {
-            this.advance(2);
-            break;
-          }
-          this.advance();
+      let comment_start = start;
+      let comment_line = start_line;
+      let comment_column = start_column;
+      this.advance(2);
+      while (this.pos < this.source.length - 1) {
+        let ch2 = this.source.charCodeAt(this.pos);
+        if (ch2 === CHAR_ASTERISK && this.peek() === CHAR_FORWARD_SLASH) {
+          this.advance(2);
+          break;
         }
-        return this.next_token_fast(skip_whitespace);
+        this.advance();
+      }
+      let comment_end = this.pos;
+      if (this.on_comment) {
+        this.on_comment({
+          start: comment_start,
+          end: comment_end,
+          length: comment_end - comment_start,
+          line: comment_line,
+          column: comment_column
+        });
       }
-      return this.consume_comment(start_line, start_column);
+      return this.next_token_fast(skip_whitespace);
     }
     if (ch === CHAR_DOUBLE_QUOTE || ch === CHAR_SINGLE_QUOTE) {
       return this.consume_string(ch, start_line, start_column);
@@ -185,19 +195,6 @@ class Lexer {
     }
     return this.make_token(TOKEN_WHITESPACE, start, this.pos, start_line, start_column);
   }
-  consume_comment(start_line, start_column) {
-    let start = this.pos;
-    this.advance(2);
-    while (this.pos < this.source.length - 1) {
-      let ch = this.source.charCodeAt(this.pos);
-      if (ch === CHAR_ASTERISK && this.peek() === CHAR_FORWARD_SLASH) {
-        this.advance(2);
-        break;
-      }
-      this.advance();
-    }
-    return this.make_token(TOKEN_COMMENT, start, this.pos, start_line, start_column);
-  }
   consume_string(quote, start_line, start_column) {
     let start = this.pos;
     this.advance();
@@ -442,8 +439,8 @@ class Lexer {
     this.token_column = saved.token_column;
   }
 }
-function* tokenize(source, skip_comments = true) {
-  const lexer = new Lexer(source, skip_comments);
+function* tokenize(source, on_comment) {
+  const lexer = new Lexer(source, on_comment);
   while (true) {
     const token = lexer.next_token();
     if (!token || token.type === TOKEN_EOF) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@projectwallace/css-parser",
-	"version": "0.11.3",
+	"version": "0.12.0",
 	"description": "High-performance CSS lexer and parser, optimized for CSS inspection and analysis",
 	"author": "Bart Veneman <bart@projectwallace.com>",
 	"license": "MIT",
@@ -46,6 +46,10 @@
 		"./parse-anplusb": {
 			"types": "./dist/parse-anplusb.d.ts",
 			"import": "./dist/parse-anplusb.js"
+		},
+		"./parse-dimension": {
+			"types": "./dist/parse-dimension.d.ts",
+			"import": "./dist/parse-dimension.js"
 		}
 	},
 	"files": [